This package has been deprecated

Author message:

WARNING: This project has been renamed to @thevsstech/react-native-skeleton. Install using @thevsstech/react-native-skeleton instead.

rn-skeleton

2.0.9 • Public • Published

SkeletonPlaceholder

SkeletonPlaceholder is a React Native library to easily create an amazing loading effect. [ANDROID & IOS]

This package includes the dependency **react-native-linear-gradient**

Installation

Note: If your project already includes the react-native-linear-gradient you can skip the Step #1

Step #1

Using yarn:

yarn add react-native-linear-gradient

Using npm:

npm install  react-native-linear-gradient --save

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

react-native link 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>
      <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
        <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
        <SkeletonPlaceholder.Item marginLeft={20}>
          <SkeletonPlaceholder.Item width={120} height={20} borderRadius={4} />
          <SkeletonPlaceholder.Item
            marginTop={6}
            width={80}
            height={20}
            borderRadius={4}
          />
        </SkeletonPlaceholder.Item>
      </SkeletonPlaceholder.Item>
    </SkeletonPlaceholder>
  );
};

or with View

import React from "react";
import { View } from "react-native";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";
 
const App = () => {
  return (
    <SkeletonPlaceholder>
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <View style={{ width: 60, height: 60, borderRadius: 50 }} />
        <View style={{ marginLeft: 20 }}>
          <View style={{ width: 120, height: 20, borderRadius: 4 }} />
          <View
            style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}
          />
        </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 #F2F8FC
speed Determines the animation speed in milliseconds number 800

SkeletonPlaceholder.Item

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

Contributing

Any help this module will be appreciated!

License

MIT

Package Sidebar

Install

npm i rn-skeleton

Weekly Downloads

99

Version

2.0.9

License

ISC

Unpacked Size

534 kB

Total Files

71

Last publish

Collaborators

  • thevsstech