Loop animation in React native using React native reanimated

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:

Let’s start…

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:

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 which are created using react-native-reanimated running so smooth. Just try the above code and check it.

Leave a Reply

Your email address will not be published. Required fields are marked *