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

Question

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?

Batraz Jioty · Accepted Answer · 2020-10-16 10:01:02Z

1

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

answered Oct 16, 2020 at 10:01

Batraz Jioty

3062 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elvis S. Over a year ago

Solves the back issue but got another one, this adds two screens to the stack & I have to click back two times :(

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related