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

Adrian Bartholomew · Accepted Answer · 2022-11-20T14:37:42.210

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

}

What if I want to change only the label text color? any solutions for that? thx — Gabriel Augusto, Dec 09 '20 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 07 '22 at 11:49
@GabrielAugusto You can pass a component to label prop in , which means you can have your custom component and give it any styles you want. `{someText}} />` — Amin Jafarlou, Oct 15 '22 at 16:16

score 24 · Answer 2 · answered May 09 '19 at 11:41

24

theme={{
         colors: {
                    placeholder: 'white', text: 'white', primary: 'white',
                    underlineColor: 'transparent', background: '#003489'
            }
      }}

answered May 09 '19 at 11:41

Yash Vekaria

2,285
24
24

This does not satisfy - "I want to control text color through passed props". – Adrian Bartholomew Mar 16 '20 at 10:28
@AdrianBartholomew did get solution by using props?. for same requirement i posted new question https://stackoverflow.com/questions/63052170/how-can-we-send-props-to-withstyles-react-js-meterial-textfield Please help if you fond solution for this – Ashok Reddy Narra Jul 23 '20 at 12:58

score 2 · Answer 3 · answered Feb 19 '22 at 09:42

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

        <TextInput
            placeholder= {'Some Text'}
            theme={{
              colors: {
                    text: 'white',
                 }
           }}

score -2 · Answer 4 · answered Nov 19 '22 at 16:00

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

Change text color of TextInput in React Native Paper

4 Answers4