How can I change text color of TextInput in React Native Paper without wrapping in PaperProvider?
Currently this works:
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
text: "orange",
}
};
<PaperProvider theme={theme}>
<TargetComponent />
</PaperProvider>
However I want to control text color through passed props from a parent component.
Strangely, passing backgroundColor works but color does not.
Removing the PaperProvider wrapping doesn't help either.
This is the relevant code in TargetComponent:
return (
<View style={styles.container}>
<TextInput
type="outlined"
style={this.props.style}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
/>
</View>
)
this.props.style is:
{
color: "orange", // This does not work
backgroundColor: "transparent" // This works
},
Just add this line theme={{colors: {text: 'Your Color' }}} to the <TextInput/> of React native paper.
TextInput needs value that it is the value that is gonna be shown inside the TextInput. And to update that value you use onChangeText that is gonna call whatever function you specify every time the text into the TextInput change.
To change or remove the underline we need to use the underlineColorAndroid prop. This is only necessary for Android as the iOS TextInput comes relatively unstyled. This can be set to any color, which includes transparent. To remove the line add underlineColorAndroid="transparent" to your TextInput .
Found a solution. But for those in the same predicament:
For some reason color is not recognized as a style prop even though others, like backgroundColor, are.
Simply pass theme as a prop to TextInput. In that theme object, assign the text color like so:
<TextInput
type="outlined"
style={{ ...styles.textInput, ...this.props.style }}
underlineColor={this.theme.colors.primary}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
theme={{ colors: { text: this.props.style.color } }}
/>
Just add this line theme={{colors: {text: 'Your Color' }}} to the <TextInput/> of React native paper.
<TextInput
placeholder= {'Some Text'}
theme={{
colors: {
text: 'white',
}
}}
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