SkeletonPlaceholder

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

| Example 1 | Example 2 | | :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | | | |

Installation

Using yarn:

yarn add react-native-skeleton-placeholder

Using npm:

npm install react-native-skeleton-placeholder --save

Usage

Example 1:

import React from "react";
import { SafeAreaView, View } from "react-native";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";

class App extends React.Component {
  render() {
    return (
      <SafeAreaView>
        <SkeletonPlaceholder>
          <View style={{ width: "100%", height: 140 }} />
          <View
            style={{
              width: 100,
              height: 100,
              borderRadius: 100,
              borderWidth: 5,
              borderColor: "white",
              alignSelf: "center",
              position: "relative",
              top: -50
            }}
          />
          <View style={{ width: 120, height: 20, alignSelf: "center" }} />
          <View
            style={{
              width: 240,
              height: 20,
              alignSelf: "center",
              marginTop: 12
            }}
          />
        </SkeletonPlaceholder>
      </SafeAreaView>
    );
  }
}

export default App;

Example 2:

import React from "react";
import { SafeAreaView, View } from "react-native";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";

class App extends React.Component {
  render() {
    return (
      <SafeAreaView>
        {[0, 1, 2, 3, 4].map((_, index) => (
          <View key={index} style={{ marginBottom: 12 }}>
            <SkeletonPlaceholder>
              <View style={{ flexDirection: "row" }}>
                <View style={{ width: 100, height: 100 }} />

                <View
                  style={{
                    justifyContent: "space-between",
                    marginLeft: 12,
                    flex: 1
                  }}
                >
                  <View style={{ width: "50%", height: 20 }} />
                  <View style={{ width: "30%", height: 20 }} />
                  <View style={{ width: "80%", height: 20 }} />
                </View>
              </View>
            </SkeletonPlaceholder>
          </View>
        ))}
      </SafeAreaView>
    );
  }
}

export default App;

Prop

| Prop | Description | Type | Default | | :-----------------: | :------------------------------------: | :----: | :------: | | backgroundColor | The color of placeholder | string | "#eee" | | minOpacity | Min opacity value when it is animating | number | 0.3 | | maxOpacity | Max opacity value when it is animating | number | 1.0 |

Contributing

Any help this module will be approciate!

License

MIT