Search code examples
reactjsreact-nativetouchablehighlight

React-Native button not stretched to width of the screen

here is my App.tsx I want my Press Me button to be stretched 80% of the width Tried all but it doesn't make any changes

[ recently started learning react-native, any other suggestions will also be helpful ]

import React from 'react';
import { View, StyleSheet, SafeAreaView, ScrollView, Dimensions } from 'react-native';
import CustomText from './components/fontstyles/text';
import CustomTouchableButton from './components/uielem/button';

const App = () => {
  const screenWidth = Dimensions.get('window').width;

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollViewContent}>
        <View style={styles.innerContainer}>
          <CustomText style={[styles.titleText, { fontSize: screenWidth * 0.1 }]}>
            Fruityvice
          </CustomText>
          <CustomText style={[styles.subtitleText, { fontSize: screenWidth * 0.05 }]}>
            Your encyclopedia of fruit
          </CustomText>
          <View style={styles.buttonContainer}>
            <CustomTouchableButton
              title="Press Me"
              style={{ backgroundColor: 'red' }}
              width="80%"
              onPress={() => console.log('Button pressed!')}
            />
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollViewContent: {
    flexGrow: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  innerContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  titleText: {
    fontWeight: 'bold',
    marginTop: 50,
  },
  subtitleText: {
    fontWeight: 'normal',
    marginBottom: 20,
  },
  buttonContainer: {
    width: '80%',
    paddingHorizontal: 20,
    marginTop: 20,
  },
});

export default App;

importing component button.js

import React from 'react';
import { TouchableHighlight, Text, StyleSheet, Dimensions } from 'react-native';

const screenWidth = Dimensions.get('window').width;

const CustomTouchableButton = ({ onPress, title, style, width }) => {
    return (
        <TouchableHighlight
            style={[{ padding: 10, borderRadius: 5, alignItems: 'center', justifyContent: 'center' }, style, { width: width || '80%' }]}
            onPress={onPress}
            underlayColor="darkred"
        >
            <Text style={styles.buttonText}>{title}</Text>
        </TouchableHighlight>
    );
};

const styles = StyleSheet.create({
    buttonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default CustomTouchableButton;

got this (https://i.sstatic.net/aG6VW.png)

want this (https://i.sstatic.net/TCwVj.png)

Solution

  • Try flex: 0.8 instead of width

    Example:

     <Box flexDirection={'row'} paddingBottom={3} w={'100%'}>
    <Button
       style={{flex: 0.8}}
       text={'My Button'}
       textColor={'white'}
       backgroundColor={colors.buttonColor}
       onPress={handleContinue}
    />
 </Box>

    Even to be more clear this is how it should look like

       <View
      style={{
        flexDirection: 'row',
        width: '100%',
        justifyContent: 'center',
      }}>
      <TouchableHighlight style={{flex: 0.8,backgroundColor:'orange',alignItems:'center',justifyContent:'center',borderRadius:12,marginVertical:12,padding:4}}>
        <Text style={{color:'white'}}>Button</Text>
      </TouchableHighlight>
    </View>

    Example