I have a main bottom tabs navigator in my app which contains three screens and every one of these pages contains a stack navigator. The problem is, whenever i press The icon in bottom tab when it is focused, the stack will go back to the first page of its corresponding stack navigator. I don't want that to happen in my LoanNavigator
screen. But it's ok to happen in other screens. How can i achieve this? Here's how my code looks like:
MainBottomTabsNavigator.jsx
return (
<TabBarContext.Provider value={{ props: tabBarProps, setProps: setTabBarProps }}>
<Tab.Navigator initialRouteName='loan'>
<Tab.Screen name="settings" component={SettingsStackNavigator}
<Tab.Screen name="loan" component={LoanStackNavigator} />
<Tab.Screen name="wallet" component={WalletStackNavigator}
</Tab.Navigator>
</TabBarContext.Provider>
)
LoanNavigator.jsx
return (
<Stack.Navigator>
<Stack.Screen name="calculator" component={Loan.Calculator} />
<Stack.Screen name="confirmation-modal" component={Loan.ConfirmationModal} options={{
presentation: 'modal',
detachPreviousScreen: false,
cardStyle: { backgroundColor: 'transparent' }
}} />
<Stack.Screen name="choose-shop" component={Loan.ChooseShop} />
<Stack.Screen name="deposit" component={Loan.Deposit} />
</Stack.Navigator>
)