React Native Skaleton Kit

A high-performance (60FPS) skeleton loading animation library for React Native, powered by Reanimated 3. Create beautiful shimmering and pulsing loading states with customizable animations.

Features

• 🌊 Smooth shimmer and pulse animations
• ⚡️ Built with Reanimated 3 for optimal performance
• 🎨 Highly customizable animations and styling
• 📱 Support for React Native CLI projects
• ✅ Supports new Architecture
• ✅ Backwards compatibility with old architecture

Demo

demo.mp4

Note: Currently available for React Native CLI projects only.

Installation

Install the package using your preferred package manager:

# Using yarn
yarn add react-native-skaleton-kit

# Using npm
npm install react-native-skaleton-kit

# For iOS, install pods
cd ios && pod install

Peer Dependencies

You'll need to install and configure the following peer dependencies if you haven't already:

• react-native-reanimated
• react-native-linear-gradient

Make sure to also follow their respective setup instructions.

Compatibility

• Minimum React Native version supported: 0.63.0 because Reanimated 3 works with RN 0.63 and above
• React Native Linear Gradient: >=2.8.3
• React Native Reanimated: Version depends on your React Native version. Please refer to the Reanimated compatibility table to select the appropriate version.

Usage

Import the necessary components and enums:

import {
  SkaletonView,
  ANIMATION_TYPE,
  ANIMATION_DIRECTION,
} from 'react-native-skaleton-kit';

Basic usage:

<SkaletonView
  viewHeight={100}
  animationType={ANIMATION_TYPE.shiver}
  direction={ANIMATION_DIRECTION.leftToRight}
  viewWidth={'100%'}
/>

For more examples, check out our example app.

Props

Name	Type	Required	Default	Description
viewHeight	DimensionValue	✅	-	Height of the skeleton view
viewWidth	DimensionValue	✅	-	Width of the skeleton view
style	ViewStyle	❌	{}	Additional styles for the container
backgroundColor	string	❌	'#DDEAF5'	Background color of the skeleton
direction	ANIMATION_DIRECTION	❌	'leftToRight'	Direction of the shimmer animation
animationType	ANIMATION_TYPE	❌	'shiver'	Type of animation ('shiver' or 'pulse')
pulseConfig	PulseConfig	❌	See below	Configuration for pulse animation

Animation Types

enum ANIMATION_TYPE {
  shiver = 'shiver',
  pulse = 'pulse'
}

Animation Directions

enum ANIMATION_DIRECTION {
  leftToRight = 'leftToRight',
  rightToLeft = 'rightToLeft',
  topToBottom = 'topToBottom',
  bottomToTop = 'bottomToTop'
}

Default Pulse Configuration

const DEFAULT_PULSE_CONFIG = {
  animationDuration: 1000,
  easing: Easing.linear,
  minOpacity: 0.4
}

License

MIT