React-Native-Popup-Menu and Stack Navigator

Question

ReactNavigation Stack Navigator has the property HeaderRight useful to place the menu button in the header, but has not a context menu.

Is it possible to integrate the React Native Popup Menu in the Stack Navigator?

Thanks in advance.

Answer 1

It is definitely possible to accomplish. In your root App do the following:

import React, { Component } from 'react';
import { MenuContext } from 'react-native-popup-menu';
import MainNavigator from './components/MainNavigator';

export default class App extends Component {
  render() {
    return (
      <MenuContext>
        <MainNavigator />
      </MenuContext>
    );
  }
}

Then the way you've implemented your headerRight should work perfectly.

Answer 2

I set the navigationOptions of StackNavigator setting my custom button as RightHeader

  static navigationOptions = ({ navigation }) => ({
title: `${navigation.state.params.Name}`,
headerRight: (
      <ContextMenuButton
      />)

I would like to know if it is possible to use the React Native Popup Menu, display and use it in combination with the headerRight

Answer 3

I've been wondering about this as well, and found a solution: Generally, all the Menu parts have to be inside of the Menu tag, so the MenuTrigger as well. You can style the MenuTrigger but I didn't get it into the top bar with that.

Good news: It's even easier than that, simply place the whole Menu into your navigationOptions like this:

static navigationOptions = ({navigation}) => ({
  title: 'Uploaded Videos',
  drawerLockMode: 'locked-closed',
  headerRight: 
    <Menu renderer={SlideInMenu} style={{ zIndex: 10 }}>
      <MenuTrigger text="open menu"/>
      <MenuOptions style={{ flex: 1 }}>
        <Text>Menu</Text>
        <MenuOption onSelect={() => { console.log("clicked") text="Click me" />
      </MenuOptions>
    </Menu>

Caveat: navigationOptions are static, so in your menu you can't use functions of the component. But there are ways around that, see for one example this issue at react-native-navigation. Generally, you should probably use redux for that.

Hopefully this still helps you!