🏳️‍🌈 Expo Skeleton Loading

🟢 Skeleton Loading Component for Expo powered apps

Light Weight and Robust Skeleton Loader.

• Design skeleton loading screen of your choice
• Pass colors of your choice
• Powered by Reanimated 3
• Make your apps professional in UI/UX

Compatibility

iOS	Android	Expo
✅	✅	✅

React Native CLI Equivalent

For CLI Loader (Click Here)

🔌 Installation

$ npm install expo-skeleton-loading

OR

$ yarn add expo-skeleton-loading

Setup

This package is based on react-natve-reanimated 3 so according to their documentation, you need to initialize that in babel.config.js. To do that stop the metro bundler and then add following line of code to the return object of babel.config.js when you need to configure the plugin manually

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

Expo SDK 54 and newer automatically applies this plugin for managed projects, so manual configuration is only necessary when working outside of Expo or on older SDK versions.

After adding the line of code, start the bundler or project with --clear tag like,

npx expo start --clear

This will clear the bundler cache and you are ready to go.

NOTE: If you face issues in production version like app crashes, then you will need to add @react-native-masked-view/masked-view. For that command is

npx expo install @react-native-masked-view/masked-view

😎 Displaying the skeleton loading

All you need is to just import the skeleton loading component, and in between the closing and ending tags, you can design the UI of your skeleton loading screen as shown in the code snippet below:

import SkeletonLoading from 'expo-skeleton-loading'

const App = () => {

  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>
  )

};

For Live Demo (Expo Snack)

⭐ Props for the component

Name	Type	Description
background	hex color string	Hex color string for the background of loading component
highlight	hex color string	Hex color string for the highlight of loading component

💲 Would you like to support me?

If you would like me come up with similar packages, buy me a cup of coffee to boost my energy.

▶️ Watch Tutorial Video