react-native-skeleton-placeholder

> 编程语言

Open source

SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.

733 stars0 likes0 views

Website GitHub

About

SkeletonPlaceholder is a React Native library to easily create an amazing loading effect.

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:

bash

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

Using npm:

bash

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

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

bash

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

Otherwise:

bash

cd ios
pod install

Step #2

Using yarn:

bash

yarn add react-native-skeleton-placeholder

Using npm:

bash

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

Usage

There are two ways to use this package:

with SkeletonPlacehoder.Item

javascript

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

const App = () => {
  return (
    
      
        
        
          
          
        
      
    
  );
};

or with View, Text or Image

javascript

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

const App = () => {
  return (
    
      
        
        
          
          Hello world
        
      
    
  );
};

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