Skeleton loading screens in React Native

Introduction

Skeleton loading screens show a simple placeholder while content is loading. This helps users know the app is working and improves the experience.

When fetching data from the internet and waiting for it to load

When loading images or large lists in your app

When switching between screens that need time to prepare content

When you want to avoid showing a blank screen during loading

Syntax

React Native

import React from 'react';
import { View, StyleSheet } from 'react-native';

const Skeleton = () => {
  return (
    <View style={styles.skeleton} />
  );
};

const styles = StyleSheet.create({
  skeleton: {
    backgroundColor: '#e1e9ee',
    height: 20,
    borderRadius: 4,
    marginVertical: 5
  }
});

export default Skeleton;

The skeleton is usually a simple gray box or shape that matches the content size.

You can animate the skeleton to shimmer for a nicer effect.

Examples

A simple gray rectangle as a skeleton placeholder.

React Native

const Skeleton = () => <View style={{backgroundColor: '#ccc', height: 20, width: 100, borderRadius: 4}} />;

A circular skeleton, useful for profile pictures or icons.

React Native

const SkeletonCircle = () => <View style={{backgroundColor: '#ddd', height: 50, width: 50, borderRadius: 25}} />;

Multiple skeleton lines to mimic a list loading.

React Native

const SkeletonList = () => (
  <>
    <Skeleton />
    <Skeleton />
    <Skeleton />
  </>
);

Sample App

This app shows a gray skeleton bar for 3 seconds, then displays the loaded text content.

React Native

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  skeleton: {
    width: 250,
    height: 20,
    backgroundColor: '#e1e9ee',
    borderRadius: 4
  },
  text: {
    fontSize: 18
  }
});

const Skeleton = () => <View style={styles.skeleton} />;

export default function App() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setData('Hello, this is loaded content!');
      setLoading(false);
    }, 3000);
  }, []);

  return (
    <View style={styles.container}>
      {loading ? <Skeleton /> : <Text style={styles.text}>{data}</Text>}
    </View>
  );
}

Important Notes

Keep skeleton shapes close to the real content size for better user experience.

Use subtle animations like shimmer to make loading feel smoother.

Don't keep skeletons too long; update UI as soon as data is ready.

Summary

Skeleton screens improve user experience during loading by showing placeholders.

They are simple views styled to look like the content shape.

Use them whenever your app waits for data or images to load.