Provides storybook source in react-native to display on storybook web server
Last updated 25 days ago by fabien88 .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-storysource-transformer 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.0.3                                ...           latest (25 days ago)

3 Versions

  • 0.0.3                                ...           25 days ago
  • 0.0.2                                ...           25 days ago
  • 0.0.1                                ...           25 days ago
Maintainers (1)
Today 0
This Week 0
This Month 31
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dev Dependencies (2)
Dependents (0)

Copyright 2014 - 2017 © |