{"id":17700914,"url":"https://github.com/wrathchaos/react-navigation-helpers","last_synced_at":"2025-04-04T22:01:40.425Z","repository":{"id":37458427,"uuid":"201448541","full_name":"WrathChaos/react-navigation-helpers","owner":"WrathChaos","description":"Helpers for React Navigation","archived":false,"fork":false,"pushed_at":"2025-03-28T13:43:30.000Z","size":23386,"stargazers_count":60,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T21:01:42.073Z","etag":null,"topics":["android","freakycoder","helpers","ios","library","mobile","navigation","react","react-native","react-navigation","reactjs"],"latest_commit_sha":null,"homepage":"https://www.freakycoder.com","language":"Java","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/WrathChaos.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-08-09T10:44:21.000Z","updated_at":"2025-03-28T13:43:27.000Z","dependencies_parsed_at":"2024-01-23T13:57:01.996Z","dependency_job_id":"206d1ece-86e6-4524-afa5-3cb3605c9cc1","html_url":"https://github.com/WrathChaos/react-navigation-helpers","commit_stats":{"total_commits":821,"total_committers":7,"mean_commits":"117.28571428571429","dds":0.0560292326431181,"last_synced_commit":"d345f47a9b585c9a4cd6da97f62804fdeefea7b9"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-navigation-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-navigation-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-navigation-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WrathChaos%2Freact-navigation-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WrathChaos","download_url":"https://codeload.github.com/WrathChaos/react-navigation-helpers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256093,"owners_count":20909240,"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":["android","freakycoder","helpers","ios","library","mobile","navigation","react","react-native","react-navigation","reactjs"],"created_at":"2024-10-24T17:43:38.621Z","updated_at":"2025-04-04T22:01:40.387Z","avatar_url":"https://github.com/WrathChaos.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"React Navigation Helpers\" src=\"assets/logo.png\" width=\"1050\"/\u003e\n\n[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-navigation-helpers)\n\n[![Helpers for React Navigation](https://img.shields.io/badge/-Helpers%20for%20React%20Navigation-orange?style=for-the-badge)](https://github.com/WrathChaos/react-navigation-helpers)\n\n[![npm version](https://img.shields.io/npm/v/react-navigation-helpers.svg?style=for-the-badge)](https://www.npmjs.com/package/react-navigation-helpers)\n[![npm](https://img.shields.io/npm/dt/react-navigation-helpers.svg?style=for-the-badge)](https://www.npmjs.com/package/react-navigation-helpers)\n![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=for-the-badge)\n![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)\n[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)\n\n## Installation\n\nAdd the dependency:\n\n### React Native:\n\n```ruby\nnpm i react-navigation-helpers\n```\n\n## Peer Dependencies\n\nWorks with React Navigation \n- **v6**\n- v5\n- v4\n\n```json\n\"@react-navigation/native\": \"\u003e= 4.x.x\"\n```\n\n## React Navigation Versions\n\n| Version     | Supported React Navigation Version |\n| ----------- | ---------------------------------- |\n| _**2.0.0 \u003e**_ | _**v6**_                           |\n| 1.1.1       | v5                                 |\n| \u003c 0.1.0     | v4                                 |\n\n## Usage\n\n### Global Level Navigator\n\nSet the global level navigation reference into the `NavigationContainer`\n\n```jsx\nimport { isReadyRef, navigationRef } from \"react-navigation-helpers\";\n\nuseEffect((): any =\u003e {\n  return () =\u003e (isReadyRef.current = false);\n}, []);\n\n\u003cNavigationContainer\n  ref={navigationRef}\n  onReady={() =\u003e {\n    isReadyRef.current = true;\n  }}\n\u003e\n  {/* Rest of your code */}\n\u003c/NavigationContainer\u003e;\n```\n\n\n\n## NavigationService Usage\n\n### Navigate Example\n\n```js\nimport * as NavigationService from \"react-navigation-helpers\";\n\nNavigationService.navigate(\"home\");\n```\n\n### Push Example\n\n```js\nimport * as NavigationService from \"react-navigation-helpers\";\n\nNavigationService.push(\"home\");\n```\n\n### Pop Example\n\n```js\nimport * as NavigationService from \"react-navigation-helpers\";\n\nNavigationService.pop();\n```\n\n### PopToTop Example\n\n```js\nimport * as NavigationService from \"react-navigation-helpers\";\n\nNavigationService.popToTop();\n```\n\n### Back Example\n\n```js\nimport * as NavigationService from \"react-navigation-helpers\";\n\nNavigationService.back();\n```\n\n## How to pass prop with this library?\n\nThe usage does not change. Simply put your prop as the secondary prop **as same as React Navigation** itself.\n\n### Navigate\n\n```js\nimport * as NavigationService from \"react-navigation-helpers\";\n\nNavigationService.navigate(\"home\", { data: myData, myId: \"d1f01df1\" });\n```\n\n### Push\n\n```js\nimport * as NavigationService from \"react-navigation-helpers\";\n\nNavigationService.push(\"home\", { data: myData, myId: \"d1f01df1\" });\n```\n\n## How to receive the passed props from navigation or push functions?\n\n```js\nconst { data, id } = this.props.route.params;\n```\n\n### Configuration - Props\n\n| Property |   Type   | Default  | Description                     |\n| -------- | :------: | :------: | ------------------------------- |\n| navigate | function | function | navigate the selected screen    |\n| push     | function | function | push the selected screen        |\n| goBack   | function | function | back the previous screen        |\n| pop      | function | function | pop the previous screen         |\n| popToTop | function | function | pop the top level of the screen |\n| reset    | function | function | reset the navigator             |\n\n### Global Stack Navigator Events\n\nTo listen to the Stack navigator events from anywhere, you need to import `navigationListenerProps` and spread it as props. It is currently limited to a single stack navigator.\n```jsx\nimport { isReadyRef, navigationRef, navigationListenerProps } from \"react-navigation-helpers\";\n\nuseEffect((): any =\u003e {\n  return () =\u003e (isReadyRef.current = false);\n}, []);\n\n\u003cNavigationContainer\n  ref={navigationRef}\n  onReady={() =\u003e {\n    isReadyRef.current = true;\n  }}\n\u003e\n  \u003cStack.Navigator {...navigationListenerProps}\u003e\n      {/* Rest of your code */}\n  \u003c/Stack.Navigator\u003e\n\u003c/NavigationContainer\u003e;\n```\n\nyou can then listen to [stack navigation events](https://reactnavigation.org/docs/stack-navigator#events) anywhere in your app.\n\nExample in a component:\n```jsx\nimport React, {useEffect} from \"react\"\nimport {addNavigationListener} from \"react-navigation-helpers\"\n// or as a whole\nimport * as NavigationService from \"react-navigation-helpers\";\n\nconst MyComponent = () =\u003e {\n    \n    useEffect(() =\u003e {\n        return addNavigationListener(\"transitionEnd\", () =\u003e {\n            // transition ended\n        })\n    })\n\n    // or like this\n    useEffect(() =\u003e {\n        return NavigationService.addNavigationListener(\"transitionEnd\", () =\u003e {\n            // transition ended\n        })\n    })\n    \n    return (\n        \u003cText\u003eHello world!\u003c/Text\u003e\n    )\n}\n```\n\n### Roadmap\n\n- [x] ~~LICENSE~~\n- [ ] Write an article about the lib on Medium\n\n## Author\n\nFreakyCoder, kurayogun@gmail.com\n\n## License\n\nReact Navigation Helpers Library is available under the MIT license. See the LICENSE file for more info.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-navigation-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwrathchaos%2Freact-navigation-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwrathchaos%2Freact-navigation-helpers/lists"}