Introduction

Extensible popup menu component for React Native for Android, iOS and (unofficially) UWP and react-native-web.

Features:

• Simple to use popup/context menu
• Multiple modes: animated, not animated, slide in from bottom or popover
• By default opening and closing animations
• Optional back button handling
• Easy styling
• Customizable on various levels - menu options, positioning, animations
• Can work as controlled as well as uncontrolled component
• Different lifecycle hooks
• RTL layout support

Community driven features:

• Support for UWP, react-native-web and react-native-desktop
• Typescript definitions

Installation

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

Example

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import {
  MenuContext,
  Menu,
  MenuOptions,
  MenuOption,
  MenuTrigger,
  MenuProvider,
} from 'react-native-popup-menu';

export default class App extends Component {
  render() {
    return (
      <MenuProvider style={styles.container}>
        <View>
          <Menu>
            <MenuTrigger style={styles.button}
            text="Open menu" />
            <MenuOptions>
              <MenuOption onSelect={() => alert(` You clicked on Save`)} text="Save" />
              <MenuOption onSelect={() => alert(`You Clicked on Delete`)}>
                <Text style={{ color: 'red' }}>Delete</Text>
              </MenuOption>
              <MenuOption
                onSelect={() => alert(`Not called`)}
                disabled={true}
                text="Disabled"
              />
            </MenuOptions>
          </Menu>
        </View>
      </MenuProvider>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 50,
    backgroundColor: '#ecf0f1',
  },
  button:{
  backgroundColor: 'lightblue',
  padding: 15,
  borderRadius: 5,
  textalign: 'center',
  display: 'flex',
  fontsize: 16,
  margin: 4,
  }
});

Tutorial