Skeleton Loader

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;

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