Native Animation

Sign in Get all-access

Base Button animation preview

Base Button animation preview

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

npx nativeanimation add base-button

Base Button

React Native Button Component

A button with spring-driven press feedback and configurable content, size, variant, 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 button with spring-driven press feedback and configurable content, size, variant, and theme.

How it works

Six variants (default, secondary, outline, ghost, destructive, link) and five sizes read their colors, radius and shadow from the Base theme.
The press is a Gesture Handler tap: it springs to 0.97 on touch-down and back on release (stiffness 550, damping 30, mass 1), on its own shared value so a fast double tap never gets stuck.
Visual heights are 24/32/36/40; a layout wrapper reserves a 48 dp Android or 44 pt iOS/web touch target while preserving the visual surface.
loading swaps the leading slot for a spinner and blocks presses; disabled dims to 50%.

Install

npx nativeanimation add base-button

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

Usage

import { BaseButton } from './base-button';

<BaseButton onPress={save}>Save changes</BaseButton>

With icons, variants and states:

<BaseButton variant="outline" size="sm" leading={<Plus size={16} color={theme.colors.foreground} />}>
  New project
</BaseButton>
<BaseButton variant="destructive" loading={deleting} onPress={remove}>Delete</BaseButton>
<BaseButton size="icon" variant="ghost" accessibilityLabel="Next page"><ChevronRight size={16} /></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
`children`	`ReactNode`	—	Label text, or any element.
`variant`	`'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'`	`'default'`	Visual style.
`size`	`'xs' \| 'sm' \| 'default' \| 'lg' \| 'icon'`	`'default'`	Height and padding.
`onPress`	`() => void`	—	Called on tap.
`loading`	`boolean`	`false`	Shows a spinner and blocks presses.
`disabled`	`boolean`	`false`	Dims and blocks presses.
`leading` / `trailing`	`ReactNode`	—	Icon or element before / after the label.
`fullWidth`	`boolean`	`false`	Stretches to the container width.
`style`	`StyleProp<ViewStyle>`	—	Extra styles for the button.
`accessibilityLabel`	`string`	—	Required for icon-only buttons.
`theme`	`BaseTheme`	provider	Overrides the theme from `BaseThemeProvider`.
`testID`	`string`	—	Test 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.

Accessibility

Announced as a button with synchronized disabled and busy states. Supports screen-reader activation and Enter/Space on web. With Reduce Motion on, the press scale is skipped; the press still works.

Part of a shared foundation

Use it in a screen

Compose Base Button 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

Voice Record Lock ↗

A hold-to-record interface with slide-to-lock and review states, with configurable labels, palette, fonts, and duration limit.

Another way to solve this task · $9

State Icon Morph Button ↗

A transport button with reversible play, pause, and stop morphs, with configurable labels, button size, icon size, and palette.

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

BaseButton.tsx

