RFC : Easy goBack for flows

[remilry]

Why ?

I've come across the case several times where I have had a flow with several entries, a number of intermediate screens that vary depending on the entry and a single end screen. As in the following diagram.

The problem is that at the end of the flow, it's impossible to return to the beginning (Entry A, B or C) using pop (because the number of intermediate screens can vary) or navigate (because we have several entries).

Nested navigation could be a solution, but it increases complexity and introduce bugs. In addition, nested navigation is usually not recommend.

So the goal is to find a simple solution to go back to the beginning of a flow that could be implemented in react-navigation.

First alternative

A first alternative is to store a navigate function in the entry screen and to call it in the last screen.

We don’t need to have any information about intermediate screens, but I am not sure that can be implemented in react navigation and this requires to call the store in two different screens.

const useGoBackHere = () => {
  const { navigate } = useNavigation()
  const route = useRoute<RouteProp<ReactNavigation.RootParamList>>()
  return () => navigate(route.name, { ...route.params } as any) //Typing to fix
}

Second alternative

A second alternative goBackWithFilter would allow us to specify an array of intermediate screens and remove all these screens from the navigation as well as the current screen in order to return to the beginning of the flow. So we can go back to the start of any flow, regardless of the entry point.

Here is the code of this solution

import { CommonActions, useNavigation } from "@react-navigation/native";
import * as R from "remeda";

import type { RootStackParamList } from "#app/navigation/navigation.types";

export const useGoBackWithFilter = () => {
  const navigation = useNavigation();

  const goBackWithFilter = (screensToIgnore: (keyof RootStackParamList)[] = []) => {
    navigation.dispatch((state) => {
      const routes = [...state.routes];
      const currentRoute = routes[routes.length - 1]?.name;

      const newRoutes = R.pipe(
        routes,
        R.filter((screen) => ![...screensToIgnore, currentRoute].includes(screen.name)),
      );

      return CommonActions.reset({
        ...state,
        routes: newRoutes,
        index: newRoutes.length - 1, // Setting right index is important to handle goBack animation
      });
    });
  };

  return { goBackWithFilter };
};

This implementation is probably not the best and not enough generic but I think this idea could be implemented in the library