Skeleton-style Loading Animation For React Native – reanimated-skeleton

reanimated-skeleton is a React Native component to create a customizable, animated, skeleton-style loading indicator using react-native-reanimated.

How to use it:

1. Install and import the reanimated-skeleton.

# NPM
$ npm i react-native-reanimated-skeleton

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

2. Create a basic skeleton loading indicator.

<Skeleton
  isLoading={true}
  containerStyle={styles.container}
>
  <Text style={styles.normalText}>Your content</Text>
  <Text style={styles.bigText}>Other content</Text>
</Skeleton>

3. Use custom layout:

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

4. Hide/show the skeleton loading indicator.

export default function Placeholder () {
  const [loading, setLoading] = useState(true);
  return (
    <Skeleton
       containerStyle={{flex: 1, width: 300}}
        isLoading={isLoading}>
        {...otherProps}
    />
  )
}

5. Available component props.

• containerStyle: the style of the container.
• duration: the duration of the animation.
• easing: the easing of the animation.
• layout: the layout of the components.
• animationType: the type of the animation.
• animationDirection: the direction of the animation.
• isLoading: the state of the animation visibility.
• boneColor: the color of the bone.
• highlightColor: the color of the highlight.
• children: the children of the component / the content that should be visible after loading.

containerStyle = styles.container,
duration = DEFAULT_CONFIG.DURATION,
easing = DEFAULT_CONFIG.EASING,
layout = [],
animationType = DEFAULT_CONFIG.ANIMATION_TYPE,
animationDirection = DEFAULT_CONFIG.ANIMATION_DIRECTION,
isLoading = DEFAULT_CONFIG.LOADING,
boneColor = DEFAULT_CONFIG.BONE_COLOR,
highlightColor = DEFAULT_CONFIG.HIGHLIGHT_COLOR,
children,

Preview:

Download Details:

Author: marcuzgabriel

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/marcuzgabriel/react-native-reanimated-skeleton

License: MIT