To view the Storybook app, we need to use the script we edited in the preceding section. Start by running the storybook script (it would be better to do this in a separate console) and then run the application itself, as follows:

// at one terminal
npm run storybook

// and at another terminal
npm start

The first command produces a bit of output, allowing us to confirm that our script works and that all our stories were found. The following code was slightly edited for clarity:

> npm run storybook

> [email protected] storybook /home/fkereki/JS_BOOK/modernjs/chapter12
> cp App.storybook.js App.js && rnstl && storybook start -p 7007

Generating Dynamic Storybook File List
 
Output file: /home/fkereki/JS_BOOK/modernjs/chapter12/storybook/storyLoader.js
Patterns: ["/home/fkereki/JS_BOOK/modernjs/chapter12/src/**/*.story.js"]
Located 2 files matching pattern '/home/fkereki/JS_BOOK/modernjs/chapter12/src/**/*.story.js' 
Compiled story loader for 2 files:
  /home/fkereki/JS_BOOK/modernjs/chapter12/src/regionsStyledApp/countrySelect.story.js
  /home/fkereki/JS_BOOK/modernjs/chapter12/src/regionsStyledApp/regionsTable.story.js
=> Loading custom .babelrc from project directory.
=> Loading custom addons config.
=> Using default webpack setup based on "Create React App".
Scanning 1424 folders for symlinks in /home/fkereki/JS_BOOK/modernjs/chapter12/node_modules (18ms)

RN Storybook started on => http://localhost:7007/

Scanning folders for symlinks in /home/fkereki/JS_BOOK/modernjs/chapter12/node_modules (27ms)

+----------------------------------------------------------------------+
|                                                                      |
| Running Metro Bundler on port 8081.                                  |
|                                                                      |
| Keep Metro running while developing on any JS projects. Feel free to |
| close this tab and run your own Metro instance if you prefer.        |
|                                                                      |
| https://github.com/facebook/react-native                             |
|                                                                      |
+----------------------------------------------------------------------+

Looking for JS files in
   /home/fkereki/JS_BOOK/modernjs/chapter12/storybook
   /home/fkereki/JS_BOOK/modernjs/chapter12
   /home/fkereki/JS_BOOK/modernjs/chapter12 

Metro Bundler ready.

webpack built bab22529b80fbd1ce576 in 2918ms
Loading dependency graph, done.

We can open the browser and get a view quite similar to the one we got for the web apps and React:

If you select a story in the menu, the app will show it, as follows:

You can also select which story to show in the app itself by pressing the hamburger menu at the top left of the preceding screenshot. The resulting selection menu is shown as follows:

Finally, you can see the actions in the browser. Let's imagine you open the story for the country list with three countries:

If you click on Brazil, the browser will show the fired actions. First, we can see call:getCountries when the getCountries() callback is called, and then click:country when you click on an option:

So, we've seen that adding stories is practically the same as for the web, and you get an extra tool to help in development—you should take this into account.