How to change color in Input from react native elements

Question

I have an Input from react native elements which looks like this

<Input
    placeholderTextColor={constants.inputPlaceholderFontColor}
    inputContainerStyle={{marginTop: 30, borderBottomColor: constants.dimmedFontColor}}
    placeholder='Spieleranzahl'
    keyboardType='numeric'
    leftIconContainerStyle={{marginRight: 10, marginBottom: 8}}
    leftIcon={
        <Icon
           name='user'
           size={ 24 }
           color= {constants.iconColor}/>
    }
    onChangeText={input => this.setState({numberOfPlayers: input})}

I tried to set the color by

• style={{color: 'white'}}
• inputStyle={{color: 'white'}}
• inputContainerStyle={{color: 'white'}}

The documentation says: "This component inherits all native TextInput props that come with a standard React Native TextInput element, along with the following..." so I dont understand why the style property doesn't work because it works with the standard TextInput component.

Also, the documentation says about inputStyle: "style that will be passed to the style props of the React Native TextInput" so that should also work because this is the way to set color on the standard Text component.

Am I missing something?

Answer 1

I've created an example on snack.expo and inputStyle works perfectly on both iOS and Android. Most probably there is another issue, that's why I would recommend to reimplement my simple example and see if it works.

Update: Maybe only your placeholdertext is shown. I can't see the place in your code, where you pass the value prop to your input.

Demo:

https://snack.expo.io/Yunjp2ozw

Output:

Code:

export default function App() {
  const [text, setText] = React.useState('Test');
  return (
    <View style={styles.container}>
      <Input 
      value={text}
      onChangeText={(text) => setText(text)}
      inputStyle={{'color': 'red'}}
      />
    </View>
  );
}