Building a Component Library with Storybook

Tip: Automatically Load Storybook Stories

package.json

{
  "name": "ComponentLibrary",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "storybook": "storybook start",
    "prestorybook": "rnstl"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.57.8"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^4.1.6",
    "@storybook/addon-links": "^4.1.6",
    "@storybook/addons": "^4.1.6",
    "@storybook/react-native": "^4.1.6",
    "babel-core": "^6.26.3",
    "babel-jest": "23.6.0",
    "babel-runtime": "^6.26.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "prop-types": "^15.6.2",
    "react-dom": "16.6.3",
    "react-native-storybook-loader": "^1.8.0",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "config": {
    "react-native-storybook-loader": {
      "searchDir": ["./App"],
      "pattern": "**/*.stories.js"
    }
  }
}

storybook/index.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/storybooks/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;

Continue