React Native – Animation (2)

How to create an animated dropdown text?

https://blog.logrocket.com/using-react-native-reanimated-seamless-ui-transitions/

How to create an up/down animated header bar?

• Create Animated Component

const Top = ({ playerState, isShown }) => {
  ...
  return (
    <Animated.View style={[initialStyle, reanimatedStyle]}>
      {children}
    </Animated.View>
  );
};

export default Top;

• Set the initial style for the header bar

  const HEADER_HEIGHT = 70;

  const initialStyle = {
    // top: 0,   Not set this value, this value will be the animated value
    position: 'absolute',
    zIndex: 110,
    width: '100%',
    flexDirection: 'row',
    backgroundColor: '#1B1B1F',
    height: HEADER_HEIGHT,
  };

• Set the animated style for the header bar

 const animatedTop = useSharedValue(-HEADER_HEIGHT);

 const reanimatedStyle = useAnimatedStyle(() => {
    return {
      top: animatedTop.value,
    };
 }, []);

• Make the header move up and down conditionally

  useEffect(() => {
    animatedTop.value = isShown
      ? withTiming(0, { duration: 250 }) // Move down to 0
      : withTiming(-HEIGHT, { duration: 150 });  // Move up to -70
  }, [isShown]);