react-native-reanimated

The React Native Reanimated library extends the Animated library API and provides greater flexibility when using gesture-based interactions.

With Reanimated, you can easily create smooth animations and interactions that run on the UI thread.

Documentation

For more information about this library and its API, see https://docs.swmansion.com/react-native-reanimated/ in the official Software Mansion documentation.

Installation

Select the tab for your React Native version. Note that RN 0.83 requires the additional @amazon-devices/react-native-worklets dependency, which provides the core multithreading infrastructure that enables worklets — JavaScript functions that can be executed on separate threads (like the UI thread). Worklets are the foundation that allows Reanimated to run animations and interactions smoothly without blocking the JavaScript thread.

1. Add the JavaScript library dependency in the package.json file:

   • React Native 0.72
   • React Native 0.83
   
   

   Copy code Copied to clipboard.

   "dependencies": {
         ...
         "@amazon-devices/react-native-reanimated": "~2.0.0",
   }
   

   
   

   Copy code Copied to clipboard.

   "dependencies": {
         ...
         "@amazon-devices/react-native-worklets": "~1.0.0",
         "@amazon-devices/react-native-reanimated": "~4.0.0",
   }
   

2. Add the Reanimated Babel plugin to your babel.config.js:

   Copy code Copied to clipboard.

    module.exports = {
      plugins: [
        ...
        '@amazon-devices/react-native-worklets/plugin',
      ],
    };
   

3. Run the following command to clear the Metro bundler cache:

   Copy code Copied to clipboard.

   npm start --reset-cache
   

4. Reinstall the package-lock.json file by running the npm install command.

For additional information and context, see installation in the Software Mansion documentation.

Examples

The following example shows how to run a simple animation in an infinite loop using the withTiming method.

Copy code Copied to clipboard.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

export function App() {
  const offset = useSharedValue(200);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

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

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyles]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

The following example shows how run a spring-based animation using the withSpring function:

Copy code Copied to clipboard.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withRepeat,
} from '@amazon-devices/react-native-reanimated';

const initialOffset = 200;

export function App() {
  const offset = useSharedValue(initialOffset);

  const animatedStyles = useAnimatedStyle(() => ({
    transform: [{ translateX: offset.value }],
  }));

  React.useEffect(() => {
    offset.value = withRepeat(withSpring(-offset.value), -1, true);
  }, []);

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, animatedStyles]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  box: {
    height: 120,
    width: 120,
    backgroundColor: '#b58df1',
    borderRadius: 20,
  },
});

API support

The reanimated library on Vega provides a Turbo Module which adds a support for most of methods listed below.

Animations

Core

Scroll

Device

Threading

workletize

Workletize means to convert a JavaScript function into a serializable object which can be copied and ran on a UI thread. Functions are marked with "worklet". Directives are automatically picked up and workletized by the Reanimated Babel plugin.

Utilities

Advanced APIs

Exceptions

The reanimated library on Vega has a few exceptions in terms of API support.

Vega doesn't support the following hooks and methods:

• useAnimatedSensor
• useAnimatedKeyboard
• useReducedMotion
• Layout Animations on Fabric
• CSS Transitions
• CSS Animations
• SETs (Shared Element Transitions)

Known Issues on Vega

• Animations that use withRepeat stop repeating after fast refresh is used.
• Style does not update on the animation after fast refresh is used.

Supported versions

Additional Resources

For information on other libraries, see Supported Third-Party Libraries and Services.

Credits

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

Last updated: Jul 10, 2026