import {
  useBaseTriggerState,
  baseActivationProps,
  useBaseReducedMotion,
  spring,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import React from 'react';
import {
  ActivityIndicator,
  Platform,
  StyleSheet,
  View,
  Text,
  type StyleProp,
  type ViewStyle,
} from 'react-native';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import { scheduleOnRN } from 'react-native-worklets';

export type ButtonVariant =
  'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon';

export type BaseButtonProps = {
  children?: React.ReactNode;
  variant?: ButtonVariant;
  size?: ButtonSize;
  loading?: boolean;
  disabled?: boolean;
  /** Icon or element before the label (16px icons match the family). */
  leading?: React.ReactNode;
  trailing?: React.ReactNode;
  onPress?: () => void;
  fullWidth?: boolean;
  style?: StyleProp<ViewStyle>;
  theme?: BaseTheme;
  testID?: string;
  accessibilityLabel?: string;
};

// Visual heights stay compact inside a real 44pt / 48dp interaction target.
const SIZES: Record<
  ButtonSize,
  { height: number; padding: number; font: number; gap: number }
> = {
  xs: { height: 24, padding: 8, font: 12, gap: 4 },
  sm: { height: 32, padding: 12, font: 14, gap: 6 },
  default: { height: 36, padding: 16, font: 14, gap: 8 },
  lg: { height: 40, padding: 24, font: 14, gap: 8 },
  icon: { height: 36, padding: 0, font: 14, gap: 0 },
};

export function BaseButton({
  children,
  variant = 'default',
  size = 'default',
  loading = false,
  disabled = false,
  leading,
  trailing,
  onPress,
  fullWidth = false,
  style,
  theme: override,
  testID,
  accessibilityLabel,
}: BaseButtonProps) {
  const theme = useBaseTheme(override);
  const triggerState = useBaseTriggerState();
  const { colors } = theme;
  const pressed = useSharedValue(1);
  const reduced = useBaseReducedMotion();
  const dark = theme.scheme === 'dark';
  const s = SIZES[size];

  const surface = {
    default: {
      bg: colors.primary,
      fg: colors.primaryForeground,
      border: undefined,
      shadow: theme.shadow.xs,
    },
    secondary: {
      bg: colors.secondary,
      fg: colors.secondaryForeground,
      border: undefined,
      shadow: theme.shadow.xs,
    },
    outline: {
      bg: dark ? colors.inputSurface : colors.background,
      fg: colors.foreground,
      border: dark ? colors.input : colors.border,
      shadow: theme.shadow.xs,
    },
    ghost: {
      bg: 'transparent',
      fg: colors.foreground,
      border: undefined,
      shadow: undefined,
    },
    destructive: {
      bg: colors.destructiveSurface,
      fg: '#ffffff',
      border: undefined,
      shadow: theme.shadow.xs,
    },
    link: {
      bg: 'transparent',
      fg: colors.primary,
      border: undefined,
      shadow: undefined,
    },
  }[variant];

  const flattened = StyleSheet.flatten(style) ?? {};
  const layoutKeys = new Set([
    'width',
    'minWidth',
    'maxWidth',
    'alignSelf',
    'flex',
    'flexGrow',
    'flexShrink',
    'flexBasis',
    'margin',
    'marginTop',
    'marginBottom',
    'marginLeft',
    'marginRight',
    'marginHorizontal',
    'marginVertical',
    'marginStart',
    'marginEnd',
    'position',
    'top',
    'bottom',
    'left',
    'right',
    'start',
    'end',
    'zIndex',
  ]);
  const layoutStyle = Object.fromEntries(
    Object.entries(flattened).filter(([key]) => layoutKeys.has(key)),
  );
  const surfaceStyle = Object.fromEntries(
    Object.entries(flattened).filter(([key]) => !layoutKeys.has(key)),
  );
  const stretch =
    fullWidth ||
    flattened.width !== undefined ||
    Boolean(flattened.flex || flattened.flexGrow);
  const inactive = disabled || loading;
  const tap = Gesture.Tap()
    .enabled(!inactive)
    .onBegin(() => {
      if (!reduced)
        pressed.set(
          withSpring(theme.motion.scales.press, spring(theme, 'press')),
        );
    })
    .onFinalize(() => {
      pressed.set(reduced ? 1 : withSpring(1, spring(theme, 'press')));
    })
    .onEnd((_event, success) => {
      if (!success) return;
      if (onPress) scheduleOnRN(onPress);
    });

  const animated = useAnimatedStyle(() => ({
    transform: [{ scale: pressed.get() }],
  }));

  return (
    <GestureDetector gesture={tap}>
      <View
        testID={testID}
        accessible
        accessibilityRole="button"
        accessibilityLabel={accessibilityLabel}
        accessibilityState={{
          disabled: inactive,
          busy: loading,
          expanded: triggerState?.expanded,
        }}
        aria-expanded={triggerState?.expanded}
        {...(Platform.OS === 'web' && triggerState
          ? { 'aria-haspopup': 'menu' as const }
          : {})}
        aria-disabled={inactive}
        aria-busy={loading}
        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...(baseActivationProps(() => onPress?.(), inactive) as object)
        }
        style={[
          {
            minHeight: Platform.OS === 'android' ? 48 : 44,
            minWidth: Platform.OS === 'android' ? 48 : 44,
            justifyContent: 'center',
            alignSelf: fullWidth ? 'stretch' : 'flex-start',
          },
          layoutStyle,
          {
            minHeight: Platform.OS === 'android' ? 48 : 44,
            minWidth: Math.max(
              Platform.OS === 'android' ? 48 : 44,
              typeof flattened.minWidth === 'number' ? flattened.minWidth : 0,
            ),
          },
        ]}
      >
        <Animated.View
          style={[
            {
              height: s.height,
              minWidth: size === 'icon' ? s.height : undefined,
              paddingHorizontal: s.padding,
              borderRadius: theme.radius.md,
              borderWidth: surface.border ? 1 : 0,
              borderColor: surface.border,
              backgroundColor: surface.bg,
              boxShadow: surface.shadow,
              opacity: disabled ? 0.5 : 1,
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'center',
              alignSelf: stretch ? 'stretch' : 'center',
              gap: s.gap,
            },
            surfaceStyle,
            animated,
          ]}
        >
          {loading ? (
            <ActivityIndicator color={surface.fg} size="small" />
          ) : (
            leading
          )}
          {typeof children === 'string' ? (
            <Text
              numberOfLines={1}
              style={{
                fontFamily: theme.fonts.medium,
                fontSize: s.font,
                lineHeight: 20,
                color: surface.fg,
              }}
            >
              {children}
            </Text>
          ) : (
            children
          )}
          {trailing}
        </Animated.View>
      </View>
    </GestureDetector>
  );
}

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-button",
  "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"
  }
}