Skip to main content
Version: 4.x

Getting started

The goal of the Fundamentals section is to help you gain a strong foundation on the core concepts of Reanimated and give you the confidence to explore more advanced use cases on your own. This section is packed with interactive examples, code snippets and explanations. Are you ready? Let's dive in!

What is React Native Reanimated?​

React Native Reanimated is a powerful animation library built by Software Mansion.

With Reanimated, you can easily create smooth animations and interactions that run on the UI thread.

Prerequisites​

Reanimated 4.x works only with the React Native New Architecture (Fabric). If your app still uses the old architecture, you can use Reanimated in version 3 which is still actively maintained.

Alternatively, you can dive into our examples on GitHub.

Installation​

It takes two steps to add Reanimated 4 to an Expo project:

Step 1: Install the package​

Install react-native-reanimated and react-native-worklets packages from npm:

npm install react-native-reanimated

Dependencies​

This library requires an installation of the react-native-worklets dependency. It was separated from react-native-reanimated for better modularity and must be installed separately.

npm install react-native-worklets

Step 2: Rebuild native dependencies​

Run prebuild to update the native code in the ios and android directories.

npx expo prebuild

And that's it! Reanimated 4 is now configured in your Expo project.

React Native Community CLI​

When using React Native Community CLI, you also need to manually add the react-native-worklets/plugin plugin to your babel.config.js.

  module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      'react-native-worklets/plugin',
    ],
  };
caution

react-native-worklets/plugin has to be listed last.

Why do I need this?

In short, the Reanimated babel plugin automatically converts special JavaScript functions (called worklets) to allow them to be passed and run on the UI thread.

Since Expo SDK 50, the Expo starter template includes the Reanimated babel plugin by default.

To learn more about the plugin head onto to Reanimated babel plugin section.

npm start -- --reset-cache

Android​

No additional steps are necessary.

iOS​

While developing for iOS, make sure to install pods first before running the app:

cd ios && pod install && cd ..

Web​

For building apps that target web using react-native-web we highly recommend to use Expo.

To use Reanimated on the web all you need to do is to install and add @babel/plugin-proposal-export-namespace-from Babel plugin to your babel.config.js.

npm install @babel/plugin-proposal-export-namespace-from
  module.exports = {
      presets: [
        ... // don't add it here :)
      ],
      plugins: [
          ...
          '@babel/plugin-proposal-export-namespace-from',
          'react-native-worklets/plugin',
      ],
  };

Make sure to list react-native-worklets/plugin last.

More advanced use cases such as running Reanimated with webpack or with Next.js are explained in a separate Web Support guide.