Guides
Plan-enterprise-icon
Expo Application Services
API Reference

Reanimated

react-native-reanimated provides an API that greatly simplifies the process of creating smooth, powerful, and maintainable animations.
Info-icon
Reanimated uses React Native APIs that are incompatible with "Remote JS Debugging" for JavaScriptCore. In order to use a debugger with your app with react-native-reanimated, you will need to use the Hermes JavaScript engine and the JavaScript Inspector for Hermes.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb
Status-success-iconStatus-success-iconStatus-success-iconStatus-success-iconStatus-success-icon

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.

In all cases, after the installation completes, you must also add the Babel plugin to babel.config.js:
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};
After you add the Babel plugin, restart your development server and clear the bundler cache: expo start --clear.
Info-icon
Note: If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.

You should refer to the react-native-reanimated docs for more information on the API and its usage. But the following example (courtesy of that repo) is a quick way to get started.
import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import { View, Button } from 'react-native';
import React from 'react';

export default function AnimatedStyleUpdateExample(props) {
  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={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
      }}>
      <Animated.View
        style={[{ width: 100, height: 80, backgroundColor: 'black', margin: 30 }, style]}
      />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}