mpiannucci / react-native-context-menu-view

Use native context menus in React Native
MIT License
659 stars 68 forks source link
android ios javascript npm react-native

react-native-context-menu-view

Use native context menu functionality from React Native. On iOS 13+ this uses UIMenu functionality, and on Android it uses a ContextMenu.

On iOS 12 and below, nothing happens. You may wish to do a Platform.OS === 'ios' && parseInt(Platform.Version, 10) <= 12 check, and add your own onLongPress handler.

Getting started

$ npm install react-native-context-menu-view --save

Mostly automatic installation

cd ios/
pod install

Usage

import ContextMenu from "react-native-context-menu-view";

const Example = () => {
  return (
    <ContextMenu
      actions={[{ title: "Title 1" }, { title: "Title 2" }]}
      onPress={(e) => {
        console.warn(
          `Pressed ${e.nativeEvent.name} at index ${e.nativeEvent.index}`
        );
      }}
    >
      <View style={styles.yourOwnStyles} />
    </ContextMenu>
  );
};

See example/ for basic usage.

Props

title

Optional. The title above the popup menu.

actions

Array of { title: string, subtitle?: string, systemIcon?: string, icon?: string, iconColor?: string, destructive?: boolean, selected?: boolean, disabled?: boolean, disabled?: boolean, inlineChildren?: boolean, actions?: Array<ContextMenuAction> }.

onPress

Optional. When the popup is opened and the user picks an option. Called with { nativeEvent: { index, indexPath, name } }. When a nested action is selected the top level parent index is used for the callback.

To get the full path to the item, indexPath is an array of indices to reach the item. For a top-level item, it'll be an array with a single index. For an item one deep, it'll be an array with two indexes.

onPreviewPress

Optional, iOS only. When the context menu preview is tapped.

onCancel

Optional. When the popup is opened and the user cancels.

previewBackgroundColor

Optional. The background color of the preview. This is displayed underneath your view. Set this to transparent (or another color) if the default causes issues.

dropdownMenuMode

Optional. When set to true, the context menu is triggered with a single tap instead of a long press, and a preview is not show and no blur occurs. Uses the iOS 14 Menu API on iOS and a simple tap listener on android.

disabled

Optional. Disable menu interaction.