Newline Proliferating Maniac

    react-native-skeleton-placeholder
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published

    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:

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

    Using npm:

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

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

    react-native link @react-native-masked-view/masked-view 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. 0 disables animation number 800
    direction Determines the animation direction "right" | "left" "right"

    SkeletonPlaceholder.Item

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

    Contributing

    You are welcome to contribute!

    License

    MIT

    Install

    npm i react-native-skeleton-placeholder

    DownloadsWeekly Downloads

    18,207

    Version

    5.0.0

    License

    ISC

    Unpacked Size

    19.4 kB

    Total Files

    10

    Last publish

    Collaborators

    • chramos