mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 16:11:33 +08:00
126 lines
4.0 KiB
Markdown
126 lines
4.0 KiB
Markdown
# Storybook for React Native
|
|
|
|
With Storybook for React Native you can design and develop individual React Native components without running your app.
|
|
|
|
|
|
|
|
For more information visit: [storybook.js.org](https://storybook.js.org)
|
|
|
|
## Getting Started
|
|
|
|
The `storybook` CLI tool can be used to add Storybook to your React Native app. Install the `storybook` tool if necessary and run it from your project directory with these commands:
|
|
|
|
```shell
|
|
npm -g i @storybook/cli
|
|
storybook init
|
|
```
|
|
|
|
The next thing you need to do is make Storybook UI visible in your app.
|
|
|
|
### CRNA, React Native vanilla
|
|
|
|
The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
|
|
|
|
```js
|
|
export default from './storybook';
|
|
```
|
|
|
|
This will get you up and running quickly, but then you lose your app!
|
|
There are multiple options here. for example, you can export conditionally:
|
|
|
|
```js
|
|
import StorybookUI from './storybook';
|
|
|
|
import App from './app';
|
|
|
|
module.exports = __DEV__ ? StorybookUI : App;
|
|
```
|
|
|
|
### React Native Navigation, other complex use cases
|
|
|
|
`StorybookUI` is simply a RN `View` component that can be embedded anywhere in your RN application, e.g. on a tab or within an admin screen.
|
|
|
|
|
|
## Start Storybook server (optional)
|
|
If you want to control storybook from browser/VS Code/websockets you need to start the server.
|
|
After initial setup start the storybook server with the storybook npm script.
|
|
|
|
```shell
|
|
npm run storybook
|
|
```
|
|
|
|
Now, you can open <http://localhost:7007> to view your storybook menus in the browser.
|
|
|
|
## Old standalone behaviour
|
|
Since storybook version v4.0 packager is removed from storybook.
|
|
The suggested storybook usage is to include it inside your app.
|
|
If you want to keep the old behaviour, you have to start the packager yourself with a different project root.
|
|
|
|
```
|
|
npm run storybook start -p 7007 | react-native start --projectRoot storybook
|
|
```
|
|
|
|
## Start App
|
|
|
|
To see your Storybook stories on the device, you should start your mobile app for the `<platform>` of your choice (typically `ios` or `android`). (Note that due to an implementation detail, your stories will only show up in the left pane of your browser window after your device has connected to this storybook server.)
|
|
|
|
For CRNA apps:
|
|
|
|
npm run <platform>
|
|
|
|
For RN apps:
|
|
|
|
react-native run-<platform>
|
|
|
|
Once your app is started, changing the selected story in web browser will update the story displayed within your mobile app.
|
|
|
|
If you are using Android and you get the following error after running the app: `'websocket: connection error', 'Failed to connect to localhost/127.0.0.1:7007'`, you have to forward the port 7007 on your device/emulator to port 7007 on your local machine with the following command:
|
|
`adb reverse tcp:7007 tcp:7007`
|
|
|
|
## Start Command Parameters
|
|
|
|
The following parameters can be passed to the start command:
|
|
|
|
```
|
|
-h, --host <host>
|
|
host to listen on
|
|
-p, --port <port>
|
|
port to listen on
|
|
-s, --secured
|
|
whether server is running on https
|
|
-c, --config-dir [dir-name]
|
|
storybook config directory
|
|
-e, --environment [environment]
|
|
DEVELOPMENT/PRODUCTION environment for webpack
|
|
-i, --manual-id
|
|
allow multiple users to work with same storybook
|
|
--smoke-test
|
|
Exit after successful start
|
|
```
|
|
|
|
## getStorybookUI Options
|
|
|
|
You can pass these parameters to getStorybookUI call in your storybook entry point:
|
|
|
|
```
|
|
{
|
|
onDeviceUI: Boolean (false)
|
|
-- display stories list on the device
|
|
disableWebsockets: Boolean (false)
|
|
-- allows to display stories without running storybook server. Should be used with onDeviceUI
|
|
secured: Boolean (false)
|
|
-- use wss/https instead of ws/http
|
|
host: String (NativeModules.SourceCode.scriptURL)
|
|
-- host to use
|
|
port: Number (7007)
|
|
-- port to use
|
|
query: String ("")
|
|
-- additional query string to pass to websockets
|
|
}
|
|
```
|
|
|
|
|
|
## Learn More
|
|
|
|
Check the `docs` directory in this repo for more advanced setup guides and other info.
|