This tutorial is focused on skeleton screen in react native. Here you will learn skeleton loading in react native. I explained simply about react native skeleton loader example. step by step explain how to add loader in react native. follow bellow step for how to add skeleton loading in react native.

In this example, We will skeleton screen is animated placeholder that simulates the layout of website or App while data being loaded This let’s user know that some content is loading… and more importantly what type of data it is, whether it is image, card etc.”

In the first step run the following command to create a project.

expo init ExampleApp

In this step,you can install react-native-skeleton-content command in your terminal.

npm install react-native-skeleton-content-nonexpo

In this step, You will open the App.js file and put the code.

import React, {useState, useEffect} from 'react';
import {View, StyleSheet, Text} from 'react-native';
import SkeletonContent from 'react-native-skeleton-content-nonexpo';

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

  return (
    <View style={styles.container}>
      <SkeletonContent
        containerStyle={styles.skeleton}
        isLoading={loading}
        layout={[
          {key: 'title', width: 350, height: 100, margin: 20},
          {key: 'description', width: 350, height: 200, margin: 20},
        ]}>
        <Text style={styles.text}>
          Cultivated who resolution connection motionless did occasional.
          Journey promise if it colonel.
        </Text>

        <Text style={styles.text}>
          Can all mirth abode nor hills added. Them men does for body pure. Far
          end not horses remain sister. Mr parish is to he answer roused piqued
          afford sussex. It abode words began enjoy years no do no. Tried spoil
          as heart visit blush or.
        </Text>
      </SkeletonContent>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  skeleton: {
    flex: 1,
    width: '100%',
  },
  text: {
    fontSize: 18,
    margin: 20,
  },
});

export default App;

In the last step run your project using the below command.

expo start

You can QR code scan in Expo Go Application on mobile.

It will help you...