@cometchat/chat-uikit-react-native/lib/CometChatMessageList/Skeleton.js

Ready-to-use Chat UI Components for React Native

import React, { useEffect, useRef } from "react";
import { Animated, Dimensions, Easing, ScrollView, StyleSheet, View } from "react-native";
import Svg, { Defs, LinearGradient, Path, Stop } from "react-native-svg";
import { useTheme } from "../theme";
const { width: screenWidth } = Dimensions.get("window");
const SkeletonItem = () => {
    const theme = useTheme();
    const width = useRef(Math.floor(screenWidth / 2.5 + Math.random() * (screenWidth / 2.5))).current;
    const alignSelf = useRef(Math.floor(Math.random() * 2) == 0 ? "flex-end" : "flex-start").current;
    const animatedValue = useRef(new Animated.Value(0)).current;
    useEffect(() => {
        const startShimmer = () => {
            animatedValue.setValue(0);
            Animated.loop(Animated.timing(animatedValue, {
                toValue: 1,
                duration: theme.conversationStyles.skeletonStyle.speed * 1000,
                easing: Easing.linear,
                useNativeDriver: false,
            })).start();
        };
        startShimmer();
    }, [animatedValue]);
    const shimmerTranslateX = animatedValue.interpolate({
        inputRange: [0, 1],
        outputRange: [-screenWidth, screenWidth],
    });
    return (<View style={{
            overflow: "hidden",
            borderRadius: 8,
            width: width,
            marginVertical: 12,
            alignSelf: alignSelf,
        }}>
      <Svg width={width} height={53} viewBox={`0 0 ${width} 53`} fill='none'>
        <Path d={`M${width} 0H0v53h${width}V0z`} fill='url(#paint0)'/>
        <Defs>
          <LinearGradient id='paint0' x1={0} y1={26.5} x2={width} y2={26.5} gradientUnits='userSpaceOnUse'>
            <Stop stopColor={theme.conversationStyles.skeletonStyle.linearGradientColors[0]}/>
            <Stop offset={1} stopColor={theme.conversationStyles.skeletonStyle.linearGradientColors[1]}/>
          </LinearGradient>
        </Defs>
      </Svg>
      <Animated.View style={[
            { transform: [{ translateX: shimmerTranslateX }] },
            styles.animatedView,
            {
                backgroundColor: theme.conversationStyles.skeletonStyle.shimmerBackgroundColor,
                opacity: theme.conversationStyles.skeletonStyle.shimmerOpacity,
            },
        ]}></Animated.View>
    </View>);
};
export const MessageSkeleton = () => {
    return (<ScrollView showsVerticalScrollIndicator={false} scrollEnabled={false}>
      {new Array(10).fill(0).map((_, i) => {
            return <SkeletonItem key={i}/>;
        })}
    </ScrollView>);
};
const styles = StyleSheet.create({
    animatedView: {
        width: "40%",
        top: 0,
        bottom: 0,
        position: "absolute",
    },
});
//# sourceMappingURL=Skeleton.js.map