react-native-masked-skeleton v1.0.4

react-native-masked-skeleton

This library exposes a cross-platform interface for Skeleton Loader.

Under the hood, this library is using @react-native-masked-view/masked-view, expo-linear-gradient and react-native-reanimated.

Example

Setup

# using npm
$ npm i react-native-masked-skeleton

# using yarn
$ yarn add react-native-masked-skeleton

Usage

import React from "react";
import { View } from "react-native";
import { Loader, Skeleton } from "react-native-masked-skeleton";

const Placeholder = () => {
  return (
    <Loader
      duration={3000}
      direction="leftToRight"
      colors={["#d3d3d3", "#3e3e3e"]}
      maskElement={
        <View
          style={{
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          <Skeleton
            style={{
              height: 100,
              width: 100,
              borderRadius: 100,
              marginRight: 20,
            }}
          />
          <View>
            <Skeleton
              style={{
                height: 10,
                width: 100,
                marginBottom: 10,
              }}
            />
            <Skeleton
              style={{
                height: 10,
                width: 200,
                marginBottom: 10,
              }}
            />
          </View>
        </View>
      }
    />
  );
};

Loader props

Skeleton props

Skeleton Supports all React Native View Props