content: import {
    Menu,
    MenuProvider,
    MenuOptions,
    MenuTrigger,
    renderers,
  } from 'react-native-popup-menu';
  import { Text, View, StyleSheet } from 'react-native';
  import React from 'react';
  
  const { Popover } = renderers
  
  const MyPopover = () => (
    <Menu renderer={Popover} rendererProps={{ preferredPlacement: 'bottom' }}>
      <MenuTrigger style={styles.menuTrigger} >
        <Text style={styles.triggerText}>{'\u263A'}</Text>
      </MenuTrigger>
      <MenuOptions style={styles.menuOptions}>
        <Text style={styles.contentText}>Hello world!</Text>
      </MenuOptions>
    </Menu>
  )
  
  const Row = () => (
    <View style={styles.row}>
      <MyPopover />
      <MyPopover />
      <MyPopover />
      <MyPopover />
      <MyPopover />
      <MyPopover />
    </View>
  )
  
  const PopoverExample = () => (
    <MenuProvider style={styles.container} customStyles={{ backdrop: styles.backdrop }}>
      <Row />
      <Row />
      <Row />
      <Row />
      <Row />
      <Row />
      <Row />
      <Row />
    </MenuProvider>
  );
  
  const styles = StyleSheet.create({
    container: {
      padding: 10,
      flexDirection: 'column',
      justifyContent: 'space-between',
      backgroundColor: 'rgba(0, 0, 0, 0.05)',
    },
    row: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    backdrop: {
    },
    menuOptions: {
      padding: 50,
    },
    menuTrigger: {
      padding: 5,
    },
    triggerText: {
      fontSize: 20,
    },
    contentText: {
      fontSize: 18,
    },
  })
  
  export default PopoverExample;
  