How do you make the react-native-paper TextInput have the same style it has when focused?

Question

I'm currently working with react-native-paper and I'm trying to replicate the focused style of the TextInput component. By default, the TextInput component displays the label text instead of the placeholder when is not focused. Instead, I'd like to have the focused style, when the label is moved to the top and the placeholder is in the value position (see images below).

Is there a way to achieve this using the react-native-paper library without altering the default behavior too much? I don't know if there's a property like "focused" or something like that.

Any guidance or examples on how to achieve this customization would be greatly appreciated. Thank you!

PD: I'm not trying to actually focus the input, I just want the style.

not focused

focused (I want the text input to always be like this, even when is not focused)

here's my code:

<TextInput
        placeholder="Enter Your First Name"
        label="First Name"
        value={firstName}
        onChangeText={(text) => setFirstName(text)}
        style={styles.input}
        left={<TextInput.Icon icon="account-outline" />}
      />

Answer 1

This can't be achieve by using props, you have to make some changes into the library's core code.

Directory:

root\node_modules\react-native-paper\src\components\TextInput\TextInput.tsx

Read and understand the blow code, if (value || focused) is responsible for changing position of Label & showing Placeholder

Just change value || focused to 1, which will remove the condition.

For precision here is the exact location where i changed.

    React.useEffect(() => {
      labeled.stopAnimation();
      // The label should be minimized if the text input is focused, or has text
      // In minimized mode, the label moves up and becomes small
      // workaround for animated regression for react native > 0.61
      // https://github.com/callstack/react-native-paper/pull/1440

      if (value || focused) {     // <---- if (value || focused) to if (1)
        // minimize label
        Animated.timing(labeled, {
          toValue: 0,
          duration: BLUR_ANIMATION_DURATION * scale,
          // To prevent this - https://github.com/callstack/react-native-paper/issues/941
          useNativeDriver: true,
        }).start();
      } else {
        // restore label
        Animated.timing(labeled, {
          toValue: 1,
          duration: FOCUS_ANIMATION_DURATION * scale,
          // To prevent this - https://github.com/callstack/react-native-paper/issues/941
          useNativeDriver: true,
        }).start();
      }
    }, [focused, value, labeled, scale]);

Library Version: "react-native-paper": "^5.10.3"