The poor man's storybook you need for your React Native App.

Published in

g2i_co

4 min readJun 20, 2018

How about a component list inside your app which you access through your dev menu?

We want to see our components separately, as an individual piece. This is necessary for faster development and quicker iteration. Also, it's good to serve as a guide so we don't recreate a component someone else has done. The latter contributes to reusability.

Storybook offered a very elegant solution to this. You would create .story files which would render your component in an isolated context. The only drawback is the need for running a server. Also before we weren't aware that we could just render StoryBookUI as a route inside our app.

Due to this difficulty I noticed that some devs weren't developing their components with storybook and that made creating a .story file just an obligation rather than an advantage.

How to do it?

Well, make sure you have a running React Native app, if you don't and want some help check the get started docs.

The first time I did this I actually extended the dev menu manually by following this awesome post by Guy Blank. But now there is a package that does this for you, facilitating our lives, can I hear an Amen for open source? 😂😂😂

The package we will use is react-native-dev-menu. Just follow the instructions there on how to install it. react-native link worked just fine on a fresh react-native init project.

Once we get the dev-menu working let's create the component list view. Now you can create a simple component list inside a route or just use StoryBookUI, the poor man's storybook is a simple component list. I'll demonstrate both approaches.

1- Set up routing

I'll be using react-navigation but you can use any other navigation package you want. Let's set up our StackNavigator and put our Storybook component in a route so we can navigate to it.

Using "createStackNavigator" this is what a simple example looks like.

2- Create StoryBook

Now let's create our simple StoryBook. All it will need is a StackNavigator for you to add the components, a main view to display the list of components you have and also a way to go back to your app view.

Instead of the list you could also use react-navigation's drawer navigator and get a more StoryBook like experience. In this example I'll just create a list.

Here is what my StoryBook component looks like.

Now as you create new usage components all you gotta do is add them to the routes.

3- Add StoryBook to Dev Menu

This becomes really easy thanks to react-native-dev-menu. Just add it where ever you have access to the navigation prop, in this example it will be in the Home component which is my first view inside the main Stack navigator.

That's it. Now you can have fun and write all your components isolated and showcase all your amazing components separately👌.

Pros

Displays components isolated.
Easy access through dev menu.
Always available.
Uses app's HMR(hot module reloader).

Cons

Adds extra code (.usage or .story files).
Manual bridge to extend dev menu.

While adding extra code is a con, that is unavoidable since with Storybook you also need to create .story file.

With Storybook

You can do the same thing with storybook, and instead of writing the Storybook component yourself all you would need to do is put the StorybookUI inside of a route.

You can follow my post on how to set up an automated storybook flow. Once you have Storybook set up, instead of registering the StorybookUIHMRRoot remove the registerComponent line inside the storybook/storybook.js

And just put the StorybookUI in your stack navigator.

To be able to access the StorybookUI you will need to run yarn storybook this will start the storybook server.

The cool thing about using the original Storybook is that you can use react-native-storybook-loader to auto generate your stories inside the storybook folder. You could also write this on your own for our simplified component list by getting the .usage files since it's a very straight forward approach.