React-Native-PopupMenu

Provide a programmatically api for showing popup menu

Why this?

Although there are repos have implemented native popup menu component for android (@react-native-menu/menu, react-native-context-menu-view), but they didn't solve the issue when pressable component as the children of popup menu, press event will not be triggered, for this issue, using api to control showing seems more flexible.

This repo didn't provide ios implementation, because ios doesn't have this issue, but if someone has this requirement, PR or issue is welcomed. So when used under ios platform, a normal View will be returned

Install

1yarn add @popupmenu/react-native-popup-menu

or

1npm i @popupmenu/react-native-popup-menu

no linking required when using react-native 0.60+

Usage

1import * as React from 'react';
2import { useRef } from 'react';
3import { Pressable, View, Text } from 'react-native';
4import { PopupMenu, showPopupMenu } from '@popupmenu/react-native-popup-menu';
5
6const ContentInPopupMenu = () => {
7  const popRef = useRef<any>(null);
8  const anchorRef = useRef<any>(null);
9
10  return (
11    <PopupMenu
12      ref={popRef}
13      onActionPress={(ev) => {
14        console.log('action press:', ev.nativeEvent);
15      }}
16      actions={[
17        { id: 'eat', title: 'go eating' },
18        { id: 'drink', title: 'got drinking' },
19      ]}
20      style={{
21        backgroundColor: 'pink',
22        padding: 10,
23      }}
24    >
25      <Text style={{ fontWeight: 'bold', fontSize: 20 }}>long press below</Text>
26      <Pressable
27        ref={anchorRef}
28        onLongPress={() => {
29          console.log('long press');
30          showPopupMenu(popRef, anchorRef);
31        }}
32        onPress={() => {
33          console.log('press can be triggered under PopupMenu');
34        }}
35        style={{
36          width: 300,
37          padding: 20,
38          height: 100,
39          backgroundColor: 'orange',
40        }}
41      />
42    </PopupMenu>
43  );
44};
45

API

PopupMenu

props

actions:

1Array<{ id: string; title: string }>

onActionPress:

1(event: { nativeEvent: { id: string } }) => void;

showPopupMenu

Call this method to programmatically show popup menu

1(
2  // shoud be the ref of PopupMenu
3  popupMenuRef: MutableRefObject<typeof PopupMenu>,
4  // popup menu will show besides this ref component
5  anchorRef: MutableRefObject<any>
6) => void

License

MIT