Storybook for Mobile Applications
I’m excited to announce the official release of Storybook Native, a new tool for showcasing mobile applications and components.
A few months ago, Raj Vasikarla authored a blog post about how mobile applications hosted on appetize.io could be integrated with Storybook. Now, Storybook Native is officially available as an extension to the normal web Storybook.
Storybook Native is designed to give a streamlined experience to people who aren’t familiar with Storybook and React programming. Primarily, it is meant to be used as a build tool.
As a user, you write a small amount of basic JavaScript code where you describe the state of your mobile application or components that you want to display. That code runs as a Node.js script, allowing Storybook Native to automatically generate story files.
After story files are generated, you run a terminal command to open up Storybook in the browser. No need to write React code or install any other dependencies to get started with Storybook.
A major improvement that Storybook Native makes over the original examples in Raj’s blog post is the possibility of switching between stories without restarting appetize.io sessions. If your mobile application supports deep linking, you can switch between stories instantly, just like in the web Storybook! Find more information on how to update an existing mobile applications with deep linking in the documentation.
Example without deep linking:
Example with deep linking:
With deep linking, we can create an overall user experience that is very similar to what’s possible with the web Storybook. If you are using knobs in your stories without deep linking, then every time a knob value changes, your appetize.io session must be restarted. With deep linking, your application will instantly refresh to reflect the new knob values.
Additionally, Storybook Native has built-in support for many of the interactions that appetize.io allows you to have with the device emulator. This includes rotating the emulator to be in landscape mode, capturing screenshots and saving them to your hard drive, as well as switching the device that is being emulated.
For users who are already familiar with JavaScript and want more flexibility with how stories are rendered, you also have the option of using Storybook Native as a lightweight React component instead of a build tool. With this approach, you have lots of flexibility with determining what parameters are sent to your mobile application. This means that you can take full advantage of features such as controls/knobs, add-ons, and almost anything else that is possible with the web storybook.
Get Started
To get started with Native Storybook, check out the setup instructions here.
Examples
So far, we have only scratched the surface of what’s possible with Storybook Native. There is no official roadmap for planned features yet, but we would love to hear from you on the usage or any features you would like to see. Feel free to drop a comment or contribute back in to the repository!
Storybook Native was developed at Intuit by Adil Malik and Raj Vasikarla. A huge thanks goes out to everyone who has contributed to it already, and also to Michael Shilman for all of his help with this. Shoutout to Adam Dierkens for creating the proof of concept using Storybook and appetize.io.
