Hello Guys, I hope you all are doing well.
Today I am going to show you how we can run an animation on 60FPS using react-native-reanimated and react-native-redash libraries. We will create a very simple Loop animation in React Native using React native reanimated and React native redash. Actually, react-native-reanimated library (originally developed by Krzysztof Magiera) is a re-implementation of the react-native Animated library and using this library we can create the butter smooth animations in a declarative way and can achieve 60FPS and react-native-redash library (originally developed by William Candillon) provides utility functions to create animations using react-native-reanimated.
The final result of Loop animation in React native using React native reanimated tutorial:
Let’s start…
Step – 1: Install the following modules:
- @react-navigation/native (version – 5.7.1 at the time of the creation of this post).
-
@react-navigation/stack (version – 5.7.1 at the time of the creation of this post).
-
react-native-gesture-handler (version – 1.7.0 at the time of the creation of this post).
-
react-native-reanimated (version – 1.10.1 at the time of the creation of this post).
-
react-native-redash (version – 14.2.3 at the time of the creation of this post).
-
react-native-safe-area-context (version – 3.1.1 at the time of the creation of this post).
-
react-native-screens (version – 2.9.0 at the time of the creation of this post).
Step – 2: Create a folder named src (under the root directory) and two files (loop.js & navigation.js) under src.
Step – 3: Write code to setup navigation inside navigation.js file:
Explanation:
- In the above code, we are setting up navigation. We are just creating a Stack Navigator with some header styling.
Step – 4: Here the magic begins, Write code to create loop animation inside loop.js file:
Explanation:
- useValue is a hook provided by react-native-redash to create a new Animated Value and maintains the identity during the whole component lifecycle.
- useCode is again a hook provided by the react-native-reanimated library. This hook allows us to write the animation related code inside the functional component. useCode is equivalent to <Animated.Code>…</Animated.Code>.
- set function is used to assign/update the animated value.
- loop (provided by redash) is a utility function which is responsible to perform the loop animation.
Step – 5: Import Navigation module inside App.js file.
Enjoy guys, I hope you liked this post. Believe me, animations that are created using react-native-reanimated run so smooth. Just try the above code and check it out.