expo-skeleton

Skeleton Loading Component for Expo mobile applications

• Fully customizable, custom shapes, colors
• Smooth and fast

Compatibility

iOS	Android	React Native Cli
✅	✅	✅

🔌 Installation

$ npm install expo-skeleton

OR

$ yarn add expo-skeleton

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

};

⭐ 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