An issue about nested navigator in Expo Router

Question

I am encountering an issue related to navigating in Expo Router.

image of my project's navigator hierarchy

As shown in the screenshot above, I have configured my router in the following way. I defined the Stack Navigator in app/_layout.tsx, the Tabs Navigator in app/(tabs)/_layout.tsx, and a separate Stack Navigator in each tab (home/profile) to display multiple screens within the same tab.

Here's where the problem occurred:

(router is returned object from useRouter hook)

1. Executed router.push from the / router to the /home router.
2. Executed router.push from the /home router to the /welcome router.
3. In order to return to the home tab, executed router.push to the /home router.

Upon executing the third step, instead of going to /home, it navigated back to /.

Through various tests, I found out that the problem is caused by the Stack Navigator nested inside the Tabs Navigator. When I removed the _layout.tsx files from (tabs)/home and (tabs)/profile, the problem disappeared.

However, I need to define the Stack Navigator in the (tabs)/home,profile/_layout.tsx file as I need to display multiple screens in each tab.

What can I do to make this work as intended?

I'm dying to solve this problem. I would really appreciate it if you could help me.

Answer 1

I had a similar problem. My initial structure had the initial route at index.tsx but I wanted to nest a stack navigator inside it, so I changed the layout to/index/.... This resulted in similar navigation issues to what you describe.

I solved it by using useNavigation from expo-router, and following the documentation from React Navigation on navigating to a screen in a nested navigator. Gaining visibility into the names and paths of the routes by logging the navigation state also helped to navigate to the correct route names.

import { useNavigation } from 'expo-router';

...

const navigation = useNavigation()

...
console.log(JSON.stringify(navigation.getState()))

navigation.navigate("index", { screen: "index" })