Hoping somebody can help me. I have been trying to understand this all day, but can not seem to get it working. I am trying to create a Stack navigator inside a tab. When I create the tabs using the Tabs from ‘expo-router’, it works correctly. However, when I create the tabs using createMaterialBottomTabNavigator(), the tabs work, but when I enter the third tab (the one with the Stack) and try to click the link that should take me to the next screen in the stack, no navigation occurs. If I comment out my tabs and go back to the Tabs from expo-router without changing anything in the file structure, the navigation works correctly.

I created a simple github repo to show the issue. The repo was created using npx create-expo-app@latest --template tabs. Then, I made some small changes in order to add a third tab with a nested stack navigator. The index page for the third tab contains a link to “another page”. You can see that the navigation does not work to “another page”. But, if you open app/(tabs)/_layout.tsx and comment out the Tab.Navigator, and then uncomment the default Tabs just above that, you will see that navigating to “another page” from within the third tab works as expected.

https://github.com/flyingL123/expo-nav-test

What am I doing wrong here? I have been going in cirlces for hours and am completely out of ideas. Can anybody offer any help?

This is the file structure in the expo app folder:

app/
 - (tabs)/
  - _layout.tsx
  - index.tsx
  - two.tsx
  - three/
   - _layout.tsx
   - index.tsx
   - another-page-tsx
 _layout.tsx