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@next package from npm:

NPM

npm install react-native-reanimated@next

YARN

yarn add react-native-reanimated@next

Step 2: Rebuild native dependencies

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

NPM

npx expo prebuild

YARN

yarn 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-reanimated/plugin plugin to your babel.config.js.

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

caution

react-native-reanimated/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.

Clear Metro bundler cache (recommended)

NPM

npm start -- --reset-cache

YARN

yarn 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

npm install @babel/plugin-proposal-export-namespace-from

YARN

yarn add @babel/plugin-proposal-export-namespace-from

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

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

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