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

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"
   }
   

2. Add the @amazon-devices/react-native-reanimated plugin to your babel.config.js:

   Copy code Copied to clipboard.

    module.exports = {
      plugins: [
        ...
        '@amazon-devices/react-native-reanimated/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 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 support for most of the following methods.

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
• useReducedMotion
• Layout Animations on Fabric
• SETs (Shared Element Transitions)

Known Issues on Vega

• Animations that use withRepeat stop repeating after fast refresh is used.
• Style doesn't 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: Oct 13, 2025