Step-by-Step Guide: Welcome Screen with Lottie-React-Native Animation

In this tutorial, we will learn step by step guide to creating a Welcome screen with Lottie-React-Native animation. Lottie is a JavaScript library that can natively render Adobe After Effects animations exported as JSON with Bodymovin on the web, iOS, Android, React Native, and Windows platforms.

We can use the Lottie-react-native is a wrapper for Lottie that allows us to use Lottie animations in the React Native application. You can install it using npm by running.

npm i lottie-react-native

We have three main objectives in this tutorial on React native Lottie animation

Learning how to use Lottie-react-native animation
Lottie-react-native and animation json
React navigation to navigate between the welcome and home screens.
React native async storage to store and check if the Welcome screen is visited or not.

Creating and configuring third-party library in our Welcome screen with the Lottie-React-Native project.

Let’s first create our project or react native Lottie animation project using Expo and install all the required libraries, We also need to install the react-navigation library or we can use the Expo router. In this example, we are using the React navigation native library.

npx create-expo-app WelcomeApps
cd WelcomeApps

npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install react-native-onboarding-swiper
npm install react-native-safe-area-context
npm i @react-native-async-storage/async-storage

Welcome Screen with Lottie-React-Native Animation

Creating asyncStorage functions in utils/asyncStorage.js file

We need async storage in our project to validate whether users already visited to welcome page or not. If users already visited then we need to navigate directly to HomeScreen. Here is our code for the async storage file.

import AsyncStorage from "@react-native-async-storage/async-storage";

export const storeData = async (key, value) => {
  try {
    await AsyncStorage.setItem(key, value);
  } catch (e) {
    console.log("Error for storing aysnc ", e);
  }
};

export const getData = async (key) => {
  try {
    const value = await AsyncStorage.getItem(key);
    return value;
  } catch (e) {
    console.log("Error for retrieving aysnc ", e);
  }
};

export const removeData = async (key) => {
  try {
    await AsyncStorage.removeItem(key);
  } catch (e) {
    console.log("Error for removing aysnc ", e);
  }
};

Creating navigation Component

We need to create a custom AppNavigation component to validate if a user already visited or not. if visited already on WelcomeScreen then we need to navigate to HomeScreen. Let’s create a navigation folder on the root page and add a file called navigation/appNavigation.js and let import the asyncStorage functions.

import { StyleSheet } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "../screens/HomeScreen";
import WelcomeScreen from "../screens/WelcomeScreen";
import { useEffect, useState } from "react";
import { getData } from "../utils/asyncStorage";

const Stack = createNativeStackNavigator();

