The Answer is good but you might not need useEffect in this case, this can be refactored as this

import React, {useState, useRef} from 'react';
import {View, StyleSheet, TextInput, Text, Animated} from 'react-native';

const TestScreen = () => {
  const [value, setValue] = useState('');
  const moveText = useRef(new Animated.Value(0)).current;

  const onFocusHandler = () => {
    if (!value) {
      moveTextTop();
    }
  };
  const onBlur = () => {
    if (!value) {
      moveTextBottom();
    }
  };
  const onChangeText = (textValue: string) => {
    setValue(textValue);
    if (textValue !== '') {
      moveTextTop();
    } else if (value === '') {
      moveTextBottom();
    }
  };

  const moveTextTop = () => {
    Animated.timing(moveText, {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  const moveTextBottom = () => {
    Animated.timing(moveText, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  const yVal = moveText.interpolate({
    inputRange: [0, 1],
    outputRange: [4, -20],
  });

  const animStyle = {
    transform: [{translateY: yVal}],
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.animatedStyle, animStyle]}>
        <Text style={styles.label}>Enter Your Name</Text>
      </Animated.View>
      <TextInput
        value={value}
        onBlur={onBlur}
        style={styles.input}
        onFocus={onFocusHandler}
        onChangeText={onChangeText}
      />
    </View>
  );
};
export default TestScreen;

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
    marginTop: 20,
    backgroundColor: '#fff',
    paddingTop: 5,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: '#bdbdbd',
    borderRadius: 2,
    width: '90%',
    alignSelf: 'center',
  },
  icon: {
    width: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    fontSize: 13,
    height: 35,
    color: '#000',
  },
  label: {
    color: 'grey',
    fontSize: 10,
  },
  animatedStyle: {
    top: 5,
    left: 15,
    position: 'absolute',
    borderRadius: 90,
    zIndex: 10000,
  },
});

I was frustrated with the solutions on the internet, none of which worked according to my needs. So I wrote custom solution, made it maximum dynamic, and uploaded as a library, here it is.

Note: This is Expo supported solution

Preview:

to install:

npm i fiction-expo-floating-label-input

to Import:

import {FictionFloatingLabelInput} from "fiction-expo-floating-label";

basic Example:

<FictionFloatingLabelInput
  label="First Name"
  value={x} // just a state variable
  labelFocusedTop={10} // Y position of label when focused
  labelUnFocusedTop={-5} // Y position of label when un-focused
  onChangeText={(t)=>setX(t)} // setting state variable
/>

Full Example:

<FictionFloatingLabelInput
  label="First Name" // label itself
  value={x} // just a state variable

  labelFocusedTop={-5} // Y position of label when focused
  labelUnFocusedTop={10} // Y position of label when un-focused

  containerStyle={{}} // container style
  focusedContainerStyle={{}} // container style when focused
  unFocusedContainerStyle={{}} // container style when un-focused

  subContainerStyle={{}} // child container style
  focusedSubContainerStyle={{}} // child container style when focused
  unfocusedSubContainerStyle={{}} // child container style when un-focused

  labelStyle={{}} // label style
  focusedLabelStyle={{}} // label style when focused
  unfocusedLabelStyle={{}} // label style when un-focused

  textInputStyle={{}} // text input style
  focusedTextInputStyle={{}} // text input style when focused
  unFocusedTextInputStyle={{}} // text input style when un-focused

  labelFontSizeUnFocused={14} // label font size when un-focused
  labelFontSizeFocused={10} // label font size when focused

  labelColorUnFocused={"red"} // label color when un-focused
  labelColorFocused={"green"} // label color when focused

  underlineColorAndroid={"transparent"} // you know this one, right?

  selectionColor={"red"} // cursor and selection color

  onChangeText={(value)=>setX(value)} // setting state variable

  // all other text input props are supported too, Except onFocus and onBlur, 
  // instead below focus and blur events are explained

  preOnFocus={()=>{ 
    // gets called before the animation starts , focusing
  }}

  postOnFocus={()=>{ 
    // gets called after the animation ends , focusing
  }}

  preOnBlur={()=>{ 
    // gets called before the animation starts , unfocusing
  }}

  postOnBlur={()=>{ 
    // gets called after the animation ends, unfocusing
  }}

/>

Note: Don't forget to declare state variable as x, like

const [x, setX] = React.useState("")