About this animation
A React Native skeleton loader gives people immediate layout context while data or media is still arriving. This component accepts your own placeholder composition, then moves one synchronized diagonal sheen across every SkeletonBlock instead of running disconnected animations for each row. Use it for profile cards, feeds, dashboards, product details, or any screen where the final layout is predictable before content loads. Reanimated keeps the shared transform on the UI thread, and Expo Linear Gradient produces the soft highlight across the clipped surface. Set loading to false to reveal the real children, tune the duration and colors to match your theme, and choose rectangular, rounded, or circular blocks for the layout.
When to use it
- Preview a feed layout while requests complete.
- Hold space for cards, avatars, and text rows.
- Avoid layout shifts around slow media.
- Replace a generic spinner with contextual feedback.
A synchronized diagonal sheen for loading placeholders.
How it works
- Pass a layout of
SkeletonBlockshapes throughplaceholder. - One UI-thread transform sweeps a wide gradient across the clipped surface.
- Set
loading={false}to reveal the supplied content.
Install
npx expo install expo-linear-gradient react-native-reanimated
Usage
<ShimmerSkeleton
loading={loading}
placeholder={<SkeletonBlock height={80} />}
>
<LoadedContent />
</ShimmerSkeleton>Props
loading, placeholder, duration, color, highlightColor, style, and accessibilityLabel control the group. SkeletonBlock accepts width, height, variant, and color.
Compatibility
Expo SDK 57, React Native 0.86, Reanimated 4.5; iOS, Android, and web unverified.
Accessibility
Reports busy state and uses a static highlight when reduced motion is enabled.
FAQ
- Does the shimmer skeleton require a development build?
- It only depends on Expo Linear Gradient and Reanimated 4.5 for Expo SDK 57. The manifest currently marks iOS, Android, and web as supported but not yet visually verified.
- Can I build a custom skeleton layout?
- Yes. Pass any composition of SkeletonBlock elements through placeholder, then set each block's width, height, variant, and color.
- What happens when Reduce Motion is enabled?
- The moving sheen becomes a static highlight. The group also reports its busy state and keeps the loading layout readable to assistive technology.
Source code
Free with an account
Sign in with your email to read the full source here, or install it in one command with the CLI.