React Native Skeleton Loader

This is a simple library for implementing skeleton loading in React Native (Expo-compatible). There are a handful of libraries for this, but I made this out of necessity as I was unable to find a library that allowed dynamically sized skeletons based on the content instead of specifying a static size.

Installation

$3

``
npm install --save @hamidfzm/react-native-skeleton-loader
`

$3

`
yarn add @hamidfzm/react-native-skeleton-loader
`

Usage

$3

`
import Skeleton from "@hamidfzm/react-native-skeleton-loader";
`

$3

!text-example

`

Example Text


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

`
- Text elements can be wrapped without anything more than a loading prop.
- Multi-line text can be enabled by specifying a lines value of more than 1.
- lines count will split up the total height across all lines

$3


!enter image description here
`javascript
// see example folder




AK





Shrimp and Chorizo Paella


September 14, 2016











This impressive paella is a perfect party dish and a fun meal
to cook together with your guests. Add 1 cup of frozen peas
along with the mussels, if you like.




`
- The type property can display either text, circle, or rect
- For a static shape, you most likely want widthVariance to be be set to 0 (default is 20) so the width doesn't change.

Props

| Prop | Default | Type | Description |
| ----------- | --------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| loading | required | boolean | Should the skeleton display loading. |
| type | text | string | Determines the type of skeleton to display.
["text", "circle", "rect"] |
| color | #9ec0c4 | hex color | Color of loader. |
| width | null | number | Static width of loader component. null value will default to size of child.
| widthVariance | 20 | number | Random variance in loader width as a percentage.
| height | null | number | Static height of loader component. null value will default to size of child.
| heightVariance | 20 | number | Random variance in loader height as a percentage.
| pulseSpeed | 1000 | number | Pulse speed in milliseconds.
| lines | 1 | number` | Number of lines to split height into. |