id | title | sidebar_label |
---|---|---|
installation |
Installation |
Installation |
Installing Reanimated requires a couple of additional steps compared to installing most of the popular React Native packages. Specifically on Android the setup consist of adding additional code to the main application class. The steps needed to get Reanimated properly configured are listed in the below paragraphs.
First step is to install react-native-reanimated
as a dependency in your project:
yarn add react-native-reanimated
Add Reanimated's babel plugin to your babel.config.js
:
module.exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
:::caution
Reanimated plugin has to be listed last.
:::
:::info
After adding the react-native-reanimated/plugin
to your project you may encounter a false-positive "Reanimated 2 failed to create a worklet" error. In most cases, this can be fixed by cleaning the application's cache. Depending on your workflow or favourite package manager that could be done by:
yarn start --reset-cache
npm start -- --reset-cache
expo start -c
or other.
:::
- Turn on Hermes engine by editing
android/app/build.gradle
project.ext.react = [
enableHermes: true // <- here | clean and rebuild if changing
]
- Plug Reanimated in
MainApplication.java
import com.facebook.react.bridge.JSIModulePackage; // <- add
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
...
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
...
@Override
protected String getJSMainModuleName() {
return "index";
}
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage(); // <- add
}
};
...
You can refer to this diff that presents the set of the above changes made to a fresh React Native project in our Playground repo.
If you're using Proguard, make sure to add rules preventing it from optimizing Turbomodule classes:
-keep class com.swmansion.reanimated.** { *; }
-keep class com.facebook.react.turbomodule.** { *; }
As Reanimated is setup to configure and install automatically, the only thing you have to do is to run pod install
in the ios/
directory. Note that the auto-installation setup works for the standard React Native apps, if you have problems setting it up with a custom setup (e.g. brownfield) please start a new issue where we can find a way to guide you through that process.
If you are having trouble configuring Reanimated in your project, or just want to try the library without the need of setting it up on a fresh project we recommend checking our Reanimated Playground repo, which is essentially a fresh React Native app with Reanimated library installed and configured properly. Visit the Playground repo here or copy the command below to do a git clone:
git clone https://github.com/software-mansion-labs/reanimated-2-playground.git