react-native-reanimated

Basic Animations

This code demonstrates a basic fade-in animation using react-native-reanimated. The opacity value transitions from 0 to 1 over 500 milliseconds with an easing function.

import Animated, { Easing } from 'react-native-reanimated';

const { Value, timing } = Animated;

const opacity = new Value(0);

const fadeIn = timing(opacity, {
  toValue: 1,
  duration: 500,
  easing: Easing.inOut(Easing.ease),
});

fadeIn.start();

Gesture-based Animations

This code demonstrates how to create a gesture-based animation using react-native-reanimated and react-native-gesture-handler. The view can be dragged horizontally and will spring back to its original position when released.

import Animated, { useAnimatedGestureHandler, useSharedValue, withSpring } from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';

const translateX = useSharedValue(0);

const gestureHandler = useAnimatedGestureHandler({
  onStart: (_, ctx) => {
    ctx.startX = translateX.value;
  },
  onActive: (event, ctx) => {
    translateX.value = ctx.startX + event.translationX;
  },
  onEnd: () => {
    translateX.value = withSpring(0);
  },
});

<PanGestureHandler onGestureEvent={gestureHandler}>
  <Animated.View style={{ transform: [{ translateX: translateX.value }] }} />
</PanGestureHandler>;

Complex Animations with useAnimatedStyle

This code demonstrates how to create a complex animation using useSharedValue and useAnimatedStyle hooks. The scale of the view toggles between 1 and 1.5 when the button is pressed.

import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
import { Button } from 'react-native';

const scale = useSharedValue(1);

const animatedStyle = useAnimatedStyle(() => {
  return {
    transform: [{ scale: scale.value }],
  };
});

<Button title="Animate" onPress={() => {
  scale.value = withTiming(scale.value === 1 ? 1.5 : 1, { duration: 500 });
}} />

<Animated.View style={[{ width: 100, height: 100, backgroundColor: 'blue' }, animatedStyle]} />;