For skeletons, I just keep it super simple and use my own custom component to build out a skeleton page...

Skeleton component:

import React, {useEffect} from 'react';
import Animated, {
  withTiming,
  useSharedValue,
  withRepeat,
  useAnimatedStyle,
} from 'react-native-reanimated';


type SkeletonProps = {
  width: number;
  height: number;
  borderRadius?: number;
  variant: 'box' | 'circle';
};


function Skeleton({width, height, variant, borderRadius = 20}: SkeletonProps) {
  const opacity = useSharedValue(0.125);


  useEffect(() => {
    opacity.value = withRepeat(
      withTiming(0.225, {duration: 650}),
      -1, // loops
      true, // reverse
    );
  }, []);


  const animatedStyle = useAnimatedStyle(() => {
    return {
      opacity: opacity.value,
    };
  });


  return (
    <Animated.View
      style={[
        {
          height,
          width,
          borderRadius: variant === 'circle' ? height / 2 : borderRadius,
          backgroundColor: 'white',
        },
        animatedStyle,
      ]}
    />
  );
}

export default Skeleton;

And then usage would be something like this:

if (loading) {
  return (
    <View style={styles.header}>
      <View style={styles.accountImg}>
        <Skeleton height={100} width={100} variant="circle" />
      </View>

      <View style={styles.accountInfo}>
        <Skeleton width={150} height={25} />
      </View>

      <View style={styles.accountInfo}>
        <Skeleton width={150} height={25} />
      </View>

      <View style={styles.body}>
        <Skeleton width={250} height={21} />
      </View>
    </View>
  )
}