Set up an automated Storybook flow for React Native and be a better Dev.
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.
Advantages
- 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.
- 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.
- 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.
- 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
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.
also add this pre-hook to the storybook 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.
Testing
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
to create a snap shot of your component all you have to do is add this inside your component's folder.
With this all set up you should have a directory structure like this for all your re-usable components.
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.
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.
