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 are installing this in an existing React Native app (bare workflow), start by installing expo in your project. Then, follow the additional instructions as mentioned by library's README under "Installation in bare React Native projects" section.

After the installation completes, add the Reanimated Babel plugin to babel.config.js:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

Next, restart your development server and clear the bundler cache using the command:

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

Web support

No additional configuration is required for web.

Usage

The following example shows how to use the react-native-reanimated library to create a simple animation. For more information on the API and its usage, see react-native-reanimated documentation.

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

export default function AnimatedStyleUpdateExample() {
  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={styles.container}>
      <Animated.View style={[styles.box, style]} />
      <Button
        title="toggle"
        onPress={() => {
          randomWidth.value = Math.random() * 350;
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 80,
    backgroundColor: 'black',
    margin: 30,
  },
});