Native Animation

Sign in Get all-access

Base Menu animation preview

Base Menu animation preview

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

npx nativeanimation add base-menu

Base Menu

React Native Menu Component

An anchored action menu with configurable items, trigger, alignment, 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

An anchored action menu with configurable items, trigger, alignment, and theme.

How it works

A native wrapper measures the trigger with measureInWindow.
A transparent Modal places the panel 4 pt below the trigger, flips it above when needed, and clamps it to an 8 pt screen margin.
The panel fades and scales from 0.9 to 1 in 220 ms using the soft curve. It remains mounted through exit.
Items highlight in 100 ms. Selecting an enabled item closes the menu before calling its callback.

Install

npx nativeanimation add base-menu

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

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

Wrap the host app in GestureHandlerRootView.

Usage

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

<BaseMenu
  trigger={<BaseButton variant="outline">Project actions</BaseButton>}
  items={[
    { label: 'Rename', onSelect: renameProject },
    { label: 'Duplicate', shortcut: '⌘D', onSelect: duplicateProject },
    { type: 'separator' },
    { label: 'Delete', destructive: true, onSelect: deleteProject },
  ]}
/>

<BaseMenu
  align="end"
  trigger={<BaseButton>Preferences</BaseButton>}
  items={[
    { type: 'label', label: 'Workspace' },
    { type: 'checkbox', label: 'Compact view', checked: compact, onSelect: toggleCompact },
    { label: 'Admin settings', disabled: true },
  ]}
/>

