Native Animation

Sign in Get all-access

Base Skeleton animation preview

Base Skeleton animation preview

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

npx nativeanimation add base-skeleton

Base Skeleton

React Native Skeleton Component

Synchronized loading placeholders with configurable width, height, corner radius, and theme.

Native Animation Base · Free · MIT

Read and download source

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 component

Related guides

Skeleton Loading React Native: Build a Skeleton Loader

Synchronized loading placeholders with configurable width, height, corner radius, and theme.

How it works

Blocks use the shared accent surface and medium radius, or a full radius for circles.
One module-level UI clock drives every block, including blocks mounted later.
Opacity pulses from 1 to 0.5 and back in 2 seconds with the cubic curve (0.4, 0, 0.6, 1).
The clock stops when its last animated subscriber unmounts. Text groups end with a 60% line.

Install

npx nativeanimation add base-skeleton

The CLI also copies base-theme. Dependencies, if you copy by hand:

npx expo install react-native-reanimated react-native-worklets

Usage

import { BaseSkeleton, BaseSkeletonText } from './base-skeleton';

<View style={{ gap: 12 }}>
  <BaseSkeleton circle width={48} height={48} />
  <BaseSkeleton width="70%" height={18} />
  <BaseSkeletonText lines={3} />
</View>

<BaseSkeleton width="100%" height={120} radius={theme.radius.xl} />
<BaseSkeletonText lines={4} lineHeight={16} style={{ gap: 10 }} />

BaseSkeletonText also takes width, radius, style, theme, and testID. Its style applies to the group, while its last line is always 60% wide. Keep layout space stable when replacing placeholders with content.

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. The theme prop overrides the provider. Load the font families declared in your theme once in the host app.

Props

Prop	Type	Default	Description
`width / height`	`DimensionValue`	'100%' / 16	Block dimensions; use equal dimensions for a circle.
`radius`	`number`	theme.radius.md	Corner radius in pt.
`circle`	`boolean`	false	Uses the full theme radius.
`lines`	`number`	3	BaseSkeletonText only: number of lines.
`lineHeight`	`number`	14	BaseSkeletonText only: height of each line.
`theme`	`BaseTheme`	provider	Overrides the shared family theme.
`style`	`StyleProp<ViewStyle>`	—	Container style.
`testID`	`string`	—	Stable test identifier.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Runs on iOS, Android and web, in Expo Go and development builds. Part of Native Animation Base, a free family that shares one theme.

Accessibility

Decorative blocks are hidden from accessibility. Put a loading label and busy state on the surrounding content region. Reduce Motion uses a static opacity of 0.7 and does not subscribe to the pulse clock.

Part of a shared foundation

Use it in a screen

Compose Base Skeleton with other Base components and a single shared theme. Ask your agent to read each API, then connect real navigation, state, and callbacks.

Build a habit tracker Build with an agent CLI and manual installation Theme and dark mode Accessibility checklist Native Animation Base UI library

Go further.

Base covers the everyday. Choose a more expressive interaction when your app calls for it.

Another way to solve this task · $9

Streaming Skeleton Shell ↗

A streaming app shell with shared loading shimmer and card-to-hero transitions, with configurable titles, labels, colors, and fonts.

Another way to solve this task · $9

Social Feed Skeleton ↗

A pull-to-refresh feed with shared shimmer and staggered post reveals, with configurable posts, labels, colors, and font.

Source code

Loading public source…

Dependencies

Package	Version
react-native-reanimated	4.7.1
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.7.1, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	react-native-reanimated 4.5.1, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseSkeleton.tsx

import Animated, {
  ReduceMotion,
  cancelAnimation,
  Easing,
  makeMutable,
  useAnimatedStyle,
  withRepeat,
  withSequence,
  withTiming,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect } from 'react';
import {
  View,
  type DimensionValue,
  type StyleProp,
  type ViewStyle,
} from 'react-native';

// A single UI-thread clock keeps every mounted block in phase, including late arrivals.
const pulse = makeMutable(1);
let subscribers = 0;
function subscribe() {
  if (subscribers++ === 0) {
    pulse.set(1);
    const config = { duration: 1000, easing: Easing.bezier(0.4, 0, 0.6, 1) };
    pulse.set(
      withRepeat(
        withSequence(
          ReduceMotion.Never,
          withTiming(0.5, { ...config, reduceMotion: ReduceMotion.Never }),
          withTiming(1, { ...config, reduceMotion: ReduceMotion.Never }),
        ),
        -1,
        undefined,
        undefined,
        ReduceMotion.Never,
      ),
    );
  }
  return () => {
    if (--subscribers === 0) cancelAnimation(pulse);
  };
}

export type BaseSkeletonProps = {
  /** Width in points or a relative dimension. */
  width?: DimensionValue;
  /** Height in points or a relative dimension. */
  height?: DimensionValue;
  /** Overrides the theme corner radius. */
  radius?: number;
  /** Uses the full corner radius; provide equal width and height. */
  circle?: boolean;
  /** Style applied to the container. */
  style?: StyleProp<ViewStyle>;
  /** Overrides the nearest BaseThemeProvider. */
  theme?: BaseTheme;
  /** Stable identifier for the root or trigger. */
  testID?: string;
};

export function BaseSkeleton({
  width = '100%',
  height = 16,
  radius,
  circle = false,
  style,
  theme: override,
  testID,
}: BaseSkeletonProps) {
  const theme = useBaseTheme(override);
  const reduced = useBaseReducedMotion();
  useEffect(() => {
    if (!reduced) return subscribe();
  }, [reduced]);
  const animated = useAnimatedStyle(() => ({
    opacity: reduced ? 0.7 : pulse.get(),
  }));
  return (
    <Animated.View
      testID={testID}
      accessible={false}
      accessibilityElementsHidden
      importantForAccessibility="no-hide-descendants"
      style={[
        {
          width,
          height,
          borderRadius: circle
            ? theme.radius.full
            : (radius ?? theme.radius.md),
          backgroundColor: theme.colors.accent,
        },
        style,
        animated,
      ]}
    />
  );
}

export type BaseSkeletonTextProps = Omit<
  BaseSkeletonProps,
  'circle' | 'height'
> & {
  /** Number of placeholder lines; the final line is 60% wide. */
  lines?: number;
  /** Height of each placeholder line in points. */
  lineHeight?: number;
};
export function BaseSkeletonText({
  lines = 3,
  lineHeight = 14,
  width = '100%',
  style,
  testID,
  ...props
}: BaseSkeletonTextProps) {
  return (
    <View testID={testID} style={[{ width, gap: 8 }, style]}>
      {Array.from({ length: Math.max(0, Math.floor(lines)) }, (_, index) => (
        <BaseSkeleton
          key={index}
          {...props}
          width={index === Math.floor(lines) - 1 ? '60%' : '100%'}
          height={lineHeight}
        />
      ))}
    </View>
  );
}
export default BaseSkeleton;

LICENSE

MIT License

Copyright (c) 2026 Native Animation

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

nativeanimation.manifest.json

{
  "schemaVersion": 1,
  "id": "base-skeleton",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}