Native Animation

Sign in Get all-access

Base Empty State animation preview

Base Empty State animation preview

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

npx nativeanimation add base-empty-state

Base Empty State

React Native Empty State Component

A staggered empty state with configurable icon, title, description, actions, border, 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

A staggered empty state with configurable icon, title, description, actions, border, and theme.

How it works

Centered content uses 24 pt padding, a large radius and an optional dashed border.
The 40 pt icon box sits above an 18 pt title. Descriptions and actions are limited to 384 pt.
Icon, title, description and actions fade upward from 6 pt, staggered by 30 ms over 300 ms.
The icon also springs from 0.9 to 1 with stiffness 200, damping 20, mass 1.

Install

npx nativeanimation add base-empty-state

The CLI also copies the family modules listed in registryDependencies. Dependencies, if you copy by hand:

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

Usage

import { FolderPlus } from 'lucide-react-native';
import { BaseEmptyState } from './base-empty-state';
import { BaseButton } from './base-button';

<BaseEmptyState
  icon={<FolderPlus size={24} color={theme.colors.foreground} />}
  title="No projects yet"
  description="Keep your tasks and files together in one place."
  actions={<BaseButton onPress={createProject}>Create project</BaseButton>}
/>

Wrap your app in BaseThemeProvider (from base-theme) to choose light/dark and an accent; without it, pieces use the light neutral theme. Every piece also takes a theme prop that wins over the provider.

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	—	Icon inside a 40 pt muted box; supply a 24 pt icon in foreground color.
`title`	`string`	—	Required heading.
`description`	`string`	—	Supporting explanation.
`actions`	`ReactNode`	—	Actions arranged in a wrapping centered row.
`bordered`	`boolean`	`true`	Shows the dashed border.
`theme`	`BaseTheme`	`provider`	Overrides the theme from BaseThemeProvider.
`style`	`StyleProp<ViewStyle>`	—	Container style.
`testID`	`string`	—	Stable identifier on the root view.

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 in development builds. Part of Native Animation Base, a free family that shares one theme: install base-theme once (the CLI does it for you) and every Base piece picks it up. Free forever. MIT.

Accessibility

The title is a heading and the decorative icon is hidden from screen readers. Caller-supplied actions keep their own labels and semantics. With Reduce Motion on, content appears immediately without staggering, translation, or scaling. The included demo uses Base buttons for its actions.

Part of a shared foundation

Use it in a screen

Compose Base Empty State 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

Stacked Category Cards ↗

A category stack whose tabs unfold into detail cards, with configurable categories, title, colors, and fonts.

Another way to solve this task · $9

Review Approval Card ↗

A moderation queue with swipe-to-approve or decline feedback, with configurable reviews, labels, colors, and fonts.

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

BaseEmptyState.tsx

import Animated, {
  ReduceMotion,
  cancelAnimation,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  BaseThemeProvider,
  spring,
  timing,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { useEffect } from 'react';
import { Text, View, type StyleProp, type ViewStyle } from 'react-native';

export type BaseEmptyStateProps = {
  icon?: React.ReactNode;
  title: string;
  description?: string;
  actions?: React.ReactNode;
  bordered?: boolean;
  theme?: BaseTheme;
  style?: StyleProp<ViewStyle>;
  testID?: string;
};

function Entrance({
  children,
  index,
  icon = false,
  theme,
}: {
  children: React.ReactNode;
  index: number;
  icon?: boolean;
  theme: BaseTheme;
}) {
  const reduced = useBaseReducedMotion();
  const progress = useSharedValue(0);
  const scale = useSharedValue(reduced ? 1 : 0.9);
  useEffect(() => {
    const delay = reduced ? 0 : index * theme.motion.stagger;
    progress.set(
      withDelay(
        delay,
        withTiming(1, timing(theme, 'reveal', reduced)),
        ReduceMotion.Never,
      ),
    );
    scale.set(
      reduced || !icon
        ? 1
        : withDelay(
            delay,
            withSpring(1, spring(theme, 'entrance')),
            ReduceMotion.Never,
          ),
    );
    return () => {
      cancelAnimation(progress);
      cancelAnimation(scale);
    };
  }, [index, icon, reduced, theme, progress, scale]);
  const animated = useAnimatedStyle(() => ({
    opacity: progress.get(),
    transform: [
      {
        translateY: reduced
          ? 0
          : theme.motion.shifts.handoff * (1 - progress.get()),
      },
      { scale: reduced ? 1 : scale.get() },
    ],
  }));
  return (
    <Animated.View style={[{ alignItems: 'center', width: '100%' }, animated]}>
      {children}
    </Animated.View>
  );
}

export function BaseEmptyState({
  icon,
  title,
  description,
  actions,
  bordered = true,
  theme: override,
  style,
  testID,
}: BaseEmptyStateProps) {
  const theme = useBaseTheme(override);
  return (
    <BaseThemeProvider theme={theme}>
      <View
        testID={testID}
        style={[
          {
            alignItems: 'center',
            gap: 24,
            padding: 24,
            borderRadius: theme.radius.lg,
            borderWidth: bordered ? 1 : 0,
            borderStyle: 'dashed',
            borderColor: theme.colors.border,
          },
          style,
        ]}
      >
        <View style={{ alignItems: 'center', width: '100%' }}>
          {icon ? (
            <Entrance index={0} icon theme={theme}>
              <View
                aria-hidden
                style={{
                  width: 40,
                  height: 40,
                  borderRadius: theme.radius.lg,
                  backgroundColor: theme.colors.muted,
                  alignItems: 'center',
                  justifyContent: 'center',
                  marginBottom: 8,
                }}
              >
                {icon}
              </View>
            </Entrance>
          ) : null}
          <Entrance index={1} theme={theme}>
            <Text
              accessibilityRole="header"
              style={{
                fontFamily: theme.fonts.medium,
                fontSize: 18,
                lineHeight: 26,
                textAlign: 'center',
                color: theme.colors.foreground,
              }}
            >
              {title}
            </Text>
          </Entrance>
          {description ? (
            <Entrance index={2} theme={theme}>
              <Text
                style={{
                  marginTop: 8,
                  maxWidth: 384,
                  fontFamily: theme.fonts.regular,
                  fontSize: 14,
                  lineHeight: 14 * 1.625,
                  textAlign: 'center',
                  color: theme.colors.mutedForeground,
                }}
              >
                {description}
              </Text>
            </Entrance>
          ) : null}
        </View>
        {actions ? (
          <Entrance index={3} theme={theme}>
            <View
              style={{
                flexDirection: 'row',
                flexWrap: 'wrap',
                justifyContent: 'center',
                gap: 8,
                maxWidth: 384,
              }}
            >
              {actions}
            </View>
          </Entrance>
        ) : null}
      </View>
    </BaseThemeProvider>
  );
}

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-empty-state",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme",
    "base-button"
  ],
  "dependencies": {
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}