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?

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

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?

Thanks, I appreciate your help!

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