React Native Animation using Moti

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.