CODEWITHSUNDEEP
react-native
Etherealm
Etherealm

Reputation: 2484

Change React-Native TextInput's placeholder color

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",
}

Upvotes: 111

Views: 165169

Answers (5)

gopal prabhu
gopal prabhu

Reputation: 333

By using placeholderTextColor property.

Example:

 <TextInput
      style={styles.TextInput}
      placeholder="Search"
      placeholderTextColor="#C0C0C0"
    />

Upvotes: 4

AIK
AIK

Reputation: 528

You can use the placeholderTextColor prop of TextInput component. Check it out here https://reactnative.dev/docs/textinput

Upvotes: 3

Bip Lob
Bip Lob

Reputation: 721

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.

Upvotes: 1

Ray M.
Ray M.

Reputation: 406

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.

Upvotes: 28

Ray
Ray

Reputation: 9674

Like so:

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

Upvotes: 247

Related Questions