Skip to content

Context Menu Primitive

Shows a menu activated by either a right-click or a long-press.

Install the component via your command line.

Terminal window
npx expo install @rn-primitives/context-menu
import * as React from 'react';
import * as ContextMenuPrimitive from '@rn-primitives/context-menu';
import { Text } from 'react-native';
function Example() {
const [checkboxValue, setCheckboxValue] = React.useState(false);
const [subCheckboxValue, setSubCheckboxValue] = React.useState(false);
const [radioValue, setRadioValue] = React.useState('pedro');
return (
<ContextMenu.Root>
<ContextMenu.Trigger>
<Text>
{Platform.OS === 'web' ? 'Right click here' : 'Long press here'}
</Text>
</ContextMenu.Trigger>
<ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Overlay>
<ContextMenu.Content>
<ContextMenu.Item >
<Text>Back</Text>
</ContextMenu.Item>
<ContextMenu.Item >
<Text>Forward</Text>
</ContextMenu.Item>
<ContextMenu.Item >
<Text>Reload</Text>
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger >
<Text>More Tools</Text>
</ContextMenu.SubTrigger>
<ContextMenu.SubContent>
<ContextMenu.Item>
<Text>Save Page As...</Text>
</ContextMenu.Item>
<ContextMenu.Item>
<Text>Create Shortcut...</Text>
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>
<Text>Developer Tools</Text>
</ContextMenu.Item>
</ContextMenuSubContent>
</ContextMenuSub>
<ContextMenu.Separator />
<ContextMenu.CheckboxItem
checked={checkboxValue}
onCheckedChange={setCheckboxValue}
closeOnPress={false}
>
<Text>Show Bookmarks Bar</Text>
</ContextMenu.CheckboxItem>
<ContextMenu.CheckboxItem
checked={subCheckboxValue}
onCheckedChange={setSubCheckboxValue}
closeOnPress={false}
>
<Text>Show Full URLs</Text>
</ContextMenu.CheckboxItem>
<ContextMenu.Separator />
<ContextMenu.RadioGroup value={radioValue} onValueChange={setRadioValue}>
<ContextMenu.Label >People</ContextMenu.Label>
<ContextMenu.Separator />
<ContextMenu.RadioItem value='pedro' closeOnPress={false}>
<Text>Elmer Fudd</Text>
</ContextMenu.RadioItem>
<ContextMenu.RadioItem value='colm' closeOnPress={false}>
<Text>Foghorn Leghorn</Text>
</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>
</ContextMenu.Content>
</ContextMenuPrimitive.Overlay>
</ContextMenuPrimitive.Portal>
</ContextMenu.Root>
);
}

Extends View props

PropTypeNote
onOpenChange(open: boolean) => void
asChildboolean(optional)
relativeTo’longPress’ | ‘trigger’Native Only_(optional)_

Extends Pressable props

PropTypeNote
asChildboolean(optional)
MethodsargsNote
openNative ONLY: opens the context menu
closeNative ONLY: closes the context menu
PropTypeNote
children*React.ReactNode
forceMounttrue | undefined(optional)
hostNamestringWeb Only (optional)
containerHTMLElement | null | undefinedWeb Only (optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined;(optional)

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue | undefined(optional)
alignOffsetnumber(optional)
insetsInsets(optional)
avoidCollisionsboolean(optional)
align’start’ | ‘center’ | ‘end’(optional)
side’top’ | ‘bottom’(optional)
sideOffsetnumber(optional)
disablePositioningStylebooleanNative Only (optional)
loopbooleanWeb Only (optional)
onCloseAutoFocus(event: Event) => voidWeb Only (optional)
onEscapeKeyDown(event: KeyboardEvent) => voidWeb Only (optional)
onPointerDownOutside(event: PointerDownOutsideEvent) => voidWeb Only (optional)
onFocusOutside(event: FocusOutsideEvent) => voidWeb Only (optional)
onInteractOutsidePointerDownOutsideEvent | FocusOutsideEventWeb Only (optional)
collisionBoundaryElement | null | Array<Element | null>Web Only (optional)
sticky’partial’ | ‘always’Web Only (optional)
hideWhenDetachedbooleanWeb Only (optional)

Extends Text props

PropTypeNote
asChildboolean(optional)

Extends Text props

PropTypeNote
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
textValueboolean(optional)
closeOnPressboolean(optional)

Extends Pressable props

PropTypeNote
checked*boolean
onCheckedChange*(value: boolean) => void
textValue*string
asChildboolean(optional)
closeOnPressbooleanNative Only_(optional)_

Extends View props

PropTypeNote
value*boolean
onValueChange*(value: boolean) => void
asChildboolean(optional)

Extends Pressable props

PropTypeNote
value*boolean
onCheckedChange*(value: boolean) => void
asChildboolean(optional)
closeOnPressbooleanNative Only_(optional)_

Extends View props

PropTypeNote
asChildboolean(optional)
forceMounttrue /undefined

Extends View props

PropTypeNote
asChildboolean(optional)
decorativeboolean(optional)

Extends View props

PropTypeNote
asChildboolean(optional)
defaultOpenboolean(optional)
openboolean(optional)
onOpenChange(value: boolean) => void(optional)

Extends Pressable props

PropTypeNote
textValuestring(optional)
asChildboolean(optional)

Extends Pressable props

PropTypeNote
asChildboolean(optional)
forceMounttrue /undefined

Must be used within a Root component. It provides the following values from the context menu: open, and onOpenChange.

Must be used within a Sub component. It provides the following values from the context menu: open, and onOpenChange.