Setup: I have 3 stack navigators and one of them is like main application and both others are used inside it. from home navigator I navigate to insurance navigator. and from this navigator user is able to go into multiple screens in stack as shown in the code below.
Problem: when navigating back if i swipe from my iphone twice or thrice in a single go it automatically navigates me back to home navigator instead of going through all the stacks. if I do swipes slowly it works fine.
versions:
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/native": "^6.0.10",
"@react-navigation/stack": "^6.2.1",
"react": "17.0.2",
"react-native": "0.68.1",
Reference Code:
<Stack.Navigator
screenOptions={{ headerShown: false }}
initialRouteName={'Insurance'}
>
<Stack.Screen name="Insurance" component={InsuranceContainer} />
<Stack.Group>
<Stack.Screen name="FirstContainer" component={FirstContainer} />
<Stack.Screen name="SecondContainer" component={SecondContainer} />
<Stack.Screen name="ThirdContainer" component={ThirdContainer} />
<Stack.Screen name="FourthContainer" component={FourthContainer} />
<Stack.Screen name="Fifth" component={Fifth} />
<Stack.Screen
name="Sixth"
component={Sixth}
/>
<Stack.Screen
name="Seventh"
component={Seventh}
/>
<Stack.Screen
name="Eighth"
component={Eighth}
/>
<Stack.Screen name="Ninth" component={Ninth} />
<Stack.Screen name="Tenth" component={Tenth} />
</Stack.Group>
</Stack.Navigator>
<stack.navigator initialRouteName={'HomeScreen'}>
<stack.screen name="HomeScreen" component="HomeScreen"/>
</stack.navigator>
<stack.navigator initialRouteName={'Home'}>
<stack.screen name="Insurance" component="InsuranceNavigator"/>
<stack.screen name="Home" component="HomeNavigator"/>
</stack.navigator>
EDIT: go back code in each stack screen
const goBack = useCallback(() => {
navigation.goBack()
}, [navigation])