Outline line overlaps label

[GrandLineAR]

Outline line overlaps label

RPReplay_Final1678962666.MP4

"react-native-paper": "^5.4.1"

[github-actions]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.dev. If it's not possible to repro it on snack.expo.dev, then you can also provide the repro in a GitHub repository.

[lukewalczak]

Hey @GrandLineAR, please provide the snack or attach the code snippet which allow us to reproduce the issue.

[jeremyfalldev]

@lukewalczak We see this issue when we use 'backgroundColor: transparent'.

<TextInput
  mode="outlined"
  label="Name"
  style={{ backgroundColor: 'transparent' }}
/>

[lukewalczak]

@lukewalczak We see this issue when we use 'backgroundColor: transparent'.

Thanks, will take a look into it.

[GrandLineAR]

@lukewalczak We see this issue when we use 'backgroundColor: transparent'.

<TextInput
  mode="outlined"
  label="Name"
  style={{ backgroundColor: 'transparent' }}
/>

Yes, thank you! That's my omission, the documentation mentions that

[wavewavewavewave]

ok, how is there a way to fix this?

[lukewalczak]

I believe we have encountered a limitation of the outlined text input – it will not work well with the patchy background such as an image or gradient.

The issue arises when the input is focused, the label is lifted up to the outline, causing a break in the border. To achieve the desired design, there is rendered label background view, with the same background color as the input, used to cover the border at the point of the break:

<TextInput style={{backgroundColor: 'yellow'}}

---

Passing backgroundColor: 'transparent' into TextInput ends with a missing cover break in the border:

---

To achieve the desired "transparent effect" in the outlined text input, I believe the best approach is to set the input's background color to match the background color of the screen, however this method works seamlessly when the colors are uniform.

I'm going to create a Known issue section in the documentation where that limitation will be mentioned in TextInput component.

[Martijncvv]

I also noticed a slight overlap of the label.

const outlineStyle: ViewStyle = { borderRadius: styles.radius.large, };

return ( <TextInput mode="outlined" label={label} value={text} outlineStyle={outlineStyle} onChangeText={text => setText(text)} theme={{ colors: { primary: styles.Colors.grey.default, outline: styles.Colors.grey.default } }} /> );

[RichardLindhout]

This can be fixed on the web though with fieldset

[RichardLindhout]

See an old PR for that: #883
Material UI uses the fieldset trick too :)

[Martijncvv]

Thanks a lot. Do you have an idea how to see the code? The "Files changed" tab of the PR leads to a dead link.

[RichardLindhout]

Yeah @Martijncvv it only works on web so I don't think it's usable since it won't work on iOS/React Native

[lelimit]

It's still a problem in react-native-paper 5.9.1.
I got this problem when upgrading react native from 0.71.8 to 0.72.1

[AbdurRobTanvir]

Hi, I am also facing similar kind of issue for the outline line overlapping label when I am increasing the border Width of outline Style in Text Input. In my mobile devices this looks fine but whenever I am running on Tablet the following issue is occurring where a line is visible under the label.

above image is what Tablet is showing.

above image is what mobile is showing.

This is the code for outline style.

[robertcabrera4871]

I am still seeing this issue after the PR

[redbluenat]

The issue still exists in:
"react-native-paper": "5.11.1",

It is related to the custom label text component. For string, it works okay.

[ravithoria]

Still facing issue in: react-native-paper: 5.12.3

[JoshCarse]

Yeah still getting issue in: "react-native-paper": "5.12.3".
Only when using custom label component as @redbluenat mentioned.
Using string for label works fine but I need to use custom label component.

[joannakasinska]

I worked around it by adding backgroundColor: 'color' to the styles:
<RNPaperTextInput label='label' style={{backgroundColor: 'white' }}/>

[t-fraczek]

"react-native-paper": "5.12.3".