We Keep Coding

'Hamburger' icon isn't opening or closing the component - React Navigation V6

Would anyone be able to give me help regarding React Navigation with Expo? The issue is with the drawer component where the 'Hamburger' icon isn't opening or closing the component when a user presses the icon. However, it does open/close on a default swipe gesture from React Navigation. Please see below for my code:
Router:
import React from 'react';
import { NavigationContainer, DrawerActions } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { IconButton } from 'react-native-paper'
import i18n from '../i18n/i18n';
//Theme
import Theme from '../theme/theme'
//Components
import Menu from '../components/Menu'
//Import Interfaces
import { RootDrawerParamList } from '../utils/typescript/type.d';
import { IProps } from '../utils/typescript/props.d';
//Import Screens
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
import SettingsScreen from '../screens/Settings';
const Drawer = createDrawerNavigator<RootDrawerParamList>();
export default class Router extends React.Component<IProps, any> {
constructor(props: IProps) {
super(props);
}
render() {
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName='Screen1'
drawerContent={(props: any) => <Menu {...props} />}
screenOptions={({
swipeEnabled: true
})}>
<Drawer.Screen
name="Screen1"
component={Screen1}
initialParams={{ i18n: i18n, Theme: Theme }}
options={({route, navigation} : any) => ({
headerRight: () => (<IconButton icon="cog" size={24} color={Theme.colors.text} onPress={() => navigation.navigate('Settings')} />),
route: {route},
navigation: {navigation}
})}
/>
<Drawer.Screen
name="Settings"
component={SettingsScreen}
initialParams={{ i18n: i18n, Theme: Theme }}
options={({route, navigation} : any) => ({
headerTitle: i18n.t('settings', 'Settings'),
headerLeft: () => (<IconButton icon="arrow-left" color={Theme.colors.text} size={24} onPress={() => navigation.goBack()} />),
route: {route},
navigation: {navigation}
})}
/>
<Drawer.Screen
name="Screen2"
component={Screen2}
initialParams={{ i18n: i18n, Theme: Theme }}
options={({route, navigation} : any) => ({
route: {route},
navigation: {navigation}
})}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
}
Menu
import React from 'react';
import { FlatList, StyleSheet, View } from 'react-native';
import { List, Title } from 'react-native-paper';
import { getDefaultHeaderHeight } from '#react-navigation/elements';
import { DrawerItem } from '#react-navigation/drawer';
import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
//Import Interfaces
import { IListItem } from '../utils/typescript/types.d';
import { IPropsMenu } from '../utils/typescript/props.d';
import { IStateMenu } from '../utils/typescript/state.d';
//A function is used to pass the header height, using hooks.
function withHeightHook(Component: any){
return function WrappedComponent(props: IPropsMenu) {
/*
Returns the frame of the nearest provider. This can be used as an alternative to the Dimensions module.
*/
const frame = useSafeAreaFrame();
/*
Returns the safe area insets of the nearest provider. This allows manipulating the inset values from JavaScript. Note that insets are not updated synchronously so it might cause a slight delay for example when rotating the screen.
*/
const insets = useSafeAreaInsets();
return <Component {...props} headerHeight={getDefaultHeaderHeight(frame, false, insets.top)} />
}
}
class Menu extends React.Component<IPropsMenu, IStateMenu> {
constructor(props: IPropsMenu) {
super(props);
this.state = {
menu: [
{
name: 'screen1.name',
fallbackName: 'Screen 1',
icon: 'dice-multiple-outline',
iconFocused: 'dice-multiple',
onPress: this.props.navigation.navigate.bind(this, 'screen1')
},
{
name: 'screen2.name',
fallbackName: 'Screen 2',
icon: 'drama-masks',
iconFocused: 'drama-masks',
onPress: this.props.navigation.navigate.bind(this, 'screen2')
}
]
}
}
renderItem = (item : IListItem) => {
const { i18n } = this.props.state.routes[0].params;
return (
<DrawerItem
label={ i18n.t(item.name, item.fallbackName) }
onPress={ item.onPress ? item.onPress: () => {} }
icon={ ({ focused, color, size }) => <List.Icon color={color} style={[styles.icon, {width: size, height: size }]} icon={(focused ? item.iconFocused : item.icon) || ''} /> }
/>
);
};
render() {
const { headerHeight } = this.props;
const { menu } = this.state;
const { Theme } = this.props.state.routes[0].params;
return (
<View>
<View style={{
backgroundColor: Theme.colors.primary,
height: headerHeight ?? 0,
}}>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
}}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
marginBottom: 5,
marginLeft: 5
}}>
<Title style={{ color: Theme.colors.text, marginLeft: 5 }}>
Title
</Title>
</View>
</View>
</View>
<FlatList
data={menu}
keyExtractor={item => item.name}
renderItem={({item}) => this.renderItem(item)}
/>
</View>
);
};
}
export default withHeightHook(Menu);
const styles = StyleSheet.create({
icon: {
alignSelf: 'center',
margin: 0,
padding: 0,
height:20
},
logo: {
width: 24,
height: 24,
marginHorizontal: 8,
alignSelf: 'center'
},
});

