How to Add Skeleton Loading in React Native

We see grey colored skeleton loading in many apps including Facebook. Skeleton loading makes the users get an idea of what they are about to see when the loading ends. It makes your user interface neat and clean.

So, how to add skeleton loading in react native?

First of all, install react native skeleton content library using the following command. If you are using expo, then please follow the instructions given here.

npm install react-native-skeleton-content-nonexpo

This library requires another library, react native linear gradient. If your project doesn’t have react native linear gradient then follow the installation steps given here.

You can use react native skeleton content library as given below.

<SkeletonContent
    containerStyle={{flex: 1, width: 300}}
    isLoading={true}
    layout={[
    { key: "someId", width: 220, height: 20, marginBottom: 6 },
    { key: "someOtherId", width: 180, height: 20, marginBottom: 6 },
    ]}
    >

    <Text style={styles.normalText}>
        Your content
    </Text>

    <Text style={styles.bigText}>
        Other content
    </Text>

</SkeletonContent>

The layout prop is used to define a custom layout. The children of SkeletonComponent show up when the isLoading prop is set as false.

Following is the complete example of skeleton loading in react native.

Class Component

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


export default class App extends Component {

  constructor(props){
    super(props);
    this.state={
      loading: true
    }
  }
  componentDidMount(){
    setTimeout(() => {this.setState({
      loading: false
    });},3000)
  }

  render() {
   return (
    <View style={styles.container}>
      <SkeletonContent
    containerStyle={styles.skeleton}
    isLoading={this.state.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
  }
});

Function Component

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;

And here’s the output.

Thank you for reading!!