如何在本机反应中垂直和水平对齐模态

Question

I am trying to write a signup form and its loading screen modal.

For some reason the modal is not vertically and horizontally align

<View style={{flex: 1,flexDirection: 'column',alignItems: 'center'}}>

      <View>
         <Text>Something</Text>
         <Text>Something</Text>
         <Text>Something</Text>
         <Text>Something</Text> 
         <Text>Something</Text>

        <TouchableOpacity style={styles.button} onPress={() => alert('hello')}>
          <Text style={styles.button_text}>CREATE YOUR NEW ACCOUNT</Text>
        </TouchableOpacity>
      </View>

      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
            setModalVisible(!modalVisible);
          }}>
          <View
            style={{width: 300, height: 300, backgroundColor: 'red'}}></View>
        </Modal>
      </View>
    </View>

Can someone help please, here is how current situation is, I want the modal to horizontally and vertically align in the screen

Answer 1

Try this

    <Modal
      animationType="slide"
      transparent={true}
      visible={modalVisible}
      onRequestClose={() => {
        Alert.alert('Modal has been closed.');
        setModalVisible(!modalVisible);
      }}>
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
         <View style={{width: 300, height: 300, backgroundColor: 'red'}}>
            ...other components you need
         </View>
      </View>
    </Modal>