Create a simple react native library with Storybook and Loki

Nowadays, despite of the big turnover in the IT area, it's hard to find a team which have been the same, with the same structure, for a long time. Since I became a developer, I've been working with many others developers who had have different experiences, mindsets and ways of programming.

I'm not telling this is not a good thing. Each of them have been bringing a lot of benefits and contributions to my career and to the projects which we've been working on. However, this big turnover can be the cause of some problems which could impact directly in the productivity of team.

As a React Native (RN) developer I've been noticing one of these problem every time a new developer join the team: The lack of knowledge about already developed and reusable RN components. Hence, some effort is wasted creating theses components again and the frustration appears when it's discovered that they already exist.

In an attempt to resolve this problem, we used Storybook to create a library. This tool has a server side which is perfect to our scenario providing an eazy way to show all the developed components. Perfect, right? Well, except for in a RN environment, where every time you want to see the component you’ve created you need to run the project in a device or simulator.

The main objective of this article is to explain how to create a simple webpage to describe all the visual characteristics of your RN components using Storybook and Loki, where your workmates could discover them and add their contributions or their own components.

Storybook

In this article I’m not focused on explain how to setup the Storybook in a RN project, but this is very simple and you can follow this well-described documentation. Don’t forget to configure the Storybook Server, it will be very important to take the screenshots through Loki.

As the documentation says, Storybook is an open source tool for developing UI components in an isolation, organized and efficient way. With it, you can write a story for each behavior of your component through the change of its states and props. An example of a story about a custom button and its results are shown below.

Loki

When I was looking for a solution to make my components known, I found a tool for visual regression called Loki. It is totally integrated with Storybook and it does visual comparisons in each story created. This is a great tool if you want to check for any possible visual change through the development of your app.

In this article, we will be using the Loki's capability of take screenshots for each component and save them in the project structure. This way, in each story we can provide different states to the component and make a registry of its visual result. To install and configure Loki in your RN project just run the commands bellow.

yarn add loki --dev
yarn loki init

In order to take the screenshots and use them to create our static page we need do redirect the created images to an assets folder. To do that, it's just necessary to use the reference parameter in the Loki's update command which we can define in package.json.

"scripts": { 
   "loki-update": "loki update --reference=site/assets/img”
}

Also, to create an hierarch and group the screenshots for each component, it's necessary to adjust the Loki configurations through its loki.config.js file like below. In the fileNameFormatter, kind is the component name and story is the title of story itself.

Running the command yarn loki-update we have the following result.

Library Page

It's time to create our static page. I could simply create a pure HTML, CSS and Javascript page and in some cases it is surely enough. However, I keep in mind that my library will increase quickly and I need to manage effortlessly an addition of new components. Furthermore, it's necessary a simple way to access the images through their relative path.

Despite of that, I decided to use a static page generator, but it's up to you to decide the way which you will create your own library page. I choose the Jekyll because it's built in Ruby, so I didn't needed to deal with two node_modules inside of the project.

As I published the project in the github I decided to use the github pages to host the static page. It provides a simple way to host directly from a repository, edit e push the changes. In this case, it's just needed to create the gh-pages branch. In order to push just the files related to the static page I used the git subtree command as shown below.

git subtree push — prefix site/_site origin gh-pages

The result is shown below, but you also can see here.

Conclusion

We have done a simple way to create a static page to show our RN componentes to other team members using Storybook, Loki, Jekyll and Github Pages. However, the way of how the components are added in the static page and publish is not so automated. For future works, the challenge is to automatic take the screenshots through Loki while the component are developed and to automatic publish the static page when a new image is created.

All the code of this example you can see in mathias5r/rn-known-components.