Best way to combine this with Storybook?

[etodanik]

The canonic way that Storybook docs recommend setting up the app is:

import Constants from 'expo-constants';

function App() {
  // ... removed for brevity
}

// Default to rendering your app
let AppEntryPoint = App;

// Render Storybook if storybookEnabled is true
if (Constants.expoConfig.extra.storybookEnabled === 'true') {
  AppEntryPoint = require('./.storybook').default;
}

export default AppEntryPoint;

This doesn't really mix well with import 'expo-router/entry' (which doesn't seem to like being dynamically imported?). Is there a recommended way to optionally run expo-router?

[AkBo24]

Have you found a solution for this? I'd like to use Storybook and expo router as well.

[etodanik]

Have you found a solution for this? I'd like to use Storybook and expo router as well.

For now I'm just doing something quick and dirty like this in _layout.tsx at the very top level:

let Exported = Layout;

if (Constants.expoConfig?.extra?.storybookEnabled) {
  Exported = Storybook;
}

export default Exported;

It's not semantically ideal, but ... it works :) It also probably brings in more dead code than necessary into the javascript code bundle. But ... it's better than not using Storybook at all.

When I'm done with my current project I'll reflect & think of a more elegant way.

[AkBo24]

Oh wow, thank you for the very fast response! I'll try this out. I really appreciate it:)

[etodanik]

Once you do get this basic approach working, try to dynamically import storybook in the conditional... I didn't try it , but can't see why it wouldn't work?

[AkBo24]

Honestly, I'm experimenting with a react native stack at my workplace so I'm not too knowledgable about in-depth configurations like this. Would you be able to explain what the _layout.tsx file is and what you mean by "at the very top level"?

Thank you again!

[jmatsushita]

This might help https://github.com/mauro-codes/expo-router-storybook-starter/blob/main/app/index.tsx

[wcastand]

not sure what's the best way to go but since i was in a monorepo, i just created a storybook app next to my expo app using expo-router.

[probablykabari]

@wcastand This really should be mentioned in the router documentation but there is a note in the monorepo docs here: https://docs.expo.dev/guides/monorepos/#change-default-entrypoint

EXPO_USE_METRO_WORKSPACE_ROOT=1 npx expo start

Which can also be set inside your .env file.

[wcastand]

not sure what that is doing, i don't use that ahah

[joernroeder]

I merge in the "custom directory" config to load the storybook app based on the env flag.

// app.config.json
[
    'expo-router',
    {
      ...(process.env.STORYBOOK_ENABLED ? { root: './src/storybook-app' } : undefined),
    }
],

// src/storybook-app/index.ts
import StorybookUIRoot from '../../.storybook';

export default StorybookUIRoot;