const AppNavigation = () => {
  const [showWelcome, setShowWelcome] = useState(null);

  useEffect(() => {
    checkAlreadyVisited();
  }, []);

  const checkAlreadyVisited = async () => {
    let isWelcomeVisited = await getData("isVisited");

    if (isWelcomeVisited == "yes") {
      setShowWelcome(false);
      // hide WelcomeScreen
      alert('Home')
    } else {
      alert('Welcome')
      // show WelcomeScreen
      setShowWelcome(true);
    }
  };

  if (showWelcome === null) {
    return null;
  }

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={showWelcome ? "Welcome" : "Home"}>
        <Stack.Screen
          name="Welcome"
          options={{ headerShown: false }}
          component={WelcomeScreen}
        />
        <Stack.Screen
          name="Home"
          options={{ headerShown: false }}
          component={HomeScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigation;

const styles = StyleSheet.create({});

In App.js let import the AppNavigation component.

import AppNavigation from "./navigation/appNavigation";

export default function App() {
  return <AppNavigation />;
}

Create WelcomeScreen component

Let’s create our custom WelcomeScreen component with Lottie

We downloaded three free Lottie JSON animations from https://lottiefiles.com/ and clicked on “Discover” and “Free Animations.”

To align the Lottie-react-native animation component in the center of a welcome screen in React Native, you can follow these steps:

Create a new React Native component for your welcome screen, let’s call it Screen/WelcomeScreen.js.
Import the necessary components from React Native
Define your WelcomeScreen component and style it using CSS
Once the user clicks on the onHandleDone button, we need to do two things, first set isVisited of a variable to yes, save in async local storage and second navigate to HomeScreen.

import {
  StyleSheet,
  View,
  Dimensions,
  TouchableOpacity,
  Text,
} from "react-native";
import React from "react";
import Onboarding from "react-native-onboarding-swiper";
import LottieView from "lottie-react-native";
import { useNavigation } from "@react-navigation/native";
import { storeData } from "../utils/asyncStorage";

const { width, height } = Dimensions.get("window");

const WelcomeScreen = () => {
  const navigation = useNavigation();

  const onHandleDone = () => {
    storeData("isVisited", "yes");
    navigation.navigate("Home");
  };

  const onHandleSkip = () => {
    storeData("isVisited", "yes");
    navigation.navigate("Home");
  };

  const onHandleDoneButton = ({ ...props }) => {
    return (
      <TouchableOpacity style={styles.button} {...props}>
        <Text>Done</Text>
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <Onboarding
        onDone={onHandleDone}
        onSkip={onHandleSkip}
        DoneButtonComponent={onHandleDoneButton}
        bottomBarHighlight={false}
        containerStyles={{ paddingHorizontal: 15 }}
        pages={[
          {
            backgroundColor: "#635CD7",
            image: (
              <View>
                <LottieView
                  style={styles.animation}
                  source={require("../assets/animations/welcome.json")}
                  autoPlay
                  loop
                />
              </View>
            ),
            title: "Welcome *** Apps",
            subtitle: "Unlock Your Potential Through Learning",
          },
          {
            backgroundColor: "#234337",
            image: (
              <View style={styles.animation}>
                <LottieView
                  source={require("../assets/animations/knowledge.json")}
                  autoPlay
                  loop
                />
              </View>
            ),
            title: "Knowledge at Your Fingertips",
            subtitle: "Learn Anything, Anytime, Anywhere",
          },
          {
            backgroundColor: "#453fff",
            image: (
              <View style={styles.animation}>
                <LottieView
                  source={require("../assets/animations/fav.json")}
                  autoPlay
                  loop
                />
              </View>
            ),
            title: "Ignite Your Curiosity",
            subtitle: "Fueling Lifelong Learning Together",
          },
        ]}
      />
    </View>
  );
};

export default WelcomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
  },
  animation: {
    width: width * 0.7,
    height: width * 0.7,
    marginTopBottom: -10,
  },
  button: {
    // borderTopLeftRadius: 10,
    // borderBottomLeftRadius: 10,
    backgroundColor: "white", // Button background color
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    marginRight: 5,
  },
});

Creating HomeScreen

On the Home page, we have also an example of react native Lottie animation with JSON file and button to remove isVisited variable from local storage, allows us to navigated back to WelcomeScreen. Here is the code for Screen/HomeScreen.jsx file

import {
  StyleSheet,
  SafeAreaView,
  Text,
  View,
  Dimensions,
  TouchableOpacity,
} from "react-native";
import React from "react";
import LottieView from "lottie-react-native";
import { removeData } from "../utils/asyncStorage";
import { useNavigation } from "@react-navigation/native";
import { useEffect } from "react";

const { width, height } = Dimensions.get("window");

const HomeScreen = () => {
  const navigation = useNavigation();

  const handleReset = async () => {
    await removeData("isVisited");
    navigation.push("Welcome");
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.animation}>
        <LottieView
          source={require("../assets/animations/conffetti.json")}
          autoPlay
          loop
        />
        <Text style={styles.title}>Welcome to My App</Text>
        <Text style={styles.subtitle}>Start Learning Now</Text>

        <TouchableOpacity onPress={handleReset} style={styles.button}>
          <Text style={styles.buttonText}>Reset</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f0f0f0",
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    marginBottom: 20,
  },
  animation: {
    width: width * 0.9,
    height: width,
  },
  text: {
    textAlign: "center",
    fontSize: 20,
    fontWeight: "bold",
    marginBottom: 20,
  },
  button: {
    backgroundColor: '#3498db',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5
  },
  buttonText: {
    color: "#000", // Text color
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
  },
});

Conclusion

In this tutorial, we have learned Lottie-react-native animation using JSON file on WelcomeScreen page. We also demonstrated with react native async storage.

Related React Tutorial