React Navigation Push screen inside another tab-CodePudding

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?

CodePudding user response：

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.

https://reactnavigation.org/docs/screen/#getid