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

Andrei Calazans
Oct 22, 2017 · 4 min read
Image for post
Image for post
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.

https://storybook.js.org/

Advantages

  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 https://medium.com/@fasterpancakes/react-native-row-how-to-wrap-components-and-avoid-stylesheets-99406e068357 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.

Installing

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

Image for post
Image for post
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.

Image for post
Image for post
storybook.js

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

Image for post
Image for post

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

Image for post
Image for post
Config inside package.json

also add this pre-hook to the storybook script.

Image for post
Image for post
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.

Image for post
Image for post
storyLoader.js generated by RNSL

Testing

How about some testing ?!?

Let's add jest snapshots

You can easily integrate jest snapshots by installing this add on

Image for post
Image for post
addon

then change your test script to look like this

Image for post
Image for post
test script

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

Image for post
Image for post
snapshot test

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

Image for post
Image for post
Component folder structure

Conclusion

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.

Image for post
Image for post
YAY!

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.

Chingu

Join our friendly community's mission to create a…

Thanks to Jim Medlock

Andrei Calazans

Written by

Chingu

Chingu

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

Andrei Calazans

Written by

Chingu

Chingu

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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