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

$3

`js
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,
}) => (

style={[{ flex: 1, flexDirection: "row" }, style]}
>
style={{
width: size,
height: size,
borderRadius: size / 2,
marginRight: 20,
}}
/>

style={{ width: 220, height: 20, marginBottom: 5 }}
/>




);

const PostLayout = () => (



style={{ width, height: height / 3.5, marginVertical: 10 }}
/>

);

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

export default function App() {
return (

{numberOfPosts.map((_, i) => (

))}

);
}

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

Props

$3

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

$3

> You can use any props of View component.

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

$3

> ⚠️ 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` |