rns
@beatjs/react-native-skeleton-placeholder
npm i @beatjs/react-native-skeleton-placeholder
rns

@beatjs/react-native-skeleton-placeholder

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

by Henrique Ramos

4.0.2 (see all)License:ISCTypeScript:Not Found
npm i @beatjs/react-native-skeleton-placeholder
Readme

SkeletonPlaceholder

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

Installation

Note: This package requires the dependency @react-native-masked-view/masked-view.

Step #1

Using yarn:

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

Using npm:

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

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

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

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

PropDescriptionTypeDefault
backgroundColorDetermines the color of placeholderstring#E1E9EE
highlightColorDetermines the highlight color of placeholderstring#F2F8FC
speedDetermines the animation speed in millisecondsnumber800

SkeletonPlaceholder.Item

PropDescriptionTypeDefault
anyAny view style props was acceptedany

Contributing

You are welcome to contribute!

License

MIT

Downloads/wk

22

GitHub Stars

465

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

7

OPEN ISSUES

18

OPEN PRs

8
VersionTagPublished
4.0.2
latest
1yr ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate