I've been trying to create a modal with two vertical buttons which take 50% of the width of the rectangle each. I tried the following code but it seems to give me an unwanted results, that the box is squeezed down to the size of the text instead of stretching.
<Modal
animationType="slide"
isVisible={this.state.isModalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={{flex:1, justifyContent: 'center'}}>
<View style={{height: 400, backgroundColor: '#fff', padding: 20}}>
<Text>Want to call ?</Text>
<View style={{flex:1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', borderWidth: 1}}>
<TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
<View style={{flex:1 ,height: 40,backgroundColor: '#822A80'}}>
<Text>Cancel</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
<View style={{flex:1 , height: 40, backgroundColor: '#50AFAD'}}>
<Text>Yes!</Text>
</View>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
First of all define width and height and use flexdirection like example:
render() {
return (
// Try setting `flexDirection` to `column`.
<View style={{flex: 1, flexDirection: 'row'}}>
<TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({isModalVisible: false})}>
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
</TouchableOpacity>
</View>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.