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