Moti uses Reanimated 3 under the hood to drive high-performance animations on iOS, Android and Web.
If you're starting a project from scratch, or just want to play around, you can use the Expo + Moti starter.
npx create-react-native-app -t with-moti
moti in your app:
Moti requires that you install
react-native-reanimated. Version 2 and 3 are both compatible.
View Reanimated compatibility options
0.17.x requires Reanimated
2.3.0 or higher. This version is compatible with Expo SDK 44.
0.16.x is compatible with Reanimated
2.2.0. This is compatible with Expo SDK 43.
0.8.x and higher requires at least Reanimated v2 stable (
2.0.0 or higher). This version is compatible with Expo starting SDK 41.
Please follow the Expo instructions for installing
Please follow Reanimated's installation instructions for v2.
Lastly, add this to the top of your
If you're using Next.js or Solito, you should not add this import to your
_app.tsx. See the Web instructions below for more.
Please see the following guides:
Moti works with Hermes as of version
0.22. It's been tested with React Native
Click here if you're using React Native 0.63.x with Hermes
Proxy under the hood, which is not supported on older versions of Hermes (see hermes#33). Follow the steps below if you're using Hermes.
v0.5.2-rc.1 of Hermes:
Relevant release notes for v0.5.2-rc1 here.
Upgrade Hermes to
As mentioned in this Moti issue, if you don't install the correct version of Hermes, you might see this error:
Your component will now fade in on the native thread at 60 FPS.