Creating animations in React Native just got easier!

As we already know creating fluid animations in react-native can be a bit overkill :(

The Animate API given by React Native is lacking in performance matter and does not keep our animations at 60fps.

Therefore, Software Mansion created react-native-reanimated which allows us to run complex animations on the UI thread without causing performance issues. But unfortunately, making animations with reanimated can be a lot to grasp at first and very hard to implement.

That’s where Moti enters! https://moti.fyi/

Moti, based on Reanimated 2 and inspired by Framer-Motion, gives us the ability to create 60fps animations with a simple and easy to use API.

Now let’s create a simple animation of a ball going up and down in a loop

First, we need to install react-native-reanimated@2.0.0-rc.0 and Moti

npm install react-native-reanimated@2.0.0-rc.0 moti

If you are using yarn

yarn add react-native-reanimated@2.0.0-rc.0 moti

Now let's import View from Moti and name it as MotiView

import { View as MotiView } from "moti";

All we have to do is give MotiView from, animation and transition and that’s it

export default function App() {
return (
<View style={styles.container}>
<MotiView
from={{ translateY: -100 }}
animate={{ translateY: 100 }}
transition={{ type: "timing",loop:true }}
style={styles.shape}
></MotiView>
</View>);}

As you can see our animation is staying at 60fps and does not make the JS thread busy. You can create some heavy js logic behind and it will not cause lagging in our animation.

This awesome library was created by Fernando Rojo

Where I discovered about this library: https://www.youtube.com/watch?v=ynSfSf9w99M&t=3108s&ab_channel=CatalinMiron