{"id":17659380,"url":"https://github.com/ralali/rematch-navigation-plugin","last_synced_at":"2025-05-07T14:41:20.678Z","repository":{"id":143781051,"uuid":"286378494","full_name":"ralali/rematch-navigation-plugin","owner":"ralali","description":"rematch plugin for react-navigation 5","archived":false,"fork":false,"pushed_at":"2023-03-02T09:08:23.000Z","size":523,"stargazers_count":6,"open_issues_count":9,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-04T04:32:35.606Z","etag":null,"topics":["navigation","react-native","react-navigation","react-navigation-v5","redux","rematch","rematch-navigation","rematch-navigation-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"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/ralali.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":"2020-08-10T04:48:43.000Z","updated_at":"2023-05-19T18:03:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"3bed93ce-1364-4c6e-a61d-68d3e9849de0","html_url":"https://github.com/ralali/rematch-navigation-plugin","commit_stats":{"total_commits":9,"total_committers":3,"mean_commits":3.0,"dds":"0.33333333333333337","last_synced_commit":"db02854961c376a981939197a9024e4531baafef"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralali%2Frematch-navigation-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralali%2Frematch-navigation-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralali%2Frematch-navigation-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralali%2Frematch-navigation-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ralali","download_url":"https://codeload.github.com/ralali/rematch-navigation-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252897348,"owners_count":21821427,"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":["navigation","react-native","react-navigation","react-navigation-v5","redux","rematch","rematch-navigation","rematch-navigation-plugin"],"created_at":"2024-10-23T16:06:52.311Z","updated_at":"2025-05-07T14:41:20.656Z","avatar_url":"https://github.com/ralali.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @ralali/rematch-navigation-plugin\n[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://lbesson.mit-license.org/)\n\nReact Navigation 5 plugin for Rematch\n\n## Installation\n```sh\nyarn add @ralali/rematch-navigation-plugin\n\nor\n\nnpm i @ralali/rematch-navigation-plugin\n```\n\n## Peer Dependencies\n\n- react \u003e= 16.7.0-alpha\n- react native ( recommend \u003e= 0.55.0 )\n- @react-native-async-storage/async-storage\u003e=1.11.0\n- @react-navigation/native \u003e=5.0.0\n- @rematch/core \u003e= 1.0.0\n\n## Usage\n\n### `register`\n\nregister navigation ref in your root NavigationContainer\n\n```sh\nimport { register } from '@ralali/rematch-navigation-plugin';\nimport { NavigationContainer } from '@react-navigation/native';\n\nreturn (\n    \u003cNavigationContainer ref={register} /\u003e\n);\n```\n\n### `navigationPlugin`\n\n```sh\nimport { init } from '@rematch/core';\nimport { navigationPlugin } from '@ralali/rematch-navigation-plugin';\n\nconst store = init({\n  ...,\n  plugins: [navigationPlugin]\n});\n\nexport default store;\n```\n\nin your model\n\n```sh\n...,\neffects: (dispatch) =\u003e ({\n  exampleNavigate: async () =\u003e {\n      dispatch.nav.navigate('SomewhereScreen');\n  }\n});\n```\n\n### `navigationRef`\n\nif you want to access NavigationContainer ref, simply use\n\n```sh\nimport { navigationRef } from '@ralali/rematch-navigation-plugin';\nimport { CommonActions } from '@react-navigation/native';\n\nfunction navigateWithoutComponent() {\n    if (navigationRef) {\n        navigationRef.dispatch(\n            CommonActions.navigate({\n                name: 'HomeScreen',\n                params\n            })\n        );\n    }\n}\n```\n\n### `useExitHandler`\n\n| options \t| defaultValue                \t| ReturnType \t|\n|---------\t|-----------------------------\t|--------------\t|\n| duration \t| 1500    \t                    | number \t    |\n| message \t| Press once again to exit    \t| string \t    |\n| handler \t| () =\u003e BackHandler.exitApp() \t| void   \t    |\n\nwe already handle for android backPress on root stack if there is no screen left.\nUsually if there is screen left in stack navigator, when pressing backPress two times, application will exit\n\nsimply put this method in your Root Navigation component\n\n```sh\nimport { useExitHandler } from '@ralali/rematch-navigation-plugin'\n\n// without custom message\nuseExitHandler();\n\n// if you want to give custom message\nuseExitHandler({\n    message: 'Becareful, press once again will terminate this app'\n});\n\nreturn (\n    \u003cNavigationContainer\n    ...\n);\n```\n\nby default, we use `BackHandler.exitApp()` from `react-native` to handle application exit, hovewer use this function won't totally kill your application\n\nif you want to use another handler for making application totally killed, we suggest to use [react-native-exit-app](https://github.com/wumke/react-native-exit-app)\n\n```sh\nimport RNExitApp from 'react-native-exit-app';\n\nuseExitHandler({\n    message: 'Becareful, press once again will terminate this app',\n    handler: () =\u003e RNExitApp.exitApp()\n});\n```\n \n### `usePersistNav`\n\nThis feature is only active in development mode\n\n```sh\nimport { usePersistNav, register } from '@ralali/rematch-navigation-plugin';\n\nconst { initialState, setNavState, isNavReady } = usePersistNav();\n  \n/**\n * partial docs from https://reactnavigation.org/docs/state-persistence/\n *\n * Because the state is restored asynchronously\n * the app must render an empty/loading view for a moment before we have the initial state\n * to handle this, you can return a loading view when isNavReady is false:\n *\n */\nif (!isNavReady) {\n    return null;\n\n    or\n\n    return \u003cActivityIndicator /\u003e;\n}\n\nreturn (\n    \u003cNavigationContainer\n        ref={register}\n        initialState={initialState}\n        onStateChange={(state) =\u003e {\n            setNavState(state);\n        }}\n    \u003e\n    ...\n);\n```\n\n### `useScreenAnalytics`\n\nsince screen name on tab can duplicate, different with screne name on stack, this is a useful function to take `IdenticalRoute`\n\n| IdenticalRoute \t| Description                                                                                                                                                                                                                                         \t| ReturnType   \t|\n|----------------\t|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------\t|--------------\t|\n| resultName     \t| if the first slice routes type is tab, we will append the type into resultName\u003cbr\u003e\u003cbr\u003ereturning latest route name is not enough for us to identify screen activity\u003cbr\u003e\u003cbr\u003eexample:\u003cbr\u003e\u003cbr\u003ewith tab: [MainTab] - All\u003cbr\u003ewithout tab: CovidInfoScreen \t| string       \t|\n| closestRoute   \t| take the last 2 routes from NavigationState.routes                                                                                                                                                                                                  \t| ShortRoute[] \t|\n| routes         \t| return only name and type from NavigationState.routes                                                                                                                                                                                               \t| ShortRoute[] \t|\n\nexample usage\n\n```sh\nimport { useScreenAnalytics, navigationRef } from '@ralali/rematch-navigation-plugin';\nimport { setCurrentScreen } from 'your/helpers';\n\nconst { subscribeState, routeNameRef } = useScreenAnalytics((route) =\u003e {\n    const { resultName, closestRoute } = route;\n    \n    /**\n     * use your analytics function here\n    /*\n    setCurrentScreen(resultName);\n});\n\nreturn (\n    \u003cNavigationContainer\n        onReady={() =\u003e {\n            routeNameRef.current = navigationRef.getCurrentRoute().name;\n        }}\n        onStateChange={(state) =\u003e {\n            subscribeState();\n            setNavState(state);\n        }}\n    \u003e\n    ...\n);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralali%2Frematch-navigation-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fralali%2Frematch-navigation-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralali%2Frematch-navigation-plugin/lists"}