Skip to content

Latest commit

 

History

History
107 lines (84 loc) · 6.05 KB

README.md

File metadata and controls

107 lines (84 loc) · 6.05 KB
Raw

Skeleton for react native and web with the latest react-native-reanimated v3

React native reanimated skeleton, a simple yet fully customizable component made to achieve loading animation in a Skeleton-style. Works for iOS, Android and web. This repo is an upgrade from react-native-reanimated v1 to v3 inspired by https://github.com/alexZajac/react-native-skeleton-content.


Installation

npm install react-native-reanimated-skeleton

Usage

  1. Import react-native-reanimated-skeleton:
import Skeleton from "react-native-reanimated-skeleton";
  1. Once you create the Skeleton, you have two options:
  • Child Layout : The component will figure out the layout of its bones with the dimensions of its direct children.
<Skeleton isLoading={true} containerStyle={styles.container}>
  <Text style={styles.normalText}>Your content</Text>
  <Text style={styles.bigText}>Other content</Text>
</Skeleton>
  • Custom Layout : You provide a prop layout to the component specifying the size of the bones (see the Examples section below). Below is an example with a custom layout. A key prop for each child is optional but highly recommended.
export default function Placeholder() {
  return (
    <Skeleton
      containerStyle={{ flex: 1, width: 300 }}
      isLoading={false}
      layout={[
        { key: "someId", width: 220, height: 20, marginBottom: 6 },
        { key: "someOtherId", width: 180, height: 20, marginBottom: 6 },
      ]}
    >
      <Text style={styles.normalText}>Your content</Text>
      <Text style={styles.bigText}>Other content</Text>
    </Skeleton>
  );
}
  1. Then simply sync the prop isLoading to your state to show/hide the Skeleton when the assets/data are available to the user.
export default function Placeholder () {
  const [loading, setLoading] = useState(true);
  return (
    <Skeleton
       containerStyle={{flex: 1, width: 300}}
        isLoading={isLoading}>
        {...otherProps}
    />
  )
}

Props

Name Type Default Description
isLoading bool required Shows the Skeleton bones when true
layout array of objects [] A custom layout for the Skeleton bones
duration number 1200 ms Duration of one cycle of animation
containerStyle object flex: 1 The style applied to the View containing the bones
easing Easing bezier(0.5, 0, 0.25, 1) Easing of the bones animation
animationType string "shiver" The animation to be used for animating the bones (see demos below)
animationDirection string "horizontalRight" Used only for shiver animation, describes the direction and end-point (ex: horizontalRight goes on the x-axis from left to right)
boneColor string "#E1E9EE" Color of the bones
highlightColor string "#F2F8FC" Color of the highlight of the bones

Expo install

react-native-linear-gradient is not supported with Expo. Therefore, a postinstall script is needed to change the import statement from react-native-linear-gradient to expo-linear-gradient. Furthermore, the postinstall script also addresses that expo-linear-gradient refers to LinearGradient as const instead of default. So the script will ensure:"

import LinearGradient from 'react-native-linear-gradient';

... transforms into ...

import { LinearGradient } from 'expo-linear-gradient';
  1. Ensure you have this script https://github.com/marcuzgabriel/react-native-reanimated-skeleton/tree/main/packages/expo/scripts
  2. Make sure postinstall is added to the package.json. Please see example: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/blob/main/packages/expo/package.json
  3. npm install and rerun the app

Examples

Please see the examples folder or storybook https://marcuzgabriel.github.io/react-native-reanimated-skeleton/?path=/docs/stories-skeleton--docs