TextInput Label disappears when the component is unfocused on mobile

[ChrisGadek1]

Current behaviour

Screencast from 23.03.2023 01:28:16.webm
If TextInput is unfocused, then the label disappears. It was tested only on android.

Expected behaviour

Screencast from 23.03.2023 01:31:55.webm
The label should stay and not disappear

How to reproduce?

<TextInput label={i18n.t('login.login')} value={username} onChangeText={setUsername} />

What have you tried so far?

I think the problem is with TextInput label opacity, so I made a little change there:

react-native-paper/src/components/TextInput/Label/InputLabel.tsx

Line 65 in d88ff20

outputRange: [hasActiveOutline ? 1 : 0, 0],

I replaced this line with this line:
outputRange: [1, 1],
And everything began to work correctly (That's how I made preview videos in sections Current behaviour and Expected behaviour)

Your Environment

software	version
android	13
react-native	0.71.4
react-native-paper	5.5.0
node	18.15.0
npm	9.5.0
expo sdk	(no expo)

[lukewalczak]

Hey @ChrisGadek1, are you able to reproduce your issue on the expo snack? – please attach the link to it then.

[arpankumarlahiri]

Given mode is not given in the example so mode will be flat, irrespective of that
I can see in implementation of line 83
const hasActiveOutline = parentState.focused || error;

react-native-paper/src/components/TextInput/TextInputFlat.tsx

Line 83 in 252b1a6

const hasActiveOutline = parentState.focused || error;

And as per your workaround

I think it's behaving as expected..

[ChrisGadek1]

Hey @ChrisGadek1, are you able to reproduce your issue on the expo snack? – please attach the link to it then.

I was not able to reproduce, on expo everythink seems to work as expected. The problem is only in pure React Native project created by create-react-native-app

[lukewalczak]

I was not able to reproduce, on expo everythink seems to work as expected. The problem is only in pure React Native project created by create-react-native-app

Could you please create minimal github repo presenting the issue, which we can clone to investigate the bug?

[ChrisGadek1]

I was not able to reproduce, on expo everythink seems to work as expected. The problem is only in pure React Native project created by create-react-native-app

Could you please create minimal github repo presenting the issue, which we can clone to investigate the bug?

I finally menaged to reproduce this error. It is strongly connected to the React Native new architecture, because it only appears when this feature is turn on. Link to minimal github repo with this bug reproduction: https://github.com/ChrisGadek1/react-native-paper-textinput-bug-reproduction

[R3D347HR4Y]

I encounter this issue too, using the first workaround worked but i don't like modifying files inside node_modules and i'd rather not fork
Also this workaround makes the label text stay primary color even when the field is not focused
Can confirm I am using the latest RN architecture

[alex-strae]

Confirms this is still an issue and workaround works on RN 0.72.3 with Fabric enabled on iOS and Android on "react-native-paper": "5.10.1",