I am using the following structure to organize my screens
There is a bottom tab navigator to show two screens: Jobs and Notification. Jobs screen is a stack navigator that has two screens: Job for a list of jobs and JobDetail for displaying the detail of a job. When clicked on a notification I need to navigate to the respective JobDetail screen.
My question is: is there a way to return back to the Notification tab by pressing the back button from the JobDetail screen, given that I navigated to the JobDetail screen by clicking on one of the notifications in the first place? Currently, when I click the back button on the JobDetail screen it takes me back to the Job screen and instead I want it to go back to the Notification screen.
I've also included a working demo here: https://snack.expo.dev/@atosh502/go-back-to-tab-example
Here are the changes made and hope it'll work for you too:
const Tabs = () => {
return (
<Tab.Navigator>
<Tab.Screen
name="Job"
component={Job} //remove JobStack and keep just Job screen
/>
<Tab.Screen
name="Notification"
component={NotificationStack} //keep NotificationStack instead of page so you'll get back to that page
/>
</Tab.Navigator>
)
}
// remove/comment your JobStack screen
// const JobStack = () => {
// return (
// <Stack.Navigator>
// <Stack.Screen name="Job" component={Job} />
// <Stack.Screen name="JobDetail" component={JobDetail} />
// </Stack.Navigator>
// )
// }
//Add this NotificationStack screen
const NotificationStack = () => {
return (
<Stack.Navigator>
<Stack.Screen name="Notification" component={Notification}/>
<Stack.Screen name="Jobs" component={JobDetail} options={{title: 'Notification'}}/>
</Stack.Navigator>
)
}
Please check this working demo here: click here