Can I configure Storybook in a separate Expo project?

[ptrtdrv]

Is it possible to create an empty Expo project, install and configure Storybook to import in stories components from another Expo project. That project will be outside of the Storybook's project root folder. I know it can be done with a monorepo, but could it be possible otherwise? I don't want to reorganize files in the existing project and move them in a separate node module as a library. Also want to avoid big changes in the structure of version control.

[dannyhw]

Yes this is possible and thats what I would recommend for mono repo setups generally

The example project in this repo actually includes stories from the ui package and I have a mono repo example I made here: https://github.com/dannyhw/expo-storybook-monorepo-example

[ptrtdrv]

I did it. I created a root folder having packages folder and package.json. The file has "workspaces": ["packages/*"] property.

{
  "private": true,
  "name": "monorepo",
  "version": "1.0.0",
  "engines": {
    "node": ">=23.1.0"
  },
  "workspaces": [
    "packages/*"
  ]
}

In packages folder I created two template Expo projects with the commands npx create-expo-app@latest mobile and npx create-expo-app@latest design so that they created two apps under folder mobile and design. In design I put the components and confiture the storybook, in mobile is the app that I'm developing.

├── package.json
├── package-lock.json
└── packages
    ├── design
    └── mobile

In the package.json of design I set the main property to index.tsx where I export all components. Then I import them in mobile app like if it is a node library.

To set up design folder I followed these instructions for configuring Storybook in existing project.

So am I doing something wrong?

P.S. Actually I don't include components from design in mobile as if they are in a library.

import {MyButton} from 'design'

Indeed I include them by relative paths like so:

import {MyBotton} from 'design/components/MyButton'

Well if I try to import the component the first way I get the error

Android Bundling failed 120ms node_modules/expo-router/entry.js (1 module)
Unable to resolve "@storybook/core/manager-api" from "node_modules/@storybook/react-native/dist/index.js"

That's probably because I haven't packed the design project into a /dist/index.js file. I guess I have to configure webpack to build it and to set up a live reload, but I'm not sure exactly how to do it for Expo project. I saw that you use tsup. It seems an easier approach. Am I right?

[dannyhw]

you don't necessarily need to bundle the code though that might help

if you want to do import {MyButton} from 'design' then you just need to define a index file with that export and specify it as the 'main' entry point in your design package

[ptrtdrv]

Well, your suggestion work fine, as long as I don't put following line in the index file.

export { default } from '../.storybook'

But if I don't put it I cannot start the storybook project. Currently my index file looks like this:

//Export Storybook app entry point
export { default } from '../.storybook'

export { default as LinkButton } from '../components/LinkButton';

The included ../.storybook/index.tsx like this:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { view } from './storybook.requires';
import { registerRootComponent } from 'expo'

const StorybookUIRoot = view.getStorybookUI({
  storage: {
    getItem: AsyncStorage.getItem,
    setItem: AsyncStorage.setItem,
  },
});

registerRootComponent(StorybookUIRoot)
export default StorybookUIRoot;

And the error is

Android Bundling failed 105ms node_modules/expo-router/entry.js (1 module)
Unable to resolve "@storybook/core/manager-api" from "node_modules/@storybook/react-native/dist/index.js"

How to configure things so that the line export { default } from '../.storybook' is excluded when project is used as a module of components import and to keep it when the project is used as standalone Storybook?

[dannyhw]

Yeah this is more like a problem of how expo uses your main field as the entry point of the app. What I have ended up doing is actually making the ui project a separate package from the storybook app then I include the ui library stories in a separate package.

like

• apps/
  • actual-app (installs the 'ui' package)
  • storybook-app (main.ts has ../../packages/ui as the location of stories)
• packages
  • ui/ (stories and component files go here)

[ptrtdrv]

Thanks, I appreciate your help!

[dannyhw]

no problem, let me know if you run into any more issues