Change text color of TextInput in React Native Paper

Question

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

Answer 1

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