Native Animation

Sign in Get all-access

Base Card animation preview

Base Card animation preview

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

npx nativeanimation add base-card

Base Card

React Native Card Component

A composable card with optional press feedback and configurable content 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 composable card with optional press feedback and configurable content and theme.

How it works

The card uses the shared card surface, xl radius, border, and small shadow, with 24 pt vertical padding and gaps.
Header and content parts provide consistent 24 pt horizontal insets. A direct BaseCardAction child is laid out beside the title and description.
With onPress, a Gesture Handler tap compresses the card to the theme choice scale (0.985) and returns it using the press spring (550/30, mass 1). Pressure has its own shared value.

Install

npx nativeanimation add base-card

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

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

Load the Geist regular and medium fonts used by the theme once in your app, or supply your own font names in a custom theme. Interactive pieces need a GestureHandlerRootView at the app root. The usage examples with buttons or switches assume those Base pieces are installed separately.

Usage

import { BaseCard, BaseCardHeader, BaseCardTitle, BaseCardDescription,
  BaseCardContent, BaseCardFooter } from './base-card';
import { BaseButton } from './base-button';

<BaseCard>
  <BaseCardHeader>
    <BaseCardTitle>Create project</BaseCardTitle>
    <BaseCardDescription>Ship your next idea with Nimbus.</BaseCardDescription>
  </BaseCardHeader>
  <BaseCardContent>{/* Your form fields */}</BaseCardContent>
  <BaseCardFooter>
    <BaseButton variant="outline">Cancel</BaseButton>
    <BaseButton onPress={deploy}>Deploy</BaseButton>
  </BaseCardFooter>
</BaseCard>

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
`BaseCard: children`	`ReactNode`	`—`	Card contents, usually composed from the exported parts.
`onPress`	`() => void`	`—`	Makes the card a button. Use a clear accessibilityLabel; keep interactive controls outside a pressable card.
`theme`	`BaseTheme`	`provider`	Theme override, inherited by card parts and nested Base components.
`style`	`StyleProp<ViewStyle>`	`—`	Root layout and visual overrides; also supported by each part.
`testID`	`string`	`—`	Identifier on the card root.
`accessibilityLabel`	`string`	`—`	Accessible name for a pressable card.
`BaseCardHeader / BaseCardAction`	`ViewProps & { theme?: BaseTheme }`	`—`	Place Action directly inside Header to put it at the top right.
`BaseCardTitle / BaseCardDescription`	`TextProps & { theme?: BaseTheme }`	`—`	Title and supporting copy; accept text styles and native text props.
`BaseCardContent / BaseCardFooter`	`ViewProps & { theme?: BaseTheme }`	`—`	Content region and horizontal action row.

Compatibility

Expo SDK 58 · React Native 0.88 · Reanimated 4.7 · react-native-worklets 0.13. Targets iOS, Android, and web, including Expo Go and development builds. Part of Native Animation Base, a free family sharing one theme; the CLI installs its family dependencies automatically.

Accessibility

A static card preserves the accessibility of its children. A pressable card is announced as a button and supports accessibility activation and Enter/Space on web. It reserves at least 44 pt in each dimension; the host must provide 48 dp on Android. Keep nested buttons and inputs in static cards. With Reduce Motion on, the pressure scale stays at 1.

Touch targets

Pressable cards reserve a 44×44 minimum on every platform. On Android, the host must give the card at least 48×48 dp. Keep at least 44×44 pt on iOS and 44 px on web. Do not shrink cards below those dimensions or overlap their targets with negative margins. Put nested buttons and inputs in static cards.

Part of a shared foundation

Use it in a screen

Compose Base Card 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-gesture-handler	~3.3.0
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-gesture-handler ~3.3.0, 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-gesture-handler ~2.32.0, react-native-reanimated 4.5.1, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

BaseCard.tsx

