react-native-skeletons

React Native Skeletons

Fully customizable small library with no extra dependencies for creating animated loading skeletons.

Installation

yarn add react-native-skeletons

or

npm install react-native-skeletons

Usage

Simple skeleton:

<Skeleton width={'100%'} height={14} />

Skeleton with circle prop:

<Skeleton circle width={40} height={40} />

Skeleton with count prop:

<Skeleton count={4} width={'100%'} height={14} />

Props Reference

Prop	Description	Default
color	The background color of the skeleton.	#ebebeb
width	The width of the skeleton.	100%
height	The height of each skeleton line.
borderRadius	The border radius of the skeleton.	4
count	The number of lines of skeletons.	1
circle	Makes the skeleton circular by setting borderRadius to 50%.	false
style	A custom style for the individual skeleton elements which is used alongside the default style
containerStyle	A custom style for the container of multiple skeletons that wraps the individual skeleton elements. NOTE: this will only apply when count value is greater than 1, else you can use style
spacing	Value for setting marginBottom when using with multiple skeleton elements. NOTE: this will only apply when count value is greater than 1

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT