On-device Storybook UI to make you more productive

Gytis Vinclovas
Oct 29, 2018 · 5 min read

React Native is the second most popular framework for Storybook. It helps thousands of mobile developers deliver UI components faster. For Storybook 4.0 we listened to their feedback and feature requests to ship a brand new React Native experience. Here are the main benefits:

  • 🎛 Mobile Storybook UI: The React Native Storybook UI is served by default on-device (no starting a server).
  • ⚡️ Faster setup and config: Setting up Storybook requires less steps because you no longer have to run a separate server instance.
  • 👨‍💻 Ship mobile UI library with Storybook: Use Storybook in your app to allow other people to play with your components. If you work on a mobile UI library you can create a demo app to allow your team to interact with it.

Say hello to the new mobile Storybook UI

Storybook 4.0 is coming with an overhauled React Native UI and countless quality of life improvements. It includes a brand new on-device UI that was built from scratch.

This means you can spin up the full Storybook experience faster and without using a browser or running a server at all.

  • 🚩 New navigation: The nav bar now has three buttons for Navigator, Preview, Addons. It’s anchored to the bottom of the view and dismissible.
  • 👆 Swipe-friendly: You can swipe on the bar to select different panels.
  • 🖼️ Instant preview: Clicking on either navigator or addons minimizes the preview while maintaining aspect ratio, so you can see the changes in stories or your knobs! Tap the minimized preview to maximize it.
  • 🗜Device addons: “Device addons” port addon functionality to the new mobile UI

On-device UI enabled by default

On-device Storybook is the future of Storybook React Native. It is enabled by default. You can disable it by passing onDeviceUI: false option to getStorybookUI() call in your Storybook entry. If you have feedback on why you disabled it, please tell us via chat or GitHub so we can improve the experience for you.

Storybook server optional

Previously you needed to run a server to view React Native stories. No more! With the on-device UI, the server now optional (and somewhat unnecessary).

It was always possible to skip the server but from now on on device UI functionality is the main one. If you do not start the server, Storybook will not throw errors and will work the same way as if you used skipWebsockets option.

Removing the packager

In Storybook 4.0 we are not starting the packager when running the server. We had to implement this change since in React Native version 0.57 Metro bundler was updated.

Metro changed the parameters necessary to start Storybook packager which broke Storybook. Maintaining the different possibilities for bundlers is quite difficult, so it’s better if setting up the bundler is controlled by the user.

From now on we are asking users to do one of the two things:

Option #1: Stop using separate packager for the Storybook and integrate it inside your app.

We recommend this solution since it simplifies Storybook usage. This is where Storybook for React Native is headed. StorybookUI is just a simple View component, so you can create a tab in your bottom menu, include it in your admin panel or you could simply replace your entry view to StorybookUI if you are running in development environment.

This is how your storybook/index.js entry file could look like:

storybook/index.js

And now you can use this exported StorybookUI component anywhere in your app as a view.

somewhere inside your app

Note: Be sure to remove the code from your bundle in your production build to not increase your app size.

We recommend you integrate Storybook inside your App

Option #2: Add additional command to keep using old functionality.

Alternatively if you want to keep old functionality you just have to update your script in package.json "storybook": "storybook start -p 7007" to:

package.json

Or if you use haul:

package.json

Be aware that these options have been removed from Storybook server:

Removed options from storybook start command

Device Addons

One of the biggest benefits Storybook has is support for addons. In 4.0 you can display them inside the app. Adding them is simple.

Just before calling getStorybookUI you import the addons themselves.

storybook/index.js

storybook/index.js

storybook/rn-addons.js

storybook/rn-addons.js

And now you will see addons displayed in the addons tab.

Help build more device addons for React Native

The biggest drawback of device addons is that only few of them exist right now. There’s an idea how to support more addons without creating separate ones but the team needs your help to make that a reality.

If you want to see React Native Storybook moving forward be sure to visit Storybook Slack or Discord channel.

The current addon compatibility table:

Steps forward

Storybook React Native has an exciting roadmap. The maintainers could use your help and would be thrilled to assist you in getting started. These are some of the future projects:

  • Support WebView addons: It should be possible to support addons rendered in WebView. That way we could reuse addons both in web and in React Native.
  • Create more on device addons: While we still don’t have WebView addon we can write addons that work on React Native. Currently only three addons are created: knobs, notes, backgrounds. There are many more addons that could work on device. They just need migration. You can find more information about addon creation on Github.
  • Story view as a tree: It would be a lot easier to navigate story list if it had same collapsing support as it does on the web.
  • Easily select initial story: We could use async storage to remember last selected story. It would help users who cannot use Hot Reload to have similiar functionality just by using Live Reload.
  • Split Storybook Server and Storybook UI: Storybook server has a lot of dependencies, on babel and webpack while onDeviceUI only depends on other storybook dependencies. Splitting it would help for users who don’t really need storybook server.

Have any suggestions or priorities? Chat with us or create an issue.


Get involved

If you you want to support Storybook, please hit the 👏 button to help others find it (multiple times if you really liked it). Say hi on Twitter, Github, Youtube, or in the comments below.

More exciting announcements are coming. Stay up to date with Storybook news by signing up for the official mailing list.

Do you use Storybook at work? Financially sponsor Storybook on Open Collective to continue development and support contributors!

–With ❤️ from the Storybook team

Storybook

The UI development environment you'll ♥️ to use.

Thanks to Norbert de Langen, Michael Shilman, and Dominic Nguyen

Gytis Vinclovas

Written by

Software Engineer at Wix.

Storybook

Storybook

The UI development environment you'll ♥️ to use.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade