Skip to content
Native Animation
Skeleton to content animation preview
LoadingSkeleton

Skeleton to content

A warm editorial feed where individually clipped shimmer placeholders morph into finished images and copy.

$9 for this animation

Checkout opens soon. Leave your email and we will tell you the moment you can buy it.

One email when checkout opens. No spam.

Add to your project

Copy the component and its assets into your app with the Native Animation CLI, or paste the agent prompt into Claude Code, Codex or Cursor once the MCP server is connected.

npx nativeanimation add skeleton-to-content

About this animation

A warm editorial feed where individually clipped shimmer placeholders morph into finished images and copy.

Why this one

Most skeleton loaders swap an entire gray screen for content. This pattern keeps every placeholder in the exact final position, morphs line widths into the real typography, resolves images through blur and scale, and makes the loading state reusable through an interruptible pull-to-refresh gesture.

How it works

  1. One continuous shared value represents the whole feed: 0 is skeleton, 1 is content, and values above 1 represent pull distance.
  2. Each block derives a staggered local reveal window from that value, so the sequence travels naturally from the hero image to the final row.
  3. Shimmer gradients live inside clipped placeholder views, preserving every radius without laying an opaque band over the content.
  4. Images resolve from 18 px blur and 1.04 scale while copy crossfades and each skeleton line morphs toward its final width.
  5. Pulling beyond the threshold draws a continuous progress ring, reverses the reveal, waits for the configured reload delay, and springs the content back in.

Install

npx expo install expo-image expo-linear-gradient @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Icons: Lucide (ISC).

Usage

import { SkeletonToContent } from './SkeletonToContent';

<SkeletonToContent
  featured={featuredStory}
  articles={stories}
  onRefresh={() => refetchStories()}
/>

With personality knobs and imperative control:

const feedRef = useRef<SkeletonToContentRef>(null);

<SkeletonToContent
  ref={feedRef}
  featured={featuredStory}
  articles={stories}
  accentColor="#E87534"
  backgroundColor="#FAF7F2"
  skeletonColor="#ECE6DC"
  reloadDelayMs={600}
/>

Call feedRef.current?.load(), .refresh(), or .reset() to control the transition.

Props

PropTypeDefaultDescription
featuredSkeletonArticleRequiredFeatured story shown above the feed.
articlesSkeletonArticle[]RequiredCompact stories; the first three are shown.
headingstring"Today"Screen heading.
brandNamestring"Reading list"Label paired with the lamp tile.
dateLabelstring"Friday, October 10"Date beneath the heading.
topicsstring[]Design, Science, Travel, FoodUp to four topic labels.
activeTopicnumber0Selected topic index.
backgroundColorstring#FAF7F2Warm screen background.
skeletonColorstring#ECE6DCPlaceholder base color.
accentColorstring#E87534Metadata and pull-ring accent.
textColorstring#201D19Main copy color.
mutedColorstring#817A70Secondary copy color.
fontFamilystringSystemInterface typeface.
mediumFontFamilystringSystemMedium interface typeface.
titleFontFamilystringSystemEditorial display typeface.
initialDelayMsnumber340Delay before the first reveal; negative disables it.
reloadDelayMsnumber430Time held in skeleton during refresh.
onRefresh() => void—Called when a refresh begins.
accessibilityLabelstring"Reading feed"Screen-reader label for the feed.
styleStyleProp<ViewStyle>—Outer container style.
testIDstring—Test identifier.

Compatibility

  • Expo SDK 57, React Native 0.86, Reanimated 4.5, Worklets 0.10, and Skia 2.6.
  • iOS, Android, and web are verified by the project compile gate.
  • Compatible with Expo Go because every native dependency is included in Expo Go for SDK 57.

Accessibility

The pull gesture has a 44 pt Refresh button alternative with a descriptive button label. Interactive feedback begins on press. Reduced Motion replaces the staggered morph, image blur, translation, and spring movement with a short crossfade while preserving loading-state visibility.

More animations