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.
- 🌊 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.mp4
Note: Currently available for React Native CLI projects only.
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
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.
- 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.
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.
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 |
enum ANIMATION_TYPE {
shiver = 'shiver',
pulse = 'pulse'
}
enum ANIMATION_DIRECTION {
leftToRight = 'leftToRight',
rightToLeft = 'rightToLeft',
topToBottom = 'topToBottom',
bottomToTop = 'bottomToTop'
}
const DEFAULT_PULSE_CONFIG = {
animationDuration: 1000,
easing: Easing.linear,
minOpacity: 0.4
}
MIT