How to change the placeholder color in android app created using React Native

React NativeReact Native-Android

React Native Problem Overview


I'm creating an Android app using React Native in which there's a form. The placeholder doesn't even appear for the textInput fields so I thought of changing the placeholder color but I don't know how to do that. The docs mentioned some way which I don't understand.

Here's the code:

  <TextInput
  secureTextEntry={secureTextEntry}
  style={inputStyle}
  placeholder={placeholder}
  value={value}
  onChangeText={onChangeText}
  />

  inputStyle: {
  color: '#000',
  paddingRight: 5,
  paddingLeft: 5,
  fontSize: 18,
  lineHeight: 23,
  flex: 2,
  }

I also tried:

  <TextInput
  placeholderTextColor="blue"
  style={inputStyle}
  placeholder={placeholder}
  value={value}
  onChangeText={onChangeText}
  />

and

  inputStyle: {
  color: '#000',
  paddingRight: 5,
  paddingLeft: 5,
  fontSize: 18,
  lineHeight: 23,
  flex: 2,
  placeholderTextColor: '#333'
  }

React Native Solutions


Solution 1 - React Native

Like so:

<TextInput
   placeholder="something"
   placeholderTextColor="#000" 
/>

Solution 2 - React Native

Use the placeholderTextColor prop to change the color of the placeholder text.

For example:

<TextInput placeholder="First name..." placeholderTextColor="#FFF" />

You can check the React Native TextInput reference for this and more options on the same.

Solution 3 - React Native

Try using placeholderTextColor property to maintain placeholder color. secureTextEntry props are generally used for password input. It's best to follow official document. I think they described everything in a proper way.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionEtherealmView Question on Stackoverflow
Solution 1 - React NativeRayView Answer on Stackoverflow
Solution 2 - React NativeRay M.View Answer on Stackoverflow
Solution 3 - React NativeBip LobView Answer on Stackoverflow