What’s new in Storybook 4.0 React Native
On-device Storybook UI to make you more productive
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:
And now you can use this exported StorybookUI component anywhere in your app as a view.
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:
Or if you use haul:
Be aware that these options have been removed from Storybook server:
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/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
