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.

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

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.

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

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

Testing

How about some testing ?!?

Let's add jest snapshots

You can easily integrate jest snapshots by installing this add on

addon

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

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.

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.