Availability animation - React Native Reanimated Layout animation

Introduction

In this tutorial, we will create a customizable availability loading animation for a React Native application using React Native Reanimated and React Native Moti. This animation will enhance user experience by visually indicating available items in your app, making it a great addition for micro-interactions.

Step 1: Set Up Your Project

Before diving into animations, ensure you have a React Native project set up. If you haven't done this yet, follow these steps:

1. Initialize a new React Native project:

   npx react-native init YourProjectName
   

2. Navigate to the project directory:

   cd YourProjectName
   

3. Install necessary dependencies:

   • Install react-native-reanimated and react-native-moti:

   npm install react-native-reanimated react-native-moti
   

   • Ensure you follow any additional installation steps required for Reanimated as per the documentation.

Step 2: Implement Basic Animation using React Native Reanimated

Now that your project is set up, let's create a simple entering and exiting animation.

1. Import the necessary components:

   import React from 'react';
   import { View } from 'react-native';
   import { Reanimated, Easing } from 'react-native-reanimated';
   

2. Create entering and exiting animations:

   • Define styles and animations for entering and exiting:

   const fadeIn = {
       opacity: Reanimated.useSharedValue(0),
       translateY: Reanimated.useSharedValue(-50),
   };
   
   const fadeOut = {
       opacity: Reanimated.useSharedValue(1),
       translateY: Reanimated.useSharedValue(0),
   };
   
   Reanimated.withTiming(fadeIn.opacity, {
       toValue: 1,
       duration: 500,
       easing: Easing.out(Easing.exp),
   });
   

3. Wrap your component with the animation:

   return (
       <Reanimated.View style={{
           opacity: fadeIn.opacity.value,
           transform: [{ translateY: fadeIn.translateY.value }]
       }}>
           {/* Your content here */}
       </Reanimated.View>
   );
   

Step 3: Stagger the Animation

Next, we will apply a stagger effect to the animations, giving a more dynamic feel.

1. Define staggered animations:

   • Create an array of items to animate:

   const items = [1, 2, 3, 4, 5]; // Example items
   

2. Implement the stagger effect:

   items.map((item, index) => (
       <Reanimated.View
           key={item}
           style={{
               opacity: fadeIn.opacity.value,
               transform: [{ translateY: fadeIn.translateY.value }]
           }}
           entering={Reanimated.stagger(100, [
               Reanimated.timing(fadeIn.opacity, { toValue: 1, duration: 300 }),
               Reanimated.timing(fadeIn.translateY, { toValue: 0, duration: 300 }),
           ])}
           exiting={Reanimated.timing(fadeOut.opacity, { toValue: 0, duration: 300 })}
       >
           {/* Item Content */}
       </Reanimated.View>
   ));
   

Step 4: Create a Pulse/Loading Skeleton Indicator with React Native Moti

To enhance our animation, we can implement a pulse or loading skeleton indicator using Moti.

1. Import Moti components:

   import { MotiView } from 'moti';
   

2. Implement the pulse animation:

   return (
       <MotiView
           from={{ scale: 0.8 }}
           animate={{ scale: 1 }}
           transition={{ type: 'timing', duration: 500, loop: true }}
       >
           {/* Skeleton Placeholder */}
       </MotiView>
   );
   

Conclusion

In this tutorial, you learned how to create an availability loading animation using React Native Reanimated and React Native Moti. You implemented entering and exiting animations, added a stagger effect for a dynamic look, and created a pulse skeleton indicator.

Feel free to customize your animations further to suit your app's design. Implementing these micro-interactions can significantly enhance user engagement. Explore additional animations and refine your skills to create even more captivating user experiences.