React Native: Popover Menu

This library is a ReactNative bridge around native popup/popover menus. It allows you to create simple popup menus.

Note: Android SDK 27 > is supported

Android: zawadz88/MaterialPopupMenu
iOS: liufengting/FTPopMenu

Before we dive into on how to use this library. We would like to thank all the contributor of zawadz88/MaterialPopupMenu liufengting/FTPopMenu libraries for providing such a awesome nice, cool library

Getting started

$ npm install react-native-popover-menu --save

$ react-native link react-native-popover-menu

Usage

import RNPopoverMenu from 'react-native-popover-menu';
  • React Way
<RNPopover visible={this.state.visible} reference={this.ref}>
  <RNPopover.Menu label={"Editing"}>
    <RNPopover.Menu label={"Copy"} icon={copy} />
    <RNPopover.Menu label={"Paste"} icon={paste} />
  </RNPopover.Menu>
  <RNPopover.Menu >
    <RNPopover.Menu label={"Share"} icon={share} />
  </RNPopover.Menu>
</RNPopover>;
  • API Way
    RNPopoverMenu.Show(this.ref, {
      title: "",
      menus: [ ],
      onDone: selection => { },
      onCancel: () => { }
    });

Props

Prop Type Default Note
title string Title of popove section
tintColor: iOS string Color of tint
perferedWidth: iOS number Perfered Width of the Popover
rowHeight: iOS number Height of the menu row
menus array Array of Menus
onDone(sectionSelection, menuSelection) func It is called when menu is selected
onCancel func It is called when we close the popover
theme: Android string light Light & Dark theme support only on Android Platform

GitHub