How to change the placeholder color in android app created using React Native
React NativeReact Native-AndroidReact 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.