DEV Community

Cover image for Getting started with react native storybook
Danny
Danny

Posted on

Getting started with react native storybook

This guide is a written version of a video I recently made and will show you how to get started with react native storybook on an existing project. This assumes that you already have a react native project to start with. For my purposes I'm starting with the expo typescript template but you can use react native cli if you prefer.

Heres the video if you want to watch me do it and talk through the process

The first thing you'll want to do is open the terminal in your project folder and run

npx sb@latest init --type react_native
Enter fullscreen mode Exit fullscreen mode

This will create all the files and install all the packages you need to get started.

terminal showing command

As you can see from the message here the setup isn't fully automated and the next step is to get storybook to render by replacing your entry point with the Storybook component.

Lets now take a look at what got added to our project

vscode showing changes

There were some new packages installed, two new scripts and a .storybook folder which contains all the storybook config. The .storybook/index.js file exports the Storybook component which we need to render to get storybook working.

Now in your editor open up App.tsx (or js/jsx) or wherever your app entrypoint and import and export the component .storybook/index.js like you would normally export the App component. For now you can comment out your existing default export but later you can setup a way to swap between storybook and your app.

import StorybookUI from "./.storybook";

export default StorybookUI;
Enter fullscreen mode Exit fullscreen mode

vscode showing code snippet

Next we'll make one quick change to our metro config.

If you're on expo you'll need to generate that file with

npx expo customize metro.config.js
Enter fullscreen mode Exit fullscreen mode

Then in that file add sb modern to the start of the resolver.resolverMainFields array. In expos generated file you can do it like this.

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

config.resolver.resolverMainFields.unshift("sbmodern");

module.exports = config;
Enter fullscreen mode Exit fullscreen mode

note: you'll be happy to know sbmodern won't be needed in v7 of storybook

Now you can run yarn ios or yarn android and when the app opens up you should see the storybook UI.

simulator with storybook ui

Why aren't my new stories showing up?

When you add new stories you might notice that they don't immediately show up, thats because currently you need to run yarn storybook-generate each time you add a new story.

I like to add it to the start command like this so that I never forget

"start": "yarn storybook-generate && expo start",

This is needed because until recently react native didn't support dynamic imports and we generate a list of story imports based on your main.js config. You can see this in the storybook.requires.js file. This is something that we'll be changing in the future but for now make sure that you run storybook-generate whenever your new stories aren't showing up.

Thats it folks

Thanks for reading this post, if you're wondering where to go from here I recommend taking a look at some of my other posts or following the tutorial I wrote for react native storybook.

You can find me on twitter here @Danny_H_W
You can find my work on github here dannyhw

My DM's are open on twitter in case you want to get in touch.

Top comments (5)

Collapse
 
flexbox profile image
David Leuliette • Edited

@dannyhw

Do you think we need to add a section
"Run storybook with Expo development build"

Correct me if i am wrong, but your example only work with Expo Go

because right now (with Expo SDK 49) we have the choice to switch between Expo Go and development build

 Scan the QR code above to open the
project in a development build.
Learn more

 Using development build
 Press s  switch to Expo Go
Enter fullscreen mode Exit fullscreen mode
Collapse
 
dannyhw profile image
Danny • Edited

Theres no difference with how you run this with expo dev clients. You just change the start command. Everything that works on expo go should work with a dev client as far as I know. Unless Im misunderstanding something

Collapse
 
jmquilario profile image
jmquilario

i think so. i'm using cli, it's not working

Collapse
 
jmquilario profile image
jmquilario • Edited

this is how we configure metro in CLI (credits: Muhammad Awais)
don't forget to run npx pod-install ios after

const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config');

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: {
    resolverMainFields: [
      'sbmodern',
      ...getDefaultConfig(__dirname).resolver.resolverMainFields,
    ],
  },
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jmquilario profile image
jmquilario

in CLI, it gives this error
`LOG Running "storybook1" with {"rootTag":1,"initialProps":{}}
ERROR Invariant Violation: "storybook1" has not been registered. This can happen if:

  • Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
  • A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes`