Move navigation to machine

src/contexts/useApp.tsx

@@ -4,11 +4,11 @@ import { createActorContext, useSelector } from "@xstate/react";
 import {
   AuthenticatingMachineActor,
   authenticatingMachine,
-} from "../machines/authenticating";
+} from "../machines/authenticating.navigator";
 import {
   AuthenticatedMachineActor,
   authenticatedMachine,
-} from "../machines/authenticated";
+} from "../machines/authenticated.navigator";
 
 export const appMachine = setup({
   types: {

src/machines/authenticated.ts → src/machines/authenticated.navigator.ts

@@ -1,7 +1,8 @@
-import { ActorRefFrom, setup, assign } from "xstate";
+import { ActorRefFrom, setup, assign, fromCallback } from "xstate";
 import { AuthenticatedParamList } from "../types/navigation";
 import { HomeMachineActor, homeMachine } from "./home";
 import { ListMachineActor, listMachine } from "./list";
+import { navigationSubscriber } from "./shared/actors";
 
 export type AuthenticatedMachineActor = ActorRefFrom<
   typeof authenticatedMachine
@@ -27,7 +28,11 @@ export const authenticatedMachine = setup({
       },
     }),
   },
-  actors: { homeMachine, listMachine },
+  actors: {
+    homeMachine,
+    listMachine,
+    navigationSubscriber,
+  },
   guards: {
     isHomeScreen(_, params: { screen: keyof AuthenticatedParamList }) {
       return params.screen === "Home";
@@ -40,6 +45,7 @@ export const authenticatedMachine = setup({
   context: { refHome: undefined, refList: undefined },
   id: "application",
   initial: "homeScreen",
+  invoke: { src: "navigationSubscriber" },
   on: {
     NAVIGATE: [
       {

src/machines/shared/actors.ts

@@ -0,0 +1,17 @@
+import { fromCallback } from "xstate";
+import {
+  getCurrentRouteName,
+  navigationRef,
+} from "../../navigation/NavigationRef";
+
+export const navigationSubscriber = fromCallback(({ sendBack }) => {
+  const unsubscribe = navigationRef.addListener("state", (_event) => {
+    const screenRoute = getCurrentRouteName();
+
+    if (screenRoute) {
+      sendBack({ type: "NAVIGATE", screen: screenRoute });
+    }
+  });
+
+  return unsubscribe;
+});

src/navigation/AuthenticatedNavigator.tsx

@@ -6,10 +6,9 @@ import {
   AuthenticatedParamList,
   RootStackScreenProps,
 } from "../types/navigation";
-import { AuthenticatedMachineActor } from "../machines/authenticated";
+import { AuthenticatedMachineActor } from "../machines/authenticated.navigator";
 import HomeScreen from "../screens/Home";
 import ListScreen from "../screens/List";
-import { useNavigator } from "../hooks/useNavigator";
 
 const Stack = createNativeStackNavigator<AuthenticatedParamList>();
 
@@ -22,10 +21,6 @@ export function AuthenticatedNavigator({ actorRef }: Props) {
     return snapshot;
   });
 
-  useNavigator<AuthenticatedParamList>((route) => {
-    actorRef.send({ type: "NAVIGATE", screen: route });
-  });
-
   return (
     <Stack.Navigator initialRouteName="Home">
       <Stack.Screen name="Home">

src/navigation/AuthenticatingNavigator.tsx

@@ -6,9 +6,8 @@ import {
   AuthenticatingParamList,
   RootStackScreenProps,
 } from "../types/navigation";
-import { AuthenticatingMachineActor } from "../machines/authenticating";
+import { AuthenticatingMachineActor } from "../machines/authenticating.navigator";
 import SignInScreen from "../screens/SignIn";
-import { useNavigator } from "../hooks/useNavigator";
 
 const Stack = createNativeStackNavigator<AuthenticatingParamList>();
 
@@ -21,10 +20,6 @@ export function AuthenticatingNavigator({ navigation, actorRef }: Props) {
     return snapshot;
   });
 
-  useNavigator<AuthenticatingParamList>((route) => {
-    actorRef.send({ type: "NAVIGATE", screen: route });
-  });
-
   return (
     <Stack.Navigator initialRouteName="SignIn">
       <Stack.Screen name="SignIn">