Using Storybook in React Native
Tags: reactnative, javascript, typescript, storybook
Published: 2022-01-12 21:30:02


Hi folks 👋

Im this guide we will setup a new **react native** application using **storybook**.

---
## Context Overview

In the last few days, I felt the need to **create a ui library** for react native, shared in multiple projects to maintain a product design standard.

Looking for solutions and the best way to do that Ive found **storybook** as great solution for documentation.

A life savior for new members in team and a nice gift for ui/ux team.  🥂✨

---
## Informations 

This guide assume you are using a React Native CLI project.
_Not guarantee that guide work in Expo projects_

---


<h2> Step 1: Install Storybook ✨ </h2>

Open your project folder and run:

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

When it prompts you whether to install [@storybook/react-native-server](https://www.npmjs.com/package/@storybook/react-native-server), **hit Y** to install.

After a little bit you will see something like this:
![Post install Storybook/cli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bq2d7ducp5tn8wsje9o.png)

Storybook Server runs outside of your app screen. You can develop UI, switching between components and manipulating knobs in isolation without worrying about app specific dependencies and requirements.

### Step 2: Change Storybook config

After step 1, open your code editor and we will do the final steps in rendering storybook out on the screen.

Open  `storybook/index.js` and change to:


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

import './rn-addons';

// enables knobs for all stories
addDecorator(withKnobs);

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

// Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});

export default StorybookUIRoot;
```

After that go to your `index.js` and change to below code.

To switch between viewing the app with StoryBook or without just change the `useStorybook` variable to some boolean.

``` javascript
import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import StoryBook from './storybook';
import {name as appName} from './app.json';

const useStorybook = true;

const AppRegistred = () => (useStorybook ? <StoryBook /> : <App />);

AppRegistry.registerComponent(appName, () => AppRegistred);
``` 
---


<table>
<thead>
<tr>
<th>With useStorybook True</th>
<th>With useStorybook False</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhe9fvc3pdvw3w2pe7vj.png" alt="Alt Text" loading="lazy" width="880" height="1809"></td>
<td><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oo9qog0kw9codyy3s4h9.png" alt="Alt Text" loading="lazy" width="828" height="1792"></td>
</tr>
</tbody>
</table>

---
You can also run Storybook in web browser, just running:

`yarn storybook`

![Storybook react native in web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr57k5eryilbe48wiwbx.png)

## Success!

Hope this helps :)