Source: https://docs.expo.dev/versions/v53.0.0/sdk/reanimated

Hide navigation

Ctrl K

Home Guides EAS Reference Learn

Reference version

SDK 53

Archive Expo Snack Discord and Forums Newsletter

react-native-reanimated

GitHub npm

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

GitHub npm

Android

iOS

tvOS

Web

Bundled version:

~3.17.4

Copy page

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

Copy

- npx expo install react-native-reanimated

If you are installing this in an existing React Native app , make sure to install expo in your project. Then, follow the installation instructions provided in the library's README or documentation.

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

Usage

The following example shows how to use the react-native-reanimated library to create a simple animation.

Using react-native-reanimated

Copy

Open in Snack

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, }, });

Learn more

Visit official documentation

Get full information on API and its usage.