Storybook with React Native Web

[leggomuhgreggo]

Working example of how to get Storybook to work with RNW, for anyone else who's trying. Just requires a custom webpack config using full control mode

Using versions:

"react-dom": "^16.0.0",
"react-native-web": "^0.1.3",
"@storybook/react": "^3.2.11"

Add the webpack.config.js in .storybook folder, with this:

const path = require("path");

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.resolve = {
    modules: ["node_modules"],
    extensions: [".web.js", ".js", ".json", ".web.jsx", ".jsx"],
    alias: {
      "react-native": "react-native-web"
    }
  };

  return storybookBaseConfig;
};

Hope this helps someone!

related to #44

[IncredibleMrTim]

Just as an addition to @leggomuhgreggo post. If you need to add loaders to your storybook you can also add modules rules as below...

const path = require("path");

module.exports = (storybookBaseConfig, configType) => {
    storybookBaseConfig.resolve = {
        modules: ["node_modules"],
        extensions: [".web.js", ".js", ".json", ".web.jsx", ".jsx"],
        alias: {
            "react-native": "react-native-web"
        }
    };

    storybookBaseConfig.module.rules.push({
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        include: path.resolve(__dirname, "../")
    });
    storybookBaseConfig.module.rules.push({
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        loader: require.resolve('url-loader'),
        options: {
            limit: 10000,
            name: 'static/media/[name].[hash:8].[ext]',
        },
    });


    return storybookBaseConfig;
};

I found this especially handy when working with images

[ali-sao]

يا عيني على ربك يا زلمه

[jckw]

Storybook has since changed their Webpack config customisation API. This should do effectively the same thing, although I'm fairly sure the modules, and extensions are not needed.

const path = require("path")

module.exports = ({ config, mode }) => {
    config.module.rules.push({
        resolve: {
            modules: ["node_modules"], // probably not needed
            extensions: [".web.js", ".js", ".json", ".web.jsx", ".jsx"], // probably not needed
            alias: {
                "react-native": "react-native-web"
            }
        }
    })

    return config
}

TypeScript

This is really just the Storybook recommended create-react-app TypeScript config with the alias added:

const path = require("path")

module.exports = ({ config, mode }) => {
    config.module.rules.push({
        test: /\.(ts|tsx)$/,
        loader: require.resolve("babel-loader"),
        options: {
            presets: [["react-app", { flow: false, typescript: true }]]
        },
        resolve: {
            alias: {
                "react-native": "react-native-web"
            }
        }
    })
    config.resolve.extensions.push(".ts", ".tsx")

    return config
}