react-native-reanimated

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.

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

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

Copy code Copied to clipboard.

    "dependencies": {
         ...
         "@amazon-devices/react-native-reanimated": "~2.0.0"
    }
    ```
   </div>

2. Add `@amazon-devices/react-native-reanimated` plugin to your babel.config.js:
   <p><button id="tYpKuYLt_copy-button" type="button" class="btn btn-default btn-sm copy-button" data-clipboard-action="copy">
    <i class="fa fa-files-o" aria-hidden="true"></i> Copy code </button>
    <span id="tYpKuYLt_copy-button_tooltip" class="tooltip-for-copy-button">Copied to clipboard.</span></p><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script src="https://amzndevresources.com/jekyll/js/clipboardcopy.js"></script>

   <div id="tYpKuYLt" markdown="block">

module.exports = {
  presets: [
    ... // don't add it here :)
  ],
  plugins: [
    ...
    '@amazon-devices/react-native-reanimated/plugin',
  ],
};    ```

1. To clear the Metro bundler cache run the following command:

   npm start -- --reset-cache

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

For additonal 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 default 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 default 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

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

Utilities

Advanced APIs

The reanimated library on Vega has a few exceptions in terms of API support. This section explains those exceptions.

1. useAnimatedSensor is not supported on Vega platform. On FireTV, sensors are not supported so far.
2. useReducedMotion is not supported on Vega platform. For Vega, a setting for enabling/disabling reduced motion is not available so far.
3. Layout Animations are not implemented on Fabric yet, so they are not supported on Vega platform.
4. SETs (Shared Element Transitions) allows you to smoothly transform a component from one screen into a component on another screen. It's experimental feature, which hasn't had a support on Vega yet.

Known Issues on Vega

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

Supported versions

Additional Resources

For information on additonal 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: Sep 30, 2025