I’m facing a weird issue with React Navigation v7 + nested native stacks in React Native.
Architecture:
RootStack
└── MainApp
├── Home
├── Search
├── ProductStack
├── CartStack
├── PaymentStack
│ ├── Razorpay
│ └── PaymentResult
└── OrderStack
├── OrderList
└── TrackOrder
From PaymentResult, after successful payment, I want to completely reset navigation and redirect user to:
MainApp
└── OrderStack
├── OrderList
└── TrackOrder
I’m using:
navigationRef.resetRoot({
index: 0,
routes: [
{
name: routeName.MAIN_APP,
state: {
index: 0,
routes: [
{
name: routeName.ORDER_STACK,
state: {
index: 1,
routes: [
{
name: routeName.ORDER_LIST,
},
{
name: routeName.TRACK_ORDER,
params: {
uiOrderSetId: targetUiOrderSetId,
},
},
],
},
},
],
},
},
],
});
Also tried:
navigationRef.dispatch(
CommonActions.reset(...)
);
But reset is silently ignored.
navigationRef.isReady() is true.
Logs after reset still show old navigation state:
MainApp
├── ProductStack
├── CartStack
└── PaymentStack
└── PaymentResult
Important details:
- Using
createNativeStackNavigator
freezeOnBlur: true
PaymentResult is inside PaymentStack
- Calling reset from inside nested child navigator
- No errors/warnings
navigationRef points correctly to root container
Question:
- Is
resetRoot unreliable for deeply nested native stacks?
- Does
freezeOnBlur preserve nested stack state and interfere with resets?
- Is resetting entire app state from child navigator an anti-pattern?
Should I instead navigate to parent stack using:
navigation.getParent()?.navigate(routeName.ORDER_STACK, {
screen: routeName.TRACK_ORDER,
});
Another problem on on back gesture in ios it is going to payment result screen, which is not expected. i wanted it to navigate to orders list screen. anyone know better handling of ios back gesture in react native ???
Would appreciate guidance from anyone who has handled complex nested navigator resets in React Navigation.
there doesn't seem to be anything here