The solution to my issue was to encapsulate the drawer component in a native stack component. The 'Hamburger' icon works as expected, thanks for all the help and suggestions.
// Import Screens
import DrawRouter from './DrawRouter';
const Stack = createNativeStackNavigator<RootStackParamList>();
export default (): React.ReactElement => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Main" component={DrawRouter} />
</Stack.Navigator>
</NavigationContainer>
);
};

Add the toogleDrawer() method to your onPress event on your Drawer.Navigator component:
onPress={()=> navigation.toggleDrawer()

Expo React Native Drawer Navigator Logout functionality

StackOverflow I am very new to react native since I implement drawer navigation now I want to include a logout button at the end of the drawer but I don't find how to do that any good practice and ideas about how to achieve this kind of functionality. this is my code for drawer I find it from hours of google and it works fine but it has functions of screens I don't find any option of how to make a logout link in this code if this code is not correct then suggest any other good snippet thanks in advance
import React from 'react';
import { Ionicons } from '#expo/vector-icons'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { createDrawerNavigator, createStackNavigator, createAppContainer } from 'react-navigation';
import { DrawerActions } from 'react-navigation-drawer';
// _signOutAsync = async () => {
// await AsyncStorage.clear();
// this.props.navigation.navigate('Auth');
// };
const HomeScreen = () => (
<View style={styles.container}>
<Text>Home Screen!</Text>
</View>
);
const ProfileScreen = () => (
<View style={styles.container}>
<Text>Profile Screen!</Text>
</View>
);
const SettingsScreen = () => (
<View style={styles.container}>
<Text>Settings Screen!</Text>
</View>
);
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home Screen',
drawerLabel: 'Home',
drawerIcon: () => (
<Ionicons name="ios-home" size={20} />
)
})
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({ navigation }) => ({
title: 'Profile Screen',
drawerLabel: 'Profile',
drawerIcon: () => (
<Ionicons name="ios-person" size={20} />
)
})
},
Settings: {
screen: SettingsScreen,
navigationOptions: ({ navigation }) => ({
drawerIcon: () => (
<Ionicons name="ios-settings" size={20} />
)
})
},
});
const StackNavigator = createStackNavigator({
DrawerNavigator: {
screen: DrawerNavigator,
navigationOptions: ({ navigation }) => {
const { state } = navigation;
if(state.isDrawerOpen) {
return {
headerLeft: ({titleStyle}) => (
<TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())}}>
<Ionicons name="ios-close" style={styles.menuClose} size={36} color={titleStyle} />
</TouchableOpacity>
),
}
}
else {
return {
headerLeft: ({titleStyle}) => (
<TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())}}>
<Ionicons name="ios-menu" style={styles.menuOpen} size={32} color={titleStyle} />
</TouchableOpacity>
),
}
}
}
}
})
export default createAppContainer(StackNavigator);

