dannyhw / expo-template-storybook

An expo template for react native storybook
https://www.npmjs.com/package/expo-template-storybook
30 stars 7 forks source link

Running alongside an existing expo app #1

Closed MiguelNiblock closed 2 years ago

MiguelNiblock commented 2 years ago

Hey @dannyhw , this is an awesome project. I'm new to storybook and was trying to use it alongside my existing expo app, for UI development. But after taking a closer look at your project, I'm confused as to how storybook should be used. It seems like this is intended to use storybook as the main app in App.tsx. Is this the only way it can be set up with expo? I would like to still be able to run my regular app, and run storybook on the side. If that's not possible, would you have to create a monorepo? I.e. installing your template as a subproject? I would highly prefer to not go that route because monorepos are harder to maintain. How would you normally set this up if you were developing an actual app, (Not a UI library), and only wanted to use storybook to test the UI that goes into the app? Thanks and I hope to help document anything that might help storybook adoption in expo! It's an awesome tool.

dannyhw commented 2 years ago

Hey 👋, in the documentation I suggest setting it up that way because its just easier to explain for getting started. However I tried to mention some alternatives in the readme and so on. Basically it comes down to optionally exporting the storybook ui or opening it from a settings menu or gesture that only works in dev mode for example.

For rn cli i wrote a blog about how you can have two entry points for an app however it unfortunately isn't so easy to do with expo.

Essentially its left up to the user how you want to hide/show the storybook ui, how you might with any other component. Ignite have an interesting solution for this but there are many other ways.

MiguelNiblock commented 2 years ago

Thank you ! I did figure something out:

package.json... "sb.device": "SB=device yarn start",

app.config.ts... entryPoint: process.env.SB === 'device' ? './.storybook-react-native/App.tsx' : './App.tsx',

and then wrap both entry points in import { registerRootComponent } from 'expo'

and voila

dannyhw commented 2 years ago

Nice! I will have to try it out myself

dannyhw commented 2 years ago

@MiguelNiblock seems like you have an interesting solution to this, would you consider opening a PR to include it in the template?