Setting up skeleton loader in android and ios applications (React Native and Expo) | 2023

Introduction

In today’s fast-paced digital world, user experience is everything. When it comes to mobile applications, user engagement is directly linked to how quickly your app loads and responds. Slow-loading screens can be a major turn-off for users, potentially causing them to abandon your app. But fear not; there’s a powerful solution in the form of the “React Native Skeleton Loading” library. In this article, we’ll dive into the benefits of this library and learn how to use it to enhance user experience in your React Native app.

Introducing React Native Skeleton Loading

React Native Skeleton Loading is an open-source library that simplifies the creation of elegant skeleton loading screens for your React Native applications. Skeleton loading screens serve as placeholders for your content, providing users with an immediate visual indication that something is loading. This not only improves the perceived performance of your app but also enhances the user experience.

Usage

Step 1: Set up a react-native or expo project

Step 2: Install react-native-skeleton-loading by one of following commands:

npx expo install react-native-skeleton-loading

yarn add react-native-skeleton-loading

npm install react-native-skeleton-loading

Since this react-native-skeleton-loading is based on react-native-reanimated 3, so you need to initialize that in the babel.config.js.

To do that stop the metro bundler and then edit the babel.config.js file in the root directory of the application.

Write following code block there:

plugins: ['react-native-reanimated/plugin']

After that start the metro bundler using a — clear tag to clear the cache of bundler as follows:

yarn start --clear

npx expo start --clear

Step 3: Create react-native-skeleton-loading layout

In this step we will create a customized skeleton loading layout, which later on we can use conditionally anywhere in our application till the content has been loaded from the API server.

import SkeletonLoading from 'react-native-skeleton-loading'

const LoadingScreen = () => {

  return(
    <SkeletonLoading background={"#adadad"} highlight={"#ffffff"}>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
          <View style={{ width: 100, height: 100, backgroundColor: "#adadad", borderRadius: 10 }} />

          <View style={{ flex:1, marginLeft: 10 }}>
              <View style={{ backgroundColor: "#adadad", width: "50%", height: 10, marginBottom: 3, borderRadius: 5 }} />
              <View style={{ backgroundColor: "#adadad", width: '20%', height: 8, borderRadius: 5 }} />
              <View style={{ backgroundColor: "#adadad", width: '15%', height: 8, borderRadius: 5, marginTop: 3 }} />
          </View>
        </View>
    </SkeletonLoading>
  )

};

export default LoadingScreen;

react-native-skeleton-loading has a SkeletonLoading component that takes two props background — the background color of the skeleton loading components and highlight — the highlight animation color. All the other structure of the loading screen or component is made in the tags of this SkeletonLoading component as shown above.

NOTE: It is important to give backgrounds to the children of the SkeletonLoading component.

Step 4: Using this LoadingScreen

In this step we will use this loading screen where ever we want in our application as follows:

import React from 'react';
import { View,Text } from 'react-native';
import LoadingScreen from './LoadingScreen';

const App = () => {
    const [loading, setLoading] = React.useState(true);
    
    React.useEffect(() => {
      setTimeout(() => {
        setLoading(false);
      }, 2000);
    }, [])

    if(loading){
      return( <LoadingScreen /> )
    }

    return(
        <View>
          <Text>Response from the API</Text>
        </View>
    )
}

export default App;

Here we are simulating the API wait time by using a state variable loading and setting it true by default and the after 2 seconds we are making it false and during this time we are displaying our LoadingScreen developed by react-native-skeleton-loading

The final SkeletonLoader will be something like this

ReactNativeSkeletonLoader

Conclusion

In the competitive world of mobile apps, ensuring a superior user experience is essential for attracting and retaining users. Slow-loading screens can be a significant obstacle to achieving this goal. React Native Skeleton Loading is a powerful tool that can significantly improve the user experience, ultimately leading to higher user engagement and better user retention.

By investing in the user experience of your React Native app and integrating React Native Skeleton Loading, you can provide your users with a smoother, more engaging, and visually appealing experience. This library is a game-changer for improving the perceived performance of your app and ensuring that users stay engaged. So, why wait? Elevate your React Native app with skeleton loading screens today!

You can find the official documentation on this link https://www.npmjs.com/package/react-native-skeleton-loading