Skeleton

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

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 @thevsstech/react-native-skeleton

Using npm:

npm install @thevsstech/react-native-skeleton --save

Usage

There are two ways to use this package:

with SkeletonPlacehoder.Item 🆕

import React from "react";
import { View } from "react-native";
import Skeleton from "@thevsstech/react-native-skeleton";

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

or with View

import React from "react";
import { View } from "react-native";
import Skeleton from "@thevsstech/react-native-skeleton";

const App = () => {
  return (
    <Skeleton>
      <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>
    </Skeleton>
  );
};

Properties

Skeleton

| 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 |

Skeleton.Item

| Prop | Description | Type | Default | | :--: | :-------------------------------: | :--: | :-----: | | any | Any view style props was accepted | any |

Contributing

Any help this module will be appreciated!

License

MIT