CODEWITHSUNDEEP
react-nativereact-native-paper
Adrian Bartholomew
Adrian Bartholomew

Reputation: 2632

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

Upvotes: 20

Views: 46027

Answers (8)

Shoooooosh
Shoooooosh

Reputation: 61

I just figured it out, there's a property for TextInput in react native paper and it's textColor="white add this in the component along with other props

Upvotes: 0

Muhammad Shahzaib
Muhammad Shahzaib

Reputation: 1

Just add this prop

<TextInput
 {/*rest of the props*/}
 textColor="YOUR COLOR"
 />

inside the TextInput and you will be fine.

Upvotes: 0

huzefa vakhariya
huzefa vakhariya

Reputation: 1

Just use textColor PROPS provided by react-native-paper outside of any other props.

<TextInput
textColor={'OUR_COLOR'}
/>

Upvotes: 0

Baryon Lee
Baryon Lee

Reputation: 1177

If you want to change the default background color of lightTheme for TextInput, you can set surfaceVariant: "white".

By doing this, the background color for all TextInput components will be changed, eliminating the need to modify each one individually. I discovered this after delving layer by layer into the implementation details.

For a clearer understanding, consider going through the Theme documentation at https://callstack.github.io/react-native-paper/docs/guides/theming.

   const lightTheme = {
      ...MD3LightTheme,
      colors: {
        ...MD3LightTheme.colors,
        surfaceVariant: "white",
      },
      roundness: 1.5,
    };

Upvotes: 0

Adrian Bartholomew
Adrian Bartholomew

Reputation: 2632

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

}

Upvotes: 47

Rohit Maurya
Rohit Maurya

Reputation: 1

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

Upvotes: -2

danklad
danklad

Reputation: 118

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

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

Upvotes: 2

Yash Vekaria
Yash Vekaria

Reputation: 2373

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

Upvotes: 25

Related Questions