TextInput Alignment Not Centered iOS React-Native

Question

Why does iOS not center the text input control? I am including the render and stylesheet code:

left android, right ios

render() {
  return (

  <View style={styles.container}>
    <TextInput
           style={styles.input}
           onChangeText={(text) => this.setState({text})}
           underlineColorAndroid='rgba(0,0,0,0)'
           value={this.state.text}
           placeholder= 'username'
           />
  </View>
)
}


  const styles = StyleSheet.create({
  container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#13493A'
}

 input: {
   height: 40,
   width: 250,
   borderRadius: 5,
   backgroundColor: '#598176',
   color: 'white',
   marginTop: 30,
   textAlign: 'center'
  }
});

Thank you in advance, Anthonie

Answer 1

Looking on the issue tracker, this appears to be a bug in React Native on iOS: #11892 So your code should work but doesn't. There is a listed workaround which is to add alignSelf: 'center' to the TextInput's styles (see example).