A fully customizable small library with zero dependencies for creating animated loading skeletons.
yarn add react-native-skeletonsor
npm install react-native-skeletonsor
Copy this file
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} />| 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
|
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT