Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
},
like image 904
Adrian Bartholomew Avatar asked May 02 '19 18:05

Adrian Bartholomew


People also ask

How do I change TextInput color in React Native paper?

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

How do I change TextInput value in React Native?

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.

How do I remove the underline in React Native paper TextInput?

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 .


2 Answers

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 } }}
      />
like image 115
Adrian Bartholomew Avatar answered Sep 21 '22 22:09

Adrian Bartholomew


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

        <TextInput
            placeholder= {'Some Text'}
            theme={{
              colors: {
                    text: 'white',
                 }
           }}
like image 41
danklad Avatar answered Sep 20 '22 22:09

danklad