dannyhw / expo-template-storybook

An expo template for react native storybook

getting started

npx create-expo-app --template expo-template-storybook AwesomeStorybook

or

yarn create expo-app --template expo-template-storybook AwesomeStorybook

app

yarn start

Ondevice

In this template you can now run yarn storybook to start ondevice storybook or yarn start to start your expo app. This works via env variables and expo constants.

# either
yarn storybook

# ios
yarn storybook:ios

# android
yarn storybook:android

If you add new stories on the native (ondevice version) you either need to have the watcher running or run the stories loader

To update the stories one time

yarn storybook-generate

Web

Start react native web storybook:

yarn storybook:web

build react native web storybook:

yarn build-storybook

expo-template-storybook's Issues

How would you incorporate interaction tests with this setup?

Hi, I went with your setup and it's great to be able to use both storybook for web as well as storybook for react-native. I added the play function for interaction tests but it's blowing up my react-native storybook. How would you handle this? Here's the issue I opened with storybook: storybookjs/storybook#26947

expo template missing update-stories

Storybook 7 crash yarn start

Hey @dannyhw , this is an awesome project, just what I needed to get started with Storybook for my expo app.

After installing the template all the functions work fine.

When you run yarn storybook:web the terminal tells you that "Storybook 6.5.16 for React started" and "A new version (7.4.6) is available!" Upgrade now: npx storybook@latest upgrade

After the upgrade I run yarn start and try to open the app on a device I get this error.

Android Bundling failed 627ms
Unable to resolve "@storybook/react/dist/modern/client/docs/extractArgTypes" from ".ondevice/doctools.js"

How is this supposed to be used?

Hi,

I have been struggling with using storybook in my React Native project. This template is the one that currently works the best. However, I am wondering how I am supposed to use the components that I develop both in my app and in my storybook?

Currently, I have set up a normal Expo app, with a subfolder where this template exists. Then I have made aliases in my app to get the components from storybook/components. Then, my problem becomes that there exists two copies of react in my app. One in node_modules/react and one in storybook/node_modules/react.

If you could please help guide me in the right direction of how I am supposed to use the components that I develop in a storybook in my actual app I would be very very grateful.

Thank you.

storybook test runner not working on react native template

Hey @dannyhw I was trying the test runner in your template and the default instructions don't work. I made an issue with them, but perhaps you're in a better position to tell what the problem is. Do you have any working example of using the test runner with react or react native? I care mostly about the react server, if it easier just to get a working prototype.

storybookjs/test-runner#123

Running alongside an existing expo app

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.