Skeleton Loader
A collection of versatile skeleton loaders including Circle, Button, Card, and List Item variants with shimmering animation.
Component Features and Props
How to Use Skeleton Loader Component
Installation Guide for Skeleton Loader
Component Props
Specifications
| Prop | Type | Default | Description |
|---|---|---|---|
width | DimensionValue | 100% | Width of the skeleton |
height | DimensionValue | 20 | Height of the skeleton |
borderRadius | number | 8 | Border radius |
style | ViewStyle | - | Custom container styles |
Install
TERMINAL
$ npx expo install expo-linear-gradient expo-vector-iconsComponent Code
Component.tsx
1import React, { useEffect, useRef } from 'react';
2import { View, StyleSheet, Animated, ViewStyle, DimensionValue, Easing } from 'react-native';
3import { LinearGradient } from 'expo-linear-gradient';
4import { MaterialCommunityIcons } from '@expo/vector-icons';
5
6interface SkeletonProps {
7 width?: DimensionValue;
8 height?: DimensionValue;
9 borderRadius?: number;
10 style?: ViewStyle;
11}
12
13const SkeletonBase = ({
14 width = '100%',
15 height = 20,
16 borderRadius = 8,
17 style,
18}: SkeletonProps) => {
19 const shimmer = useRef(new Animated.Value(-1)).current;
20 const pulse = useRef(new Animated.Value(0.6)).current;Usage
Usage.tsx
import React from 'react';
import { StyleSheet, ScrollView, View, Text, SafeAreaView } from 'react-native';
import {
SkeletonCard,
SkeletonCircle,
SkeletonListItem,
SkeletonButton,
SkeletonVideo,
} from './components/SkeletonLaoder';
export default function App() {
return (
<SafeAreaView style={styles.safe}>
<ScrollView contentContainerStyle={styles.container}>
<Label>Avatar Row</Label>
<View style={styles.row}>
{[1, 2, 3, 4].map((i) => (
<View key={i} style={{ marginRight: 12 }}>100%
Interactive Preview running on Expo Web.
Gestures and animations are simulated.
100%