react-native-reanimated

What is react-native-reanimated?

react-native-reanimated is a powerful library for creating smooth animations and interactions in React Native applications. It provides a declarative API for animations, allowing developers to create complex animations with ease and high performance.

What are react-native-reanimated's main functionalities?

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]} />;

Other packages similar to react-native-reanimated

react-native-animatable

react-native-animatable provides a simple way to create animations in React Native. It offers a set of predefined animations and allows for custom animations. Compared to react-native-reanimated, it is easier to use but less powerful and flexible.

react-spring

react-spring is a spring-physics-based animation library that works for both React and React Native. It provides a more physics-based approach to animations compared to react-native-reanimated, which can result in more natural-looking animations.

lottie-react-native

lottie-react-native allows you to use Adobe After Effects animations in your React Native app. It is great for complex animations created by designers, but it does not offer the same level of control and flexibility for custom animations as react-native-reanimated.

README

React Native's Animated library reimplemented

Reanimated 3 is here! Check out our documentation page for more information

React Native Reanimated provides a more comprehensive, low level abstraction for the Animated library API to be built on top of and hence allow for much greater flexibility especially when it comes to gesture based interactions.

Nightly CI state

Installation

Check out the installation section of our docs for the detailed installation instructions.

Fabric

To learn how to use react-native-reanimated with Fabric architecture, head over to Fabric README. Instructions on how to run Fabric Example within this repo can be found in the FabricExample README.

Documentation

Check out our dedicated documentation page for info about this library, API reference and more: https://docs.swmansion.com/react-native-reanimated/

Examples

The source code for the example (showcase) app is under the Example/ directory. If you want to play with the API but don't feel like trying it on a real app, you can run the example project. Check Example/ directory README for installation instructions.

License

Reanimated library is licensed under The MIT License.

Credits

This project has been built and is maintained thanks to the support from Shopify, Expo.io and Software Mansion