CODEWITHSUNDEEP
react-nativereact-native-navigation
Elvis S.
Elvis S.

Reputation: 462

React Native and React Native Navigation - Handle Back (goBack) issue

thank you for taking time to read & answer this question. I'll give my best to explain the issue I'm having.

The HomeStack component holds bottom navigation for four screens. One screen that is giving me a headache is ProjectsStack

export const ProjectsStack = (): ReactElement => {
  return (
    <ProjectsStackNav.Navigator initialRouteName='ProjectsScreen' screenOptions={defaultScreenOptions}>
      <ProjectsStackNav.Screen name='ProjectsScreen' component={ProjectsScreen} />
      <ProjectsStackNav.Screen name='CompletedProjectsScreen' component={CompletedProjectsScreen} />
      <ProjectsStackNav.Screen name='ProjectTasksScreen' component={ProjectTasksScreen} />
      <ProjectsStackNav.Screen name='CompletedProjectsTasksScreen' component={ProjectTasksScreen} />
    </ProjectsStackNav.Navigator>
  );
};

As you can see the ProjectTasksScreen is a component that renders a project based on the props => if it's open it will render ProjectTasksScreen otherwise it will render CompletedProjectsTasksScreen which is basically the same screen (reusability at its finest lol)

In order to go to the CompletedProjectsTasksScreen, you need to come from ProjectTasksScreen.

Now, the issue is when you want to go back from CompletedProjectsTasksScreen it will not go to ProjectTasksScreen, rather it will navigate to the previous screen of ProjectTasksScreen which is ProjectsScreen.

Is there a better solution to this problem than refactoring everything into it's screen & component?

Upvotes: 0

Views: 158

Answers (1)

Batraz Jioty
Batraz Jioty

Reputation: 306

navigation.push method instead of navigation.navigate may resolve your issue https://reactnavigation.org/docs/navigating/#navigate-to-a-route-multiple-times

Upvotes: 1

Related Questions