xstate-typed-children-machines

ChildComponent.tsx

import React from "react";
import { Text } from "react-native";
import { useActor } from "@xstate/react";
import { ChildMachineActor } from "../machines/childMachine";

interface Props {
  actor: ChildMachineActor;
}

export function ChildComponent({ actor }: Props) {
  const [state, send] = useActor(actor);

  return <Text>{`${state.value}`}</Text>;
}

childMachine.ts

import { ActorRefFrom, createMachine } from "xstate";

export const childMachine = createMachine(
  {
    context: {},
    schema: {},
    tsTypes: {} as import("./childMachine.typegen").Typegen0,
    id: "child",
    initial: "idle",
    states: {
      idle: {},
    },
  },
  {
    actions: {},
    services: {},
  }
);

export type ChildMachineActor = ActorRefFrom<typeof childMachine>;

ParentComponent.tsx

import React from "react";
import { ChildComponent } from "./childComponent";
import { useMachine } from "@xstate/react";
import { parentMachine } from "../machines/parentMachine";

export function ParentComponent() {
  const [state, send] = useMachine(parentMachine);

  return state.context.childRef ? (
    <ChildComponent actor={state.context.childRef}></ChildComponent>
  ) : null;
}

parentMachine.ts

import { ActorRefFrom, createMachine, spawn, assign } from "xstate";
import { childMachine, ChildMachineActor } from "./childMachine";

export const parentMachine = createMachine(
  {
    context: {
      childRef: null,
    },
    schema: { context: {} as { childRef: null | ChildMachineActor } },
    tsTypes: {} as import("./parentMachine.typegen").Typegen0,
    id: "parent",
    initial: "idle",
    states: {
      idle: { entry: "assignChildRef" },
    },
  },
  {
    actions: {
      assignChildRef: assign({
        childRef: (context, event) => {
          return spawn(childMachine, { name: "childMachine" });
        },
      }),
    },
    services: {},
  }
);

export type parentMachineActor = ActorRefFrom<typeof parentMachine>;