Skip to content
Native Animation
Market List Skeleton animation preview

This preview uses fictional demo content. See the props below for the customization options available in this component.

npx nativeanimation add market-list-skeleton
SkeletonLoading

Market List Skeleton

A market list that resolves skeletons into asset names and rolling prices, with configurable assets, labels, colors, and fonts.

$9 for this animation

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.

About this animation

A market list that resolves skeletons into asset names and rolling prices, with configurable assets, labels, colors, and fonts.

How it works

  1. Each pill uses a left-weighted horizontal gradient and a narrow light sweep, staggered down its column.
  2. Rows reveal in sequence with a spring as identity, price, and performance data arrive.
  3. Prices receive occasional live updates and a short directional row flash.
  4. Search filters assets, while the top tabs switch between a market grid, insight rows, and category tiles.
  5. Selecting a fictional asset opens a black detail view with overview, financials, news, and a purchase action. News preserves five fixed-height rows, crossfading each skeleton into its content with a 70 ms stagger. Insights reveal each complete row together; reduced motion uses a simultaneous 220 ms crossfade.

Install

npx expo install @expo/vector-icons expo-linear-gradient react-native-reanimated react-native-worklets

Usage

const marketRef = useRef<MarketListSkeletonRef>(null);

<MarketListSkeleton
  ref={marketRef}
  assets={assets}
  liveUpdates
  onOpenAsset={(id) => console.info('Selected', id)}
/>
<MarketListSkeleton
  loading={false}
  colors={{ background: '#10131A', accent: '#61B8FF' }}
  labels={{ searchAssets: 'Find an asset' }}
  fontFamily="Geist_400Regular"
  monoFontFamily="GeistMono_400Regular"
/>

Props

NameTypeDefaultDescription
assetsMarketAsset[]Fictional Nova–Tidal setRows, colors, values, and normalized sparkline history.
labelsPartial<MarketListLabels>English labelsVisible tab, search, detail, and purchase text.
colorsPartial<MarketListColors>Navy list and black detail paletteComplete list and detail surfaces and accents.
loadingbooleanundefinedControlled loading state; otherwise the demo resolves after about 1.5 seconds.
liveUpdatesbooleantrueUpdates a random price every 1.5–3 seconds after reveal.
onOpenAsset(id: string) => voidundefinedCalled when an asset is selected.
autoplaybooleanfalseRuns the showcase sequence through the same imperative controls.
fontFamilystringSystem fontInterface font family.
monoFontFamilystringSystem fontMonospaced rolling price font family.
styleStyleProp<ViewStyle>undefinedRoot container style.
testIDstringmarket-list-skeletonRoot and detail test identifiers.

The ref exposes setTab(index), setQuery(text), openAsset(id), close(), and reload().

Compatibility

Expo SDK 58, React Native 0.88, and Reanimated 4.7. Supports iOS, Android, and web. The component fills its parent; the host screen applies safe-area insets.

Accessibility

Tabs, rows, search, and detail controls expose native roles and labels. Reduced motion removes the extended shimmer sweep and row cascade.

Icons: Feather from Lucide (ISC), via @expo/vector-icons.

Why this one

The loading state preserves the measured three-column market rhythm, then gives each data column a distinct arrival: geometric identity, changing price, and directional performance.

More animations