Installation

Moti uses Reanimated 2 under the hood to drive high-performance animations on iOS, Android and Web.

Starter project#

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

Install Moti#

First, install moti in your app:

npm install moti

Install Reanimated 2#

Moti requires that you install react-native-reanimated. The minimum version of Reanimated it's been tested on is 2.0.0-rc.0.

If you're using Expo#

Please follow the Expo instructions for installing react-native-reanimated v2.

You'll need at least Expo SDK 40.

If you aren't using Expo#

Please follow Reanimated's installation instructions for v2.

Web support#

Please see the following guides:

Hermes/Android Support#

Moti uses Proxy under the hood, which is not supported on older versions of Hermes (see hermes#33).

If you're using React Native 0.63.x#

Install v0.5.2-rc.1 of Hermes:

npm install hermes-engine@v0.5.2-rc1

Relevant release notes for v0.5.2-rc1 here.

If you're using React Native 0.64.x#

Upgrade Hermes to 0.7.*.

Possible error#

As mentioned in this Moti issue, if you don't install the correct version of Hermes, you might see this error:

Property 'Proxy' doesn't exist, js engine: hermes [Mon Feb 08 2021 19:21:54.427] ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication), js engine: hermes

If you see this, you haven't correctly installed the right version of Hermes, so please confirm that.

Create your first animation#

import { View as MotiView } from 'moti'
export const FadeIn = () => (
<MotiView
from={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ type: 'timing' }}
/>
)

Your component will now fade in on the native thread at 60 FPS.

Edit this page