An item accepts type, label, icon: ReactNode, shortcut, destructive, checked, disabled, and onSelect. Supply 16 pt icons in your chosen theme color. Checkbox state is controlled by the caller. The trigger must call its injected onPress and provide its own accessible name and touch target. Large menus scroll inside the available screen space.

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
`trigger`	`ReactElement`	—	Element accepting onPress and optionally testID.
`items`	`BaseMenuItem[]`	—	Items, checkbox items, separators, and labels.
`align`	`'start' \| 'end'`	'start'	Aligns the panel to the trigger.
`open / onOpenChange`	`boolean / (open: boolean) => void`	uncontrolled	Optional external open state.
`accessibilityLabel`	`string`	—	Accessible menu name.
`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

Menu items expose checked and disabled states. Outside taps, the Android back button, accessibility escape, and Escape on web close the menu. Web items support Tab navigation and Enter/Space activation. Reduce Motion makes panel transitions and highlights immediate.

Touch targets

Action and checkbox rows are at least 48 dp tall on Android and 44 pt tall on iOS and 44 px tall on web. Longer menus scroll within the screen. The host supplies the trigger: give it at least 48×48 dp on Android or 44×44 pt on iOS and 44×44 px on web.

Part of a shared foundation

Use it in a screen

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

Collapsible Profile Tabs ↗

Profile tabs with a collapsing header and remembered scroll positions, with configurable tabs, header content, palette, and fonts.

Another way to solve this task · $9

Routed Shared Element ↗

A cover-to-detail transition with a measured return path, with configurable items, labels, palette, and fonts.

Source code

Loading public source…

Dependencies

Package	Version
lucide-react-native	^1.61.0
react-native-gesture-handler	~3.3.0
react-native-reanimated	4.7.1
react-native-svg	15.16.0
react-native-worklets	0.13.0

Compatibility

SDK	Status	Revision	Last revision	Platforms	Dependencies
Expo SDK 58	Tested	2	10/28/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-gesture-handler ~3.3.0, react-native-reanimated 4.7.1, react-native-svg 15.16.0, react-native-worklets 0.13.0
Expo SDK 57	Tested	1	10/27/2026	iOS, Web, Android	lucide-react-native ^1.61.0, react-native-gesture-handler ~2.32.0, react-native-reanimated 4.5.1, react-native-svg 15.15.4, react-native-worklets 0.10.1

Scroll the table horizontally to review every column ↔

More animations

Base Switch
A switch with a stretching, spring-driven thumb that takes its colors and radius from a configurable theme.
Free
Base Separator
A static horizontal or vertical separator with configurable inset, optional horizontal label, semantics, and theme.
Free
Base Input
A text field with a fading focus ring, animated password reveal and clear controls, auto-growing multiline text, and configurable labels, icons, validation…
Free
Base List Row
A composable list row with press feedback and configurable copy, leading content, trailing content, and theme.
Free

AnchoredPanel.tsx

import Animated, {
  ReduceMotion,
  cancelAnimation,
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from 'react-native-reanimated';
import {
  useBaseReducedMotion,
  BaseThemeProvider,
  type BaseTheme,
} from '../base-theme';
import React, {
  useCallback,
  useEffect,
  useLayoutEffect,
  useRef,
  useState,
} from 'react';
import {
  AccessibilityInfo,
  Modal,
  Platform,
  ScrollView,
  StyleSheet,
  View,
  useWindowDimensions,
} from 'react-native';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
import { scheduleOnRN } from 'react-native-worklets';

type Rect = { x: number; y: number; width: number; height: number };
export function useAnchoredPanel(
  controlled?: boolean,
  onOpenChange?: (open: boolean) => void,
) {
  const triggerRef = useRef<React.ComponentRef<typeof View>>(null);
  const [internal, setInternal] = useState(false);
  const open = controlled ?? internal;
  const changeOpen = useCallback(
    (next: boolean) => {
      if (controlled === undefined) setInternal(next);
      onOpenChange?.(next);
      if (!next && Platform.OS === 'web') triggerRef.current?.focus();
    },
    [controlled, onOpenChange],
  );
  return { triggerRef, open, changeOpen };
}
export function AnchoredPanel({
  open,
  onClose,
  anchorRef,
  align = 'start',
  matchWidth = false,
  motion = 'menu',
  theme,
  children,
  accessibilityLabel,
  role = 'menu',
}: {
  open: boolean;
  onClose: () => void;
  anchorRef: React.RefObject<React.ComponentRef<typeof View> | null>;
  align?: 'start' | 'end';
  matchWidth?: boolean;
  motion?: 'menu' | 'select';
  theme: BaseTheme;
  children: React.ReactNode;
  accessibilityLabel?: string;
  role?: 'menu' | 'list';
}) {
  const { width, height } = useWindowDimensions();
  const reduced = useBaseReducedMotion();
  const [mounted, setMounted] = useState(open);
  if (open && !mounted) setMounted(true);
  const [anchor, setAnchor] = useState<Rect | null>(null);
  const [origin, setOrigin] = useState<Rect | null>(null);
  const [panelHeight, setPanelHeight] = useState(0);
  const root = useRef<React.ComponentRef<typeof View>>(null);
  const panel = useRef<React.ComponentRef<typeof View>>(null);
  const version = useRef(0);
  const pose = useSharedValue(0);
  const finishExit = useCallback((ticket: number) => {
    if (version.current === ticket) {
      setMounted(false);
      setAnchor(null);
      setOrigin(null);
      setPanelHeight(0);
    }
  }, []);
  useLayoutEffect(() => {
    if (!open) return;
    let current = true;
    anchorRef.current?.measureInWindow((x, y, w, h) => {
      if (current) setAnchor({ x, y, width: w, height: h });
    });
    return () => {
      current = false;
    };
  }, [open, width, height, anchorRef]);
  const ready = Boolean(anchor && origin && panelHeight);
  useEffect(() => {
    const lifecycle = version;
    const ticket = ++lifecycle.current;
    if (!mounted) return;
    if (open && ready) {
      pose.set(
        reduced
          ? 1
          : motion === 'select'
            ? withSpring(1, {
                reduceMotion: ReduceMotion.Never,
                stiffness: 400,
                damping: 29,
                mass: 1,
              })
            : withTiming(1, {
                reduceMotion: ReduceMotion.Never,
                duration: 220,
                easing: Easing.bezier(...theme.motion.curves.soft),
              }),
      );
      if (Platform.OS !== 'web' && panel.current)
        AccessibilityInfo.sendAccessibilityEvent(panel.current, 'focus');
    } else if (!open) {
      pose.set(
        withTiming(
          0,
          {
            reduceMotion: ReduceMotion.Never,
            duration: reduced ? 0 : motion === 'select' ? 150 : 220,
            easing: Easing.bezier(...theme.motion.curves.soft),
          },
          (finished) => {
            if (finished) scheduleOnRN(finishExit, ticket);
          },
        ),
      );
    }
    return () => {
      lifecycle.current++;
      cancelAnimation(pose);
    };
  }, [open, mounted, ready, reduced, motion, theme, pose, finishExit]);
  const localAnchor =
    anchor && origin
      ? { ...anchor, x: anchor.x - origin.x, y: anchor.y - origin.y }
      : null;
  const viewportWidth = origin?.width || width;
  const viewportHeight = origin?.height || height;
  const panelWidth = Math.max(
    0,
    Math.min(
      viewportWidth - 16,
      matchWidth ? (anchor?.width ?? 224) : Math.max(224, anchor?.width ?? 0),
    ),
  );
  const below = localAnchor
    ? Math.max(0, viewportHeight - 8 - localAnchor.y - localAnchor.height - 4)
    : 0;
  const above = localAnchor ? Math.max(0, localAnchor.y - 12) : 0;
  const flipped = panelHeight > below && above > below;
  const maxHeight = Math.max(0, flipped ? above : below);
  const shownHeight = Math.min(panelHeight, maxHeight);
  const left = Math.max(
    8,
    Math.min(
      viewportWidth - panelWidth - 8,
      localAnchor
        ? localAnchor.x + (align === 'end' ? localAnchor.width - panelWidth : 0)
        : 8,
    ),
  );
  const top = Math.max(
    8,
    Math.min(
      viewportHeight - shownHeight - 8,
      localAnchor
        ? flipped
          ? localAnchor.y - shownHeight - 4
          : localAnchor.y + localAnchor.height + 4
        : 8,
    ),
  );
  const animated = useAnimatedStyle(() => ({
    opacity: ready ? pose.get() : 0,
    transform: [
      {
        scale: reduced
          ? 1
          : (motion === 'select' ? 0.8 : 0.9) +
            (motion === 'select' ? 0.2 : 0.1) * pose.get(),
      },
    ],
  }));
  const outside = Gesture.Tap()
    .enabled(open)
    .onEnd((_event, success) => {
      if (success) scheduleOnRN(onClose);
    });
  if (!mounted) return null;
  return (
    <Modal
      visible
      transparent
      animationType="none"
      statusBarTranslucent
      navigationBarTranslucent
      onRequestClose={onClose}
      onShow={() =>
        root.current?.measureInWindow((x, y, w, h) =>
          setOrigin({ x, y, width: w, height: h }),
        )
      }
    >
      <GestureHandlerRootView style={{ flex: 1 }}>
        <BaseThemeProvider theme={theme}>
          <View
            ref={root}
            collapsable={false}
            style={{ flex: 1 }}
            onLayout={() =>
              root.current?.measureInWindow((x, y, w, h) =>
                setOrigin({ x, y, width: w, height: h }),
              )
            }
          >
            <GestureDetector gesture={outside}>
              <Animated.View
                accessible={false}
                importantForAccessibility="no"
                style={StyleSheet.absoluteFill}
              />
            </GestureDetector>
            <Animated.View
              ref={panel}
              role={role}
              accessibilityLabel={accessibilityLabel}
              accessibilityViewIsModal
              aria-modal
              onAccessibilityEscape={onClose}
              pointerEvents={open && ready ? 'auto' : 'none'}
              {
                /* RN Web forwards DOM events rather than native event objects. */
                ...((Platform.OS === 'web'
                  ? {
                      onKeyDown: (event: React.KeyboardEvent) => {
                        if (event.key === 'Escape') {
                          event.stopPropagation();
                          onClose();
                        }
                      },
                    }
                  : {}) as object)
              }
              style={[
                {
                  position: 'absolute',
                  left,
                  top,
                  width: panelWidth,
                  maxHeight: ready
                    ? maxHeight
                    : Math.max(44, viewportHeight - 16),
                  borderWidth: 1,
                  borderColor: theme.colors.border,
                  backgroundColor: theme.colors.popover,
                  borderRadius: theme.radius.md,
                  boxShadow: theme.shadow.lg,
                  transformOrigin: `${align === 'end' ? 'right' : 'left'} ${flipped ? 'bottom' : 'top'}`,
                },
                animated,
              ]}
            >
              <ScrollView
                showsVerticalScrollIndicator={false}
                keyboardShouldPersistTaps="handled"
                onContentSizeChange={(_w, h) => setPanelHeight(h + 2)}
                contentContainerStyle={{ padding: 4 }}
              >
                {children}
              </ScrollView>
            </Animated.View>
          </View>
        </BaseThemeProvider>
      </GestureHandlerRootView>
    </Modal>
  );
}

BaseMenu.tsx

import {
  BaseTriggerState,
  baseActivationProps,
  useBaseReducedMotion,
  useBaseTheme,
  type BaseTheme,
} from '../base-theme';
import Animated, {
  ReduceMotion,
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';
import React from 'react';
import {
  Platform,
  Text,
  View,
  type StyleProp,
  type ViewStyle,
  type ViewProps,
} from 'react-native';
import Check from 'lucide-react-native/icons/check';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { scheduleOnRN } from 'react-native-worklets';

import { AnchoredPanel, useAnchoredPanel } from './AnchoredPanel';

// Web only: no browser focus outline; the item highlight shows focus instead.
const NO_WEB_OUTLINE =
  Platform.OS === 'web' ? ({ outlineStyle: 'none' } as object) : null;

export type BaseMenuItem = {
  /** Item kind; regular action by default. */
  type?: 'item' | 'checkbox' | 'separator' | 'label';
  /** Visible label. */
  label?: string;
  /** Caller-supplied icon or icon renderer. */
  icon?: React.ReactNode;
  /** Optional shortcut hint; the caller owns shortcut handling. */
  shortcut?: string;
  /** Uses the destructive text color. */
  destructive?: boolean;
  /** Controlled checkbox state. */
  checked?: boolean;
  /** Dims the control and prevents activation. */
  disabled?: boolean;
  /** Called on the RN thread after selection. */
  onSelect?: () => void;
};
export type BaseMenuProps = {
  /** Element that accepts an injected onPress callback. */
  trigger: React.ReactElement<{ onPress?: () => void; testID?: string }>;
  /** Available actions or navigation destinations. */
  items: BaseMenuItem[];
  /** Horizontal alignment relative to the trigger. */
  align?: 'start' | 'end';
  /** Optionally controls the anchored panel. */
  open?: boolean;
  /** Called when opening or closing is requested. */
  onOpenChange?: (open: boolean) => void;
  /** Accessible name for this control or task. */
  accessibilityLabel?: string;
  /** Overrides the nearest BaseThemeProvider. */
  theme?: BaseTheme;
  /** Style applied to the container. */
  style?: StyleProp<ViewStyle>;
  /** Stable identifier for the root or trigger. */
  testID?: string;
};
export function BaseMenu({
  trigger,
  items,
  align = 'start',
  open: controlled,
  onOpenChange,
  accessibilityLabel,
  theme: override,
  style,
  testID,
}: BaseMenuProps) {
  const theme = useBaseTheme(override);
  const { triggerRef, open, changeOpen } = useAnchoredPanel(
    controlled,
    onOpenChange,
  );
  return (
    <View style={style}>
      <View
        ref={triggerRef}
        collapsable={false}
        style={{ alignSelf: 'flex-start' }}
      >
        <BaseTriggerState.Provider value={{ expanded: open }}>
          {React.cloneElement(
            trigger as React.ReactElement<ViewProps & { onPress?: () => void }>,
            {
              'aria-expanded': open,
              accessibilityState: {
                ...(trigger.props as ViewProps).accessibilityState,
                expanded: open,
              },
              testID: testID ?? trigger.props.testID,
              onPress: () => {
                trigger.props.onPress?.();
                changeOpen(!open);
              },
            },
          )}
        </BaseTriggerState.Provider>
      </View>
      <AnchoredPanel
        open={open}
        onClose={() => changeOpen(false)}
        anchorRef={triggerRef}
        align={align}
        theme={theme}
        accessibilityLabel={accessibilityLabel}
      >
        {items.map((item, index) =>
          item.type === 'separator' ? (
            <View
              key={index}
              style={{
                height: 1,
                backgroundColor: theme.colors.border,
                marginVertical: 4,
                marginHorizontal: -4,
              }}
            />
          ) : item.type === 'label' ? (
            <Text
              key={index}
              style={{
                paddingHorizontal: 8,
                paddingVertical: 6,
                fontFamily: theme.fonts.medium,
                fontSize: 12,
                lineHeight: 20,
                color: theme.colors.mutedForeground,
              }}
            >
              {item.label}
            </Text>
          ) : (
            <MenuRow
              key={index}
              item={item}
              theme={theme}
              onSelect={() => {
                changeOpen(false);
                item.onSelect?.();
              }}
            />
          ),
        )}
      </AnchoredPanel>
    </View>
  );
}
function MenuRow({
  item,
  theme,
  onSelect,
}: {
  item: BaseMenuItem;
  theme: BaseTheme;
  onSelect: () => void;
}) {
  const reduced = useBaseReducedMotion();
  const highlight = useSharedValue(0);
  const tap = Gesture.Tap()
    .enabled(!item.disabled)
    .onBegin(() => {
      highlight.set(
        withTiming(1, {
          reduceMotion: ReduceMotion.Never,
          duration: reduced ? 0 : 100,
        }),
      );
    })
    .onFinalize(() => {
      highlight.set(
        withTiming(0, {
          reduceMotion: ReduceMotion.Never,
          duration: reduced ? 0 : 100,
        }),
      );
    })
    .onEnd((_event, success) => {
      if (success) scheduleOnRN(onSelect);
    });
  const animated = useAnimatedStyle(() => ({
    backgroundColor: interpolateColor(
      highlight.get(),
      [0, 1],
      [theme.colors.popover, theme.colors.accent],
    ),
  }));
  return (
    <GestureDetector gesture={tap}>
      <Animated.View
        accessible
        accessibilityRole={item.type === 'checkbox' ? 'checkbox' : 'menuitem'}
        accessibilityLabel={item.label}
        accessibilityState={{
          disabled: item.disabled,
          ...(item.type === 'checkbox'
            ? { checked: Boolean(item.checked) }
            : {}),
        }}
        aria-checked={
          item.type === 'checkbox' ? Boolean(item.checked) : undefined
        }
        aria-disabled={item.disabled}

        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...((Platform.OS === 'web'
            ? {
                tabIndex: item.disabled ? -1 : 0,
                onFocus: () =>
                  highlight.set(
                    withTiming(1, {
                      reduceMotion: ReduceMotion.Never,
                      duration: reduced ? 0 : 100,
                    }),
                  ),
                onBlur: () =>
                  highlight.set(
                    withTiming(0, {
                      reduceMotion: ReduceMotion.Never,
                      duration: reduced ? 0 : 100,
                    }),
                  ),
                onKeyDown: (event: React.KeyboardEvent) => {
                  if (
                    !item.disabled &&
                    (event.key === 'Enter' || event.key === ' ')
                  ) {
                    event.preventDefault();
                    onSelect();
                  }
                },
              }
            : {}) as object)
        }
        {
          /* RN Web forwards DOM events rather than native event objects. */
          ...(baseActivationProps(onSelect, item.disabled) as object)
        }
        style={[
          NO_WEB_OUTLINE,
          [
            {
              minHeight: Platform.OS === 'android' ? 48 : 44,
              paddingHorizontal: 8,
              paddingVertical: 12,
              borderRadius: theme.radius.sm,
              flexDirection: 'row',
              alignItems: 'center',
              gap: 8,
              opacity: item.disabled ? 0.5 : 1,
            },
          ],
        ]}
      >
        <Animated.View
          pointerEvents="none"
          style={[
            {
              position: 'absolute',
              left: 0,
              right: 0,
              top: 6,
              bottom: 6,
              borderRadius: theme.radius.sm,
            },
            animated,
          ]}
        />
        {item.type === 'checkbox' ? (
          <View style={{ width: 24, alignItems: 'center' }}>
            {item.checked ? (
              <Check size={14} color={theme.colors.popoverForeground} />
            ) : null}
          </View>
        ) : item.icon ? (
          <View style={{ width: 16 }}>{item.icon}</View>
        ) : null}
        <Text
          style={{
            flex: 1,
            fontFamily: theme.fonts.regular,
            fontSize: 14,
            lineHeight: 20,
            color: item.destructive
              ? theme.colors.destructive
              : theme.colors.popoverForeground,
          }}
        >
          {item.label}
        </Text>
        {item.shortcut ? (
          <Text
            style={{
              fontFamily: theme.fonts.regular,
              fontSize: 12,
              color: theme.colors.mutedForeground,
            }}
          >
            {item.shortcut}
          </Text>
        ) : null}
      </Animated.View>
    </GestureDetector>
  );
}
export default BaseMenu;

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-menu",
  "family": "base",
  "license": "MIT",
  "kind": "component",
  "registryDependencies": [
    "base-theme"
  ],
  "dependencies": {
    "lucide-react-native": "^1.61.0",
    "react-native-gesture-handler": "~3.3.0",
    "react-native-reanimated": "4.7.1",
    "react-native-svg": "15.16.0",
    "react-native-worklets": "0.13.0"
  }
}