Adding Shimmer Effect or Skeleton UI Loader in react-native

Lets first create a new project

npx react-native init skimmerEffect

This will create a new project named skimmerEffect.

We will using a package called react-native-skeleton-placeholder

Now, lets install the dependencies required for it.

npm install react-native-skeleton-placeholder --save
npm install @react-native-community/masked-view --save

Now, move to App.js screens and modify as mine.

import React, {useState, useEffect} from 'react';
import {View, Text, Dimensions, StatusBar} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

  const {width} = Dimensions.get('window');

const App = () => {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setLoading(false);
    }, 5000);
    return () => clearTimeout(timer);
  }, []);

  return (
    <View style={{flex: 1}}>
      <StatusBar hidden={true} />
      {loading ? (
        <SkeletonPlaceholder>
          <View style={{alignItems: 'center', justifyContent: 'center'}}>
            <View
              style={{
                width: width - 30,
                height: 30,
                borderRadius: 4,
                marginTop: 20,
                marginBottom: 10,
              }}
            />
            <View
              style={{marginTop: 6, width: 80, height: 20, borderRadius: 4}}
            />
          </View>
        </SkeletonPlaceholder>
      ) : (
        <View
          style={{
            alignItems: 'center',
            justifyContent: 'center',
            marginTop: 20,
          }}>
          <Text style={{fontSize: 20}}>
            This is a long text which is for description
          </Text>
          <Text style={{fontSize: 18}}>This is a short text</Text>
        </View>
      )}
    </View>
  );
};
export default App;

Here, above instead of fetching data from server, we have set the timer so after 5 seconds only our data will display in our emulators/simulators. So, for 5 seconds we will show the shimmer effect and only after 5 seconds our data will be displays.

Lets me explain the code below.

1-3. In the first 3 line, we have imported all the necessary dependencies.

4. Here we have set our loading state as true, if our loading state is false our data will be display (https://learningaboutcode.com/using-react-hook-usestate-in-reactnative)

10. Here, we have used the useEffect method to set our timer for 5 seconds and after 5 seconds has passed, our setLoading is set to false.

18-52. Here, we are displaying our content using the ternary operator(I will explain ternary operator in my coming content). If loading is true then show the shimmer effect else show the content.

Here is the github link for this

https://github.com/TriptiPant01/shimmereffect

Please feel free to correct me.