[iOS Only] mutline Textinput label is cover by text

[KrifaYounes]

here's a snack to reproduce the issue
https://snack.expo.io/@aknad/textinput

Only on iOS
It's ok on Android

latest version react-native-paper and react-native

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[nicholascm]

Hey @KrifaYounes - I was trying to reproduce this and I noticed that this only happens when there is a fixed height of the input (as you did in the snack). Is that a valid material design scenario?

If you just swap minHeight for height you can start the TextInput at the height you had specified, 100, and then as I see it, the input grows with the content properly without covering the label on iOS.

In the examples I see here , multiline inputs are growing with the length of the content.

[KrifaYounes]

Hey @KrifaYounes - I was trying to reproduce this and I noticed that this only happens when there is a fixed height of the input (as you did in the snack). Is that a valid material design scenario?

If you just swap minHeight for height you can start the TextInput at the height you had specified, 100, and then as I see it, the input grows with the content properly without covering the label on iOS.

In the examples I see here , multiline inputs are growing with the length of the content.

Hi @nicholascm ,
In android it's working fine and the textInput not cover the inputLabel.
It's not possible to reproduce the same result in iOS ?
I have a form with multiple fields and I don't want to increase height dynamically (minHeight), it's a bad idea if user input text is long for a mobile device.
Thanks

[nicholascm]

I have a form with multiple fields and I don't want to increase height dynamically (minHeight), it's a bad idea if user input text is long for a mobile device.

Got it - and to be clear I'm not a maintainer or anything - just was trying to find a way to contribute to an open issue bug fix and wanted to be sure it was intended to be used that way before trying to fix it...I did see the exact behavior you mentioned on my iOS device, so it is definitely able to be reproduced.

[endronk]

Any update on this?

This is a valid material design scenario. See the "Text area" part:
https://material.io/archive/guidelines/components/text-fields.html#text-fields-field-types
https://material.io/archive/guidelines/assets/0B8wSqcLwbhFuTHNXenJvVGhTRVk/textfields-textarea-01.mp4

Same thing also happened when I set the maxHeight property.

[lukewalczak]

Hi, I've created a PR fixing it. You can try to install react-native-paper from PR's branch to check whether that fixes your issuse.

[KrifaYounes]

Hi, I've created a PR fixing it. You can try to install react-native-paper from PR's branch to check whether that fixes your issuse.

it's working perfectly
thanks