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 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}
    containerStyle={styles.myCustomStyle}
    style={styles.skeletonStyle}
  />

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