Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ 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
Downloads per week
Readme View on GitHub

Storybook Addon React Native Server

Sync up multiple devices via websockets


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 = {
  // of config
  addons: [
    '@storybook/addon-react-native-server', // 👈 register the addon here
  reactNativeServerOptions: {
    host: "localhost",
    port: 7007,

export default config;


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 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

Maintained by
Special thanks to Netlify and CircleCI