일정 시간 뒤 자연스럽게 사라지는 애니메이션 구현

import React, { useCallback, useEffect }from 'react';
import { ImageBackground, Text, TouchableOpacity, View }from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
}from 'react-native-reanimated';
 
import stylesfrom './styles';
 
type Props = {
  onPress: () => void;
};
 
const TooltipWithButton = ({ onPress }: Props) => {
const opacity = useSharedValue(1);
 
const startAnimation = useCallback(() => {
    opacity.value = withDelay(5000, withTiming(0, { duration: 500 }));
  }, [opacity]);
 
  useEffect(() => {
    startAnimation();
  }, [startAnimation]);
 
const animatedStyle = useAnimatedStyle(() => {
return {
      opacity: opacity.value,
    };
  });
 
return (
    <View style={{ overflow: 'visible', position: 'relative' }}>
      <TouchableOpacity activeOpacity={1} onPress={onPress} style={styles.container}>
        <View style={styles.textContainer}>
          <Text style={styles.text}>Button</Text>
        </View>
      </TouchableOpacity>
      <View
        style={[
          {
            overflow: 'visible',
            position: 'absolute',
            top: -12,
            left: -176,
          },
        ]}
      >
        <Animated.View style={[styles.animationContainer, animatedStyle]}>
          <View style={[styles.tooltipContainer]}>
            <View style={styles.tooltipTextContainer}>
            	<Text style={styles.tooltipText}>Tooltip</Text>
            </View>
          </View>
        </Animated.View>
      </View>
    </View>
  );
};
 
exportdefault TooltipWithButton;

const opacity = useSharedValue(1);

const startAnimation = useCallback(() => {
  opacity.value = withDelay(5000, withTiming(0, { duration: 500 }));
}, [opacity]);

useEffect(() => {
  startAnimation();
}, [startAnimation]);

const animatedStyle = useAnimatedStyle(() => {
return {
    opacity: opacity.value,
  };
});