React Navigation Header Button (V5 / Version 5.x): Show Menu Item

Question

I am using React-Native-Paper's Menu Component

I am trying to show Menu item from the header after tapping an icon.

So far I have managed to show list of item on the screen only.

However, I want to show the menu list from the header.

Due to React Navigation's update from version:4.x to version:5.x, I am a bit confused on how to work this out. I tried following the example here but still I need some time to fully understand hook and the way it works.

All kinds of help would be appreciated.

Workable/Testable code link, code snippets and screenshots provided below:

Snack Link

Register.js:

import { TextInput, Button, Menu, Divider, Provider } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    }
  }

  //[ TEST DROP DOWN MENU ]
  _openMenu = () => this.setState({ visible: true });

  _closeMenu = () => this.setState({ visible: false });

  renderMenuExample() {
    return (
      <View
        style={{
          paddingTop: 50,
          flexDirection: 'row',
          justifyContent: 'center'
        }}>
        <Menu
          visible={this.state.visible}
          onDismiss={this._closeMenu}
          anchor={
            < TouchableOpacity
              onPress={this._openMenu}
              style={{ marginHorizontal: 20 }}
            >
              <MaterialCommunityIcons name="earth" size={30} style={{ color: 'black' }} />
            </TouchableOpacity>
          }
        >
          <Menu.Item onPress={() => { }} title="Item 1" />
          <Menu.Item onPress={() => { }} title="Item 2" />
          <Divider />
          <Menu.Item onPress={() => { }} title="Item 3" />
        </Menu>
      </View>
    );
  }
  //[ TEST DROP DOWN MENU ]

  render() {
    return (
      <Provider>
        {this.renderMenuExample()}
      </Provider>
    );
  }
}

export default Register;

App.js:

import { TextInput, Button, Menu, Divider, Provider } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Register"
          component={Register}
          options={{
            headerBackImage: () => (
              <AntDesign name="close" size={30} style={{ color: 'white' }} />
            ),
            headerTitle: () => (
              <View>
                <Text style={{ flex: 1, fontSize: 20, fontWeight: 'bold', alignSelf: 'center', color:                   'white' }}>
                  Register
                </Text>
              </View>
            ),
            headerRight: () => (
              <TouchableOpacity
                onPress={() => {/* I WANT TO SHOW THE MENU HERE */ }}
                style={{ marginHorizontal: 20 }}
              >
                <MaterialCommunityIcons name="earth" size={30} style={{ color: 'white' }} />
              </TouchableOpacity>
            ),
            headerStyle: {
              backgroundColor: '#2e46ff',
            },
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Screenshot:

Answer 1

One possible solution would be to wrap the navigation container with a provider and have a separate component for the menu. Tried this with your snack and it works

The code would be as below.

const CustomMenu = () => {
  const [showMenu, setShowMenu] = React.useState(false);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="earth"
              size={30}
              style={{ color: 'black' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item onPress={() => {}} title="Item 1" />
        <Menu.Item onPress={() => {}} title="Item 2" />
        <Divider />
        <Menu.Item onPress={() => {}} title="Item 3" />
      </Menu>
    </View>
  );
};

function App() {
  return (
    <Provider>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Register"
            component={Register}
            options={{
              headerBackImage: () => (
                <AntDesign name="close" size={30} style={{ color: 'white' }} />
              ),
              headerTitle: () => (
                <View>
                  <Text
                    style={{
                      flex: 1,
                      fontSize: 20,
                      fontWeight: 'bold',
                      alignSelf: 'center',
                      color: 'white',
                    }}>
                    Register
                  </Text>
                </View>
              ),
              headerRight: () => <CustomMenu />,
              headerStyle: {
                backgroundColor: '#2e46ff',
              },
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
}