SkeletonPlaceholder

SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.
Android and iOS

Installation

Note: This package requires @react-native-masked-view/masked-view and react-native-linear-gradient

Step #1

Using yarn:

1yarn add @react-native-masked-view/masked-view react-native-linear-gradient

Using npm:

1npm install @react-native-masked-view/masked-view react-native-linear-gradient --save

If you are running a react-native version below 0.60:

1react-native link @react-native-masked-view/masked-view react-native-linear-gradient

Otherwise:

1cd ios
2pod install

  

Step #2

Using yarn:

1yarn add react-native-skeleton-placeholder

Using npm:

1npm install react-native-skeleton-placeholder --save

Usage

There are two ways to use this package:

with SkeletonPlacehoder.Item 🆕

1import React from 'react';
2import {View} from 'react-native';
3import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
4
5const App = () => {
6  return (
7    <SkeletonPlaceholder borderRadius={4}>
8      <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
9        <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
10        <SkeletonPlaceholder.Item marginLeft={20}>
11          <SkeletonPlaceholder.Item width={120} height={20} />
12          <SkeletonPlaceholder.Item marginTop={6} width={80} height={20} />
13        </SkeletonPlaceholder.Item>
14      </SkeletonPlaceholder.Item>
15    </SkeletonPlaceholder>
16  );
17};

or with View, Text or Image

1import React from 'react';
2import {View} from 'react-native';
3import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
4
5const App = () => {
6  return (
7    <SkeletonPlaceholder borderRadius={4}>
8      <View style={{flexDirection: 'row', alignItems: 'center'}}>
9        <View style={{width: 60, height: 60, borderRadius: 50}} />
10        <View style={{marginLeft: 20}}>
11          <Image style={{width: 120, height: 20}} src={requre('./src/assets/image.png')} />
12          <Text style={{marginTop: 6, fontSize: 14, lineHeight: 18}}>Hello world</Text>
13        </View>
14      </View>
15    </SkeletonPlaceholder>
16  );
17};

Properties

SkeletonPlaceholder

Prop	Description	Type	Default
backgroundColor	Determines the color of placeholder	string	#E1E9EE
highlightColor	Determines the highlight color of placeholder	string (hex | rgb | rgba)	#F2F8FC
speed	Determines the animation speed in milliseconds. 0 disables animation	number	800
direction	Determines the animation direction	"right" | "left"	"right"
enabled	Determines if Skeleton should show placeholders or its children	boolean	true
borderRadius	Determines default border radius for placeholders	number	undefined

SkeletonPlaceholder.Item

Prop	Description	Type	Default
any	Any view style props was accepted	any

Contributing

You are welcome to contribute!

License

MIT