Changing textColor of <TextInput/> in ReactNative

Question

I wish to change the text Color & placeholder textcolor in an android react native app:

render: function() {
return (
  <View>
    <TextInput
      placeholder='Add Credit'
      placeholderTextColor='ffffff'
      textAlign='center'
    />
  </View>
);
},
var styles = StyleSheet.create({


creditInput: {
    backgroundColor: "#3f51b5",
    color: "#ffffff", //Expecting this to change input text color

},

(referencing: https://facebook.github.io/react-native/docs/textinput.html#content)

placeholderTextColor and backgroundColor change as expected, but not the input text color. Am I using the wrong attribute, or is this a react-native/android bug?

Solution 1

I can confirm it works on iOS and does not on Android (at least for React Native 0.14.2).

This issue was submitted a few days ago (see https://github.com/facebook/react-native/issues/3742).
It should be fixed, but only in the latest prerelease version (v0.15.0-rc).

Solution 2

Add your style to your TextInput component and it would work I guess!

 render: function() {
return (
  <View>
    <TextInput
      style={styles.creditInput}
      placeholder='Add Credit'
      placeholderTextColor='ffffff'
      textAlign='center'
    />
  </View>
);
},
var styles = StyleSheet.create({


creditInput: {
    backgroundColor: "#3f51b5",
    color: "#ffffff", //Expecting this to change input text color

},