20

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
},

4 Answers 4

46

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 } }}
      />

Updated for functional components and React Native Paper 5.x (also if you want label color control):

const MyFuncComponent = ({style, colors, onChange, label, value}) => {

  const Label = <Text color={style.labelColor}>{label}</Text>;

  <TextInput
    type="outlined"
    style={{ ...styles.textInput, ...style }}
    underlineColor={theme.colors.primary}
    onChangeText={onChange}
    label={Label}
    value={value || "Replace this text"}
    placeholder={placeholder}
    textColor={style.color}
  />

}
3
  • 7
    What if I want to change only the label text color? any solutions for that? thx Dec 9, 2020 at 11:12
  • and for disabled? Do you have to something like this for that const customTextColor = editable === true ? 'black' : 'grey' and set that as the main text color?
    – pokumars
    Mar 7, 2022 at 11:49
  • 1
    @GabrielAugusto You can pass a component to label prop in <TextInput />, which means you can have your custom component and give it any styles you want. <TextInput label={<Text style={{color: "#someColor"}}>{someText}</Text>} /> Oct 15, 2022 at 16:16
24
theme={{
         colors: {
                    placeholder: 'white', text: 'white', primary: 'white',
                    underlineColor: 'transparent', background: '#003489'
            }
      }}
2
2

Just add this line theme={{colors: {text: 'Your Color' }}} to the <TextInput/> of React native paper.

        <TextInput
            placeholder= {'Some Text'}
            theme={{
              colors: {
                    text: 'white',
                 }
           }}
-2
<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}
    theme={{ colors: { text: 'white' } }}
  />

just add color in --- theme={{ colors: { text: 'your_color' } }}

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.