CODEWITHSUNDEEP
react-nativereact-native-navigation
Marco Martin
Marco Martin

Reputation: 185

React native headerRight menu does not trigger

I have a react native app where I'll like to put a (3 dots) menu on the right. The icon is shown but when clicking is not triggered. If I move the menu away from the navigation bar, there it is trigged.

Here's the NEW code :

import React, { Component } from 'react';

import {
  SafeAreaView,
  Animated,
  StyleSheet,
  Dimensions,
  ScrollView,
  AsyncStorage,
  Text,
  TouchableHighlight,
  FlatList, 
  Image, 
  ActivityIndicator, 
  TouchableOpacity,  
  Clipboard, 
} from "react-native";

import { Container, Content, View, Header, Left, Right, Button , Icon , Body, Title, Segment , Toast} from "native-base";

import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';

const MyHeaderMenuComponent = () => {
  const [showMenu, setShowMenu] = React.useState(true);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <Icon style={{color:'#ffffff',fontSize:25,marginRight:5}} name="md-more"/>
          </TouchableOpacity>
        }>
        <Menu.Item onPress={() => {}} title="Item 1" />
        <Menu.Item onPress={() => {}} title="Item 2" />
        <Menu.Item onPress={() => {}} title="Item 3" />
      </Menu>
    </View>
  );
};

export default MyHeaderMenuComponent;

then on main screen:

import MyHeaderMenuComponent from '../components/myHeaderMenuComponent'

    static navigationOptions = ({ navigation }) => {
        const {params} = navigation.state;
        const comingFrom = navigation.getParam('comingFrom');
        
        return {
            title: params && params.title ? params.title : 'Raid Room',
            titleStyle: {
                color: '#ffffff',  
            },
            tintColor: '#ffffff',
            headerTintColor: '#ffffff',
            headerStyle: {
                backgroundColor: "#395faa"
            },
            headerTitleStyle: {
                color: '#ffffff'
            },
            headerRight: () => <MyHeaderMenuComponent />
        };  
    };

but now nothing appears...

Upvotes: 0

Views: 365

Answers (1)

Rajshekhar
Rajshekhar

Reputation: 624

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>
  );
};

Can you try this:

headerRight: () => <CustomMenu />

Upvotes: 0

Related Questions