React native animations made easy with Moti

If you are a react native developer, with many years of experience,  you know what I meant when I say that make performant animations in react native could be very tedious. Okay, today I want to give you an easy solution to do great animations without very complex code and having a great performance.

For many years the animations in react native was very tedious and complex because we have 2 solutions, make animations with animated API from react-native core library, but this solution goes down our performance in the app, and the other solution was to use the reanimated library, but the version 1 is very difficult to understand, so the team of software mansion brings us a new solution, the version 2 of the reanimated library is so cool, but if you are a very new developer, or you don't have enough knowledge about animations this could be very difficult too, so Fernando Rojo Bring us the complete solution for this.

What is Moti?

Moti is a library that helps us to make very easy animations in react native with support for Next.js, this library is very easy to understand and very easy to configure, and uses reanimated2 library under the hood. The main objective is simplicity and Write once, animate anywhere. So you don't need to create the same animations many times, one for the web, another one for mobile and so, because you only need to write code once.

Highlights.

  • Universal: works on all platforms
  • 60 FPS animations run on the native thread
  • Mount/unmount animations, like Framer Motion
  • Powered by Reanimated 2
  • Intuitive API
  • Variant & keyframe animations
  • Strong TypeScript support
  • Highly-configurable animations
  • Sequence animations
  • Loop & repeat animations
  • Web support
  • Expo support
  • Next.js support.

Configuration.

in this example, we want to use the react-native CLI and add reanimated and moti from zero to build a couple of examples.

Hackemate
Software engineer, React, next.js, and Go develover
Guatemala