React Native Navigation GoBack isn't working - reactjs

Question

im using react navigation 3 and also using
this.props.navigation.navigate(item.navigationPath)
to navigate through pages
the problem is when i click the button in navbar to go back it doesn't go back
i want it to go back 1 step but it do nothing
here is the back component
class NavigationBack extends Component {
toggleDrawer = () => {
this.props.navigation.goBack()
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
Also when im in the Home->Category->Single-Category
and i press the hardware back button it take me to Home instead of Category
here is a link to snack
https://snack.expo.io/#ov3rcontrol/navi

Answer 1

I tried your code and made some modification. can you check this code ? is this what you need ?
/*Example of Navigation Drawer with Sectioned Menu*/
import React, { Component } from 'react';
import {
StyleSheet,
Platform,
View,
Text,
Image,
TouchableOpacity,
YellowBox,
Dimensions,
Button,
} from 'react-native';
//Import required react-navigation component
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
//Import all the screens
import Screen1 from './pages/Screen1';
import Screen2 from './pages/Screen2';
import Screen3 from './pages/Screen3';
import category from './pages/category';
import singleCategory from './pages/singleCategory';
//Import custom Drawer / sidebar
import SideMenu from './sidemenu';
//Navigation Drawer Structure for all screen
class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
{/*Donute Button Image */}
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
class NavigationBack extends Component {
toggleDrawer = () => {
this.props.navigation.goBack()
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Image
source={require('./image/drawer.png')}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}
//Stack Navigator for the First Option of Navigation Drawer
const FirstActivity_StackNavigator = createStackNavigator({
//All the screen from the First Option will be indexed here
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
//Stack Navigator for the Second Option of Navigation Drawer
const Screen2_StackNavigator = createStackNavigator({
//All the screen from the Second Option will be indexed here
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
//Stack Navigator for the Third Option of Navigation Drawer
const Screen3_StackNavigator = createStackNavigator({
//All the screen from the Third Option will be indexed here
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: <NavigationDrawerStructure navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const category_nav = createStackNavigator({
//All the screen from the Third Option will be indexed here
cat: {
screen: category,
navigationOptions: ({ navigation }) => ({
title: 'Makeup Artist',
headerLeft: <NavigationBack navigationProps={navigation} />,
headerStyle: {
backgroundColor: 'grey',
},
headerTintColor: '#fff',
}),
},
});
const single_category_nav = createStackNavigator({
//All the screen from the Third Option will be indexed here
single_cat: {
screen: singleCategory,
navigationOptions: ({ navigation }) => ({
title: 'Mahmoud Makup',
headerLeft: <NavigationBack navigationProps={navigation} />,
headerStyle: {
backgroundColor: 'grey',
},
headerTintColor: '#fff',
}),
},
});
//Drawer Navigator for the Navigation Drawer / Sidebar
const Drawers = createStackNavigator({
NavScreen1: { screen: FirstActivity_StackNavigator },
NavScreen2: { screen: Screen2_StackNavigator },
NavScreen3: { screen: Screen3_StackNavigator },
category: {screen: category_nav},
single_category: {screen: single_category_nav}
},{
headerMode: 'none'
})
const DrawerStack = createDrawerNavigator(
{
drawerScreens: Drawers
},
{
contentComponent: (props) => (
<SideMenu {...props}/>
),
drawerWidth: Dimensions.get('window').width - 120,
}
);
const RootStack = createStackNavigator({
root: DrawerStack
},{
headerMode: "none"
});
export default createAppContainer(RootStack);