expo-skeleton-loader

Expo Skeleton Loader

A simple component to show skeleton loading animation. Works in almost all platforms.

Preview

Platform Compatibility

Android Device	Android Emulator	IOS Device	IOS Emulator	Web
✔	✔	✔	✔	✔

Installation

This project using react-native-reanimated. Please install this package as well.

Using yarn:

yarn add expo-skeleton-loader

Using npm:

npm i expo-skeleton-loader

Usage

Expo Skeleton Loader takes it's children to figure out layout using SkeletonLoader.Container and SkeletonLoader.Item

import React from "react";
import { StyleSheet, View, Dimensions, ViewStyle } from "react-native";
import SkeletonLoader from "expo-skeleton-loader";

const { width, height } = Dimensions.get("window");

const AvatarLayout = ({
  size = 100,
  style,
}: {
  size?: number,
  style?: ViewStyle,
}) => (
  <SkeletonLoader>
    <SkeletonLoader.Container
      style={[{ flex: 1, flexDirection: "row" }, style]}
    >
      <SkeletonLoader.Item
        style={{
          width: size,
          height: size,
          borderRadius: size / 2,
          marginRight: 20,
        }}
      />
      <SkeletonLoader.Container style={{ paddingVertical: 10 }}>
        <SkeletonLoader.Item
          style={{ width: 220, height: 20, marginBottom: 5 }}
        />
        <SkeletonLoader.Item style={{ width: 150, height: 20 }} />
      </SkeletonLoader.Container>
    </SkeletonLoader.Container>
  </SkeletonLoader>
);

const PostLayout = () => (
  <SkeletonLoader style={{ marginVertical: 10 }}>
    <AvatarLayout style={{ marginBottom: 10 }} />

    <SkeletonLoader.Item
      style={{ width, height: height / 3.5, marginVertical: 10 }}
    />
  </SkeletonLoader>
);

const numberOfPosts = new Array(2).fill(null);

export default function App() {
  return (
    <View style={styles.container}>
      {numberOfPosts.map((_, i) => (
        <PostLayout key={i} />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black",
    padding: 10,
  },
});

Props

SkeletonLoader

Prop	Description	Type	Default
duration	Animation speed in milliseconds	number	500
boneColor	The background color of placeholder	string	#121212
highlightColor	The highlight color of placeholder	string	#333333
style	The style of component (View Style)	ViewStyle	null

SkeletonLoader.Container

You can use any props of View component.

Prop	Description	Type	Default
style	The style of component (View Style)	ViewStyle	null

SkeletonLoader.Item

⚠️ Warning: The style must includes height and weight in order to works

You can use any props of View component.

Prop	Description	Type	Default
style	The style of component (View Style)	ViewStyle	null