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.