{"id":14985493,"url":"https://github.com/elderfo/react-native-storybook-loader","last_synced_at":"2025-05-16T13:04:26.117Z","repository":{"id":17972149,"uuid":"83107869","full_name":"elderfo/react-native-storybook-loader","owner":"elderfo","description":"An automatic story loader for react-native-storybooks","archived":false,"fork":false,"pushed_at":"2023-03-04T04:02:19.000Z","size":1330,"stargazers_count":298,"open_issues_count":17,"forks_count":27,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-02T06:41:31.147Z","etag":null,"topics":["javascript","react-native","storybook"],"latest_commit_sha":null,"homepage":"https://github.com/elderfo/react-native-storybook-loader","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/elderfo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-25T05:06:54.000Z","updated_at":"2025-03-26T08:49:52.000Z","dependencies_parsed_at":"2024-06-18T13:03:14.237Z","dependency_job_id":"2cd2a531-cb5a-4a6c-b5f5-b2a470024b74","html_url":"https://github.com/elderfo/react-native-storybook-loader","commit_stats":{"total_commits":155,"total_committers":14,"mean_commits":"11.071428571428571","dds":0.2967741935483871,"last_synced_commit":"fe72ee3caead1ac94f962274b5060200cfffddb0"},"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elderfo%2Freact-native-storybook-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elderfo%2Freact-native-storybook-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elderfo%2Freact-native-storybook-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/elderfo%2Freact-native-storybook-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/elderfo","download_url":"https://codeload.github.com/elderfo/react-native-storybook-loader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247999859,"owners_count":21031046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react-native","storybook"],"created_at":"2024-09-24T14:11:05.449Z","updated_at":"2025-04-09T08:04:36.214Z","avatar_url":"https://github.com/elderfo.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Native Storybook Loader\n\nA CLI for dynamically importing stories into [Storybook for React Native](https://storybook.js.org/docs/guides/guide-react-native/).\n\n[![Build Status](https://travis-ci.org/elderfo/react-native-storybook-loader.svg?branch=master)](https://travis-ci.org/elderfo/react-native-storybook-loader) [![Known Vulnerabilities](https://snyk.io/test/github/elderfo/react-native-storybook-loader/badge.svg)](https://snyk.io/test/github/elderfo/react-native-storybook-loader)\n[![AppVeyor](https://ci.appveyor.com/api/projects/status/github/elderfo/react-native-storybook-loader?svg=true)](https://ci.appveyor.com/project/elderfo/react-native-storybook-loader)\n[![codecov](https://codecov.io/gh/elderfo/react-native-storybook-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/elderfo/react-native-storybook-loader)\n## Purpose\n\nWhile using storybook for React Native, I repeatedly found myself manually creating a file with imports for all my stories.\n\n`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.\n\n* [Installation](#installation)\n* [Quick Start](#quick-start)\n* [Configuration](#configuration)\n* [Story Loader API](#story-loader-api)\n* [Story Loader Formatting](#story-loader-formatting) (Prettier support)\n* [Support](https://github.com/elderfo/react-native-storybook-loader/issues)\n\n\n## Installation\n\n```bash\nyarn add react-native-storybook-loader -D\n```\n\n## Quick Start\n\n1. Create a React Native project using [create-react-native-app](https://github.com/expo/create-react-native-app)\n\n    ```bash\n    yarn create react-native-app\n    ```\n\n2. Add [Storybook for React Native](https://storybook.js.org/docs/guides/guide-react-native/) to the project and follow instructions to finalize setup.\n\n    ```bash\n    cd \u003cproject name\u003e\n    npx -p @storybook/cli sb init --type react_native\n    ```\n\n3. Install react-native-storybook-loader\n\n    ```bash\n    yarn add react-native-storybook-loader -D\n    ```\n\n4. Add the `rnstl` cli to the scripts tag of the `package.json`\n\n    ```json\n    {\n      \"scripts\": {\n        \"prestorybook\": \"rnstl\"\n      }\n    }\n    ```\n\n5. Update `index.js` file in the `./storybook` directory to point to `storyLoader.js`\n\n    ```javascript\n    import { AppRegistry } from 'react-native';\n    import { getStorybookUI, configure } from '@storybook/react-native';\n\n    import { loadStories } from './storyLoader';\n\n    import './rn-addons';\n\n    // import stories\n    configure(() =\u003e {\n      loadStories();\n    }, module);\n\n    // Refer to https://github.com/storybookjs/storybook/tree/master/app/react-native#start-command-parameters\n    // To find allowed options for getStorybookUI\n    const StorybookUIRoot = getStorybookUI({});\n\n    // If you are using React Native vanilla and after installation you don't see your app name here, write it manually.\n    // If you use Expo you can safely remove this line.\n    AppRegistry.registerComponent('%APP_NAME%', () =\u003e StorybookUIRoot);\n\n    export default StorybookUIRoot;\n    ```\n    _Note:_ Step 4 ensures `storyLoader.js` will be created\n6. Start Storybook\n\n    ```bash\n    yarn storybook\n    ```\n\n7. Run react native app in targeted platform\n\n    ```bash\n    yarn android\n    ```\n\n    Or\n\n    ```bash\n    yarn ios\n    ```\n    _Note: If you have problems connecting from your device to Storybook using Android issue the following command: `adb reverse tcp:7007 tcp:7007`._\n\n\n## Configuration\n\nStory loading is controlled by the `react-native-storybook-loader` section of the project's `package.json`. \n\n### Options\n\n| Setting | CLI Option | Type | Description | Default | \n|---|---|---|---|---|\n| **searchDir** | `--searchDir` | `string` or `string[]` | The directory or directories, relative to the project root, to search for files in. | Project root |\n| **outputFile** | `--outputFile` | `string` | The output file that will be written. It is relative to the project directory. | `./storybook/storyLoader.js` | \n| **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) | \n|  | `--silent` | | Silences output. This option is not supported in the `package.json` file. | \n\n\u003e Note: When using the CLI, any of option passed will override the values in the `package.json`\n\n### Examples:\n\nBoth examples below will search `src` and `packages` directories recursively for files that end with `.stories.js` and write the output to `./storybook/storyLoader.js`\n\n#### `package.json`\n\n```json\n{\n  \"name\": \"awesome-project\",\n  \"scripts\": {\n    \"prestorybook\": \"rnstl\"\n  },\n  \"config\": {\n    \"react-native-storybook-loader\": {\n      \"searchDir\": [\"./src\", \"./packages\"],\n      \"pattern\": \"**/*.stories.js\",\n      \"outputFile\": \"./storybook/storyLoader.js\"\n    }\n  }\n}\n```\n\n## Story Loader API\n\nA story loader is the file generated by `rnstl` used to load story files from your project in to Storybook. \n\n### storyLoader.loadStories()\n\nLoads the located stories\n\nReturns: `void`\n\n### storyLoader.stories\n\nAn array of the stories that are loaded.\n\nReturns: `string[]`\n\n### storyLoader.modules\n\nAn array of the modules to load.\n\nReturns: `NodeRequire[]`\n\n## Story Loader Formatting\n\nTo ensure the formatting of your story loader is on par with the rest of your code base, `rnstl` uses [Prettier](https://prettier.io/) to format the generated story loaders. It will travese up the tree looking for a [Prettier configuration file](https://prettier.io/docs/en/configuration.html). If none is found, the defaul Prettier settings will be used.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felderfo%2Freact-native-storybook-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felderfo%2Freact-native-storybook-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felderfo%2Freact-native-storybook-loader/lists"}