Navigating back to a bottom tab route from a stack route that includes a PagerView causes the app to crash directly. #906
Description
Environment
Platform
Android
Dependencies
"react-native-pager-view": "^6.4.1",
"@react-navigation/bottom-tabs": "^6.6.1",
"@react-navigation/native": "^6.1.18",
"@react-navigation/native-stack": "^6.11.0",
Description
When I nest an A-Screen in react-navigation/native-stack, which uses react-navigation/bottom-tabs for routing, in one of the tabs of A-One-screen, I can route to an external stack screen, which we'll call B screen. If B screen uses PagerView, the app crashes when navigating to 'A-Screen' with navigation.navigate('A-Screen'). However, if PagerView is removed, everything works fine.
import {createNativeStackNavigator} from "@react-navigation/native-stack";
import TabNavigation from "./TabNavigation.tsx";
import ScorePage from "./score/ScorePage.tsx";
import {TablePage} from "./timeTable/tablePage.tsx";
import EmptyClassroomPage from "./emptyClassroom/EmptyClassroomPage.tsx";
const HomeNavigation = () => {
const Stack = createNativeStackNavigator();
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
>
<Stack.Screen name={'TabNavigation'} component={TabNavigation}/>
<Stack.Screen name={'EmptyClassroomPage'} component={EmptyClassroomPage}/>
<Stack.Screen name={'ScorePage'} component={ScorePage}/>
<Stack.Screen name={'TablePage'} component={TablePage}/>
</Stack.Navigator>
)
}const TabNavigation = () => {
const Tab = createBottomTabNavigator();
return (
<Tab.Navigator
detachInactiveScreens={false}
>
<Tab.Screen name={'homePage'} component={Home}/>
<Tab.Screen name={'infoPage'} component={InfoPage}/>
</Tab.Navigator>
)
}
export default TabNavigation;export interface NavigationProps {
navigation: {
navigate: (name: string, params?: object) => void;
goBack: () => void;
};
}
const Home = ({navigation}: NavigationProps) => {
const handleNavigate = () => {
navigation.navigate('TablePage');
}
return (
<Pressable onPress={handleNavigate}></Pressable>
)
}const TablePage = ({navigation}: NavigationProps) => {
const handleGoBack = () => {
navigation.navigate('TabNavigation');
}
return (
<Pressable onPress={handleGoBack}></Pressable>
<PagerView style={{flex: 1}}>
<View><Text style={{color: 'black'}}>123</Text></View>
</PagerView>
)
}