Unable to open the Menu when I click on navigation right button option icon

[gkasireddy202]

Current behaviour

I am trying to open the Menu, but when I click on the navigation right button option icon the menu does not open.

Expected behaviour

Menu should be open when i click on navigation right button.

How to reproduce?

CODE

import React, { Component } from 'react';
import { View, StyleSheet, Alert } from 'react-native';
import { TextInput, Button, Card, Title, Menu, Divider } from 'react-native-paper';
import { Dropdown } from 'react-native-element-dropdown';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

class LoginPage extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
selectedRole: null,
menuVisible: false, // State for menu visibility
};
}

componentDidMount() {
this.props.navigation.setOptions({
headerRight: () => this.renderMenu(),
});
}

// Toggle menu visibility
toggleMenu = () => {
this.setState({ menuVisible: !this.state.menuVisible });
};

// Handle menu item selection
handleMenuSelect = (option) => {
this.setState({ menuVisible: false });
if (option === 'settings') {
this.props.navigation.navigate('Settings'); // Navigate to Settings screen
} else if (option === 'logout') {
console.log('Logging out...');
// Add logout logic here
}
};

// Render the menu in the navigation bar
renderMenu = () => {
return (
<Menu
visible={this.state.menuVisible}
onDismiss={this.toggleMenu}
anchor={
<Icon
name="dots-vertical"
size={24}
color="black"
style={{ marginRight: 15 }}
onPress={this.toggleMenu}
/>
}
>
<Menu.Item onPress={() => this.handleMenuSelect('settings')} title="Settings" />

<Menu.Item onPress={() => this.handleMenuSelect('logout')} title="Logout" />

);
};

handleLogin = () => {
const { email, password, selectedRole } = this.state;
console.log('Logging in with:', email, password, 'Role:', selectedRole);
// Add authentication logic here
};

render() {
const roles = [
{ label: 'Admin', value: 'admin' },
{ label: 'User', value: 'user' },
{ label: 'Guest', value: 'guest' },
];

return (
  <View style={styles.container}>
    <Card style={styles.card}>
      <Card.Content>
        <Title style={styles.title}>Login</Title>

        <TextInput
          label="Email"
          mode="outlined"
          value={this.state.email}
          onChangeText={(email) => this.setState({ email })}
          style={styles.input}
        />

        <TextInput
          label="Password"
          mode="outlined"
          secureTextEntry
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
          style={styles.input}
        />

        {/* Dropdown Below Password Field */}
        <Dropdown
          style={styles.dropdown}
          data={roles}
          labelField="label"
          valueField="value"
          placeholder="Select Role"
          value={this.state.selectedRole}
          onChange={(item) => this.setState({ selectedRole: item.value })}
        />

        <Button mode="contained" onPress={this.handleLogin} style={styles.button}>
          Login
        </Button>
      </Card.Content>
    </Card>
  </View>
);

}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f8f9fa',
},
card: {
width: '90%',
padding: 20,
},
title: {
textAlign: 'center',
marginBottom: 20,
fontSize: 24,
},
input: {
marginBottom: 15,
},
dropdown: {
marginBottom: 15,
height: 50,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
paddingHorizontal: 10,
backgroundColor: 'white',
},
button: {
marginTop: 10,
},
});

export default LoginPage;

Preview

What have you tried so far?

Your Environment

software	version
ios	18.2
android	x
react-native	0.78.0
react-native-paper	5.13.1
node	21.7.3
npm or yarn	10.5.0
expo sdk	x.x.x

[bastianspirek]

Might be related to this: #4631