How to use react-native-popup-menu - 6 common examples

{ Component: Example, name: 'Advanced example' },
  { Component: ControlledExample, name: 'Controlled example' },
  { Component: MenuMethodsExample, name: 'Controlling menu using menu methods' },
  { Component: ExtensionExample, name: 'Extensions example' },
  { Component: ModalExample, name: 'Modal example' },
  { Component: StylingExample, name: 'Styling example' },
  { Component: TouchableExample, name: 'Touchable config example' },
  { Component: NonRootExample, name: 'Non root example' },
  { Component: CloseOnBackExample, name: 'Close on back button press example' },
  { Component: FlatListExample, name: 'Using FlatList' },
  { Component: InFlatListExample, name: 'Menu in FlatList' },
  { Component: PopoverExample, name: 'Popover renderer' },
];

// show debug messages for demos.
Menu.debug = true;

export default class Demo extends Component {
  constructor(props, ctx) {
    super(props, ctx);
    this.state = {
      selected: undefined,
    };
  }
  render() {
    if (this.state.selected) {
      return ;
    }
    return (

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

Menu.debug = true;

const data = new Array(500)
  .fill(0)
  .map((a, i) => ({ key: i, value: 'item' + i }));

export default class App extends Component {
  render() {
    return (
      
        <menu> Alert.alert(value)}&gt;
          
          
             (
                </menu>

)

const IconOption = ({iconName, text, value}) => (
  
    
  
)

const { computePosition } = renderers.ContextMenu;
const roundedStyles = {
  backgroundColor: 'yellow',
  borderRadius: 30,
}
class RoundedContextMenu extends React.Component {
  render() {
    const { style, children, layouts, ...other } = this.props;
    const position = computePosition(layouts);
    return (
      
    );
  }
}

const ExtensionExample = () => (
  
    
    <menu> alert(`Selected number: ${value}`)}
      renderer={renderers.NotAnimatedContextMenu}
    &gt;
      
      
        
        
        
      
    </menu>
    <menu>
      
      
        
        
      
    </menu>

export default function SlideInMenu(state: State) {
  const {itemMenu} = state;
  const {type, target, opened} = itemMenu;
  return h(
    Menu,
    {
      sel: 'slide-in-menu',
      renderer: renderers.SlideInMenu,
      opened,
    },
    [
      h(MenuTrigger, {disabled: true}),
      h(
        MenuOptions,
        type === 'conn'
          ? connMenuOptions(target)
          : type === 'room'
          ? roomMenuOptions()
          : type === 'staging'
          ? stagingMenuOptions()
          : type === 'staged-room'
          ? stagedRoomMenuOptions()
          : type === 'invite'
          ? inviteMenuOptions()

import Menu, {
  MenuProvider,
  MenuOptions,
  MenuOption,
  MenuTrigger,
  withMenuContext,
} from 'react-native-popup-menu';

const Openner = (props) => (
   props.ctx.menuActions.openMenu('menu-1')}>
    
  
);

const ContextOpenner = withMenuContext(Openner);

export default class ControlledExample extends Component {

  onOptionSelect(value) {
    alert(`Selected number: ${value}`);
    if (value === 1) {
      this.menu.close();
    }
    return false;
  }

  openMenu() {
    this.menu.open();
  }

  onRef = r => {