How to change the text color of text input in react native?
Solution 1
add color: 'green';
in your TextInput
style will change the color
<TextInput style={styles.textInput} />
const styles = StyleSheet.create({
textInput: {
color: 'green',
},
});`
in native-base
you will need to take care also of theming see docs
Solution 2
Simply create a style for your input and set color as green
const styles = StyleSheet.create({
textInputStyle: {
color: 'green',
}
});
and assign it to your textInput
<TextInput
style={styles.textInputStyle}
placeholderTextColor='green'
underlineColorAndroid='green' />
Solution 3
If you want to change the TextInput colour add a color in styles.
below is the example give you the TextInput color as blue:
export default class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
}
render() {
return (
<TextInput
style=
{{
height: 40, borderColor: 'gray', borderWidth: 1, color : "blue"
}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
}
Solution 4
after trying many different solutions, I implemented a custom TextInput component where I placed a Text component that changes the color as a background and a TextInput over it that has a transparent font color. I hope this issue can be fixed soon in a better way.
updateText(v) {
const { onChange } = this.props;
this.setState({ text: v});
onChange(v);
}
render() {
const { changeColor } = this.props;
const { text } = this.state;
return <View style={{ position: 'relative', flex: 1 }}>
<Text style={ [ { flex: 1, position: 'absolute', zIndex: 1 }, changeColor? { color: red } : null ]}>
{text}
</Text>
<RTextInput
onChangeText={v => this.updateText(v)}
style={[{ flex: 1, color: 'transparent', zIndex: 100 }]}
{...props}
/>
</View>
}
Related videos on Youtube
Syuzanna
Updated on May 06, 2020Comments
-
Syuzanna about 4 years
The placeholder of the input is green but I want also make the green text input (when I am typing the text text color shows black which is not visible enough in my UI). How can I make it Green as well?
-
bennygenel over 6 yearsPlease provide some code to show what you tried so far. Check how to ask to learn how you can ask a good question. Check style prop for
TextInput
on how to customize your input. -
Vahid Boreiri over 6 yearsis your problem solved?
-
Wanda Ichsanul Isra over 6 yearsAre you using native base?
-
sophin about 3 yearsJust in case if anyone trying to change the colour of the placeholder. To change color of the placeholder adds props called placeholderTextColor = "grey".
-
-
Mohamed Khalil over 6 yearsdid you changed the theme colors?
-
Arham Anees almost 2 yearsI had to use linear gradient text component instead of simple text. this saved my day!