Using Storybook with a project that uses expo-router.

[andrewchaa]

Hi Storybook Community,

I'm encountering an issue setting up Storybook in my Expo project. I'm currently using Expo SDK 52 and my project is built with expo-router. Unlike standard Expo projects, I don't have a root index.tsx or App.tsx. Instead, my entry points are located in the /app directory: /app/_layout.tsx and /app/index.tsx.

Could anyone advise on how to configure Storybook in this expo-router project structure? I'm looking for guidance on how to get Storybook to launch correctly.

Thanks in advance for any help!

[dannyhw]

my suggestion is to create a storybook route and just have a link to it, or even redirect to it automatically when sb is enabled. I have an example where I use a deeplink to open it

https://github.com/dannyhw/expo-router-storybook-example

[dannyhw]

The storybook route: https://github.com/dannyhw/expo-router-storybook-example/blob/main/app/storybook.tsx
auto redirect in layout: https://github.com/dannyhw/expo-router-storybook-example/blob/main/app/_layout.tsx

You can also use query params to set the story if you want, I have an example somewhere

[dannyhw]

Heres an example of setting the story from search/query params that I experimented with

import {
  Stack,
  useLocalSearchParams,
  useRouter,
  useGlobalSearchParams,
} from "expo-router";
import { View } from "react-native";
import Storybook from "../.storybook";

import { SET_CURRENT_STORY, STORY_RENDERED } from "@storybook/core/core-events";
import { addons } from "@storybook/core/preview-api";
import { useEffect } from "react";

export default function StorybookLayout() {
  const router = useRouter();

  const { storyId } = useLocalSearchParams();

  useEffect(() => {
    const channel = addons.getChannel();

    const onRendered = () => {
      router.setParams({ storyId: "" });
    };

    if (storyId && typeof storyId === "string") {
      channel.emit(SET_CURRENT_STORY, { storyId: storyId });
      channel.on(STORY_RENDERED, onRendered);
    }

    return () => {
      channel.off(STORY_RENDERED, onRendered);
    };
  }, [storyId]);

  return (
    <View style={{ flex: 1 }}>
      <Stack.Screen
        options={{
          headerShown: false,
        }}
      />
      <Storybook />
    </View>
  );
}