Animated Expo Skeleton

Skeleton.tsx

import { StyleSheet, View, Dimensions } from "react-native";
import { useEffect, memo } from "react";
import { LinearGradient } from "expo-linear-gradient";
import Animated, {
  useSharedValue,
  withTiming,
  Easing,
  interpolate,
  useAnimatedStyle,
  withRepeat,
} from "react-native-reanimated";

interface SkeletonProps {
  /** Styles */
  style: StyleProp<ViewStyle>;
}

// Colors
const DARK_COLOR = "#dddddd";
const SHINE_COLOR = "#e8e8e8";

// Window width
const { width } = Dimensions.get("window");

// Create animated `Linear Gradient`
const AnimatedLG = Animated.createAnimatedComponent(LinearGradient);

const Skeleton = ({ style }: SkeletonProps) => {
  // Position of the shining line
  const sv = useSharedValue(0);

  // Start animation
  useEffect(() => {
    sv.value = withRepeat(
      withTiming(1, {
        duration: 1500,
        easing: Easing.inOut(Easing.quad),
      }),
      Infinity,
      true
    );
  }, [sv]);

  // Animate the movement horizontally
  const animatedStyles = useAnimatedStyle(() => {
    const translateX = interpolate(sv.value, [0, 1], [-width, width]);

    return {
      transform: [{ translateX }],
    };
  });

  return (
    <View style={[styles.container, style]}>
      <AnimatedLG
        colors={[DARK_COLOR, SHINE_COLOR, SHINE_COLOR, DARK_COLOR]}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 0 }}
        style={[styles.absoluteFill, animatedStyles]}
      />
    </View>
  );
};

export default memo(Skeleton);

const styles = StyleSheet.create({
  container: {
    backgroundColor: DARK_COLOR,
    borderColor: SHINE_COLOR,
    overflow: "hidden",
  },
  absoluteFill: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
});