Initial commit: expo-popcore-app

components/skeleton/skeleton.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useRef } from 'react'
+import { View, StyleSheet, Animated, Easing } from 'react-native'
+
+interface SkeletonProps {
+    width?: number | string
+    height?: number | string
+    borderRadius?: number
+    style?: any
+}
+
+export function Skeleton({
+    width = '100%',
+    height = 20,
+    borderRadius = 4,
+    style,
+}: SkeletonProps) {
+    const animatedValue = useRef(new Animated.Value(0)).current
+
+    useEffect(() => {
+        const animation = Animated.loop(
+            Animated.sequence([
+                Animated.timing(animatedValue, {
+                    toValue: 1,
+                    duration: 1000,
+                    easing: Easing.linear,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(animatedValue, {
+                    toValue: 0,
+                    duration: 1000,
+                    easing: Easing.linear,
+                    useNativeDriver: true,
+                }),
+            ])
+        )
+        animation.start()
+        return () => animation.stop()
+    }, [animatedValue])
+
+    const opacity = animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.3, 0.7],
+    })
+
+    return (
+        <Animated.View
+            style={[
+                {
+                    width,
+                    height,
+                    borderRadius,
+                    backgroundColor: '#1C1E22',
+                    opacity,
+                },
+                style,
+            ]}
+        />
+    )
+}
+