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
Provides storybook source in react-native to display on storybook web server
npm install react-native-storysource-transformer
Last updated almost 3 years ago
Downloads per week
Readme View on GitHub

react-native-storysource-transformer Build Status

Enables storybook storysource addon for react-native.


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 :


module.exports = {
  transformer: {
    babelTransformerPath: require.resolve(

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.


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\\))"


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

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


Run your storybook server and your storybook app as usual :

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

Maintained by
Special thanks to Netlify and CircleCI