Open Menu on click of Icon in React Native

Question

I am not able to identify how to display Menu items when clicked on Icon in React Native

Expo Link

Code

_onPressItem = () => {
    this.setState({ opened: true });
    };

  render() {
    return (
      <View style={styles.container}>
        <ListItem
          title={
            <View>
              <Text style={{ fontWeight: "bold" }}>Mason Laon Roah</Text>
              <Text>9886012345</Text>
            </View>
          }
          subtitle={
            <View>
              <Text>445 Mount Eden Road, Mount Eden, Auckland. </Text>
              <Text>Contact No: 134695584</Text>
            </View>
          }
          leftAvatar={{ title: 'MD' }}
          rightContentContainerStyle={{ alignSelf: 'flex-start'}}
          rightTitle={<Icon type="material" color="red" name="more-vert" />}
        />
      </View>     
    );
  }

  getMenuView() {
    const { opened } = this.state;

    return (
      <MenuProvider style={{flexDirection: 'column', padding: 30}}>
        <Menu
          opened={opened}
          onBackdropPress={() => this.onBackdropPress()}
          onSelect={value => this.onOptionSelect(value)}>
          <MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />
          <MenuOptions>
            <MenuOption value={1} text='One' />
            <MenuOption value={2}>
              <Text style={{color: 'red'}}>Two</Text>
            </MenuOption>
            <MenuOption value={3} disabled={true} text='Three' />
          </MenuOptions>
        </Menu>
      </MenuProvider>
    );
  }

Please let me know how to integrate Menu with Icon..

Basically all the items are displayed in FlatList where each item have its own Menu Item

Answer 1

Just Update Code below:

instead of:

rightTitle={<Icon type="material" color="red" name="more-vert" />}

update to:

rightTitle={this.getMenuView()}

Because this Method returns view not Menu popup.

and instead of:

<MenuTrigger onPress={() => this._onPressItem()} text="Menu Icon Here" />

update to:

<MenuTrigger onPress={() => this._onPressItem()}>
              <Icon type="material" color="red" name="more-vert" />
          </MenuTrigger>

so that instead of printing text, it shows icon.

I tried this code on your given link, it works..