title: How to make a modal component the center of the screen?
body: <p>I have a modal Component that I am trying to put in the center of the screen.</p>
  
  <p>In my view tag with <code>style={styles.containerStyle}</code> the way it currently is written the modal is vertically in the middle but horizontally to the left. If I add <code>flexDirection: 'row'</code> to the <code>containerStyle</code> it moves it to the middle horizontally but to the top vertically.</p>
  
  <p>This is my modal component:</p>
  
  <pre><code>class ItemInformationModal extends Component {
    onNotesChange(text) {
      this.props.notesChanged(text);
    }
  
    render() {
      return (
        &lt;Modal
          transparent
          animationType='fade'
          visible={this.props.itemModalVisible}
        &gt;
          &lt;View style={styles.containerStyle}&gt;
            &lt;View style={styles.modalContainer}&gt;
              &lt;View style={{ flexDirection: 'row', justifyContent: 'space-between' }}&gt;
                &lt;View style={{ flexDirection: 'column', flex: 1 }}&gt;
                  &lt;Text style={styles.itemTitle}&gt;{this.props.currItem.text}&lt;/Text&gt;
                  &lt;View style={{ padding: 5 }}&gt;
                    &lt;DatePickerIOS /&gt;
                  &lt;/View&gt;
                &lt;/View&gt;
                &lt;View style={{ padding: 5 }}&gt;
                  &lt;Feather
                    name="x-square"
                    size={35}
                    color={'#db5461'}
                    onPress={() =&gt; this.props.closeItemModal()}
                  /&gt;
                &lt;/View&gt;
              &lt;/View&gt;
              &lt;View style={{ padding: 5 }}&gt;
                &lt;TextInput
                  placeholder={'Add notes'}
                  value={this.props.currItem.notes}
                  multiline
                  style={styles.notesInput}
                  onChangeText={this.onNotesChange.bind(this)}
                /&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/Modal&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    containerStyle: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    },
    modalContainer: {
      width: '75%',
      borderRadius: 10,
      borderWidth: 1,
      borderColor: '#cdd2c9',
      backgroundColor: '#cdd2c9',
      alignSelf: 'baseline',
    },
    notesInput: {
      height: 130,
      borderWidth: 1,
      borderRadius: 10,
      borderColor: '#28313b',
      padding: 10,
      color: '#28313b'
    },
    itemTitle: {
      fontSize: 20,
      color: '#28313b',
      padding: 10
    }
  });
  </code></pre>