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