{"id":13823016,"url":"https://github.com/grahammendick/navigation","last_synced_at":"2025-05-14T13:07:39.187Z","repository":{"id":28522773,"uuid":"32039560","full_name":"grahammendick/navigation","owner":"grahammendick","description":"Scene-Based Navigation for React and React Native","archived":false,"fork":false,"pushed_at":"2025-05-11T21:38:19.000Z","size":36815,"stargazers_count":613,"open_issues_count":1,"forks_count":41,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-11T22:26:39.333Z","etag":null,"topics":["javascript","mobile","native","react","router"],"latest_commit_sha":null,"homepage":"https://grahammendick.github.io/navigation/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/grahammendick.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,"zenodo":null}},"created_at":"2015-03-11T20:27:48.000Z","updated_at":"2025-05-10T12:02:01.000Z","dependencies_parsed_at":"2023-02-12T11:01:20.269Z","dependency_job_id":"3ca33a30-0fbe-4a52-9ba4-08a30218c6df","html_url":"https://github.com/grahammendick/navigation","commit_stats":{"total_commits":11170,"total_committers":20,"mean_commits":558.5,"dds":"0.019158460161145974","last_synced_commit":"1dca23c9070aeab2956a1adcf29dc0b1129a8c37"},"previous_names":[],"tags_count":245,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grahammendick%2Fnavigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grahammendick%2Fnavigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grahammendick%2Fnavigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/grahammendick%2Fnavigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/grahammendick","download_url":"https://codeload.github.com/grahammendick/navigation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253645010,"owners_count":21941311,"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","mobile","native","react","router"],"created_at":"2024-08-04T08:02:30.034Z","updated_at":"2025-05-14T13:07:34.173Z","avatar_url":"https://github.com/grahammendick.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# [The Navigation router](https://grahammendick.github.io/navigation/)\r\nScene-Based Navigation for React and React Native\r\n* **Scene-Based Navigation** Native apps have always had scene-based navigation. The Navigation router is the first to bring it to the web. You give the Navigation router a list of your scenes. After you navigate to a scene, the Navigation router gets out of your way so you can build your UI however you want.\r\n* **React and React Native** You don't need a different routing library for React and React Native anymore. The Navigation router works on both. What's more, it doesn't compromise the UX. On React Native, the navigation is 100% native on Android and iOS. On React, you can have whatever URLs you want.\r\n\r\n## [React](https://grahammendick.github.io/navigation/documentation/hello-world.html)\r\n`npm install navigation navigation-react`\r\n### Define Your States\r\n```js\r\nimport { StateNavigator } from 'navigation';\r\n\r\nconst stateNavigator = new StateNavigator([\r\n  { key: 'hello', route: '' },\r\n  { key: 'world' }\r\n]);\r\n```\r\nYou create one `State` for each scene (page) in your app. You don't need to define your routes yet. The Navigation router generates interim routes. You can define your real routes at any time without changing any code. With scene-based navigation, there aren't any hard-coded Urls for you to update.\r\n\r\n### Create Your Scenes\r\n```jsx\r\n\u003cNavigationHandler stateNavigator={stateNavigator}\u003e\r\n  \u003cSceneView active=\"hello\"\u003e\u003cHello /\u003e\u003c/SceneView\u003e\r\n  \u003cSceneView active=\"world\"\u003e\u003cWorld /\u003e\u003c/SceneView\u003e\r\n\u003c/NavigationHandler\u003e  \r\n```\r\nFor each `State`, you create a `SceneView` component that renders the UI. All the other routers for React force you to think in terms of routes. But this is hard becasue routes can be nested, for example, a master/details page. Scenes, on the other hand, are always flat. The Navigation router still supports nested routes because a Scene can have more than one route.\r\n\r\n### Navigate to a Scene\r\n```jsx\r\nimport { NavigationLink } from 'navigation-react';\r\n\r\nconst Hello = () =\u003e (\r\n  \u003cNavigationLink\r\n    stateKey=\"world\"\r\n    navigationData={{ size: 20 }}\u003e\r\n    Hello\r\n  \u003c/NavigationLink\u003e\r\n);\r\n```\r\nThe `NavigationLink` component changes scene. You pass the name of the scene and the data. The Navigation router builds the Url. If you've configured more than one route it uses the best match.\r\n\r\n### Use the Data\r\n```jsx\r\nimport { NavigationContext } from 'navigation-react';\r\n\r\nconst World = () =\u003e {\r\n  const { data } = useContext(NavigationContext);\r\n  return (\r\n    \u003cdiv style={{ fontSize: data.size }}\u003e\r\n      World\r\n    \u003c/div\u003e\r\n  );\r\n};\r\n```\r\nIn the next scene, you access the data from the `NavigationContext`. The Navigation router passes strongly-typed data. Here, the size is a number.\r\n\r\n## [React Native](https://grahammendick.github.io/navigation/documentation/native/hello-world.html)\r\n`npm install navigation navigation-react navigation-react-native`\r\n### Define Your States\r\n```js\r\nimport { StateNavigator } from 'navigation';\r\n\r\nconst stateNavigator = new StateNavigator([\r\n  { key: 'hello' },\r\n  { key: 'world', trackCrumbTrail: true }\r\n]);\r\n```\r\nYou create one `State` for each scene (screen) in your app. You can think of the stack of scenes as a trail of breadcrumbs. Each scene is one crumb. Like Hansel and Gretel in the fairy story, the Navigation router drops a crumb every time it visits a scene (if you set 'trackCrumbTrail' to true).\r\n\r\n### Create Your Scenes\r\n```jsx\r\n\u003cNavigationHandler stateNavigator={stateNavigator}\u003e\r\n  \u003cNavigationStack\u003e\r\n    \u003cScene stateKey=\"hello\"\u003e\u003cHello /\u003e\u003c/Scene\u003e\r\n    \u003cScene stateKey=\"world\"\u003e\u003cWorld /\u003e\u003c/Scene\u003e\r\n  \u003c/NavigationStack\u003e\r\n\u003c/NavigationHandler\u003e\r\n```\r\nFor each `State`, you create a `Scene` component that renders the UI. The Navigation router provides React components to help you build your scenes. All of these components render to the same native primitives as other native apps. For example, the `TabBar` component renders to a `BottomNavigationView` on Android and a `UITabBarController` on iOS.\r\n\r\n### Navigate to a Scene\r\n```jsx\r\nimport { NavigationContext } from 'navigation-react';\r\n\r\nconst Hello = () =\u003e {\r\n  const { stateNavigator } = useContext(NavigationContext);\r\n  return (\r\n    \u003cButton title=\"Hello\"\r\n      onPress={() =\u003e {\r\n        stateNavigator.navigate('world', { size: 20 });\r\n      }} /\u003e\r\n  );\r\n};\r\n```\r\nYou use the `stateNavigator` from the `NavigationContext` to change scenes. You pass the name of the scene and the data. The navigation is 100% native on Android and iOS.\r\n\r\n### Use the Data\r\n```jsx\r\nimport { NavigationContext } from 'navigation-react';\r\n\r\nconst World = () =\u003e {\r\n  const { data } = useContext(NavigationContext);\r\n  return (\r\n    \u003cText style={{ fontSize: data.size }}\u003e\r\n      World\r\n    \u003c/Text\u003e\r\n  );\r\n};\r\n```\r\nIn the next scene, you access the data from the `NavigationContext`. You can return to the 'hello' scene via the Android back button or swiping/pressing back on iOS.\r\n\r\n## Build\r\nOnce you've cloned the repository, you can install the dependencies and run the build:\r\n\r\n    npm install\r\n    npm run build\r\n\r\nRunning `npm test` executes the unit tests.  \r\nRunning `npm run package` outputs the npm packages inside the `build/npm` folder.\r\n\r\nThanks to [BrowserStack](https://www.browserstack.com/) for their help with cross browser testing\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrahammendick%2Fnavigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgrahammendick%2Fnavigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgrahammendick%2Fnavigation/lists"}