TextInput label invisible before focusing on new architecture

[Nekuin]

Current behaviour

inputOpacityWrong.webm When first rendering TextInput (flat or outlined) the label is invisible. After focusing on them the label is shown. This only seems to happen when using new architecture Tested on Android.

Expected behaviour

inputOpacityRight.webm The label should be visible even before focusing on new architecture

How to reproduce?

<TextInput mode="outlined" value={text} onChangeText={txt => setText(txt)} label="Something" placeholder="Something else" /> <TextInput mode="flat" value={text} onChangeText={txt => setText(txt)} label="Something" placeholder="Something else" />

What have you tried so far?

Much like in #3776 I can create a workaround fix by changing the outputRange a little bit here: https://github.com/callstack/react-native-paper/blob/d88ff2051c3540fab5d7980efe3423f4ddfc98bd/src/components/TextInput/Label/InputLabel.tsx#L65 If i replace the last 0 with 1 or opacity I get what is seen on the expected behavior video clip. For example: outputRange: [hasActiveOutline ? 1 : 0, 1],

Your Environment

software	version
android	11
react-native	0.72.5
react-native-paper	5.10.6
node	18.16.0
npm or yarn	9.5.1 npm
expo sdk	(no expo)

[Nekuin]

Herer's a minimal repo for reproducing this: https://github.com/Nekuin/TextInputOpacity

[lukewalczak]

Hey @Nekuin, would you like to investigate whether replacing the last 0 with 1 or opacity (according to your message ) doesn't break anything on the old architecture? Moreover, could you please try to find out why passing 1 or opacity values solves the problem?

[Nekuin]

well I can tell you it doesn't seem to break the label in old architecture... other than that I really don't understand what is going on. I'm not sure why the whole interpolate thing even is there because there doesn't seem to be any opacity related animation to it.

[alexkev]

I am seeing this as well.

[inthisar-hamza]

Did anyone check this? still need a fix!

[noobj]

I'm having the same issue, have updated to 5.12.3, still no luck. Don't know why, but I ended up adding an animation and it shows up.

useEffect(() => {
    setTimeout(() => {
      Animated.timing(new Animated.Value(0), {
        toValue: 1,
        duration: 1,
        delay: 10,
        useNativeDriver: true,
      }).start();
    }, 1);
  }, []);