5

I am running React Native Storybook which runs Storybook in the Native emulator.

In addition to the how React Native Storybook works currently, I would also like to build an instance of it for web as a reference companion to our app.

I am using "@storybook/react-native": "5.3.14". My stories are located at ./storybook.

Elise Chant
  • 5,048
  • 3
  • 29
  • 36

1 Answers1

4

Install react-native-web, @storybook/react and babel-plugin-react-native-web from npm in your project root.

Add a new configuration directory for Storybook, say ./.storybook-website. Inside this directory, add main.js. This creation would otherwise be done by the Storybook installation wizard. 

my-app
├── .storybook-website
│   └── main.js
└── // .... rest of your app

Add the following content to main.js:

module.exports = {
  stories: ['../storybook/stories/index.js'],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...(config.resolve.alias || {}),
      // Transform all direct `react-native` imports to `react-native-web`
      'react-native$': 'react-native-web',
      // make sure we're rendering output using **web** Storybook not react-native
      '@storybook/react-native': '@storybook/react',
      // plugin-level react-native-web extensions
      'react-native-svg': 'react-native-svg/lib/commonjs/ReactNativeSVG.web',
      // ... 
    };
    // mutate babel-loader
    config.module.rules[0].use[0].options.plugins.push(['react-native-web', { commonjs: true }]);
    // console.dir(config, { depth: null });
    return config;
  },
};

Update the stories path in main.js to the location of your existing root story.

Finally add run scripts to your package.json:

"storybook:web": "start-storybook -p 6006 --config-dir ./.storybook-website",
"storybook-build:web": "build-storybook --config-dir ./.storybook-website --output-dir dist-storybook-website --quiet"

Presto! Run using yarn storybook:web. This will run storybook dev server, opening a browser showing what you usually would see in the device emulator.

Elise Chant
  • 5,048
  • 3
  • 29
  • 36
  • do you know if this is still valid for the current version of storybook? I haven't found much about how to setup it up for the browser using react-native-web. – vaz Mar 26 '20 at 17:55
  • The current version of Storybook for RN is still based on v4 so yes. – Elise Chant Apr 04 '20 at 01:20
  • tried to do it in the case of storybook v5+ and it doesn't register my stories at all (Using: ``` import { storiesOf } from '@storybook/react'; ``` ) but nothing works – Velidan May 29 '20 at 18:32
  • "start-storybook" was overwritten for me by @storybook/react-native-server or @storybook/react-native. To solve the storybook:web script I replaced `start-storybook` with `node_modules/@storybook/react/bin/index.js` – ManAnRuck Mar 21 '21 at 08:57