Provide a imperative api for showing popup menu
Although there are repos have implemented native popup menu for android (@react-native-menu/menu, react-native-context-menu-view), they didn't solve the issue when pressable component as the children of popup menu, pressing will not be triggered, using api to control showing seems more flexible.
This repo didn't provide ios implementation, because ios doesn't have above issue, but if someone has this requirement, PR or issue is welcome.
yarn add @popupmenu/react-native-popup-menuor
npm i @popupmenu/react-native-popup-menuno linking required when using react-native 0.60+
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>
);
};Array<{ id: string; title: string }>(event: { nativeEvent: { id: string } }) => void;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>
) => voidMIT