Set width and height to React-native modal - react-native

Question

I can't configure modal height and width using style property. Is there any other way to set modal height and width?
<Modal style={{height: 300, width: 300}}
visible={this.state.isVisible}
onRequestClose={this.closeModal}>
</Modal>
The code above doesn't work.

Answer 1

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>

Answer 2

Try adding margin:0 in the style of the <Modal> Component

Answer 3

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
},
});

Answer 4

Only thing that solved it was passing transparent={true} in the Modal props

Answer 5

The following worked for me after i have tried other methods, I had to give the modal some style.
<Modal isVisible={this.state.isModalAddCompanionVisible} >
<Button
block
style={{ marginTop: 20}}>
<Text style={{ color: "white" }} >Add Another Companion</Text>
</Button>
<View style={{backgroundColor: "white", height: 120}}>
</View>
<View style={{flexDirection: 'row'}}>
<Button
block
style={{ marginTop: 0,width: '40%'}} onPress={this._toggleModalAddCompanion.bind(this)} >
<Text style={{ color: "white" }} >Cancel</Text>
</Button>
<Button
block
style={{ marginTop: 0,width: '60%',}} >
<Text style={{ color: "white" }} >Add</Text>
</Button>
</View>
</Modal>