react-native-paper
react-native-paper copied to clipboard
Input component labels in outlined mode need some work
Current behaviour
- When background and primary are close to each other we are not able to style text-color of labels on input-components separately from primary color in theme. It's weird that primary is used both in backgrounds and texts without escape hatches.
- When placing a rounded
<TextInput>
withmode="outlined"
andoutlineStyle={{borderColor:'transparent'}}
on a elevated<Surface>
, then the backgroundColor of the label gets a weird shape.
Expected behaviour
I expect:
- The rounding of the input to hide the label background
- The label background to be styleable without creating a label element
- Each of the inputs parts to have to have escapeHatches for styling, such as these props, or a style function that takes it's state(focused, normal, disabled)
labelStyle
,activeLabelStyle
,inputStyle
,activeInputStyle
,
How to reproduce?
https://snack.expo.dev/t8WLJwSQ6
Preview
Background is dark to show low contrast between background and primary text
Background is set to red to highlight the weird shape of the label
What have you tried so far?
Creating custom label components without getting it to work consistently across platforms (android & iOS)
Your Environment
software | version |
---|---|
ios | 17.1.2 |
android | 13 |
react-native | 0.72.1 |
react-native-paper | 5.11.4 |
node | 18.13.0 |
npm or yarn | 9.6.3 |
expo sdk | any/not-applicable/47 in snack |
@StefanWallin If we pass a Text component with a color as a label to a text input in outlined mode, it looks like this:
<TextInput.... ..... label: <Text style={{ color: '#333333' }}</Text>