DEV Community

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

Posted on • Updated on

Step 1: Setting up React Native with Storybook

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 Series: The Ultimate React Native UI Library starter repo for the full series overview.

In the first step of setting up the ultimate UI library boilerplate we go through making a new init, and installing Storybook.

If you've done this sort of thing before you'll probably want to jump to the bottom where I install a package which will load stories dynamically

Oh right, I'm not using expo... ;)

The other parts

Article Link
setup react native & @storybook/react-native You are here now!
setup react from scratch together with react native web Step 2: Setting up react with react native web
setup @storybook/react + react native web to run as a parallel storybook Step 3: Setting up storybook with react native web: Show your mobile components in a browser

React Native Init

If you are completely new to react native please follow the steps on the official react native docs to get your environment setup.

Init

npx react-native init RNStorybook
Enter fullscreen mode Exit fullscreen mode

This will set up a fresh new react native project for you.

Make sure that the installation was successful by running both the android and iOS builds of the project before going ahead. I always take things step by step, so when things bug out then I know exactly where it worked and where it broke.

so for the people who forgot etc. here's the commands for doing so.

cd ios && pod install

cd .. 

yarn run ios
Enter fullscreen mode Exit fullscreen mode

or

yarn run android
Enter fullscreen mode Exit fullscreen mode

Behold the welcome screen!

Android iOS
Alt Text Alt Text

Installing Storybook

Using the automated setup as recommended by the docs here: Storybook quick-start guide

inside the root folder run the following command to initiate the installation:

npx -p @storybook/cli sb init
Enter fullscreen mode Exit fullscreen mode

When prompted if you want to install the react-native server accept.

After that open up your code editor and we will do the final steps in rendering storybook out on the screen.

inside the folder ./storybook open up index.js and we will add in our app name. You can either add it manually or you can be lazy as me and import the app name from app.json in the root folder. It has the benefit that if the app name changes you won't need to go in and change it manually.

Below is the result:

./storybook/index.js

import {AppRegistry} from 'react-native';
import {getStorybookUI, configure} from '@storybook/react-native';
import {name as appName} from '../app.json';

import './rn-addons';

// import stories
configure(() => {
  require('./stories');
}, module);

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent(appName, () => StorybookUIRoot);

export default StorybookUIRoot;
Enter fullscreen mode Exit fullscreen mode

after we have added our app name to Storybook, inside of the root folder, we open index.js. This is the default entry point for our React Native app.

Inside of ./index.js comment everything out and add the following line:

export { default } from './storybook'
Enter fullscreen mode Exit fullscreen mode

This will render storybook as the first entry to your app, but later if you want Storybook to be rendered inside of a tab-view or another type of screen you'll just add storybook as any other component. More on that in the Storybook docs.

Now when you run the following command we can start up our React Native development server on port 7007:

yarn run storybook
Enter fullscreen mode Exit fullscreen mode

It will give you the following screen:

Alt Text

Hold your horses you might say "That menu-bar never stops loading!" and you'll be right. This web interface is trying to connect to a iOS or Android emulator.

so run an emulator and if you put the browser window and the device side by side it should look like:

Alt Text

If you play around with this you notice that you can control the view which is being shown in the emulator / simulator from the browser. Neat right! ⭐️ It's a nice feature which makes navigating your component library on a device very fast and easy.

Setting up dynamic story-loading

As your project grows you don't want to add stories into storybook manually as is the default. It's tedious and you'll spent time "debugging" why your component does not show up.

In comes react-native-storybook-loader

I really like this project because after setting it up I don't have to worry about adding any new stories every again.

Setup

Install

yarn add -dev react-native-storybook-loader 
Enter fullscreen mode Exit fullscreen mode

Add script to package.json

{
  "scripts": {
    ......
    "prestorybook": "rnstl"
    ......
  }
}
Enter fullscreen mode Exit fullscreen mode

Add into Storybook configuration

Open up ./storybook/index.js and modify the entry where the stories are loaded from:

./storybook/index.js

import { AppRegistry } from 'react-native'
import { getStorybookUI, configure } from '@storybook/react-native'
import { name as appName } from '../app.json'

import { loadStories } from './storyLoader'

import './rn-addons'

// Add React native storybook loader here!
configure(() => {
  loadStories() // <------------------
}, module)

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({})

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you can safely remove this line.
AppRegistry.registerComponent(appName, () => StorybookUIRoot)

export default StorybookUIRoot
Enter fullscreen mode Exit fullscreen mode

Configure story loader

The last step in setting up react-native-storybook-loader is configuring in which directory it should look for stories.

Open up package.json again and add a config field:

"config": {
    "react-native-storybook-loader": {
      "searchDir": ["./src/components"],
      "pattern": "**/*.stories.js",
      "outputFile": "./storybook/storyLoader.js"
    }
  }
Enter fullscreen mode Exit fullscreen mode

I wan't it to look inside of the ./src/components directory but you can set it up to look in a different folder, or even add more places it should look in by adding them into the searchDir array. If you change the other fields you'll need to change your other config to match accordingly.

Adding Test component

To test that this part of the setup works lets add a test component and check so everything works.

I'm making a new directory called src and inside of the directory I'm adding a folder called components -> ./src/components

and in these files I'm adding two new files called TestComponent.js & TestComponent.stories.js and let's code a test component and add a story for storybook.

./src/components/TestComponent.js

import React from 'react';
import {View, Text} from 'react-native';

function TestComponent() {
  return (
    <View>
      <Text>Hello from React Native</Text>
    </View>
  );
}

export default TestComponent;
Enter fullscreen mode Exit fullscreen mode

and a story for storybook

./src/components/TestComponent.stories.js

import React from 'react';
import {storiesOf} from '@storybook/react-native';

import TestComponent from './TestComponent';

storiesOf('Test Component', module).add('example', () => <TestComponent />);
Enter fullscreen mode Exit fullscreen mode

Note that while using react native we have to use the storiesOf api from Storybook.

Running everything together

Let's test it out on your device of choice!

yarn run iOS

This will first run the react-native-storybook-loader script. It will output a reference to all the files matching the pattern *.stories.js inside ./src/components to ./storybook/storyloader.js and load them into Storybook. After that it's running storybook as normal.

Here's what you should see:

successful-test

Hopefully you'll see the test component on the screen.

Success!

What did we accomplish:

  • initiated a new react native project.
  • installed @storybook/react-native.
  • installed @storybook/react-native-server.
  • installed & configured react-native-storybook-loader.
  • Added our first test component and story.

If you like this content please bookmark the init post of this series here and stay tuned for part 2!

You can find the finished repository for the whole series on Github: react-native-storybook-boilerplate

Consider giving it a star or raising an issue, PRs are most welcome!

Discussion (13)

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 Author

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
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
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
chasty profile image
Willy Rosa Huanca

same question here?

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 Author • 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
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 Author

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
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.

Collapse
xiongemi profile image
Emily Xiong

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