How to show React Native Modal in center of screen as small window

Question

I want to show my react native modal in the middle of screen even I have done styling but the window appers at the top of my screen but not in the center of screen. This is what I have tried so far:

 <Modal animationType = {"slide"} transparent = {true}
        style={styles.modal}
               visible = {this.state.modalVisible}
               onRequestClose = {this.closeModal}>

               <View style={{justifyContent: 'center', backgroundColor: '#ffff', margin: 0, 
          alignItems: 'center'}}>
                  <Text >Enter Email</Text>
                  <TextInput
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
              <Text>Enter Password</Text>
              <TextInput 
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
                  <TouchableHighlight onPress = {() => {
                     this.toggleModal(!this.state.modalVisible)}}>
                     <Text >Close</Text>
                  </TouchableHighlight>
               </View>
            </Modal>

This is the modal styling:

const styles = StyleSheet.create({
      modal:{
          position:"relative",
        width: 250, 
        height: 100,
        backgroundColor: '#FFF',
        justifyContent: 'center',
        alignSelf: 'center',
      }
});

Please mark the question as solved if it has helped you. :) – Afraz Hussain Mar 07 '20 at 14:07 — Afraz Hussain, Mar 07 '20 at 14:07

Afraz Hussain · Answer 1 · 2020-03-07T14:09:19.833

There is no style prop in a ReactNative native Modal (refer to the docs at this link, more on this later in the answer).

To properly style your Modal, you would need to create a View with a style of flex: 1 as a parent of all of your child elements. For example you would do something as follows:

<Modal
  animationType={"slide"}
  transparent={true}
  visible={this.state.modalVisible}
  onRequestClose={this.closeModal}
>
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> // modalContainerStyle
    <View style={styles.childStyle}>
       {...}
    </View>
  </View>
</Modal>

where childStyle would be the style of the first element in the modal from your example.

You can also add a backgroundColor of rgba(0,0,0,0.5) to the modalContainerStyle in the code above to give it a proper modal look.

Going back to the style prop, it is only offered in the community managed wrapper of the RN Modal called react-native-modal. You can read more about it here: https://github.com/react-native-community/react-native-modal

How to show React Native Modal in center of screen as small window

1 Answers1