Textinput's outline appears behind the label if Text component is passed to label

[martenjurgens]

Current behaviour

If Text component is passed to the label of a TextInput, the outline isn't hidden properly and appears behind the label.

Expected behaviour

Acts the same as if a string is passed to the label.

How to reproduce?

const [text, setText] = React.useState("");

<TextInput
   // label={"Last name"}
  label={<Text style={{ color: "black" }}>Last name</Text>}
  value={text}
  onChangeText={text => setText(text)}
   />

Preview

How it looks like when Text component is passed to label

How it looks like when string is passed to label

Your Environment

software	version
android	13
react-native	0.72.5
react-native-paper	5.10.6

[Lev-Shapiro]

I'll start working on this today soon, please assign this issue to me

[lukewalczak]

Thanks @Lev-Shapiro!

[WanYingT]

How do I remove the label background just like this?

[Lev-Shapiro]

I just checked my code that was merged and it doesn't seem to have any problems with background labeling. Could you share why you decided to comment on this issue? Anyway, I'll be happy to fix this

[WanYingT]

I found that passing RNP Text component to the label props will still have this problem occurred, while using RN Text component is totally fine. Also, the problem I mentioned happens when I add { borderRadius: 30 } to the TextInput component to make it close to design, label background seems to be overflow. I understand I can remove the white background by using colors: { background: 'transparent' }, but it will not leave a field for that. Is there any possible approach to fix?

[Lev-Shapiro]

Yes, creating a new issue and giving code to reproduce the problem