HomeGuidesReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

Reanimated

GitHub

npm

A library that provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.

Android
iOS
tvOS
Web

This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.

react-native-reanimated provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.

Reanimated uses React Native APIs that are incompatible with "Remote JS Debugging" for JavaScriptCore. To use a debugger with your app with react-native-reanimated, you'll need to use the Hermes JavaScript engine and the JavaScript Inspector for Hermes.

Installation

Terminal
npx expo install react-native-reanimated

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.


No additional configuration is required. Reanimated Babel plugin is automatically configured in babel-expo-preset when you install the library.

Usage

The following example shows how to use the react-native-reanimated library to create a simple animation. For more information on the API and its usage, see react-native-reanimated documentation.

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

export default function AnimatedStyleUpdateExample() {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, style]} />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 80,
    backgroundColor: 'black',
    margin: 30,
  },
});