How to Change the Placeholder Text Color of TextInput Component in React Native

Last Updated on March 17, 2019.

We use TextInput component in almost all React Native applications. Because of that, we usually try to customize or stylize textinput at maximum extent. In this blog post, I will tell you how to change the color of the hint text in TextInput.

All you need is to use placeholderTextColor prop of textinput. Refer the code given below to change the color of textinput placeholder. For more information, you can go through official react native document here.

import { TextInput } from 'react-native';

render()
  {
    return(
      <View>
        <TextInput 
        placeholder = "username" 
        placeholderTextColor = "red"
        underlineColorAndroid='transparent'
          />
      </View>  
    )
  }