react-native-skeleton-loading

🏳️‍🌈 React Native Skeleton Loading

🟢 Skeleton Loading Component for Expo and React Native 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
✅	✅	✅

🔌 Installation

$ npm install react-native-skeleton-loading

OR

$ yarn add react-native-skeleton-loading

😎 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 'react-native-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