title: React Native: Why doesn't <TextInput/> center with flexbox?
body: <p>In React Native, I have a <code>&lt;TextInput/&gt;</code> but with flexbox style set to center it, yet it still does not and rather just sits to the left but only vertically centered. I tested it out with simple <code>&lt;Text/&gt;</code> and it centers correctly. </p>
  
  <p>How can I center <code>&lt;TextInput/&gt;</code> with flexbox? </p>
  
  <p>Here is the code:</p>
  
  <pre><code>  render() {
  
      return (
        &lt;View style={{alignItems: 'center', justifyContent: 'center', flex: 1, }}&gt;
          &lt;TextInput
            style={{fontWeight: 'bold', height: 18, color: 'red'}}
            placeholderStyle={{fontWeight: 'bold'}}
            placeholderTextColor='red'
            placeholder='Center Me'
          /&gt;
        &lt;/View&gt;
      )
    }
  }
  </code></pre>
  
  <p>Thank you in advance!</p>
  
  <p><strong>EDIT - with additional styles added</strong></p>
  
  <pre><code>  &lt;View style=style={{alignItems: 'center', justifyContent: 'center', flex: 1,}}&gt;
      &lt;TextInput
        onChangeText={this._handleName}
        value={this.props.name}
        placeholderTextColor='white'
        placeholder='Put in name'
        style={{
            backgroundColor: 'black',
            borderWidth: 0,
            borderRadius: 15,
            width: 250,
            height: 70,
            fontFamily: 'Roboto',
            fontSize: 20,
            textAlign: 'center',
        }}
      /&gt;
    &lt;/View&gt;
  </code></pre>