Moti uses Reanimated 2 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
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 haven't upgraded Reanimated past
2.0.0-rc.0, you can also use Moti
0.7.x. However, I recommend upgrading to get the latest features/fixes.
Please follow the Expo instructions for installing
You'll need at least Expo SDK 40, but I recommend using SDK 41.
Please follow Reanimated's installation instructions for v2.
Please see the following guides:
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:
If you're using Inline Requires, you might need to import
react-native-reanimated in the root of your app before using any Moti code.
Only do this if you notice your app isn't working with Moti and you have inline requires enabled.
Your component will now fade in on the native thread at 60 FPS.