Search code examples
react-nativelabeltextinputreact-native-paper

React Native Paper Text Input - Adjusting label color at the initial state

I want to adjust the outlined react-native-paper TextInput label color at the initial state (not onFocus). This is my OutlinedInput component:

import * as React from 'react';
import { TextInput } from 'react-native-paper';

const OutlinedInput = (props) => {
  return (
    <TextInput
      mode='outlined'
      label={props.label}
      placeholder={props.placeholder}
      placeholderTextColor='white'
      secureTextEntry={props.secureTextEntry}
      multiline={props.multiline}
      keyboardType={props.keyboardType}
      value={props.value}
      onChangeText={(value) => props.onChangeText(value)}
      style={props.style}
      theme={props.theme}
    />
  );
};

export default OutlinedInput;

In my Register component, I created an OutlinedInput component inside it:

<View style={{ justifyContent: 'center', alignItems: 'center' }}>
  <OutlinedInput
    label={'User Name'}
    value={userName}
    onChangeText={(userName) => setUserName(userName)}
    style={{ color: 'white', backgroundColor: 'rgb(35,39,42)',
            borderRadius: 5, width: '75%', height: '5%' 
    }}
    theme={{ colors: { text: 'white', primary: 'rgb(33, 151, 186)' } }}
  />
</View>

I added this line at the top of Register component:

const [userName, setUserName] = useState('');

The screenshot of my program if I do not click the input:

enter image description here

This is the screenshout for clicking the input:

enter image description here

As you can see, the color of label User Name is black. I want to set this to white. When clicking on it, it works as expected, but the initial state of the color of the label is not what I want.

I tried to solve this problem using placeholder. I added placeholder props to the OutlinedInput and change placeholder color to white, but in this case, placeholder didn't become outlined. When I tried anything about placeholder, it didn't become outlined.

How can I adjust the label color to see it as white after opening the program?

Solution

  • In order to adjust label color in React Native Paper v5 you have to update this prop:

    theme={{
    colors: {
         onSurfaceVariant: 'white'
    }
}}

    I don't get why they made it so unsemantic and inaccessible (it's not even in their Docs)