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 re-implementation of the react native Animated library and using this library we can create the butter smooth animations in 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.
Final result of Loop animation in React native using React native reanimated tutorial:
Step – 1: Install following modules:
- @react-navigation/native (latest version – 5.7.1 at the time of creation of this post).
@react-navigation/stack (latest version – 5.7.1 at the time of creation of this post).
react-native-gesture-handler (latest version – 1.7.0 at the time of creation of this post).
react-native-reanimated (latest version – 1.10.1 at the time of creation of this post).
react-native-redash (latest version – 14.2.3 at the time of creation of this post).
react-native-safe-area-context (latest version – 3.1.1 at the time of creation of this post).
react-native-screens (latest version – 2.9.0 at the time of 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:
- 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:
- 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 which are created using react-native-reanimated running so smooth. Just try the above code and check it.