Storybook React Native Integration: Boosting App Development and Documentation

When we are developing a good product on any digital platform, following certain features and documentation is crucial to improve our app productivity. In this article, We will explain the basic concepts of Storybook and how to implement it in a React Native app, highlighting the usefulness of Storybook React Native integration for proper documentation.

What is StoryBook?

Basically storybook is a UI design and development tool. It makes the developer’s life easy through faster development and isolating components. In Storybook we have to work on one component at a time. Storybook does not contain our app or product business logic like login, Navigation, etc because the storybook focuses on UI development and testing. 

We have to make a separate app for the storybook instead of the original app because it does not contain the navigation and business logic of our product. Storybook helps us to create better documentation for apps. We can test the app with various design-related scenarios and fix the bugs. When multiple people are working on the same app at that time storybook is a more useful feature.

What is a Story?

The story captures the component’s rendered state of UI development. We are writing stories based on component-driven development. The story contains multiple substories as per the scenarios. The story file format must be from component name.stories.js | ts | jsx | tsx | mdx. One thing we have to keep in mind is that the storybook file is only for development, not for production or release.

What is an AddOns?

The basic Storybook contains the core features. But Addons gives extra features with the storybook’s core features. Which can be very helpful for development and testing. Addons have APIs so by using them we can customize and configure storybooks in a more productive way. Basic examples of Addons are Knobs and Actions. We will explain both in this article later.

Installation

We will use the @storybook/react-native library package to use the storybook in react native. Using this library we can implement a storybook in 2 ways, so first is Using cli, and the second is manual setup. So we will go with the cli method. Hit the below command within the root of your React native app.

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

When you will hit the command you will be asked to install a storybook server, but we will not install it as of now and let it continue. So cli will do a little template creation. So it creates a storybook folder and it contains basic examples and structure with configuration. Screenshots are attached below.

Now in the entry point of our application like App.js or index.js we have to set the below line to configure the storybook in react native.

export {default} from "./storybook";

The Storybook folder has an index.js file that contains the configuration related to all stories as given below.

import { AppRegistry } from 'react-native';

import { getStorybookUI, configure, addDecorator } from '@storybook/react-native';
import { withKnobs } from '@storybook/addon-knobs';

import './rn-addons';

addDecorator(withKnobs);

configure(() => {
 require('./stories');
}, module);

const StorybookUIRoot = getStorybookUI({});

AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);

export default StorybookUIRoot;

getStorybookUI method will render the Ui of the storybook in Android and iOS apps. We can also do some configuration in that also. Basically, it contains UI with 3 default tabs Navigator, Preview, And Addons. The screenshot is attached below.

What is Decorator?

The decorator is used to wrap a story in extra rendering functionality. We can reuse the decorator for multiple stories and substories. We can pass mock data in the decorator and access data in the stories for better development and testing. We will see the use of a decorator when we create a story.

What are Knobs?

Knobs are a very useful resource because using them developers can play with the story interactively without any kind of changes in code and test the story in dynamic ways. If we use cli method to install the storybook knobs will be installed automatically.

Make a New Story Using the Above Concepts

In the stories folder, we have to create one folder named RNText. In that, we have to create 2 files one for the story and one for the UI named RNText.stories.js and index.js respectively. You can add the below data in index.js like the given below.

import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';

export default function RNText({ title }) {
   return (
       <Text style={{
           color: "black",
           fontSize: 16
       }}>{title}</Text>
   )
}

RNText.defaultProps = {
   title: 'React Native',
};

RNText.propTypes = {
   title: PropTypes.string,
};

Now we will write a story in the RNText.stories.js file. To access the story in Storybook we have to import and add the file in the storybook folder’s index.js file where other stories are imported as given below.

import './Button/Button.stories';
import './Welcome/Welcome.stories';
import './RNText/RNText.stories';

Now we will define a story name like “RNText” using storiesOf method like given below.

import React from 'react';
import { storiesOf } from "@storybook/react-native";

storiesOf("RNText", module)

Now we will add a decorator because we have to wrap our story in one component like given below.

import React from 'react';
import { storiesOf } from "@storybook/react-native";
import CenterView from "../CenterView";

storiesOf("RNText", module)

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

CenterView.js will look like this as given below.

import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import style from './style';

export default function CenterView({ children }) {
 return <View style={{
   flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   backgroundColor: '#F5FCFF',
 }}>{children}</View>;
}


CenterView.defaultProps = {
 children: null,
};

CenterView.propTypes = {
 children: PropTypes.node,
};

Now we will add our substory named “technology” and we have to import the RNText component from index.js which we already defined previously.

import React from 'react';
import { text } from "@storybook/addon-knobs";
import { storiesOf } from "@storybook/react-native";
import RNText from ".";
import CenterView from "../CenterView";

storiesOf("RNText", module)
   .addDecorator((getStory) => (<CenterView>{getStory()}</CenterView>))
   .add('technology', () => (
       <RNText
           title={text("Title Text", "Google")}
       />
   ));

Here we have to pass the title prop to RNText and we will use knobs here. So we have imported text knobs from addon-knobs lib. It takes the key and default value for that prop title.

So on screen when the RNText component will render we can see Google value displayed. Using knobs we can change the value and see the new updated value on the screen given below in screenshots.

There are different types of Knob we can use in storybook

• Text
• Number
• Boolean
• Color 
• Date
• Array
• Object
• Files
• Button
• Select

Configure Storybook Server

Now we will install lib for the storybook server. Using a server we can test the storybook component multiple at a time. So we can compare and test on the device at the same time. you can install lib by the below command.

yarn add @storybook/react-native-server

We have to add one script in the package.json file to start a server like

"storybook": "start-storybook"

To start a server we have to hit a command yarn storybook and your server will be started on the browser. After starting a server you have to reload your app once so your application will connect to the server. You can find all the stories in the server which you see in the NAVIGATOR tab on the mobile app screen.

To test an app on a real device you can bind your server with your IP address and the same IP address you have to set as host in the getStorybookUI method given below.

"storybook": "start-storybook -p 7008 -h 192.168.1.3"

const StorybookUIRoot = getStorybookUI({
 onDeviceUI: false,
 port: 7008,
 host: '192.168.1.3'
});

After restarting the server you can test your app using a storybook on multiple devices at the same time.

You can find a short demonstration of the storybook server with a mobile app in given below link: Here