React Native: How to stretch TouchableOpacity - react-native

Question

I am trying to have two large buttons (TouchableOpacity) be next to each other and take up 50% of the width of the screen.
But they only seem to be as wide as the Text component within them.
How can I make the two TouchableOpacity take up the full width of the screen, with each taking up 50% of the width?
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: 'lightblue',
height: 200,
justifyContent: 'space-around',
},
btn: {
flex: 1,
backgroundColor: 'red',
justifyContent: 'center',
padding: 20,
borderWidth: 1,
},
});
return (
<View style={styles.container}>
<TouchableOpacity style={styles.btn}>
<Text>Left</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.btn}>
<Text>Right</Text>
</TouchableOpacity>
</View>
);

Answer 1

Try to add a width of 50% to your btn class
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: 'lightblue',
height: 200,
justifyContent: 'space-around',
},
btn: {
width: '50%',
backgroundColor: 'red',
padding: 20,
borderWidth: 1,
},
});
You can also use dimensions from react native and put width: windowWidth/2 on your btn class.

Answer 2

A possible solution is to use react native's Dimensions
https://reactnative.dev/docs/dimensions
import { Dimensions } from 'react-native';
const width = Dimensions.get('window').width;
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: 'lightblue',
height: 200,
justifyContent: 'space-around',
},
btn: {
width: width*0.5,
backgroundColor: 'red',
padding: 20,
borderWidth: 1,
},
});