A CLI for dynamically import stories into react-native-storybook.
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.
yarn add react-native-storybook-loader -D
Or
npm install react-native-storybook-loader --save-dev
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 install react-native-storybook-loader -D
Update index.js
file in the ./storybook
directory to point to the generated storyLoader.js
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"
}
}
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) |
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