React Native - Reset child stackNavigator for onPress start screen of parent tabNavigator

I have a simple navigation structure set up with 4 main screens that the user browses between using Interactive Navigation / TabNavigator. In each of these primary screens, the user can navigate to the secondary screen using react-navigation / StackNavigator. The secondary screen is the same component for all 4 primary screens, as the content is loaded dynamically based on what is selected using the shortcut to change the state of the content.

You can see the structure in the diagram below.

The problem I am facing is when a secondary screen is called from tab1 (for example), secondary screening the screen in place with the content related to tab1. If the user then navigates to tab2 and brings up the secondary screen, it is back in place with the content related to tab2. That's all well and good, however, if the user then navigates back to tab1, the secondary screen is still in place, this time with the content corresponding to tab2 as they changed state in the previous tab.

In short, I try to reset the individual stacks of each main screen if the user interacts with the TabNavigator at any time. I'm trying to figure out how I can initiate a function from the child components of the stack by firing an event on the component of the parent tab.

Hope this makes sense to people.

navigation structure

+3


source to share





All Articles