React navigation how to navigate to children through parent? - react-native

Question

So I have this react navigation setup:
Stack navigator
|Tab navigator
| | Screen_A
| | Screen_B
| Screen_C
| Screen_D
Normal case, user would go to screen A, then click to go to screen C with some params. From screen B, user click to go to screen D.
Now on screen D, when user click, I need him to go to screen C but through screen A (because when user click back from C, they need to go back to screen A).
I tried to pass params to screen A from screen D, and in A's render() method, check for params and continue navigate to screen C, and it works. But I got warning "Cannot update during an existing state transition(such as within 'render'...". So how can I accomplish this without triggering any warning?
Thanks

Answer 1

A possible alternative solution would be to leverage the customized stack router, here I have came up with a possible solution.
In this case, when you navigate from ScreenD to ScreenC, you can directly navigate to ScreenC, but then when the user on ScreenC and try to go back, we will insert ScreenA into the stack so the user will see ScreenA instead of ScreenD.
const NestedNavigator = TabNavigator({
ScreenA: { screen: ScreenA },
ScreenB: { screen: ScreenB },
});
const MainNavigator = StackNavigator({
Home: {
screen: NestedNavigator
},
ScreenC: { screen: ScreenC },
ScreenD: { screen: ScreenD },
});
const defaultGetStateForAction = MainNavigator.router.getStateForAction;
MainNavigator.router.getStateForAction = (action, state) => {
if (state && action.type === 'Navigation/BACK' && state.routes[state.index].routeName === 'ScreenC') {
const routes = [
...state.routes,
{index: 0, key: 'ScreenA', routeName: 'Home', routes: [{ key: 'ScreenA', routeName: 'ScreenA'}, { key: 'ScreenB', routeName: 'ScreenB' }]},
];
return {
...state,
routes,
index: routes.length - 1,
};
}
return defaultGetStateForAction(action, state);
};