React Native: How to implement a skeleton loader in React Native?

1import { View, StyleSheet, Animated } from "react-native";
2import { useEffect, useRef } from "react";
3
4function SkeletonLoader() {
5  const pulseAnim = useRef(new Animated.Value(0.3)).current;
6
7  useEffect(() => {
8    Animated.loop(
9      Animated.sequence([
10        Animated.timing(pulseAnim, {
11          toValue: 1,
12          duration: 800,
13          useNativeDriver: true,
14        }),
15        Animated.timing(pulseAnim, {
16          toValue: 0.3,
17          duration: 800,
18          useNativeDriver: true,
19        }),
20      ])
21    ).start();
22  }, []);
23
24  return (
25    <View style={styles.container}>
26      <Animated.View style={[styles.avatar, { opacity: pulseAnim }]} />
27      <View style={styles.lines}>
28        <Animated.View style={[styles.line, { opacity: pulseAnim }]} />
29        <Animated.View style={[styles.shortLine, { opacity: pulseAnim }]} />
30      </View>
31    </View>
32  );
33}
34
35const styles = StyleSheet.create({
36  container: { flexDirection: "row", padding: 16 },
37  avatar: { width: 50, height: 50, borderRadius: 25, backgroundColor: "#E0E0E0" },
38  lines: { flex: 1, marginLeft: 16 },
39  line: { height: 12, backgroundColor: "#E0E0E0", marginBottom: 8, borderRadius: 4 },
40  shortLine: { height: 12, backgroundColor: "#E0E0E0", width: "60%", borderRadius: 4 },
41});