react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.4k stars 4.99k forks source link

Dynamic Screens with React Navigation Top Tab Navigator state.routes[index].name undefined and scroll behaviour (iOS)? #11122

Open linkeddg opened 1 year ago

linkeddg commented 1 year ago

Current behavior

I have two problems that seem to be related. I'm using a MaterialTopTabNavigator with tabBarScrollEnabled. It works fine when I initially have my screens under it. But in my final screen I have a button that marks the flow "complete", which should update the top tab navigator to not list the previous tabs. That part all works surprisingly well, but I'm running into 2 issues on iOS (possibly android as well, but I only have a simulator for that and it appears to work correctly there). The first is that after clicking the complete button it drops to the proper single tab at the top, but it still allows scroll to the left, which then throws an exception that "undefined is not an object (evaluating 'state.routes[index].name')". The second is that if I click complete, and then click it again to mark it incomplete again the Screen stays on the "Final" screen, but the Top Tab Navigator shows that it is in on the first screen, and if I scroll left it pops the same "undefined is not an object (evaluating 'state.routes[index].name').

I've attempted to reduce the issue to the following snack: https://snack.expo.dev/@linkeddg/materialtoptabnavigator-issue?platform=ios

Expected behavior

I expect when the number of screens is reduced to 1, screen scroll should be disabled. I also expect that when the number of screens is increased again that the highlighted tab should be updated correctly, and scroll shouldn't cause an unhandled exception.

Reproduction

https://snack.expo.dev/@linkeddg/materialtoptabnavigator-issue?platform=ios

Platform

Packages

Environment

package version

"@react-native-async-storage/async-storage": "~1.17.3", "@react-native-community/masked-view": "^0.1.11", "@react-native-community/netinfo": "8.2.0", "@react-native-picker/picker": "2.4.0", "@react-navigation/drawer": "^6.4.3", "@react-navigation/elements": "^1.3.4", "@react-navigation/material-bottom-tabs": "^6.2.1", "@react-navigation/material-top-tabs": "^6.1.1", "@react-navigation/native": "^6.0.8", "@react-navigation/native-stack": "^6.5.0", "@react-navigation/stack": "^6.1.1", "@rneui/base": "^4.0.0-rc.6", "@rneui/themed": "^4.0.0-rc.6", "expo": "^45.0.0", "expo-font": "~10.1.0", "expo-linking": "~3.1.0", "expo-location": "~14.2.2", "expo-secure-store": "~11.2.0", "expo-status-bar": "~1.3.0", "expo-updates": "~0.13.4", "react": "17.0.2", "react-dom": "17.0.2", "react-native": "0.68.2", "react-native-gesture-handler": "~2.2.1", "react-native-gifted-chat": "^1.0.4", "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-mmkv": "^2.4.3", "react-native-pager-view": "5.4.15", "react-native-paper": "^4.12.1", "react-native-picker-select": "^8.0.4", "react-native-reanimated": "~2.8.0", "react-native-safe-area-context": "4.2.4", "react-native-screens": "~3.11.1", "react-native-tab-view": "^3.1.1", "react-native-toast-message": "^2.1.5", "react-native-vector-icons": "^9.2.0", "react-native-web": "0.17.7", "socket.io-client": "^4.5.1" | node v16.14.2 | | npm 8.5.0 |

github-actions[bot] commented 1 year ago

Couldn't find version numbers for the following packages in the issue:

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

linkeddg commented 1 year ago

I don't use flipper-plugin-react-navigation

Issue is still present after updating to:

"@react-navigation/drawer": "^6.5.6", "@react-navigation/material-bottom-tabs": "^6.2.10", "@react-navigation/material-top-tabs": "^6.5.1", "@react-navigation/native": "^6.1.1", "@react-navigation/stack": "^6.3.10", "react-native-tab-view": "^3.3.4",