We use the TextInput component in almost all React Native applications. Because of that, we usually try to customize or stylize textinput to the maximum extent. In this blog post, I will tell you how to change the placeholder color in TextInput.
The TextInput comes with the placeholderTextColor property and you can change the color of placeholder text with it. See the code snippet given below.
<TextInput
style={styles.input}
placeholder="username"
placeholderTextColor="red"
onChangeText={onChangeText}
value={text}
/>You will get the following output.
Following is the complete code for reference.
import React from 'react';
import {StyleSheet, TextInput, View} from 'react-native';
const App = () => {
const [text, onChangeText] = React.useState('');
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="username"
placeholderTextColor="red"
onChangeText={onChangeText}
value={text}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
height: 40,
width: '80%',
margin: 12,
borderWidth: 1,
padding: 10,
},
});
export default App;
That’s how you change the placeholder text color of TextInput in react native.
