{"id":15726765,"url":"https://github.com/usulpro/react-native-storybook-example","last_synced_at":"2025-10-07T19:45:07.161Z","repository":{"id":82554313,"uuid":"91527905","full_name":"usulpro/react-native-storybook-example","owner":"usulpro","description":"Example project of boilerplate necessary to create react native storybook with hosting to server","archived":false,"fork":false,"pushed_at":"2017-05-16T16:24:56.000Z","size":208,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-06T07:11:47.790Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/usulpro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-05-17T03:06:11.000Z","updated_at":"2021-12-22T05:27:13.000Z","dependencies_parsed_at":"2023-03-12T16:10:04.380Z","dependency_job_id":null,"html_url":"https://github.com/usulpro/react-native-storybook-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-native-storybook-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-native-storybook-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-native-storybook-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/usulpro%2Freact-native-storybook-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/usulpro","download_url":"https://codeload.github.com/usulpro/react-native-storybook-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246403895,"owners_count":20771526,"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":[],"created_at":"2024-10-03T22:40:31.677Z","updated_at":"2025-10-07T19:45:02.128Z","avatar_url":"https://github.com/usulpro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Storybook Example\n\nThis is example react-native-storybook project. It is running React native (0.38, but it could be any version). \nWhat is special about this example is that it allows you to host your storybook to server and let them connect\nto it through apps installed in their phones.\n\n![Two simulators, two browsers one server playing together](https://media.giphy.com/media/3oKIPhYRUyUO5I6pWw/giphy.gif)\n\nStorybook in this project has two modes:\n* Local\n* Hosted\n\n## Example features:\n\n### Addons\n* [react-docgen](https://github.com/mihalik/react-storybook-addon-docgen)\n* [storybook addon knobs](https://github.com/storybooks/storybook/tree/master/packages/addon-knobs)\n* [storybook smart knobs (auto generates knobs)](https://github.com/lucasconstantino/storybook-addon-smart-knobs);\n* [storybook usage](https://github.com/Gongreg/storybook-usage);\n\n### Custom features\n* Custom design (main area is hidden in favor of bigger sidebar)\n* All tabs in sidebar are displayed at same time, to reduce tab switching.\n* Contains entry screen to insert remote server address in hosted mode.\n\n\n## Running example \n### Running local mode\n\nRun `npm run storybook` and then run `react-native run-ios' and you should instantly see working project (same as when installing new storybook).\n \n### Running hosted mode\n \n Run `npm run storybook-hosted` and then run`react-native run-ios`. You should see a screen asking you to enter information.\n I have deployed this example storybook to heroku, so if you want to test it out leave host same and enter code displayed in browser.\n \n * Host (localhost if running locally/leave default if testing out deployed version).\n * Port (7007 if running locally)\n * Code (Insert code shown in browser)\n * Secured (leave unchecked if running locally, check it for running in server).\n\n### Running hosted mode in your own server.\nAll you need to do is run `npm run storybook-hosted -- -s --skip-packager -p $PORT` command in the server.\nAlso make prettier code-screen, remove host/port so users wouldn't have to enter it every time.\n\n\n## Installing for your own project (quite a lot of steps but shouldn't take more than 5 minutes)\n1. Run getstorybook `npm install -g getstorybook; cd to_your_project_folder; getstorybook;`\n2. Move out stories folder from storybook folder to root and delete the storybook folder. \n3. Copy .storybook, .babelrc to root of your project.\n4. Rename 4 occurrences of ReactNativeStorybookExample ```insideAppRegistry.registerComponent('ReactNativeStorybookExample', () =\u003e StorybookUI);``` To your current project name.\n5. Add these dependencies to your package.json file (dependencies or devDependencies, depending on are you going to host this project or not.)\n```\n\"@kadira/storybook-addon-knobs\": \"Gongreg/storybook-addon-knobs\",\n\"babel-plugin-react-docgen\": \"^1.4.2\",\n\"babel-preset-react-native\": \"1.9.1\",\n\"es6-symbol\": \"^3.1.1\",\n\"react-storybook-addon-docgen\": \"Gongreg/react-storybook-addon-docgen\",\n\"storybook-addon-smart-knobs\": \"^0.3.0\",\n\"storybook-usage\": \"^2.0.0\"\n```\n6. Copy these two lines into scripts and remove previous storybook command.\n```\n\"storybook\": \"storybook start -p 7007 -c .storybook/local\",\n\"storybook-hosted\": \"storybook start -p 7007 -i -c .storybook/server -e PRODUCTION\"\n```\n7. Create your own stories in stories folder.\n\n## Things to improve\n\n* Add proper styles.\n* Remove running webpack when starting server.\n* Remove all Gongreg/** dependencies. Create new projects if necessary.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Freact-native-storybook-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fusulpro%2Freact-native-storybook-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fusulpro%2Freact-native-storybook-example/lists"}