HomeOur TeamContact

Popup Menu

By Utkarsh Lubal
Published in Buttons
June 16, 2022
1 min read
Popup Menu

Table Of Contents

01
Introduction
02
Installation
03
Example
04
Tutorial

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


Tags

popup
Previous Article
Disabled Table
Next Article
Light Box
Utkarsh Lubal

Utkarsh Lubal

Full Stack Developer

Related Posts

Custom Button 2
Custom Button 2
May 06, 2023
1 min

Quick Links

Advertise with usAbout UsContact Us

Social Media