react-native-reanimated-skeleton v1.5.1

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.

Usage

1. Import react-native-reanimated-skeleton:

import Skeleton from "react-native-reanimated-skeleton";

2. 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>
  );
}

3. 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

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 it is added to the package.json within scripts postinstall. Please see example: https://github.com/marcuzgabriel/react-native-reanimated-skeleton/tree/main/packages/expo

Examples

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