Awesome
Storybook Native
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --> <!-- ALL-CONTRIBUTORS-BADGE:END -->Storybook Native is an extension of the normal web storybook that uses appetize.io to render your mobile application in an emulator that can be interacted with from your browser. It allows you to use many of the features that are available in the web storybook, such as addons, controls, etc.
It also supports using Storybook as a local development environment to develop Android and iOS apps/components, without the need for using appetize.io.
Installation
Before using this, ensure that you have installed NodeJS
If you want to use this module to render an emulator as a React component, follow the instructions here. This is recommended if you are already familiar with React and Storybook, or if you want to use features such as addons and controls.
If you want to use this module as a build tool that generates stories from metadata, follow the instructions here. This package supports limited variations of controls generation. This is recommended if you do not want to write any React code, and you will only have to write some basic JavaScript code. If you use this package, you will not have to install any extra Storybook dependencies, as they will already be included.
Configuring your mobile application
Before using this module, your mobile application must be set up to support switching between stories. There are detailed instructions on this here
Uploading your mobile application
After you have modified your application to support launch parameters or query parameters, you must upload your application to appetize.io. After the upload, you will receive a public key that can be used with Storybook Native to view and interact with your application directly from Storybook.
Setting up Storybook
Once your application is uploaded to appetize.io, you can begin setting up Storybook Native. The details for this can be found here
Examples
Examples of how to use this module as both a build tool and as a component library can be found in the examples folder. The app
folder inside each example contains the source code of the application the example is for.
- Android storybook with controls
- Flutter storybook with controls
- Cross platform storybook
- iOS storybook with deep linking
More example static storybooks can be found here
Local app development
Details on how to test changes that you make to your mobile application to support features such as controls can be found here
Migrating from version 1 to version 2
A full migration guide for breaking changes can be found here
Development in this repo
- Clone this repo
- Run yarn to install dependencies
yarn build && cd examples/flutter && yarn start
- In a new tab, run
yarn build
whenever changes are made to any of the packages inside of thepackages/
folder
Contributors ✨
Thanks goes to these wonderful people (emoji key):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tr> <td align="center"><a href="http://shilman.net/"><img src="https://avatars2.githubusercontent.com/u/488689?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Shilman</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=shilman" title="Documentation">📖</a></td> <td align="center"><a href="https://github.com/amalik2"><img src="https://avatars1.githubusercontent.com/u/25858348?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Adil Malik</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=amalik2" title="Code">💻</a> <a href="https://github.com/storybookjs/native/commits?author=amalik2" title="Documentation">📖</a> <a href="#example-amalik2" title="Examples">💡</a></td> <td align="center"><a href="https://github.com/vasikarla"><img src="https://avatars0.githubusercontent.com/u/1945958?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Raj Vasikarla</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=vasikarla" title="Documentation">📖</a> <a href="https://github.com/storybookjs/native/commits?author=vasikarla" title="Code">💻</a></td> <td align="center"><a href="https://github.com/apps/imgbot"><img src="https://avatars.githubusercontent.com/in/4706?v=4?s=100" width="100px;" alt=""/><br /><sub><b>imgbot[bot]</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=imgbot[bot]" title="Code">💻</a></td> <td align="center"><a href="https://github.com/brocollie08"><img src="https://avatars.githubusercontent.com/u/13474011?v=4?s=100" width="100px;" alt=""/><br /><sub><b>brocollie08</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=brocollie08" title="Documentation">📖</a> <a href="https://github.com/storybookjs/native/commits?author=brocollie08" title="Code">💻</a></td> <td align="center"><a href="https://github.com/hborawski"><img src="https://avatars.githubusercontent.com/u/1325154?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Harris Borawski</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=hborawski" title="Code">💻</a></td> <td align="center"><a href="https://joshhalvorson.dev/"><img src="https://avatars.githubusercontent.com/u/22044657?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Josh Halvorson</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=JoshHalvorson" title="Code">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/daisyduong-acc"><img src="https://avatars.githubusercontent.com/u/85589819?v=4?s=100" width="100px;" alt=""/><br /><sub><b>daisyduong-acc</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=daisyduong-acc" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ahna92"><img src="https://avatars.githubusercontent.com/u/22000308?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Ahmed na</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=ahna92" title="Documentation">📖</a> <a href="https://github.com/storybookjs/native/commits?author=ahna92" title="Code">💻</a> <a href="#example-ahna92" title="Examples">💡</a></td> <td align="center"><a href="https://osquitoofthenorth.github.io/"><img src="https://avatars.githubusercontent.com/u/5479429?v=4?s=100" width="100px;" alt=""/><br /><sub><b>osquitoOfTheNorth</b></sub></a><br /><a href="https://github.com/storybookjs/native/commits?author=osquitoOfTheNorth" title="Code">💻</a></td> </tr> </table> <!-- markdownlint-restore --> <!-- prettier-ignore-end --> <!-- ALL-CONTRIBUTORS-LIST:END -->This project follows the all-contributors specification. Contributions of any kind welcome!