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

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

or

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

no linking required when using react-native 0.60+

Usage

import * as React from 'react';
import { useRef } from 'react';
import { Pressable, View, Text } from 'react-native';
import { PopupMenu, showPopupMenu } from '@popupmenu/react-native-popup-menu';

const ContentInPopupMenu = () => {
  const popRef = useRef<any>(null);
  const anchorRef = useRef<any>(null);

  return (
    <PopupMenu
      ref={popRef}
      onActionPress={(ev) => {
        console.log('action press:', ev.nativeEvent);
      }}
      actions={[
        { id: 'eat', title: 'go eating' },
        { id: 'drink', title: 'got drinking' },
      ]}
      style={{
        backgroundColor: 'pink',
        padding: 10,
      }}
    >
      <Text style={{ fontWeight: 'bold', fontSize: 20 }}>long press below</Text>
      <Pressable
        ref={anchorRef}
        onLongPress={() => {
          console.log('long press');
          showPopupMenu(popRef, anchorRef);
        }}
        onPress={() => {
          console.log('press can be triggered under PopupMenu');
        }}
        style={{
          width: 300,
          padding: 20,
          height: 100,
          backgroundColor: 'orange',
        }}
      />
    </PopupMenu>
  );
};

API

PopupMenu

props

actions:

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

onActionPress:

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

showPopupMenu

Call this method to programmatically show popup menu

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

License

MIT