{"id":20936141,"url":"https://github.com/inspmoore/rnw_boilerplate_nav","last_synced_at":"2025-08-23T01:46:33.011Z","repository":{"id":53112794,"uuid":"151248293","full_name":"inspmoore/rnw_boilerplate_nav","owner":"inspmoore","description":"React Native Web boilerplate for universal web/native apps with a react-router/react-navigation combo navigation system.","archived":false,"fork":false,"pushed_at":"2021-04-06T07:26:55.000Z","size":237,"stargazers_count":52,"open_issues_count":1,"forks_count":7,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-13T21:40:26.477Z","etag":null,"topics":["navigation","react","react-native","react-native-web","universal"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/inspmoore.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}},"created_at":"2018-10-02T12:08:56.000Z","updated_at":"2022-12-20T11:57:20.000Z","dependencies_parsed_at":"2022-09-14T02:00:41.508Z","dependency_job_id":null,"html_url":"https://github.com/inspmoore/rnw_boilerplate_nav","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/inspmoore/rnw_boilerplate_nav","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspmoore%2Frnw_boilerplate_nav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspmoore%2Frnw_boilerplate_nav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspmoore%2Frnw_boilerplate_nav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspmoore%2Frnw_boilerplate_nav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inspmoore","download_url":"https://codeload.github.com/inspmoore/rnw_boilerplate_nav/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inspmoore%2Frnw_boilerplate_nav/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271731696,"owners_count":24811308,"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","status":"online","status_checked_at":"2025-08-22T02:00:08.480Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["navigation","react","react-native","react-native-web","universal"],"created_at":"2024-11-18T22:18:03.750Z","updated_at":"2025-08-23T01:46:32.981Z","avatar_url":"https://github.com/inspmoore.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Web Boilerplate 🥘 with navigation 🗺\n\nA small and simple boilerplate for lazy people to create a universal Web/Native React app. How is that possible? By code sharing between both of those worlds. The most crucial element of this puzzle is a brilliant [React Native Web](https://github.com/necolas/react-native-web) library by [Nicolas Gallagher](http://nicolasgallagher.com).\n\nThis boilerplate will save you the hassle of configuring it by your own. Like I said. Lazy bones.\n\n\u003e There's also version without app navigation built in. [Check it out here.](https://github.com/inspmoore/rnw_boilerplate)\n\n## Installing 🔩\n\nClone the repo and run\n\n```\nyarn\n```\n\nor\n\n```\nnpm install\n```\n\nto install all the dependencies.\n\n## Scripts ️️️⚙️\n\nThe scripts are a mix of [create-react-app](https://github.com/facebook/create-react-app#npm-start-or-yarn-start) and [react-native](https://facebook.github.io/react-native/docs/getting-started).\n\n### `yarn start-web` or `npm run start-web`\n\nRuns your app in the browser under the http://localhost:3000.\n\n### `yarn start` or `npm run start`\n\nStarts metro bundler for your react native project.\n\n### `yarn start-ios` or `npm run start-ios`\n\nRuns metro bundler and opens the app in the iOS simulator.\n\n### `yarn build` or `npm run build`\n\nBuilds your web app for production.\n\n### `yarn test` or `npm run test`\n\nRuns the test environment for the native part.\n\n### `yarn test-web` or `npm run test-web`\n\nRuns the test environment for the web part.\n\n### `yarn eject` or `npm run eject`\n\nEject your web project to your custom setup.\n\n## Usage 🛠\n\nFolder and file structure is also a result of combination of create-react-app and react-native boilerplates.\n\n```\nrnw_boilerplate\n├── android\n├── ios\n├── node_modules\n├── public\n├── src\n│    ├── NativeWebRouteWrapper\n│    │    ├── index.js\n│    │    ├── pop.native.js\n│    │    └── pop.web.js\n│    ├── App.js\n│    ├── App.native.js\n│    ├── HomeScreen.js\n│    ├── index.js - web index file\n│    └── registerServiceWorker.js\n├── app.json\n├── index.js - native index file\n├── package.json\n└── README.md\n```\n\n`HomeScreen.js` file is an example of a component shared between the platforms. Thanks to React Native Web lib, it is possible to use React Native primitives in the Web environment. Please check out [RNW guide](https://github.com/necolas/react-native-web) for more details.\n\nAlso notice that there are separate `App.js` files for Web and Native. This gives a lot of advantages, including adding platform specific libraries to your app.\n\n### Navigation\n\nIn the native environment things are simple and easy. Just use [`react-navigation`](https://reactnavigation.org).\n\nWeb is however more complicated. In the spirit of RNW I've ported some `react-navigation` functionality using `react-router-dom`. Using a `WebRoutesGenerator` little helper function found in the `NativeWebRouteWrapper` lib you can create routes with a `react-navigation' like API.\n\nFirst create a route map and pass it to the `WebRoutesGenerator`\n\n```javascript\nconst routeMap = {\n  Home: {\n    component: HomeScreen,\n    path: \"/\",\n    exact: true\n  },\n  Second: {\n    component: SecondScreen,\n    path: \"/second\"\n  },\n  User: {\n    component: UserScreen,\n    path: \"/user/:name?\",\n    exact: true\n  },\n  DasModal: {\n    component: DasModalScreen,\n    path: \"*/dasmodal\",\n    modal: true\n  }\n};\n\n// in the render method\nWebRoutesGenerator({ routeMap });\n```\n\nThe components are wrapped in a HOC that adds `navigation` prop. This props has three methods to work with:\n\n- `this.props.navigation`\n  - `navigate(routeName, params)` - go to a screen, pass params\n  - `goBack` - goes one step back in history\n  - `getParam(paramName, fallback)` - get a specific param with fallback\n\nIt's a limited copy of [react-navigation navigation prop](https://reactnavigation.org/docs/en/navigation-prop.html).\n\nIf you want to have a modal:\n\n- add a `modal: true` flag the route map\n- add `\u003cModalContainer /\u003e` from `react-router-modal` to your app layout\n\n## Renaming the app ✏️\n\nThis boilerplate comes with ios and android bundles already named. If you want to (and you should) change the name, use the [react-native-rename](https://github.com/junedomingo/react-native-rename) lib.\n\n## Contribution ❤️\n\nThis boilerplate was made for my own convenience and is still a work in progress. Please consider it as an experiment and think twice or even trice (is that a word?) before using it in production.\n\nIf you however would like to add something from yourself, please do make a PR! All contributions will be treated with great love!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finspmoore%2Frnw_boilerplate_nav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finspmoore%2Frnw_boilerplate_nav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finspmoore%2Frnw_boilerplate_nav/lists"}