[React Native Expo] 애니메이션 기능 사용하기

npx expo install react-native-reanimated

일단 설치.

 

//babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

babel.config.js쪽에 플러그인을 추가해준다.

 

import Animated, {
  withTiming,
  useAnimatedStyle,
  Easing,
} from "react-native-reanimated";

const [userAgree, setUserAgree] = useState(false);
const Agree = useCallback(
    () => {
      setUserAgree(false);
    },
    [userAgree]
);

const openServiceStyle = useAnimatedStyle(() => {
    let status: number;
    if (showAgree) {
      status = 200;
    } else {
      status = 0;
    }
    return {
      height: withTiming(status, {
        duration: 300,
        easing: Easing.bezier(0.5, 0.01, 0, 1),
      }),
    };
});

<Pressable onPress={Agree}><Text>토글</Text></Pressable>
<Animated.ScrollView style={[{ height: 0 }, openServiceStyle]}>
	<Text>내용</Text>
</Animated>

이렇게하면 토글로 열었다 닫았다 하는 기능 완성