react-native-skeleton-placeholder
TypeScript icon, indicating that this package has built-in type declarations

5.2.4 • Public • Published

SkeletonPlaceholder

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

Buy Me A Coffee

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

Prop Description Type Default
backgroundColor Determines the color of placeholder string #E1E9EE
highlightColor Determines the highlight color of placeholder string (hex | rgb | rgba) #F2F8FC
speed Determines the animation speed in milliseconds. 0 disables animation number 800
direction Determines the animation direction "right" | "left" "right"
enabled Determines if Skeleton should show placeholders or its children boolean true
borderRadius Determines default border radius for placeholders number undefined

SkeletonPlaceholder.Item

Prop Description Type Default
any Any view style props was accepted any

Contributing

You are welcome to contribute!

License

MIT

Dependencies (0)

    Dev Dependencies (13)

    Package Sidebar

    Install

    npm i react-native-skeleton-placeholder

    Weekly Downloads

    37,016

    Version

    5.2.4

    License

    ISC

    Unpacked Size

    97 kB

    Total Files

    13

    Last publish

    Collaborators

    • chramos