react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

Input component labels in outlined mode need some work

Open StefanWallin opened this issue 1 year ago • 1 comments

Current behaviour

  1. 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.
  2. When placing a rounded <TextInput> with mode="outlined" and outlineStyle={{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

IMG_2656

Background is set to red to highlight the weird shape of the label

IMG_2655

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 avatar Dec 18 '23 16:12 StefanWallin

@StefanWallin If we pass a Text component with a color as a label to a text input in outlined mode, it looks like this:

Simulator Screenshot - iPhone 14 Pro Max - 2023-12-19 at 14 51 19

<TextInput.... ..... label: <Text style={{ color: '#333333' }}</Text>

ramakula avatar Dec 19 '23 22:12 ramakula