import Animated, {
  ReduceMotion,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import {
  baseActivationProps,
  useBaseReducedMotion,
  BaseThemeProvider,
  spring,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React, { Children, isValidElement } from 'react';
import {
  Platform,
  Text,
  View,
  type TextProps,
  type ViewProps,
} from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { scheduleOnRN } from 'react-native-worklets';

export type BaseCardProps = ViewProps & {
  onPress?: () => void;
  theme?: BaseTheme;
};
export type BaseCardPartProps = ViewProps & { theme?: BaseTheme };
export type BaseCardTextProps = TextProps & { theme?: BaseTheme };

export function BaseCard({
  children,
  onPress,
  theme: override,
  style,
  ...props
}: BaseCardProps) {
  const theme = useBaseTheme(override);
  const reduced = useBaseReducedMotion();
  const pressScale = useSharedValue(1);
  const pressSpring = spring(theme, 'press');
  const choiceScale = theme.motion.scales.choice;
  const tap = Gesture.Tap()
    .enabled(
      !!onPress &&
        !props.accessibilityState?.disabled &&
        !props['aria-disabled'],
    )
    .onBegin(() => {
      pressScale.set(
        reduced
          ? 1
          : withSpring(choiceScale, {
              ...pressSpring,
              reduceMotion: ReduceMotion.Never,
            }),
      );
    })
    .onFinalize(() => {
      pressScale.set(
        reduced
          ? 1
          : withSpring(1, { ...pressSpring, reduceMotion: ReduceMotion.Never }),
      );
    })
    .onEnd((_event, success) => {
      if (success && onPress) scheduleOnRN(onPress);
    });
  const animated = useAnimatedStyle(() => ({
    transform: [{ scale: pressScale.get() }],
  }));
  const card = (
    <Animated.View
      {...props}
      aria-checked={props['aria-checked'] ?? props.accessibilityState?.checked}
      aria-selected={
        props['aria-selected'] ?? props.accessibilityState?.selected
      }
      aria-expanded={
        props['aria-expanded'] ?? props.accessibilityState?.expanded
      }
      aria-disabled={
        props['aria-disabled'] ?? props.accessibilityState?.disabled
      }
      aria-busy={props['aria-busy'] ?? props.accessibilityState?.busy}
      accessible={onPress ? true : props.accessible}
      accessibilityRole={onPress ? 'button' : props.accessibilityRole}
      onAccessibilityTap={onPress ?? props.onAccessibilityTap}
      accessibilityActions={
        onPress ? [{ name: 'activate' }] : props.accessibilityActions
      }
      onAccessibilityAction={(event) => {
        if (onPress && event.nativeEvent.actionName === 'activate') onPress();
        else props.onAccessibilityAction?.(event);
      }}
      {
        /* RN Web forwards DOM events rather than native event objects. */
        ...((onPress && Platform.OS === 'web'
          ? {
              tabIndex: 0,
              onKeyDown: (event: React.KeyboardEvent) => {
                if (event.key === 'Enter' || event.key === ' ') {
                  event.preventDefault();
                  onPress();
                }
              },
            }
          : {}) as object)
      }
      {
        /* RN Web forwards DOM events rather than native event objects. */
        ...((onPress
          ? baseActivationProps(onPress, props.accessibilityState?.disabled)
          : {}) as object)
      }
      style={[
        {
          borderRadius: theme.radius.xl,
          borderWidth: 1,
          borderColor: theme.colors.border,
          backgroundColor: theme.colors.card,
          boxShadow: theme.shadow.sm,
          paddingVertical: 24,
          gap: 24,
          minHeight: onPress ? 44 : undefined,
          minWidth: onPress ? 44 : undefined,
        },
        style,
        animated,
      ]}
    >
      <BaseThemeProvider theme={theme}>{children}</BaseThemeProvider>
    </Animated.View>
  );
  return onPress ? (
    <GestureDetector gesture={tap}>{card}</GestureDetector>
  ) : (
    card
  );
}

export function BaseCardHeader({
  children,
  theme: override,
  style,
  ...props
}: BaseCardPartProps) {
  const theme = useBaseTheme(override);
  const items = Children.toArray(children);
  const actions = items.filter(
    (child) => isValidElement(child) && child.type === BaseCardAction,
  );
  const body = items.filter(
    (child) => !isValidElement(child) || child.type !== BaseCardAction,
  );
  return (
    <BaseThemeProvider theme={theme}>
      <View
        {...props}
        style={[
          {
            paddingHorizontal: 24,
            gap: 8,
            flexDirection: actions.length ? 'row' : 'column',
            alignItems: 'flex-start',
          },
          style,
        ]}
      >
        {actions.length ? (
          <View style={{ flex: 1, minWidth: 0, gap: 8 }}>{body}</View>
        ) : (
          body
        )}
        {actions}
      </View>
    </BaseThemeProvider>
  );
}

export function BaseCardTitle({
  theme: override,
  style,
  ...props
}: BaseCardTextProps) {
  const theme = useBaseTheme(override);
  return (
    <Text
      accessibilityRole="header"
      {...props}
      style={[
        {
          fontFamily: theme.fonts.semibold,
          fontSize: 16,
          lineHeight: 16,
          color: theme.colors.cardForeground,
        },
        style,
      ]}
    />
  );
}

export function BaseCardDescription({
  theme: override,
  style,
  ...props
}: BaseCardTextProps) {
  const theme = useBaseTheme(override);
  return (
    <Text
      {...props}
      style={[
        {
          fontFamily: theme.fonts.regular,
          fontSize: 14,
          lineHeight: 20,
          color: theme.colors.mutedForeground,
        },
        style,
      ]}
    />
  );
}

export function BaseCardAction({
  theme: override,
  style,
  ...props
}: BaseCardPartProps) {
  const theme = useBaseTheme(override);
  return (
    <BaseThemeProvider theme={theme}>
      <View {...props} style={[{ alignSelf: 'flex-start' }, style]} />
    </BaseThemeProvider>
  );
}

export function BaseCardContent({
  theme: override,
  style,
  ...props
}: BaseCardPartProps) {
  const theme = useBaseTheme(override);
  return (
    <BaseThemeProvider theme={theme}>
      <View {...props} style={[{ paddingHorizontal: 24 }, style]} />
    </BaseThemeProvider>
  );
}

export function BaseCardFooter({
  theme: override,
  style,
  ...props
}: BaseCardPartProps) {
  const theme = useBaseTheme(override);
  return (
    <BaseThemeProvider theme={theme}>
      <View
        {...props}
        style={[
          {
            flexDirection: 'row',
            alignItems: 'center',
            paddingHorizontal: 24,
            gap: 8,
          },
          style,
        ]}
      />
    </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-card",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-worklets": "0.13.0"
  }
}