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:
#Install Reanimated 3+
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.
#If you're using Expo
Please follow the Expo instructions for installing
#If you aren't using Expo
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.
#If you're using React Native 0.63.x
v0.5.2-rc.1 of Hermes:
Relevant release notes for v0.5.2-rc1 here.
#If you're using React Native 0.64.x
Upgrade Hermes to
#Property 'Proxy' doesn't exist
As mentioned in this Moti issue, if you don't install the correct version of Hermes, you might see this error:
#Create your first animation
Your component will now fade in on the native thread at 60 FPS.