Developing Component Library with Storybook in React Native

Published in

Simform Engineering

5 min readDec 22, 2021

Creating component library can be a delicate task, it should be interactive, it should have right development environment and strategy. In this article we will look into CDD and Storybook to achieve library development.

Component-Driven-Development

Component Driven Development or CDD is process of structuring the software into components, where each component is well developed and tested.

It starts with bottom-up approach, breaking down in small set of UI components such way it can be more reusable, testable and maintainable.

It helps teams or organisation to collaborate and develop more efficiently while maintaining high standard coding. There are several tools which can help with CDD workflow. We will be looking into Storybook to develop such library.

StoryBook

Storybook is open-source development tool for building UI components.
It allows to build and showcase components interactively in isolated development environment. Storybook supports many popular frameworks such as React, Vue, Angular, React Native and more.

Storybook gives right environment to develop components. It gives ability to showcase and manipulate components in very testable manner.

We will look further into storybook for react-native platform. To add more, very popular framework native-base uses storybook for library development.

Setup storybook configuration

Setting up storybook is pretty straight forward. We can start with this command. This will setup all the required packages and basic template to begin with.

npx -p @storybook/cli sb init — type react_native

index.js     - Entry point of storybook to configure
addons.js    - To add various addons for storybook
rn-addons.js - Addons control from the on-device ui 
stories      - All component stories at single place

Here we are configuring storybook to display all stories from ./stories folder.

All left is to set the index.js entrypoint of our app to storybook.

export {default} from ‘./storybook’;

While setting up, it will ask for adding @storybook/react-native-server. It is optional to add, browser/server UI which runs alongside the on-device UI.

We can run storybook server ui using this command

npm start-storybook -p 7007

Both will do the same job, Navigating between different stories, manipulating components by knobs and action. On-device UI is accessible from particular device we’re running And Server UI is accessible from browser window.

On-device UI (left) — Server/browser UI (right)

StoriesOF Api

By using storiesOfapi we can add component stories. It considered to be legacy api and will be replaced by CSF format, but as of current Storybook version 5.3 in react native, It is primary way to create stories.

It takes two arguments, First argument where title of story is defined. By chaining .add it will nest the states of particular story.

There are various add-ons to make the story more interactive and to test various edge cases. We will look few of them below.

Decorators

Decorator provides a way to wrap story with some code which can be global or reusable common code. It can be set globally or story/component level.

We have setup addDecorator(withKnobs); in root index.js which globally activates knobs for all stories.

This decorator at story level will wrap story with extra view and display component in center.

.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)

Knobs

Knobs add-on basically setup dynamic props/fields of component which can be manipulated to test various component states.

Inside index.js of storybook, addDecorator(withKnobs) is already added. Which globally enables knobs for all the stories.

Here text and bool are the properties of knobs, We have make label and disabled prop interactive, It can be manipulated by knobs.

Actions

Actions add-on used for getting callback events from component stories.

Here we’ve bind action property to onPress event, Every time button will be pressed it will log the event and display in on-device or server ui.

Now, We are done developing stories and components. We will test the library into another project.

Publishing Library

We need to tweak package.json a little. Change the Version number and name accordingly. Add “main”: "src/index.js" it will serve as entry point of components. Move react packages from dependencies to peerDependencies

Note: By default, Type intellisense will not work in project we will use the library. It will require some additional configuration to expose props. Make index.d.ts and manually expose all types.

Before publishing, We can test library locally in other project.

npm pack command will generate storybookexample-1.0.0.tgz file. We can use this file as dependency in package.json in target project and can import the components.

storybookexample:"file:/path:storybookexample-1.0.0.tgz"

For the publishing, need to make NPM account. Then In terminal, login into npm account with npm login , After setting up all the details npm publishwill publish the library.

Conclusion

Storybook for React Native is great tool for developing library. However compared to the react version of Storybook, features and usability feels very limiting and have much to improve on.

Checkout the project used in article here:

https://github.com/gururaj-simformsolutions/StorybookExample