Skip to content

✨ Elegant Loading Skeleton for React Native – Built with Reanimated V3 Magic! ✨

License

Notifications You must be signed in to change notification settings

varunkukade/react-native-skaleton-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

npm license platform

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:

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