Set width and height to React-native modal
Try adding margin:0
in the style of the <Modal>
Component
In the Modal documentation it is not mentioned it but it has a style property.
The following works for me.
<Modal
style={styles.modalContent}
isVisible={this.state.isVisible}
onBackdropPress={this.closeModal}
>
<Component {...componentProps} />
</Modal>
const styles = StyleSheet.create({
modalContent: {
justifyContent: 'center',
alignItems: 'center',
margin: 0
},
});
According to the Modal documentation, there is no style
prop to be set.
You can try setting the <View>
dimensions inside the <Modal>
instead:
<Modal transparent={true}
visible={this.state.isVisible}
onRequestClose={this.closeModal}>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'}}>
<View style={{
width: 300,
height: 300}}>
...
</View>
</View>
</Modal>