Open flyingL123 opened 1 month ago
gregfenton
commented
1 month ago @flyingL123 This reads as though it is a react-navigation or expo-router issue regarding navigation.
What leads you to think it is a react-native-paper issue? If there's no clear indication that it is related to RNP, please close this issue.
flyingL123
commented
1 month ago @gregfenton If you watch the video or follow the steps I outlined, you will see there is only a bug when the Material Bottom Tabs Navigator is used. Simply swapping out Material Bottom Tabs Navigator and using the default tabs instead, the bug goes away. So I assumed the issue has to be related to Material Bottom Tabs Navigator. I really don't know enough to offer more than that, but I think I pretty clearly isolated the issue down to Material Bottom Tabs Navigator.
gregfenton
commented
1 month ago Okay thanks for the clarification. I see it now. Not too surprising that this has issues. RNP is wrapping functionality from React-Navigation, and Expo-Router is wrapping React-Navigation. So trying to get RNP to work with Expo-Router is going to be a confusing mess.
My suspicion is that the "right fix" for this is to simply document "if you want bottom buttons with Expo-Router, use its bottom buttons and not RNP's" ?
flyingL123
commented
1 month ago I guess if it’s really that difficult to make it work, then yea, but the RNP tabs are really nice. Especially the little animation when the highlighted tab changes. I must have spent 2 days trying to get it to work before giving up and just using the default tabs. That’s how much better I liked the RNP ones :)
Current behaviour
I am attempting to nest a stack navigator inside one of the tabs of a Material Bottom Tab Navigator in a project that uses expo-router. Navigating between tabs works as expected, but, on the third tab I created a nested stack navigator. The tab contains a link to "Go to another page", which links to the next screen in the stack. However, when I click the link, no navigation takes place. On web, I see the URL does change as expected, but the screen does not change.
When I comment out my the material tab navigator, and instead use the built-in Tabs from expo-router, now the stack navigation inside the third tab works as expected.
Expected behaviour
I expect the stack navigation in tab 3 to work properly using createMaterialBottomTabNavigator.
How to reproduce?
I created this repo using the command
npx create-expo-app@latest --template tabshttps://github.com/flyingL123/expo-nav-test
I made a few minor adjustments to the app that was created in order to add a 3rd tab with a nested stack navigator.
To reproduce the problem, you just need to clone that repo, install dependencies, and run the app with
npx expo start. View the app, click on tab 2, click on tab 3. Tab navigation works as expected. While on tab 3, click the link that says "Go to another page". The stack navigator will take you to the page.Now, open file
app/(tabs)/_layout.tsx. Comment out lines 28-71 (the Tabs element). Then uncomment lines 73-96, in order to use the Material Tabs instead.Reload the app, click on tab 2, click on tab 3. That all still works. However, click on the "Go to another page" link, and you will not navigate as expected. This is the bug. I think there may be an issue with the Material Bottom Tabs Navigator and expo-router having to do with stack navigators nested in the tabs.
Preview
Here is a screen recording of me doing the steps above to demonstrate the issue:
https://youtu.be/Hsbf8CT1RQg
What have you tried so far?
I have been searching for documentation, watching video clips, trying to find my own workarounds. I can't get it to work so I am wondering if there may be an issue with the library.
Your Environment