React Native Reanimated v2 の使用例

React Native Reanimated v2 の実装例が少なかったり、検索してるときに v1 のが混じったりしてるのでここにメモ書き

要素を点滅させたい時。

アニメーションを無限ループさせたい時には withRepeat を使って、第２引数にマイナスの値を入れる。
第３引数にtrueを入れることでreverseされる。

import * as React from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

/**
 * Childrenを点滅させる
 */
export const BlinkingView: React.FC = ({children}) => {
  const opacity = useSharedValue(1);

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

  React.useEffect(() => {
    opacity.value = withRepeat(withTiming(0, {duration: 1000}), -1, true);
  }, [opacity]);

  return <Animated.View style={[style]}>{children}</Animated.View>;
};

康裕三

ReactNativeReanimatedはじめて知った。めちゃ便利ですね。

Naturalclar

上からスッと降りてくるView

withTiming を使えば、どのくらいの時間をかけて値を変更するかを定義できる。
durationの他にeasingを設定することも可能。

import * as React from 'react';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

/**
 * 上からスッと降りてくるView
 */
export const FadeFromTop: React.FC = ({children}) => {
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(-50);

  const style = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
      transform: [{translateY: translateY.value}],
    };
  });

  React.useEffect(() => {
    opacity.value = withTiming(1, {duration: 1000});
    translateY.value = withTiming(0, {duration: 1000});
  }, [opacity, translateY]);

  return <Animated.View style={[style]}>{children}</Animated.View>;
};