react-nativereact-native-paper

Change text color of TextInput in React Native Paper


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

Solution

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