Menu
I wish to change the text Color & placeholder textcolor in an android react native app:
render: function() {
return (
<View>
<TextInput
placeholder='Add Credit'
placeholderTextColor='ffffff'
textAlign='center'
/>
</View>
);
},
var styles = StyleSheet.create({
creditInput: {
backgroundColor: "#3f51b5",
color: "#ffffff", //Expecting this to change input text color
},
(referencing: https://facebook.github.io/react-native/docs/textinput.html#content)
placeholderTextColor and backgroundColor change as expected, but not the input text color. Am I using the wrong attribute, or is this a react-native/android bug?
885
To change color of the placeholder adds props called placeholderTextColor = "grey".
TextInput basics You can make your element look even better like so: const styles = StyleSheet. create({ input: { borderColor: "gray", width: "100%", borderWidth: 1, borderRadius: 10, padding: 10, }, }); In the piece of code above, we styled the text box's border and gave it some padding.
Change the Color of the TextBox Based on its Value in React TextBox component. You can change the color of the TextBox by validating its value using regular expression in the keyup event for predicting the numeric values as demonstrated in the following code sample.
I can confirm it works on iOS and does not on Android (at least for React Native 0.14.2).
This issue was submitted a few days ago (see https://github.com/facebook/react-native/issues/3742).
It should be fixed, but only in the latest prerelease version (v0.15.0-rc).
139
Add your style to your TextInput component and it would work I guess!
render: function() {
return (
<View>
<TextInput
style={styles.creditInput}
placeholder='Add Credit'
placeholderTextColor='ffffff'
textAlign='center'
/>
</View>
);
},
var styles = StyleSheet.create({
creditInput: {
backgroundColor: "#3f51b5",
color: "#ffffff", //Expecting this to change input text color
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
