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

Question

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:

This is the screenshout for clicking the input:

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?

Kiona

Answer 1

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)

Quan

This whole entire stack is 1.0.0 and below.. so much of it is in flux and un or underdocumented. Kind of the wild west rn I feel like... This did work for me btw – Embezzle

Answer 2

You need to replace TextInput property:

placeholderTextColor='white'

with:

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

Diathermy

I changed the code as you said. But the input is not outlined. The placeholder does not move up. – Kiona

this snipit not working – Hectoliter

Answer 3

UPDATE :

Its "onSurface: 'white'"

Columbarium

Answer 4

For some weird reason, I was able to define the (unfocused) label color of an outlined TextInput setting the property:

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

I would never guess that onSurfaceVariant would solve it, it was a lot of trial and error with several props and theme props.

Antofagasta