Skip to content
main
Switch branches/tags
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

React Native Storybook Loader

A CLI for dynamically importing stories into Storybook for React Native.

Build Status Known Vulnerabilities AppVeyor codecov

Purpose

While using storybook for React Native, I repeatedly found myself manually creating a file with imports for all my stories.

react native storybook-loader solves this by searching directories, matching files to patterns and generating a story loader that Storybook can use to load all of your stories.

Installation

yarn add react-native-storybook-loader -D

Quick Start

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

    yarn create react-native-app
  2. Add Storybook for React Native to the project and follow instructions to finalize setup.

    cd <project name>
    npx -p @storybook/cli sb init --type react_native
  3. Install react-native-storybook-loader

    yarn add react-native-storybook-loader -D
  4. Add the rnstl cli to the scripts tag of the package.json

    {
      "scripts": {
        "prestorybook": "rnstl"
      }
    }
  5. Update index.js file in the ./storybook directory to point to storyLoader.js

    import { AppRegistry } from 'react-native';
    import { getStorybookUI, configure } from '@storybook/react-native';
    
    import { loadStories } from './storyLoader';
    
    import './rn-addons';
    
    // import stories
    configure(() => {
      loadStories();
    }, module);
    
    // Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters
    // To find allowed options for getStorybookUI
    const StorybookUIRoot = getStorybookUI({});
    
    // If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
    // If you use Expo you can safely remove this line.
    AppRegistry.registerComponent('%APP_NAME%', () => StorybookUIRoot);
    
    export default StorybookUIRoot;

    Note: Step 4 ensures storyLoader.js will be created

  6. Start Storybook

    yarn storybook
  7. Run react native app in targeted platform

    yarn android

    Or

    yarn 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": "awesome-project",
  "scripts": {
    "prestorybook": "rnstl"
  },
  "config": {
    "react-native-storybook-loader": {
      "searchDir": ["./src", "./packages"],
      "pattern": "**/*.stories.js",
      "outputFile": "./storybook/storyLoader.js"
    }
  }
}

Story Loader API

A story loader is the file generated by rnstl used to load story files from your project in to Storybook.

storyLoader.loadStores()

Loads the located stories

Returns: void

storyLoader.stories

An array of the stories that are loaded.

Returns: string[]

Story Loader Formatting

To ensure the formatting of your story loader is on par with the rest of your code base, rnstl uses Prettier to format the generated story loaders. It will travese up the tree looking for a Prettier configuration file. If none is found, the defaul Prettier settings will be used.