Set width and height to React-native modal

React NativeModal Dialog

React Native Problem Overview


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.

React Native Solutions


Solution 1 - React Native

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>

Solution 2 - React Native

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

Solution 3 - React Native

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

Solution 4 - React Native

The following worked for me after i have tried other methods

<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>

Solution 5 - React Native

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTK-95View Question on Stackoverflow
Solution 1 - React Nativemax23_View Answer on Stackoverflow
Solution 2 - React NativeSathish SwaminathanView Answer on Stackoverflow
Solution 3 - React NativeDibakar HalderView Answer on Stackoverflow
Solution 4 - React NativeObyno PacView Answer on Stackoverflow
Solution 5 - React NativespiergView Answer on Stackoverflow