Published in


Set up an automated Storybook flow for React Native and be a better Dev.

Building blocks

Yes building blocks, Developing in React is just like building blocks, when developing in React we strive for "componetization" in order to re-use as many components as we can, However, as the number of developers on a project increases you tend to loose control over the componetization process. Storybook can force best practices on your team. At @EntriaTech we use Storybook for fast component development and to also guarantee re-usability in our React Native Components.


  1. Iterate fast, very fast, As your app grows reloading stuff can take ages and hot reloading doesn't always work so well with React Native. Storybook can help you develop in React Native just like in web, reloading fast which helps you make changes more quickly.
  2. Functional components, when you create components with the SRP (Single Responsibility Principle) you will always have a component simple enough to be a Functional component, this is a great mindset to get into. Once I asked myself how small can a component get and I'd say as small as possible. The Idea behind writing small components is to see the reusability of it, reusability is being repeated a lot, the reason for it is because as you mature in development you need to thrive to code less and think more, at least that's how I think. Extending a little bit more on making small components read this great article on wrapping your components with these repeated styles, I agree completely with this mindset and also believe we can create small components of everything. To extend your knowledge a little bit more on making small components read this great article on wrapping your components with these repeated styles, I agree completely with this mindset and also believe we can create small components of everything.
  3. Living Documentation of your components, you can expand this a little bit and also use this as sort of a design guide, you can include here all fonts and colors available in your app, again this would make it easier on the beginner dev.
  4. Snapshots, you can create snapshots of your components and also unit test them as you like.


Let's set up a Fast and Automated Storybook environment in your existing project.

Install storybook

install storybook/cli globally then run getstorybook in the terminal while inside the root of your App directory.

this will create a directory called storybook in the root with the following structure

Directory structure with Storybook

Since inside the stories dir in index.js you are exporting all the components autogenerated by storybook there and importing them in the storybook.js file as you can see below.


While this works, there is an awesome way to automate this process and facilitate our life.

Automate story loading.

You can install react-native-storybook-loader

and inside your package.json you can configure it as follows.

Config inside package.json

also add this pre-hook to the storybook script.

prestorybook script

Now when you start storybook, it will look for all your files with name.story.js and add it automatically to a file called storyLoader.js inside your storybook dir, this way it automatically loads it for you which is awesome.

storyLoader.js generated by RNSL


How about some testing ?!?

Let's add jest snapshots

You can easily integrate jest snapshots by installing this add on


then change your test script to look like this

test script

to create a snap shot of your component all you have to do is add this inside your component's folder.

snapshot test

With this all set up you should have a directory structure like this for all your re-usable components.

Component folder structure


Finally with just that you and your team should be able to scale and pretty cool common component folder which should all be tested and guaranteed reusability.


Here is the repo for this.

Thanks for the Read!, soon I shall post something about adding flow and prop-types to your reusable components in order to guarantee type safety = ).

shoutout to Jim Medlock, Jason Boxman for the review.




Join our friendly community's mission to create a collaboration & opportunity hub for tech-learners! Developers | Designers | Data Scientists

Recommended from Medium

I just need a better javascript engine

JS-PostIt@01 —  ES5 vs ES6

React — create simple animated expander

React to Angular — a beginner’s perspective

Why you should use functional composition for your full applications

A deep analysis of functions in JavaScript.

JavaScript Functional Google Translate API to translate JSON values.

The project with GatsbyJS-29

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrei Calazans

Andrei Calazans

Software Engineer - Head Of Vetting At G2i

More from Medium

Difference Between React and React Native — Geekstrick

ReactJS VS React Native: Key Differences

A Quick Overview of Learning React

What’s the component of React.JS/react-native?