Popup menu does not appear on Android using "react-native-popup-menu"

Question

I am making a mobile app using react-native-popup-menu. (React Native) The popup unit works fine on iOS. But it will not shop up on Android when I test it on Android simulator.

I've seen a post that suggests a fix that involves MenuContext> element. but it looks like that element has been deprecated by the plug-in developers since.

Popup menu does not overlay other components in Android

I'm looking for a up-to-date solution that works for React Native Android environment.

My app looks like this right now:

Import all the tools.

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

The main app looks like this. Everything is wrapped within MenuProvider.

export class App1 extends Component {
render() {
 return (
  <MenuProvider>
  <View style={styles.container}>
  <MoreStuff navigation={this.props.navigation} />
  <TopMenu1 navigation={this.props.navigation} />
  <View1Map />
  </View>
  </MenuProvider>
 );
}
}

This is where I built the pop-up menu. I am following example from the official tutorial.

https://github.com/instea/react-native-popup-menu

In the order of appearance, I have View> element, followed by Menu>, MenuTrigger>, MenuOptions> and MenuOption>.

export class MoreStuff extends Component {

  render(){ 
    return (
<View>
  <Menu>
  <MenuTrigger>
  <Image 
      source={require('./assets/Burger.png')} 
      >
      </Image>
  </MenuTrigger>

  <MenuOptions>
    <MenuOption 

    onSelect={() => {
        //DEFINT ACTION HERE
      }} text='Item 1' />

      <MenuOption onSelect={() => {
        //DEFINE ACTION HERE
      }} text='Item 2' />



      <MenuOption text='Close'
  onSelect={() => this.close}/>

  </MenuOptions>
</Menu>
</View>

);

}
}

Expected: When you click on the MenuTrigger element, the popup menu will come up. Actual result: When you click on the MenuTrigger element, nothing happens.

Answer 1

You can resole the issue by making sure that MenuProvider is the first component that is rendered in the tree.