AniUI

Context Menu

A long-press context menu with items, separators, and destructive actions. Built on @rn-primitives/context-menu.

Long press to open context menu
Web preview — components render natively on iOS & Android
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
} from "@/components/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger>
    <View className="h-40 w-full items-center justify-center rounded-lg border border-dashed border-border">
      <Text>Long press me</Text>
    </View>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onPress={() => {}}>Edit</ContextMenuItem>
    <ContextMenuItem onPress={() => {}}>Duplicate</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem destructive onPress={() => {}}>Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Installation#

npx @aniui/cli add context-menu

Requires @rn-primitives/context-menu and @rn-primitives/portal. Add <PortalHost /> to your root layout.

Usage#

app/index.tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
} from "@/components/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger>
    <View className="h-40 w-full items-center justify-center rounded-lg border border-dashed border-border">
      <Text>Long press me</Text>
    </View>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onPress={() => {}}>Edit</ContextMenuItem>
    <ContextMenuItem onPress={() => {}}>Duplicate</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem destructive onPress={() => {}}>Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Components#

ComponentDescription
ContextMenu

Root wrapper — manages open/close state

ContextMenuTrigger

Long-press target that opens the menu

ContextMenuContent

Menu panel with items

ContextMenuItem

Individual menu action

ContextMenuSeparator

Visual divider between items

Props#

ContextMenu#

PropTypeDefault
open
boolean
—

Controlled open state

onOpenChange
(open: boolean) => void
—

Called when state changes

children
React.ReactNode
—

ContextMenuItem#

PropTypeDefault
destructive
boolean
false

Renders in destructive color

className
string
—
children
React.ReactNode
—

Accessibility#

  • Uses @rn-primitives/context-menu for proper menu semantics
  • accessibilityRole="menuitem" on each item
  • accessibilityHint="Long press for options" on trigger
  • Collision detection for screen edge positioning
  • Requires <PortalHost /> at app root

Source#

components/ui/context-menu.tsx
// See components/ui/context-menu.tsx
// Built on @rn-primitives/context-menu
// Triggered by long press on ContextMenuTrigger
Previous← Connection BannerNextData Table →