New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,099
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
addon react native server
Sync up multiple devices via websockets
npm install @storybook/addon-react-native-server
Last updated about 1 month ago
215
Downloads per week
Readme View on GitHub

Storybook Addon React Native Server

Sync up multiple devices via websockets

Installation

Note that this package is intended for storybook 7 and newer.

First, install the package.

npm install --save-dev @storybook/addon-react-native-server

Then, register it as an addon in .storybook/main.js.

// .storybook/main.ts

const config = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    '@storybook/addon-react-native-server', // 👈 register the addon here
  ],
  reactNativeServerOptions: {
    host: "localhost",
    port: 7007,
  },
};

export default config;

Usage

Once you have the addon installed it automatically starts a websocket server to listen to events from your mobile devices. You must have reactNativeServerOptions defined and be in development mode for the server to start.

Once the server is running you can reload your mobile device to make sure it connects to the websocket server.

You can also use @storybook/addon-react-native-web to make sure the web version of your stories renders in the browser.

You can use the deviceOnly parameter to avoid rendering some or all stories depending on if you add the parameter at the story or global level.

parameters: { deviceOnly: true },

Development

Development scripts

  • npm run start runs bundling in watch mode and starts Storybook
  • npm run build build and package your addon code

Code for the server is located in src/preset.ts.

Join the community
6,514 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI