ssbeefeater / react-native-easy-content-loader Goto Github PK

Provide a placeholder at the place which need waiting for loading, Easy to implement and fun to use

• ⚙️ Customizable: Feel free to change the colors, speed, sizes, paragraphs, title and much more.;
• ⚛️ Lightweight: Lightweight with only neccessory code.;

• Getting Started
• Usage
• Options
• Examples

npm install react-native-easy-content-loader --save
yarn add react-native-easy-content-loader

import ContentLoader, { Facebook, Instagram, Bullets } from 'react-native-easy-content-loader';

<ContentLoader active />

Defaults to rgba(220, 220, 220, 1).

Defaults to rgba(200, 200, 200, 1).

Defaults to 500. The animation transition time from primaryColor to secondaryColor

Defaults to null, If given a bool value, when false, it will return children (Works as a wrapper component)

Defaults to false, true if you want to animate the compoennt.

Defaults to true. If you want to show the title, Works only with ContentLoader.

Add styles to title.

Defaults to 1. If you want to render a list of loaders, Works with all the loaders.

Defaults to false. If you want to render the avatar.

Defaults to circle. shape of the avatar, can be circle or square.

Defaults to default. can be a specific number.

Defaults to false. if you want to reverse the view.

If you want to add style to container.

Used to change the title height.

Used to change the title width.

Used to change the secondary title height Works with only Facebook and Instagram.

Used to change the secondary title width Works with only Facebook and Instagram.

Add styles to title.

Add styles to secondaryTitle. Works with only Facebook and Instagram.

Paragraph line height

Can specify same width with single value, Or could use array for different widths, eg ['100%', 200, 300]

Add paragraph styles

Change the height of the image

Add styles to image

<ContentLoader active />

<ContentLoader active avatar />

<ContentLoader active avatar loading={this.state.loading}>
  <Text>This would be rendered with loading is false</Text>
</ContentLoader>

<ContentLoader active avatar pRows={4} />

<ContentLoader active avatar pRows={4} pWidth={["100%", 200, "25%", 45]} />

import { Facebook } from 'react-native-easy-content-loader';

<Facebook active />

import { Instagram } from 'react-native-easy-content-loader';

<Instagram active />

import { Bullets } from 'react-native-easy-content-loader';

<Bullets active listSize={10} />

import ContentLoader from 'react-native-easy-content-loader';

<ContentLoader active listSize={10} />

                       |

See CHANGE_LOG.md.

Feel free to contribute, this is still in beta and I have plans to include more features in future :)