diff --git a/app/react-native-server/readme.md b/app/react-native-server/readme.md index f21620e4c41..60cfc41dace 100644 --- a/app/react-native-server/readme.md +++ b/app/react-native-server/readme.md @@ -1,137 +1,13 @@ -# Storybook for React Native - -With Storybook for React Native you can design and develop individual React Native components without running your app. - -![Storybook Screenshot](docs/assets/readme/screenshot.png) +# Storybook Server for React Native +Additional package for @storybook/react-native to support server. 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: +## Usage +After setting up Storybook for React Native install this package. ```shell -cd my-rn-app -npx -p @storybook/cli sb init +npm install --save-dev @storybook/react-native-server ``` -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 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 `` 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 - -For RN apps: - - react-native run- - -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 to listen on --p, --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 (true) - -- display navigator and addons 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 - isUIHidden: Boolean (false) - -- should the ui be closed initialy. - tabOpen: Number (0) - -- which tab should be open. -1 Navigator, 0 Preview, 1 Addons - initialSelection: Object (null) - -- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }` - shouldPersistSelection: Boolean (true) - -- initialize storybook with the last selected story. - shouldDisableKeyboardAvoidingView: Boolean (false) - -- Disable KeyboardAvoidingView wrapping Storybook's view - keyboardAvoidingViewVerticalOffset: Number (0) - -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view -} -``` - -## Learn More - -Check the `docs` directory in this repo for more advanced setup guides and other info. +Then run `npx storybook start`