Flow state in navigation state

packages/example/src/FlowNavigatorExample.tsx

@@ -35,15 +35,23 @@ export const FlowNavigatorExample = () => {
     );
   }
 
-  const initialDisabledRoutes = [
-    'Step31',
-    ...(hasToPassStep4 ? [] : ['Step4']),
-  ];
+  const initialFlowState = {
+    myValue31: false,
+    myValue4: hasToPassStep4,
+  };
+
+  type FlowState = typeof initialFlowState;
+
+  const config = {
+    Step31: (flowState: FlowState) => flowState.myValue31,
+    Step4: (flowState: FlowState) => flowState.myValue4,
+  };
 
   return (
     <FlowNavigator.Navigator
       screenOptions={{headerShown: false}}
-      initialDisabledRoutes={initialDisabledRoutes}>
+      config={config}
+      initialFlowState={initialFlowState}>
       <FlowNavigator.Screen name="Step1" component={Step1Page} />
       <FlowNavigator.Screen name="Step2" component={Step2Navigator} />
       <FlowNavigator.Group>

packages/example/src/steps/Step2/Step2-2Page.tsx

@@ -6,11 +6,13 @@ import {FlowInfos} from '../FlowInfos';
 import {FlowStackParamList} from '../../FlowNavigatorExample';
 
 export const Step22Page = () => {
-  const {goBack, goToNextStep, enableRoute} =
+  const {goBack, goToNextStep, setStoreState} =
     useNavigation<FlowNavigationProp<FlowStackParamList>>();
 
   const onNextPress = async () => {
-    enableRoute('Step31');
+    setStoreState({
+      myValue31: true,
+    });
     goToNextStep();
   };
 

packages/example/src/steps/Step3/Step3-2Page.tsx

@@ -5,12 +5,11 @@ import {FlowInfos} from '../FlowInfos';
 import {ParamListBase, useNavigation} from '@react-navigation/native';
 
 export const Step32Page = () => {
-  const {goToPreviousStep, goToNextStep, disableRoute} =
+  const {goToPreviousStep, goToNextStep} =
     useNavigation<FlowNavigationProp<ParamListBase>>();
 
   const onNextPress = () => {
     goToNextStep();
-    disableRoute('Step32');
   };
 
   return (

packages/example/src/steps/Step4/Step4Page.tsx

@@ -3,22 +3,22 @@ import {FlowNavigationProp} from '@bam.tech/flow-navigator';
 import {Button, StyleSheet, Text, View} from 'react-native';
 import {FlowInfos} from '../FlowInfos';
 import {ParamListBase, useNavigation} from '@react-navigation/native';
-import {useQueryClient, useMutation} from '@tanstack/react-query';
+import {useMutation} from '@tanstack/react-query';
 import {postPassedStep4} from '../../queries/hasToPassStep4';
 
 export const Step4Page = () => {
-  const {goToPreviousStep, goToNextStep, disableRoute} =
+  const {goToPreviousStep, goToNextStep, setStoreState} =
     useNavigation<FlowNavigationProp<ParamListBase>>();
 
-  const queryClient = useQueryClient();
   const {mutate: setHasToPassStep2ToOff} = useMutation(
     ['postHasToPassStep4'],
     postPassedStep4,
     {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['hasToPassStep4']);
+      onSuccess: value => {
         goToNextStep();
-        disableRoute('Step4');
+        setStoreState({
+          myValue4: value,
+        });
       },
     },
   );

packages/lib/src/navigators/createFlowNavigator.tsx

@@ -5,7 +5,10 @@ import {
   useNavigation,
   useNavigationBuilder,
 } from "@react-navigation/native";
-import { NativeStackNavigationEventMap, NativeStackView } from "@react-navigation/native-stack";
+import {
+  NativeStackNavigationEventMap,
+  NativeStackView,
+} from "@react-navigation/native-stack";
 import {
   FlowActionHelpers,
   FlowRouterOptions,
@@ -26,7 +29,8 @@ function FlowNavigator({
   children,
   screenListeners,
   screenOptions,
-  initialDisabledRoutes,
+  config,
+  initialFlowState,
   ...rest
 }: FlowNavigatorProps) {
   const parentNavigation = useNavigation();
@@ -42,7 +46,7 @@ function FlowNavigator({
       FlowActionHelpers<ParamListBase>,
       FlowNavigationOptions,
       FlowNavigationEventMap
-    >(buildFlowRouter(quitFlow, initialDisabledRoutes), {
+    >(buildFlowRouter(quitFlow, { config, initialFlowState }), {
       id,
       initialRouteName,
       children,

packages/lib/src/routers/FlowRouter.ts

@@ -7,16 +7,15 @@ import {
   StackRouter,
   StackRouterOptions,
 } from "@react-navigation/native";
-import { FlowNavigationState } from "../types/types";
+import { Config, FlowNavigationState, FlowState } from "../types/types";
 
 export type FlowRouterOptions = StackRouterOptions;
 
 export type FlowActionHelpers<ParamList extends ParamListBase> = {
   goToNextStep(): void;
   goToPreviousStep(): void;
   quitFlow(): void;
-  enableRoute(routeName: Extract<keyof ParamList, string>): void;
-  disableRoute(routeName: Extract<keyof ParamList, string>): void;
+  setStoreState(flowState: FlowState): void;
 } & StackActionHelpers<ParamList>;
 
 export type FlowActionType =
@@ -34,19 +33,19 @@ export type FlowActionType =
       source?: string;
     }
   | {
-      type: "ENABLE_ROUTE";
+      type: "SET_STORE_STATE";
       source?: string;
-      payload: { routeName: Extract<keyof ParamListBase, string> };
-    }
-  | {
-      type: "DISABLE_ROUTE";
-      source?: string;
-      payload: { routeName: Extract<keyof ParamListBase, string> };
+      payload: { flowState: Object };
     };
 
-
 export const buildFlowRouter =
-  (quitFlowHelper: () => void, initialDisabledRoutes: string[]) =>
+  (
+    quitFlowHelper: () => void,
+    {
+      config,
+      initialFlowState,
+    }: { config: Config<ParamListBase>; initialFlowState: FlowState }
+  ) =>
   (
     options: FlowRouterOptions
   ): Router<
@@ -63,14 +62,24 @@ export const buildFlowRouter =
 
       getInitialState(params) {
         const { routeNames } = params;
+
+        const disabledRouteNames = Object.entries(config)
+          .filter(([_, isRouteNameEnabledCb]) => {
+            return !isRouteNameEnabledCb(initialFlowState);
+          })
+          .map(([routeName]) => routeName);
+
         const availableRoutes = routeNames.filter(
           (routeName) =>
-            !initialDisabledRoutes.find((disabledRoute) => disabledRoute === routeName)
+            !disabledRouteNames.find(
+              (disabledRoute) => disabledRoute === routeName
+            )
         );
 
         return {
           ...router.getInitialState(params),
           availableRoutes,
+          flowState: initialFlowState,
         };
       },
 
@@ -120,40 +129,46 @@ export const buildFlowRouter =
 
             return state;
 
-          case "ENABLE_ROUTE":
-            const notOrdonnedAvailableRoutes = [
-              ...state.availableRoutes,
-              action.payload.routeName,
-            ];
+          case "SET_STORE_STATE":
+            const newFlowState = {
+              ...state.flowState,
+              ...action.payload.flowState,
+            };
 
-            const newAvailableRoutes = state.routeNames.filter((routeName: string) =>
-              notOrdonnedAvailableRoutes.find(
-                (newAvailableRoute) => routeName === newAvailableRoute
-              )
+            const disabledRouteNames = Object.entries(config)
+              .filter(([_, isRouteNameEnabledCb]) => {
+                return !isRouteNameEnabledCb(newFlowState);
+              })
+              .map(([routeName]) => routeName);
+
+            const availableRoutes = state.routeNames.filter(
+              (routeName) =>
+                !disabledRouteNames.find(
+                  (disabledRoute) => disabledRoute === routeName
+                )
             );
 
-            return {
-              ...state,
-              availableRoutes: newAvailableRoutes,
-            };
-
-          case "DISABLE_ROUTE":
-            // TODO: maybe use getStateForRouteNamesChange
-            const currentRouteName = state.routes[state.routes.length - 1];
+            const builtRemovedRoute = disabledRouteNames.filter(
+              (disabledRoute) =>
+                state.routes.some((route) => route.name === disabledRoute)
+            );
 
-            const filteredRoutes = state.routes.filter(
-              (route) => route.name !== action.payload.routeName
+            const newRoutes = state.routes.filter(
+              (route) =>
+                !builtRemovedRoute.some(
+                  (builtRemovedRoute) => builtRemovedRoute === route.name
+                )
             );
 
             return {
               ...state,
-              availableRoutes: state.availableRoutes.filter(
-                (routeName: string) => routeName !== action.payload.routeName
-              ),
-              routes: filteredRoutes,
-              index: filteredRoutes.findIndex(
-                (routeName) => routeName === currentRouteName
-              ),
+              flowState: {
+                ...state.flowState,
+                ...action.payload.flowState,
+              },
+              index: state.index - builtRemovedRoute.length,
+              availableRoutes,
+              routes: newRoutes,
             };
 
           default:
@@ -171,11 +186,8 @@ export const buildFlowRouter =
         quitFlow: () => {
           return { type: "QUIT_FLOW" };
         },
-        enableRoute: (routeName) => {
-          return { type: "ENABLE_ROUTE", payload: {routeName} };
-        },
-        disableRoute: (routeName) => {
-          return { type: "DISABLE_ROUTE", payload: {routeName} };
+        setStoreState: (flowState) => {
+          return { type: "SET_STORE_STATE", payload: { flowState } };
         },
       },
     };

packages/lib/src/types/types.ts

@@ -44,9 +44,16 @@ export type FlowNavigationProp<
 export type FlowNavigationState<ParamList extends ParamListBase> =
   NavigationState<ParamList> & {
     availableRoutes: Extract<keyof ParamList, string>[];
+    flowState: FlowState;
     // type: "flow"; : TODO add flow type and key
   };
 
+export type Config<ParamList = ParamListBase> = {
+  [k in Partial<keyof ParamList>]: (flowState: FlowState) => boolean;
+};
+
+export type FlowState = Object;
+
 export type FlowNavigatorProps = DefaultNavigatorOptions<
   ParamListBase,
   FlowNavigationState<ParamListBase>,
@@ -55,7 +62,8 @@ export type FlowNavigatorProps = DefaultNavigatorOptions<
 > &
   StackRouterOptions &
   NativeStackNavigationConfig & {
-    initialDisabledRoutes: Extract<keyof ParamListBase, string>[];
+    config: Config<ParamListBase>;
+    initialFlowState: FlowState;
   };
 
 export type FlowStackNavigationOptions = NativeStackNavigationOptions & {