Banner Image

React Native Animation using Moti

Dashrath Singh
April 27, 2022
0 Minutes Read

scroll

down

Banner Image

Looking for other services or solutions?

ux/ui image
Explore our services

IN A nutshell

In react native, animated API is used to make animations in components. But Moti can be used to make simple animations more easily.

IN A nutshell

We are using isVisible prop to toggle the animation of header Component in react native.

Overview:

In react native, animated API is used to make animations in components. But Moti can be used to make simple animations more easily. But Moti requires react-native-reanimated 2 to work.

Links: https://moti.fyi/

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

Steps to install react native reanimated

  • Run yarn add react-native-reanimated
  • Add Reanimated’s babel plugin to your babel.config.js:

  module.exports = {

      …

      plugins: [

          …

          ‘react-native-reanimated/plugin’,

      ],

  };

  • Here is my example. Make sur you had added “react animated plugin” line to the end of the array

  • Android setup

  • Turn on Hermes engine by editing android/app/build.gradle

  • Plug Reanimated in MainApplication.java, by making these changes

For copying the code refer to https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

Note:

After installing react native reanimated 2, the Chrome debugger will now no longer work. Because of enabling hermes.

 you need to use Facebook flipper to debug the app and review the console.

Download flipper from here: https://fbflipper.com/

Now react-native  reanimated is installed we will now proceed to installing Moti in our app

  • Use  command to install moti
  • npm install moti

Usage

        

  • We are using isVisible prop to toggle the animation of header Component in react native.
0 Shares
Tweet
Share
Share
Pin