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.