Using React Native Storybook 2 with Create React Native App

Update: The recently released Storybook 3 includes first-class support for create-react-native-app which makes this blog post mostly obsolete 😄

Currently, you can’t use React Native Storybook with Create React Native App directly. In this blog post, I will explain the steps required to get React Native Storybook to work with your CRNA project (without ejecting).

Note. You can find the code on GitHub. Specifically this commit.

  1. Create a new app using create-react-native-app.
  2. Use getstorybook to add React Native Storybook to your app.

We will need to make a few modifications to the boilerplate created by getstorybook.

  1. Remove storybook/ and storybook/index.ios.js since CRNA (unlike vanilla React Native boilerplate) does not need different entry points.
  2. Create storybook/index.js:

It has the following changes to the initial index.ios.js:

  • Instead of the registering the component to AppRegistry, it will be exported. This is needed since CRNA abstracts the AppRegistry away.
  • It changes the host so that your phone can access Storybook’s server (thanks to this Stack Overflow post (thanks to this Stack Overflow post).

We need to modify the npm scripts so that they also start the Storybook server. For platform-independence, we use concurrently:

package.json (only changed lines)

After that, we can use the Storybook component directly in App.js as entry component:


Finally: start your app, open http://localhost:7007 and enjoy 😊.

Note. If you want to change back to your usual entry component, you will need to change App.js again. I’d prefer to choose the entry component by using environment variables or flags (that can be set in package.json). Currently, CRNA has no way to solve this, see this issue. If you found another way to solve this, I’d like to know :).