React Native Skeletons

A fully customizable small library with zero dependencies for creating animated loading skeletons.

Docs & Examples

• Installation
• Usage
• Props Reference

Installation

yarn add react-native-skeletons

or

npm install react-native-skeletons

or

Copy this file

Usage

Simple one line skeleton:

  <Skeleton />

Skeleton with circle:

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

Skeleton with count value:

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

Skeleton with custom styles:

  <Skeleton
    count={4}
    width={'100%'}
    height={14}
    color={'grey'}
    borderRadius={10}
    style={styles.myCustomStyle}
  />

Skeleton with spacing value:

   <Skeleton count={14} spacing={20} />

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. (Can't use if `circle` is being used )	14
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 half of width.	false
style	A custom style for the individual skeleton elements which is used alongside the default 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