Description
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 |