An automatic story loader for react-native-storybooks
Clone or download


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

Build Status Known Vulnerabilities AppVeyor codecov


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.


yarn add react-native-storybook-loader -D


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

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(() => {
}, 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


npm run storybook

Run react-native on the targeted platform

react-native run-android


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.


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


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


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


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


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


Please log issues


Coming Soon