You can create one content component to render inside your Drawer Navigator, making it easier to modify.
I will explain with your example (I am assuming that it is your App.js file):
//import CustomDrawer from '...'
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: HomeScreen,
navigationOptions: ({ navigation }) => ({
title: 'Home Screen',
drawerLabel: 'Home',
drawerIcon: () => (
<Ionicons name="ios-home" size={20} />
)
})
},
Profile: {
screen: ProfileScreen,
navigationOptions: ({ navigation }) => ({
title: 'Profile Screen',
drawerLabel: 'Profile',
drawerIcon: () => (
<Ionicons name="ios-person" size={20} />
)
})
},
Settings: {
screen: SettingsScreen,
navigationOptions: ({ navigation }) => ({
drawerIcon: () => (
<Ionicons name="ios-settings" size={20} />
)
})
},
//Here you will add one more pair of curly brackets to add more configs.
}, {
initialRouteName: 'Home',
contentComponent: CustomDrawer //This is the option that will allow you to add the button
});
You will create one entire component to modify like you want and then render inside the Drawer Navigator. Remember, I am using CustomDrawer name, you will import this component inside your App.js file.
import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import { DrawerNavigatorItems } from 'react-navigation-drawer';
const CustomDrawer = ({ ...props }) => {
return (
<>
<View>
<DrawerNavigatorItems
{...props}
itemsContainerStyle={{}}
itemStyle={{}}
/>
</View>
<View
style={{
flexDirection: 'row',
alignSelf: 'center',
position: 'relative',
marginBottom: 20,
}}
>
<Button
title={'Log out'}
buttonStyle={{ width: 200, borderRadius: 20 }}
onPress={}
/>
</View>
</>
);
};
const styles = StyleSheet.create({});
export default CustomDrawer;
Here I am rendering only the CustomDrawer props, that is the itens that you create in your App.js and rendering it (specifically it is the ...props that I am passing in DrawerNavigationItems, so you can customize it like you want, like one normal screen, place buttons, create views and apply styles to it.
You can also instead of creating one new screen to render inside your Drawer Navigator code it inside your App.js, but personally I feel it much messed up
You can learn more with this tutorial

Uncaught Error: undefined is not an object (evaluating 'Y.props.navigation') touchableHandlePress#[native code]

I'm adding in the react-navigation header a drawerMenuButton to open the Drawer Menu.
The icon appears normally but when pressed returns the error quoted.
import React from 'react';
import { View, Dimensions } from 'react-native';
import { Button, Icon } from 'native-base';
import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';
...
const DrawerConfig = {
drawerWidth: Dimensions.get('window').width * 0.75,
contentComponent: ({ navigation }) => {
return(<MenuDrawer navigation={navigation} />)
}
}
const HomeNavigator = createStackNavigator ({
...
}, {
defaultNavigationOptions: ({ navigation }) => {
return {
headerTitleStyle: {
fontWeight: 'bold'
},
headerLeft: (
<Button transparent onPress={() => this.props.navigation.toggleDrawer()}>
<Icon name='menu' style={{color: '#FFF'}} />
</Button>
),
headerRight: (
<HomeIcon navigation={navigation} />
),
headerStyle: {
backgroundColor: '#b80003'
},
headerTintColor: '#FFF'
}
}
});
const DrawerNavigator = createDrawerNavigator (
{
'Principal': {
screen: HomeNavigator
},
'Sobre o Aplicativo': {
screen: InformationApp
},
'Sobre os Responsáveis': {
screen: Team
},
'Sobre o Projeto': {
screen: Project
},
'Política e Termos': {
screen: Policy
}
},
DrawerConfig
);
const AppDrawerContainer = createAppContainer(DrawerNavigator);
export default AppDrawerContainer;
It is important to note that for screens belonging to const DrawerNavigator = createDrawerNavigator I am using the same code above to render drawerMenuButton and it is working normally, the error occurs only on const screens HomeNavigator = createStackNavigator.

Change your code like this
onPress={() => navigation.toggleDrawer()}>

What is the way to go from Drawer Navigation Screen to a Screen out of Drawer navigation using button press in React-Native?

I have created one navigation drawer named HomeDrawer and in this drawer I show two items - Home and Settings. for that reason I have created two classes- NoteMeHome and SettingsScreen .
Now, if I want to go from SettingsScreen to another class (LoginScreen.js) by button click, which is not part of the navigation drawer, then it is not working
Here, I have provided the necessary code to understand the problem.
HomeScreen.js
class HomeScreen extends React.Component {
state = {
getValue: null,
}
async componentDidMount() {
const token = await AsyncStorage.getItem('token');
this.setState({ getValue: token });
}
render() {
console.log('#ZZZ:', this.state.getValue);
return (
<AppStackNavigator/>
);
}
}
const AppStackNavigator = new StackNavigator({
HomeDrawer: {screen:HomeDrawer},
WelcomeScreen: {screen:WelcomeScreen},
LoginScreen: {screen:LoginScreen},
NoteMeHome: {screen:NoteMeHome},
SettingsScreen: {screen:SettingsScreen}
})
export default HomeScreen;
HomeDrawer.js
class HomeDrawer extends Component {
state = {
loading: true
}
static navigationOptions = {
headerLeft: null
}
componentDidMount() {
AsyncStorage.getItem("user_email").then(value => {
user_email = value;
});
AsyncStorage.getItem("user_first_name").then(value => {
user_first_name = value;
});
}
async componentWillMount() {
await Font.loadAsync ({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
});
this.setState({loading:false});
}
render() {
if(this.state.loading) {
return(
<Root>
<AppLoading/>
</Root>
)
}
return(
<MyApp/>
)
}
}
const CustomDrawerContentComponent = (props) => (
<View style={{backgroundColor:"#ffff", height:'100%'}}>
<ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: 150, resizeMode:'cover', backgroundColor:"#aaaa"}}>
<Body style={styles.drawerBody}>
<Image
style={styles.drawerImage}
source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}}
/>
<View style={styles.drawerHeaderText}>
<Text style={{color:'#ffffff', fontSize:20, fontWeight:'400'}}>{user_email}</Text>
<Text style={{color:'#ffffff', fontSize:16, fontWeight:'200'}}>{user_first_name}</Text>
</View>
</Body>
</ImageBackground>
<Content style={{marginTop:30 }}>
<DrawerItems {...props}/>
</Content>
</View>
);
const MyApp = DrawerNavigator({
NoteMeHome:{
screen: NoteMeHome
},
Settings:{
screen: SettingsScreen
},
},
{
initialRouteName: 'NoteMeHome',
drawerPosition: 'left',
contentComponent: CustomDrawerContentComponent,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle'
}
);
SettingsScreen.js
class SettingsScreen extends Component {
static navigationOptions = ({navigation}) => ({
title: "Settings",
headerLeft: <Icon name="ios-menu" style={{paddingLeft:10}}
onPress={()=>navigation.navigate('DrawerOpen')}/>,
drawerIcon:
<Image source={{uri: 'https://img.icons8.com/ultraviolet/40/000000/automatic.png'}}
style={styles.icon}
/>
})
render() {
return(
<Container>
<CustomHeader
title="Settings"
drawerOpen={()=>this.props.navigation.navigate('DrawerOpen')}
/>
<Content contentContainerStyle={{flex:1, alignItems:'center',
justifyContent:'center', padding:10}}>
<Button full onPress={() => this.props.navigation.navigate('LoginScreen')}>
<Text style={{color:'white'}}>Go To Home Screen</Text>
</Button>
</Content>
</Container>
)
}
}
export default SettingsScreen;

** Check this example project enter link description here**
https://github.com/habeebrahmanpt/ReactNativeBoilerplate/blob/master/App/Navigation/AppNavigation.js
// drawer stack
const DrawerStack = createDrawerNavigator({
HomeScreen: { screen: HomeScreen },
TestPage: { screen: TestPage }
}, {
initialRouteName: 'HomeScreen',
drawerWidth: Dimensions.get('window').width / 1.3,
headerMode: 'none',
drawerPosition: 'left',
useNativeAnimations: false,
drawerBackgroundColor: 'transparent' ,
contentComponent: CounterApp,
})
const PrimaryNav = createStackNavigator({
// BottomStack: { screen: BottomStack },
DrawerStack: { screen: DrawerStack },
HomeScreen: { screen: HomeScreen },
CounterApp: { screen: CounterApp },
TestPage: { screen: TestPage },
Cart: { screen: Cart },
}, {
// Default config for all screens
headerMode: 'none',
title: 'HomeScreen',
initialRouteName: 'BottomStack'
})
export default PrimaryNav

Why doesn't the nested stack navigation work in react native?

I'm a beginner programmer and I'm trying to created a nested navigator in react native. The stack navigator on the Home screen works but the stack navigator on the MyEvents Screen does not. I use the tabs to navigate between Home and MyEvents and within the those pages I want to use a stack navigator to get to other pages. Please help! (also please let me know if I am being unclear)
This is Router.js
import React from 'react';
import {StackNavigator, TabNavigator} from 'react-navigation';
import InputScreen from './InputPage';
import HomeScreen from './Home';
import DetailsScreen from './Details';
import MyEventsScreen from './MyEvents';
import EditScreen from './EditPage';
import MapScreen from './Map';
const BottomNavigation = require('react-native-bottom-navigation');
export const Tabs = TabNavigator({
Home: {screen: HomeScreen},
EventMap: {screen: MapScreen},
Input: {screen: InputScreen},
MyEvents:{screen: MyEventsScreen},
},{
tabBarOptions: {
activeTintColors: '#e91e63',
//swipeEnabled: true,
}
});
export const EventsStack = StackNavigator({
Home: {
screen: Tabs,
},
Details: {
screen: DetailsScreen,
navigationOptions: {
header: null,
},
},
});
export const MyEventsStack = StackNavigator({
MyEvents: {
screen: Tabs,
navigationOptions: {
header: null
}
},
MyEventsDetails: {
screen: EditScreen,
navigationOptions: {
header: null,
/*navigation: ({ navigation }) => ({
title: `${navigation.state.params.name.first.toUpperCase()} ${navigation.state.params.name.last.toUpperCase()}`,
}),*/
},
},
});
export const Root = StackNavigator({
TabNav: {
screen: EventsStack,
}
}, {headerMode: 'none'});
This is Home.js
import React, {Component} from 'react';
import {View, Text, TouchableHighlight, SectionList} from 'react-native';
import {ListItem} from 'react-native-elements';
import {firebaseApp} from './App';
import Icon from 'react-native-vector-icons/MaterialIcons';
import {StackNavigator, TabNavigator} from 'react-navigation';
import {Tabs} from './Router';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
this.itemsRef = firebaseApp.database().ref().child('items');
console.ignoredYellowBox = [
'Setting a timer'
];
}
onLearnMore = (item) => {
this.props.navigation.navigate('Details', {
...item
});
};
static navigationOptions = {
tabBarLabel: 'Home',
tabBarIcon: ({tintColor}) => (
<Icon
name = {'Home'}
size = {26}
style = {{color: tintColor}} />
)
}
listenForItems(itemsRef) {
itemsRef.on('value', (snap) => {
// get children as an array
var items = [];
snap.forEach((parent) => {
var children = [];
parent.forEach((child) => {
children.push({
"name": child.val().name,
"when": child.val().when,
"who": child.val().who,
});
});
items.push({
data: children,
key: parent.key.toUpperCase(),
})
});
this.setState({
data: items
});
});
}
componentDidMount() {
this.listenForItems(this.itemsRef);
}
render() {
var styles = require('./Styles');
const {navigate} = this.props.navigation;
return (
<View style={{flex: 1}}>
<View style={styles.header}>
<Text style={styles.title}>Princeton Events</Text>
</View>
<View style={styles.body}>
<SectionList renderItem={({item}) => <ListItem style={styles.item}
title={item.name} subtitle={item.when}
onPress={() => this.onLearnMore(item)}/>}
renderSectionHeader={({section}) =>
<Text style={styles.sectionHeader}>{section.key}</Text>}
sections={this.state.data} keyExtractor={(item) => item.name}/>
</View>
</View>
);
}
}
This is MyEvents.js
import React, {Component} from 'react';
import {View, Text, TouchableHighlight, FlatList} from 'react-native';
import {ListItem, List} from 'react-native-elements';
import Icon from 'react-native-vector-icons/MaterialIcons';
import Router from './Router';
export default class MyEventsScreen extends Component {
onViewMyEvent = (item) => {
this.props.navigation.navigate('Edit', {
...item
});
};
static navigationOptions = {
tabBarLabel: 'MyEvents',
tabBarIcon: ({tintColor}) => (
<Icon
name = {'account circle'}
size = {26}
style = {{color: tintColor}} />
)
}
render() {
var styles = require('./Styles');
const {navigate} = this.props.navigation;
return (
<View style={{
flex: 1
}}>
<View style={styles.header}>
<Text style={styles.title}>My Events</Text>
</View>
<View style={styles.body}>
<List containerStyle={{
borderTopWidth: 0,
borderBottomWidth: 0
}}>
<FlatList data={[
{
"name": "Event 1",
"who": "E-Club",
"what": "description goes here description goes here description goes here",
"when": "1:00",
"where": "Ehub",
"RSVP": "yes"
}, {
"name": "Event 2",
"who": "Club 2",
"what": "description goes here",
"when": "2:00",
"where": "Location 2",
"RSVP": "no"
}
]} renderItem={({item}) => <ListItem style={styles.item} title={item.name} subtitle={item.when} containerStyle={{
borderBottomWidth: 0
}} onPress={() => this.onViewMyEvent(item)}/>} keyExtractor={(item, index) => index}/>
</List>
</View>
<View style={styles.footer}>
<TouchableHighlight style={styles.button} onPress={() => navigate('Home')} underlayColor='#ffd199'>
<Text style={styles.buttonText}>Back</Text>
</TouchableHighlight>
</View>
</View>
);
}
}