react-native-storybook-loader

A CLI for dynamically importing stories into react-native-storybook.

Purpose

While using storybook for React Native, I repeatedly found myself manually creating a file with imports for all my stories. So I built an automated way to do it. react-native-storybook-loader can be run using configuration in your package.json or via the CLI interface and it generates a file with all the imports for you.

Installation

yarn add react-native-storybook-loader -D

Or

npm install react-native-storybook-loader --save-dev

Quick Start

Create a React Native project using create-react-native-app

create-react-native-app AwesomeProject

Add react-native-storybook to the project using getstorybook

cd AwesomeProject
getstorybook

Install react-native-storybook-loader

yarn add react-native-storybook-loader -D

Update index.js file in the ./storybook directory to point to storyLoader.js (this file will be generated before launching Storybook).

import { getStorybookUI, configure } from '@storybook/react-native';
import { loadStories } from './storyLoader';

configure(() => {
  loadStories()
}, module);

const StorybookUI = getStorybookUI({ port: 7007, host: 'localhost' });
export default StorybookUI;

Add the rnstl cli to the scripts tag of the package.json

{
  "scripts": {
    "prestorybook": "rnstl"
  }
}

Run Storybook

yarn storybook

Or

npm run storybook

Run react-native on the targeted platform

react-native run-android

Or

react-native run-ios

Note: If you have problems connecting from your device to Storybook using Android issue the following command: adb reverse tcp:7007 tcp:7007.

Configuration

Story loading is controlled by the react-native-storybook-loader section of the project's package.json.

Options

| Setting | CLI Option | Type | Description | Default | |---|---|---|---|---| | searchDir | --searchDir | string or string[] | The directory or directories, relative to the project root, to search for files in. | Project root | | outputFile | --outputFile | string | The output file that will be written. It is relative to the project directory. | ./storybook/storyLoader.js | | pattern | --pattern | string | The pattern of files to look at. It can be a specific file, or any valid glob. Note: if using the CLI, globs with **/*... must be escaped with quotes | ./storybook/stories/index.js (The default React Native storybook file) | | | --silent | | Silences output. This option is not supported in the package.json file. |

Note: When using the CLI, any of option passed will override the values in the package.json

Examples:

Both examples below will search src and packages directories recursively for files that end with .stories.js and write the output to ./storybook/storyLoader.js

package.json

{
  "name": "AwesomeProject",
  "scripts": {
    "prestorybook": "rnstl"
  },
  "config": {
    "react-native-storybook-loader": {
      "searchDir": ["./src", "./packages"],
      "pattern": "**/*.stories.js",
      "outputFile": "./storybook/storyLoader.js"
    }
  }
}

CLI

Breaking Change

CLI can now be accessed from a terminal

./node_modules/.bin/rnstl <options>

or in package.json

{
  "scripts": {
    "prestorybook": "rnstl <options>"
  }
}

Note: When using a glob with **/* it is required to be wrapped in quotes

There is no longer a need to use node ./node_modules/.bin/rnstl <options>.

$ ./node_modules/.bin/rnstl --searchDir ./src ./packages --pattern "**/*.stories.js" --outputFile ./storybook/storyLoader.js

Support

Please log issues

Contributing

Coming Soon