callstack / callstack/react-native-paper

createMaterialBottomTabNavigator isn't working with expo-router and nested navigation

Đang mở
#4,496 31 bình luận 3 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### 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 tabs`

https://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

| software | version
| --------------------- | -------
| ios | latest through expo
| android | latest through expo
| react-native | 0.74.5
| react-native-paper | ^5.12.5
| node | 20.17.0
| npm or yarn | 10.8.2
| expo sdk | ~51.0.28

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Clone the linked expo-nav-test reproduction, install dependencies, and run it with `npx expo start`. Compare the working built-in Tabs setup with the Material Tabs setup in `app/(tabs)/_layout.tsx`, especially the indicated lines 28-71 and 73-96. Done means the “Go to another page” link navigates to the nested stack screen when Material Bottom Tabs is enabled.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
mobile-dev
Loại issue
Lỗi
Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.