Dynamically toggle between storybook and app

useToggleStorybook.ts

import { config } from "@/app/config";
import { createLogger } from "@/app/observability";
import { useEffect } from "react";

const { appEnv } = config;

const logger = createLogger("developer/storybook");

export const useToggleStorybook = () => {
  const [isStorybookEnabled, setIsStorybookEnabled] = useState(false)

  useEffect(() => {
    if (appEnv === "dev") {
      // eslint-disable-next-line @typescript-eslint/no-var-requires
      const { registerDevMenuItems } = require("expo-dev-menu");
      logger.info("Registering dev menu items");

      const devMenuItems = [
        {
          name: "Toggle storybook",
          callback: () => {
            logger.info("Toggling storybook");
            setIsStorybookEnabled(prev => !prev)
          },
        },
      ];

      registerDevMenuItems(devMenuItems);
    }
  }, [toggle]);

  return appEnv === "dev"
    ? { isStorybookEnabled }
    : { isStorybookEnabled: false };
};

nevermind the toggle value in the deps array - it's a copy/paste leftover. See original post here: https://twitter.com/marceloterreiro/status/1714620600516272360