> For the complete documentation index, see [llms.txt](https://react-native-learning-app.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://react-native-learning-app.gitbook.io/docs/storybook.md).

# Storybook

View and develop rich UI components interactively with Storybook.

[Storybook](https://github.com/storybooks/storybook) is an open source tool for developing UI components in isolation. It makes building stunning UIs organised and efficient. This amazing feature is available in this UI theme.

### To view and develop UI components with Storybook:

* Make sure you have installed and setup the project. Follow the [installation guide](https://react-native-learning-app.gitbook.io/docs/getting-started) if you haven't done so yet.
* Make sure the React Native packager is running -- `yarn start`
* Open `src/App.js`

Update the `storybook` state

```
state = {
  fontLoaded: false,
  storybook: true //not `false`
}
```

Start the Storybook server

```
yarn storybook
```

{% hint style="info" %}
The above command will compile all the [stories](https://storybook.js.org/docs/basics/writing-stories/) for presentation in the app. Stories are located in the `src/app/stories` directory
{% endhint %}

Open the app in your simulator or physical device. You will now be able to develop your UI components interactively,

### To view the app in the normal mode (i.e without Storybook):

Update the `storybook` state in `src/App.js`

```
state = {
  fontLoaded: false,
  storybook: false //not `true`
}
```

{% hint style="info" %}
You can stop the storybook server at this point with`Ctrl+C`
{% endhint %}