System Skeletons

1import React, { useEffect, useRef } from 'react';
2import { View, StyleSheet, Animated, ViewStyle, DimensionValue, Easing, Dimensions } from 'react-native';
3import { LinearGradient } from 'expo-linear-gradient';
4import { MaterialCommunityIcons } from '@expo/vector-icons';
5
6const SCREEN_WIDTH = Dimensions.get('window').width;
7
8interface BaseProps {
9    width?: DimensionValue;
10    height?: DimensionValue;
11    borderRadius?: number;
12    style?: ViewStyle;
13}
14
15// --- ALIVE ENGINE (2s Pulse + Sheen) ---
16const SkeletonBase = ({ width, height, borderRadius = 8, style }: BaseProps) => {
17    const sheenAnim = useRef(new Animated.Value(0)).current;
18    const pulseAnim = useRef(new Animated.Value(0.7)).current;
19
20    useEffect(() => {

import React from 'react';
import { StyleSheet, ScrollView, View, Text, SafeAreaView } from 'react-native';
import {
    SkeletonProductCard,
    SkeletonProfileHeader,
    SkeletonSearchBar,
    SkeletonToggleItem,
    SkeletonFAB
} from './components/FinalLoaders';

export default function App() {
    return (
        <SafeAreaView style={styles.safe}>
            <ScrollView contentContainerStyle={styles.container}>
                <Label>Search Bar</Label>
                <SkeletonSearchBar />

                <Label>Profile Header Layout</Label>
                <SkeletonProfileHeader />