I have tab navigators and stack navigator nested as follows:
- Tab_1
-------- Stack_1
-------- Stack_2
-------- Stack_3
- Tab_2
I want to navigate to Stack_2 from inside Tab_2 with id parameters.
I can use
navigation.navigate("Tab_1", {screen: "stack_2", params: {id: "abcd"}})
but this won't refresh the screen if I want to navigate again with id efgh. I would easily use push if I was inside the stack navigator, but as I am inside another tab I can't use that.
So far I have tried
navigation.reset({ index: 0, routes: [{ name: "Tab_1", params: { screen: "Stack_2", params: { id: "abcd" } } }] });
This does the job but then I can't go to Stack_1 which is the main screen of Tab_1 as the back button does not appear and also pressing on Tab_1 icon does nothing.
How can I achieve the same result as navigation.push in here from inside another tab?
You can use the getId prop on Stack.Screen:
<Stack.Screen
name="stack_2"
component={Stack2}
getId={({ params }) => params.id}
/>
This tells React Navigation to add a new screen for the new ID, which is the behavior you want.