react-native-popup-menu

Popup menu component for React Native. It is inspired by react-native-menu component which has some performance limitations. Target platforms are both Android and iOS.

Installation

npm install instea/react-native-popup-menu --save

Basic Usage

import React, { Text, AppRegistry } from 'react-native';
import Menu, {
  MenuContext,
  MenuOptions,
  MenuOption,
  MenuTrigger
} from 'react-native-popup-menu';

export const App = () => (
  <MenuContext style={{flexDirection: 'column'}}>
    <Text>Hello world!</Text>
    <Menu onSelect={value => alert(`Selected number: ${value}`)}>
      <MenuTrigger>
        <Text>Select option</Text>
      </MenuTrigger>
      <MenuOptions>
        <MenuOption value={1}>
          <Text>One</Text>
        </MenuOption>
        <MenuOption value={2}>
          <Text>Two</Text>
        </MenuOption>
      </MenuOptions>
    </Menu>
  </MenuContext>
);

AppRegistry.registerComponent('examples', () => App);

API

MenuContext

It provides methods to handle popup menus imperatively. The same methods are exposed to the child context with name menuActions.

Methods, menuActions context

Note: It is important that <MenuContext /> is on the top of the component hierarchy and wrap all <Menu /> components. This is needed in order to solve z-index issues.

Menu

Root menu component defining menu name and providing menu events.

Options

Events

MenuTrigger

It defines position where the popup menu will be rendered. Menu can by opened by clicking on <MenuTrigger /> or by calling context methods.

Options

Note: It is necessary that <MenuTrigger /> is a direct child of <Menu />.

MenuOptions

This components wrapps all menu options.

Note: It is necessary that <MenuOptions /> is a direct child of <Menu />.

MenuOption

Wrapper component of menu option.