New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
react-native-storysource-transformer
Provides storybook source in react-native to display on storybook web server
npm install react-native-storysource-transformer
Last updated over 1 year ago
1
Downloads per week
Readme View on GitHub

react-native-storysource-transformer Build Status

Enables storybook storysource addon for react-native.

Purpose

This package makes storysource addon compatible with react-native which is not supported by default.

Storybook Screenshot

Installation and configuration

Step 1 : install react-native-storysource-transformer library

yarn add react-native-storysource-transformer --dev

Step 2 : Configure the react native packager

For React Native v0.58 or newer

Merge your metro.config.js file with this config :

metro.config.js:

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve(
      "react-native-storysource-transformer"
    ),
  },
};

If you already use another transformer, you can reference an intermediate file like this :
metro.customTransformer.js :

const svgTransformer = require("react-native-svg-transformer");
const storyTransformer = require("react-native-storysource-transformer");

module.exports.transform = function (options) {
  if (options.filename.endsWith(".svg")) {
    return svgTransformer.transform(options);
  } else {
    return storyTransformer.transform(options);
  }
};

Step 3 : install storysource addon

Install storysource addon and source-loader dependencies:

yarn add @storybook/addon-storysource --dev
yarn add @storybook/source-loader --dev

Add this line in your storybook/addons.js file :

import "@storybook/addon-storysource/register";

Step 4 (optional) : custom config

react-native-storysource-transformer is controlled by the react-native-storysource-transformer section of the project's package.json.

Options

Setting Type Description Default
filePatterns string[] An array of blobs to match your stories files. ["**/*.stories.{js,ts}{x,}", "**/stories/index.{js,ts}{x,}"] will match all files named *.stories.js/jsx/ts/tsx and the default index story file
storyMatcher (Advanced) string A regular expression used to parse a story. May be needed if your stories are not written using the usual convention : storiesOf('Welcome', module).add(... "(storiesOf.*?\\(.*?module\\))"

Examples:

Example below will handle every stories ending with .stories.js or .stories.jsx.

package.json
{
  "name": "AwesomeProject",
  "config": {
    "react-native-storysource-transformer": {
      "filePatterns": ["**/*.stories.js", "**/*.stories.jsx"]
    }
  }
}

You may need to run yarn react-native start --reset-cache if you change any of these options.

Start

Run your storybook server and your storybook app as usual :

yarn storybook
react-native run-ios
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI