@brnho/react-native-context-menu

react-native-context-menu

React Native implementation of iOS context menu - replicates the full set of animations (bounce, haptics, background shrink and blur, etc.), and provides extensive support for customization of menu items and animations.

https://user-images.githubusercontent.com/17365107/211397217-63fa501c-481e-4434-9e52-1e8b491f21c9.mov

Setup

The library is available on npm. Install with npm i @brnho/react-native-context-menu or yarn add @brnho/react-native-context-menu.

Usage

First, wrap the root view of your app with ContextMenuProvider. Then, wrap the component that you want to provide a context menu to with ContextMenuContainer.

import { ContextMenuProvider, ContextMenuContainer } from "@brnho/react-native-context-menu";

export default function App() {
  return (
    <ContextMenuProvider>
      <View style={styles.container}>
        <ContextMenuContainer menuItems={menuItems}>
          <MyExampleComponent />
        </ContextMenuContainer
      </View>
    </ContextMenuProvider>
  );
}

You can customize the context menu via the menuItems prop of ContextMenuContainer. For example:

const menuItems = [
  { text: "Action", isTitle: true },
  {
    text: "Edit",
    icon: {
      type: "Feather",
      name: "edit",
      size: 18,
    },
    onPress: () => {
      alert("Edit pressed");
    },
  },
  {
    text: "Delete",
    icon: {
      type: "Feather",
      name: "trash",
      size: 18,
    },
    withSeparator: true,
    isDestructive: true,
    onPress: () => {
      alert("Delete pressed");
    },
  },
];

Tips/Caveats

• For the positioning of the animations to work properly, do not apply any margins to the target component. Instead, apply margins directly to the ContextMenuContainer wrapper via the margin props (see Props section).

• If your target component has a nonzero border radius, then apply the same amount of border radius to ContextMenuContainer via the borderRadius prop. This ensures that ContextMenuContainer precisely covers the component.

• If you are applying a context menu to an item in a Flatlist, to prevent the user from being able to scroll the list during a long press event, set the setScrollEnabled prop of ContextMenuProvider equal to a state function. For more details, refer to the following example:

export default function App() {
  const [scrollEnabled, setScrollEnabled] = useState(true);
  return (
    <ContextMenuProvider setScrollEnabled={setScrollEnabled}>
      <View style={styles.container}>
        <FlatList
          scrollEnabled={scrollEnabled}
          data={data}
          renderItem={({ item }) => <ListItem item={item} />}
          keyExtractor={(_, index) => index}
        />
      </View>
    </ContextMenuProvider>
  );
}

Props

ContextMenuProvider Props

Name	Type	Default	Required	Description
setScrollEnabled	function	null	No	Function executed on long press to prevent user from being able to scroll
SCREEN_SHRINK_FACTOR	number	0.97	No	Amount by which to shrink the background when the component pops out
EXPAND_FACTOR	number	1.05	No	Amount by which to expand the component when it pops out
FADE_SPEED	number	200	No	Animation speed in MS of the component "un-popping"
APPEAR_SPEED	number	200	No	Animation speed in MS of the component popping out
BLUR_INTENSITY	number	30	No	Degree to which the background is blurred when the component pops out (value is in range [0, 100])
MENU_ITEM_HEIGHT	number	40	No	Height of a single context menu item
DIVIDER_HEIGHT	number	1	No	Height of the dividers separating context menu items
MENU_WIDTH	number	200	No	Width of a single context menu item
MENU_MARGIN	number	7	No	Margin between the component and the context menu

ContextMenuContainer Props

Name	Type	Required	Description
marginTop	number	No	Amount of margin to apply to the top of the component
marginRight	number	No	Amount of margin to apply to the right of the component
marginBottom	number	No	Amount of margin to apply to the bottom of the component
marginLeft	number	No	Amount of margin to apply to the left of the component
borderRadius	number	No	Radius of component corners
menuItems	array	Yes	See below for additional details

menuItems (See Usage section for an example)

menuItems is an array of objects, each representing an item of the context menu. The fields of a menu item object are as follows:

Name	Type	Required	Description
text	string	Yes	Menu item text
icon	object	No	See below for additional details
onPress	function	No	Function to be called when the menu item is pressed
isTitle	string	No	Applies different styling to a menu item designated as the title
isDestructive	boolean	No	Colors text and icon of item in red

The icon prop is a object with the following fields:

Name	Type	Required	Description
type	string	Yes	Icon family (must be one of 'AntDesign', 'Entypo', 'Feather', 'FontAwesome5', 'Ionicons', 'MaterialIcons')
name	string	Yes	Name of icon
size	number	Yes	Size of icon

(See https://icons.expo.fyi/ for a list of icon types and names)