Context Menu

A context menu provides access to functionality that's directly related to an item, without cluttering the interface.

Installation

Before copy/pasting, add the following dependencies to your project:

Usage

index.tsx
import * React from 'react';
import { View } from 'react-native';
import * as ContextMenu from 'zeego/context-menu';

import { Text } from '~/components/nativewindui/Text';

function ContextMenuExample() {
  const [isChecked, setIsChecked] = React.useState(true);
  return (
    <View>
      <ContextMenu.Root style={{ borderRadius: 12 }}>
        <ContextMenu.Trigger>
          <View className="h-36 w-full items-center justify-center rounded-xl border border-dashed border-foreground">
            <Text>Press and hold me</Text>
          </View>
        </ContextMenu.Trigger>
        <ContextMenu.Content>
          <ContextMenu.Label children="Label 1" />
          <ContextMenu.Item key="item-1">
            <ContextMenu.ItemTitle>Item 1</ContextMenu.ItemTitle>
          </ContextMenu.Item>
          <ContextMenu.Group>
            <ContextMenu.Item key="item-2">
              <ContextMenu.ItemTitle>Item 2</ContextMenu.ItemTitle>
            </ContextMenu.Item>
            <ContextMenu.CheckboxItem
              key="checkbox-example"
              value={isChecked}
              onValueChange={(val) => {
                setIsChecked(val === 'on');
              }}>
              <ContextMenu.ItemTitle>Item 3</ContextMenu.ItemTitle>
              <ContextMenu.ItemIndicator />
            </ContextMenu.CheckboxItem>
          </ContextMenu.Group>
          <ContextMenu.Separator />
        </ContextMenu.Content>
      </ContextMenu.Root>
    </View>
  );
}
© Ronin Technologies LLC 2024