react-native-skeleton-placeholder

react-native-skeleton-placeholder copied to clipboard

SkeletonPlaceholder

SkeletonPlaceholder is a React Native library to easily create an amazing loading effect with FlexBox.
Android and iOS

Installation

Note: This package requires @react-native-masked-view/masked-view and react-native-linear-gradient

Step #1

Using yarn:

yarn add @react-native-masked-view/masked-view react-native-linear-gradient

Using npm:

npm install @react-native-masked-view/masked-view react-native-linear-gradient --save

If you are running a react-native version below 0.60:

react-native link @react-native-masked-view/masked-view react-native-linear-gradient

Otherwise:

cd ios
pod install

Step #2

Using yarn:

yarn add react-native-skeleton-placeholder

Using npm:

npm install react-native-skeleton-placeholder --save

Usage

There are two ways to use this package:

with SkeletonPlacehoder.Item 🆕

import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const App = () => {
  return (
    <SkeletonPlaceholder borderRadius={4}>
      <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
        <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
        <SkeletonPlaceholder.Item marginLeft={20}>
          <SkeletonPlaceholder.Item width={120} height={20} />
          <SkeletonPlaceholder.Item marginTop={6} width={80} height={20} />
        </SkeletonPlaceholder.Item>
      </SkeletonPlaceholder.Item>
    </SkeletonPlaceholder>
  );
};

or with View, Text or Image

import React from 'react';
import {View} from 'react-native';
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';

const App = () => {
  return (
    <SkeletonPlaceholder borderRadius={4}>
      <View style={{flexDirection: 'row', alignItems: 'center'}}>
        <View style={{width: 60, height: 60, borderRadius: 50}} />
        <View style={{marginLeft: 20}}>
          <Image style={{width: 120, height: 20}} src={requre('./src/assets/image.png')} />
          <Text style={{marginTop: 6, fontSize: 14, lineHeight: 18}}>Hello world</Text>
        </View>
      </View>
    </SkeletonPlaceholder>
  );
};

Properties

SkeletonPlaceholder

SkeletonPlaceholder.Item

Contributing

You are welcome to contribute!

License

MIT