CraftReactNative Documentation

A context menu component that displays a list of actions when triggered. Features smart positioning, smooth animations, and customizable menu items with support for icons and subtitles.

Dependencies

2 packages

react-native-reanimated

react-native-unistyles

Required imports

craftrn-ui/components/ListItem

Usage

Screen.tsx

import {
  ContextMenu,
  ContextMenuItem,
} from '@/craftrn-ui/components/ContextMenu';
import { Button } from '@/craftrn-ui/components/Button';
 
const menuItems: ContextMenuItem[] = [
  {
    id: '1',
    label: 'Edit',
    subtitle: 'Modify this item',
    onPress: () => console.log('Edit pressed'),
  },
  {
    id: '2',
    label: 'Delete',
    onPress: () => console.log('Delete pressed'),
  },
];
 
export const Screen = () => (
  <ContextMenu
    items={menuItems}
    menuAnchorPosition="bottom-center"
    trigger={onPress => <Button onPress={onPress}>Show Menu</Button>}
  />
);

Features

Smart Positioning: Automatically positions the menu based on available screen space
Smooth Animations: Enter and exit animations with configurable timing
Flexible Trigger: Any component can trigger the context menu
Rich Menu Items: Support for labels, subtitles, left and right icons
Multiple Anchor Positions: Position menu relative to trigger (top/bottom + left/center/right)
Keyboard Dismissal: Automatically dismisses keyboard when opened
Overlay Protection: Tap outside to close functionality

Props

Prop	Type	Default
`items`	`ContextMenuItem[]`	-
`trigger`	`(onPress: () => void) => ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`menuAnchorPosition?`	`MenuAnchorPosition`	-
`offset?`	`{ x: number; y: number; }`	-

ContextMenuItem

Prop	Type	Default
`id`	`string`	-
`label`	`string`	-
`subtitle?`	`string`	-
`itemLeft?`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`itemRight?`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`onPress`	`() => void`	-

ContextMenu

Dependencies

Usage

Features

Props

ContextMenuItem

On this page