DEV Community

Cover image for Step 1: Setting up React Native with Storybook

Step 1: Setting up React Native with Storybook

Carl-W on August 02, 2020

This is the first post in a series of setting up a react native UI library development foundation. Please refer to the link collections here Serie...
Read full post
Collapse
 
mateoguzmana profile image
Mateo Guzmán •

This article is really good! I was struggling a lot reading in other places but this one got me right where it should be in the code.

Collapse
 
ugglr profile image
Carl-W •

Hi 👋 thank you! 🤓 Glad I could help ☕️

Collapse
 
davidzabaleta profile image
David Zabaleta •

No one of the options works for me, the first option loads the emulator but the menu-bar keeps loading and the 2nd neither works :'(
I need to add something to storyloader.js?

Collapse
 
dom_vinyard_c1e05eb0212f profile image
Dom Vinyard •

same, using expo

Collapse
 
marysue profile image
Mary Lark •

In this tutorial, we redirect our root level index.js to storybook's index.js. But by doing this, we can no longer run the app when we're developing. We can only run storybook.

Is there some way we can fork inside index.js to either run the app, or run storybook in the emulator? Or for that matter, run the emulator by bypassing index.js and looking directly at storybook/index.js?

Collapse
 
ugglr profile image
Carl-W •

I would suggest doing something like this in your entry file:

const useStorybook = {set this in some config file} <Boolean>

const App = () => useStorybook ? <Storybook /> : <Application />

AppRegistry.registerComponent(appName, () => App);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ashwin_mothilal profile image
Ashwin Mothilal •

Should we have the storybook as a separate repo or inside the same project? Because all stories.js will also bundle in the React Native App right?

Collapse
 
thenriquedb profile image
Thiago Henrique Domingues •

Same question here, were you able to find any way to resolve this?

Collapse
 
ugglr profile image
Carl-W • • Edited

It depends, if you are using this approach and having it in the same repo as the app you are planning to ship, then I would suggest doing something like this in your entry file:

const useStorybook = {set this in some config file} <Boolean>

const App = () => useStorybook ? <Storybook /> : <Application />

AppRegistry.registerComponent(appName, () => App);
Enter fullscreen mode Exit fullscreen mode

Originally my thinking was to ship the ui-library as an NPM package and then installed in the app so the UI and the App could be developed in parallell.

Collapse
 
chasty profile image
Willy Rosa Huanca •

same question here?

Collapse
 
esackn profile image
EsackN •

Hi, Good explanation. I want to preview the storybook on web without emulator. If this is possible please help me to achieve this?

Collapse
 
ugglr profile image
Carl-W •

Yes! If you go through the other steps in this series you will have that up and running :)

Collapse
 
vladimirvovk profile image
Vladimir Vovk • • Edited

Nice article. Thank you! 🙌

P.S. If you are using Typescript, make sure you have the tsx extension for your components and stories. ⚠️

Collapse
 
xiongemi profile image
Emily Xiong •

the command should be *yarn add -D react-native-storybook-loader *

Collapse
 
deepakanandrao profile image
Deepak Anandrao •

or
yarn add --dev react-native-storybook-loader

Collapse
 
marysue profile image
Mary Lark •

Despite putting the config block in package.json, I still had to manually run the prestorybook target in scripts first before running ios so that the storybook/storyLoader.js file was created.