{"id":13452558,"url":"https://github.com/react-navigation/hooks","last_synced_at":"2025-12-15T22:09:56.891Z","repository":{"id":33221158,"uuid":"155343362","full_name":"react-navigation/hooks","owner":"react-navigation","description":"React hooks for convenient react-navigation use","archived":true,"fork":false,"pushed_at":"2022-12-03T03:20:30.000Z","size":1217,"stargazers_count":575,"open_issues_count":24,"forks_count":36,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-04-14T08:30:45.342Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://reactnavigation.org","language":"TypeScript","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/react-navigation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-30T07:35:55.000Z","updated_at":"2024-04-05T15:16:31.000Z","dependencies_parsed_at":"2023-01-14T23:57:44.155Z","dependency_job_id":null,"html_url":"https://github.com/react-navigation/hooks","commit_stats":null,"previous_names":["react-navigation/react-navigation-hooks"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-navigation%2Fhooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-navigation%2Fhooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-navigation%2Fhooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-navigation%2Fhooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-navigation","download_url":"https://codeload.github.com/react-navigation/hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221529496,"owners_count":16838413,"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-07-31T07:01:27.493Z","updated_at":"2025-12-15T22:09:56.835Z","avatar_url":"https://github.com/react-navigation.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React Navigation Hooks (v3/v4 only)\n\n[![npm version](https://badge.fury.io/js/react-navigation-hooks.svg)](https://badge.fury.io/js/react-navigation-hooks) [![npm downloads](https://img.shields.io/npm/dm/react-navigation-hooks.svg)](https://www.npmjs.com/package/react-navigation-hooks) [![CircleCI badge](https://circleci.com/gh/react-navigation/hooks/tree/master.svg?style=shield)](https://circleci.com/gh/react-navigation/hooks/tree/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactnavigation.org/docs/contributing.html)\n\n🏄‍♀️ Surfing the wave of React Hook hype with a few convenience hooks for `@react-navigation/core` v3/v4. Destined to work on web, server, and React Native. Contributions welcome!\n\n## Only for react-navigation v3 / v4 (not v5)\n\n[react-navigation v5](https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0.html) is officially released as stable, and includes similar, but rewritten hooks (it should be easy to upgrade from v4 to v5). \n\nIf you use react-navigation v5, you should import hooks from react-navigation v5 directly, and should not add this project.\n\n\n## Docs\n\n`yarn add react-navigation-hooks`\n\n`import { useNavigation, useNavigationParam, ... } from 'react-navigation-hooks'`\n\n### useNavigation()\n\nThis is the main convenience hook. It provides the regular navigation prop, as you'd get via the screen prop or by using `withNavigation`.\n\nYou can use the navigate functionality anywhere in your app:\n\n```js\nfunction MyLinkButton() {\n  // be careful to never call useNavigation in the press callback. Call hooks directly from the render function!\n  const { navigate } = useNavigation();\n  return (\n    \u003cButton\n      onPress={() =\u003e {\n        navigate('Home');\n      }}\n      title=\"Go Home\"\n    /\u003e\n  );\n}\n```\n\n### useNavigationParam(paramName)\n\nAccess a param for the current navigation state\n\n```js\nfunction MyScreen() {\n  const name = useNavigationParam('name');\n  return \u003cp\u003ename is {name}\u003c/p\u003e;\n}\n```\n\nLiterally the same as `useNavigation().getParam(paramName)`\n\n### useNavigationState()\n\nAccess the navigation state of the current route, or if you're in a navigator view, access the navigation state of your sub-tree.\n\n```js\nfunction MyScreen() {\n  const { routeName } = useNavigationState();\n  return \u003cp\u003eMy route name is {routeName}\u003c/p\u003e;\n}\n```\n\nLiterally the same as `useNavigation().state`\n\n### useNavigationKey()\n\nConvenient way to access the key of the current route.\n\nLiterally the same as `useNavigationState().key`\n\n### useNavigationEvents(handler)\n\nSubscribe to navigation events in the current route context.\n\n```js\nfunction ReportNavigationEvents() {\n  const [events, setEvents] = useState([]);\n  useNavigationEvents(evt =\u003e {\n    // latest state on evt.state\n    // prev state on evt.lastState\n    // triggering navigation action on evt.action\n\n    setEvents(events =\u003e [...events, evt]);\n  });\n  // evt.type is [will/did][Focus/Blur]\n  return (\n    \u003c\u003e\n      {events.map(evt =\u003e (\n        \u003cp\u003e{evt.type}\u003c/p\u003e\n      ))}\n    \u003c/\u003e\n  );\n}\n```\n\nThe event payload will be the same as provided by `addListener`, as documented here: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle\n\n### useIsFocused()\n\nConvenient way to know if the screen currently has focus.\n\n```js\nfunction MyScreen() {\n  const isFocused = useIsFocused();\n  return \u003cText\u003e{isFocused ? 'Focused' : 'Not Focused'}\u003c/Text\u003e;\n}\n```\n\n### useFocusEffect(callback)\n\nPermit to execute an effect when the screen takes focus, and cleanup the effect when the screen loses focus.\n\n```js\nfunction MyScreen() {\n  useFocusEffect(useCallback(() =\u003e {\n    console.debug(\"screen takes focus\");\n    return () =\u003e console.debug(\"screen loses focus\");\n  }, []));\n  return \u003cView\u003e...\u003c/View\u003e;\n}\n```\n\n**NOTE**: To avoid the running the effect too often, it's important to wrap the callback in useCallback before passing it to `useFocusEffect` as shown in the example. The effect will re-execute everytime the callback changes if the screen is focused.\n\n`useFocusEffect` can be helpful to refetch some screen data on params changes:\n\n```js\nfunction Profile({ userId }) {\n  const [user, setUser] = useState(null);\n\n  const fetchUser = useCallback(() =\u003e {\n    const request = API.fetchUser(userId).then(\n      data =\u003e setUser(data),\n      error =\u003e alert(error.message)\n    );\n\n    return () =\u003e request.abort();\n  }, [userId]);\n\n  useFocusEffect(fetchUser);\n\n  return \u003cProfileContent user={user} /\u003e;\n}\n```\n\n\n`useFocusEffect` can be helpful to handle hardware back behavior on currently focused screen:\n\n```js \nconst useBackHandler = (backHandler: () =\u003e boolean) =\u003e {\n  useFocusEffect(() =\u003e {\n    const subscription = BackHandler.addEventListener('hardwareBackPress', backHandler);\n    return () =\u003e subscription.remove();\n  });\n};\n```\n\n\n\n\n### useFocusState()\n\n**deprecated**: this hook does not exist in v5, you should rather use `useIsFocused`\n\n\nConvenient way of subscribing to events and observing focus state of the current screen.\n\n```js\nfunction MyScreen() {\n  const focusState = useFocusState();\n  return \u003cText\u003e{focusState.isFocused ? 'Focused' : 'Not Focused'}\u003c/Text\u003e;\n}\n```\n\nOne (always, and only one) of the following values will be true in the focus state:\n\n- isFocused\n- isBlurring\n- isBlurred\n- isFocusing\n\n## Web example\n\nSee an example web app which uses react-navigation and hooks on the client and the server:\n\nhttps://github.com/react-navigation/web-server-example\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-navigation%2Fhooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-navigation%2Fhooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-navigation%2Fhooks/lists"}