How to combine Menu Popup with TouchableOpacity in React Native?

Question

I use the menu popup. I wonder where should I put the TouchableOpacity in so when I press it, there will be a menu shown

Here's the TouchableOpacity

Or is there a way to style the menu provider/ context so that it interacts like a button ?

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

export default class App extends Component {
  render() {
    return (
      <MenuContext style={styles.container}>
        <View>
          <Menu>
            <MenuTrigger text="Select action" />
            <MenuOptions>
              <MenuOption onSelect={() => alert(`Save`)} text="Save" />
              <MenuOption onSelect={() => alert(`Delete`)}>
                <Text style={{ color: 'red' }}>Delete</Text>
              </MenuOption>
              <MenuOption
                onSelect={() => alert(`Not called`)}
                disabled={true}
                text="Disabled"
              />
            </MenuOptions>
          </Menu>
        </View>
      </MenuContext>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
    color: '#34495e',
  },
});

Answer 1

Is this the way you want it?

If you want to add TouchableOpacity, you can use it in View.

<MenuContext style={styles.container}>
        <View>
          <Menu>
            <MenuTrigger text="Select action" />
            <MenuOptions>
              <MenuOption onSelect={() => alert(`Save`)} text="Save" />
              <MenuOption onSelect={() => alert(`Delete`)}>
                <Text style={{ color: 'red' }}>Delete</Text>
              </MenuOption>
              <MenuOption
                onSelect={() => alert(`Not called`)}
                disabled={true}
                text="Disabled"
              />
            </MenuOptions>
          </Menu>
          <TouchableOpacity onPress={()=> alert("TouchableOpacity")} style={{width:"100%",backgroundColor:"green",alignItems:"center"}}>
          <Text> Login </Text>
          </TouchableOpacity>
        </View>
      </MenuContext>