Reanimated

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

This library is listed in the Expo SDK reference because it is included in Expo Go. You may use any library of your choice with development builds.

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.

Platform Compatibility

Installation

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

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: npx expo start --clear.

If you load other Babel plugins, the Reanimated plugin has to be the last item in the plugins array.

Web support

For web, you'll have to install the @babel/plugin-proposal-export-namespace-from Babel plugin and update the babel.config.js to load it:

plugins: [
  '@babel/plugin-proposal-export-namespace-from',
  'react-native-reanimated/plugin',
],

After you add the Babel plugin, restart your development server and clear the bundler cache using npx expo start --clear.

Usage

The following example is a quick way to get started. For more information about the library and the underlying API, see React Native Reanimated documentation.

import Animated, {
  useSharedValue,
  withTiming,
  useAnimatedStyle,
  Easing,
} from 'react-native-reanimated';
import { View, Button } from 'react-native';

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