Installation
Moti uses Reanimated 3 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:
yarn
yarn add moti
npm
npm i moti --legacy-peer-deps
Install Reanimated 3+
Moti requires that you install react-native-reanimated
. Version 2 and 3 are both compatible.
View Reanimated compatibility options
If you're using Expo
Please follow the Expo instructions for installing react-native-reanimated
.
If you aren't using Expo
Please follow Reanimated's installation instructions.
Import Reanimated
Lastly, add this to the top of your App.tsx
:
import 'react-native-reanimated'
import 'react-native-gesture-handler'
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.
Web support
Please see the following guides:
Hermes
Moti works with Hermes as of version 0.22
. It's been tested with React Native 0.70+
.
Click here if you're using React Native 0.63.x with Hermes
Create your first animation
import { 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.