Animation

Learn how to integrate the react-native-reanimated library and use it in your Expo project.

Animations are a great way to enhance and provide a better user experience. In your Expo projects, you can use the Animated API from React Native. However, if you want to use more advanced animations with better performance, you can use the react-native-reanimated library. It provides an API that simplifies the process of creating smooth, powerful, and maintainable animations.

Installation

To install react-native-reanimated, run the following command:

Terminal

- npx expo install react-native-reanimated

No additional configuration is required for SDK 50 and above. Reanimated Babel plugin is automatically configured in babel-expo-preset when you install the library.

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

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 using the command:

Terminal

- 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

No additional configuration is required for SDK 50 and above when using react-native-reanimated.

No additional configuration is required for web. Make sure that react-native-reanimated/plugin is added to babel.config.js as mentioned in SDK 49 and below installation step.

Install the @babel/plugin-proposal-export-namespace-from Babel plugin and update the babel.config.js to load it:

babel.config.js

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

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

Terminal

- npx expo start --clear

Minimal example

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.

Using react-native-reanimated

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

Other animation libraries

Other animation packages are available, such as Moti, that you can use in your Expo project and work on Android, iOS, and web.