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?
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)