{"id":19706645,"url":"https://github.com/web-ridge/react-native-ridge-navigation","last_synced_at":"2026-07-03T18:01:12.032Z","repository":{"id":38425751,"uuid":"382152779","full_name":"web-ridge/react-native-ridge-navigation","owner":"web-ridge","description":"Simple, performant \u0026 type-safe cross platform navigation in React Native / React Native Web","archived":false,"fork":false,"pushed_at":"2026-04-11T14:13:00.000Z","size":225690,"stargazers_count":123,"open_issues_count":9,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-04-11T16:11:55.868Z","etag":null,"topics":["navigation","react","react-native","react-native-web","typescript"],"latest_commit_sha":null,"homepage":"https://www.reactnativeridgenavigation.com","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/web-ridge.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"custom":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=7B9KKQLXTEW9Q\u0026source=url"]}},"created_at":"2021-07-01T20:48:19.000Z","updated_at":"2026-04-11T14:13:04.000Z","dependencies_parsed_at":"2024-06-20T00:15:22.664Z","dependency_job_id":"53d405b9-2f0c-4b0f-aea7-15689a08b261","html_url":"https://github.com/web-ridge/react-native-ridge-navigation","commit_stats":null,"previous_names":[],"tags_count":130,"template":false,"template_full_name":null,"purl":"pkg:github/web-ridge/react-native-ridge-navigation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-ridge","download_url":"https://codeload.github.com/web-ridge/react-native-ridge-navigation/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-ridge%2Freact-native-ridge-navigation/sbom","scorecard":{"id":1245912,"data":{"date":"2026-04-06","repo":{"name":"github.com/web-ridge/react-native-ridge-navigation","commit":"aad8f9bb89c77e0e22a8f07143f8ed8fe3fc3b75"},"scorecard":{"version":"v5.4.1-0.20260330172548-76c3e11cee0b","commit":"76c3e11cee0b6c358ec6b328605537d2be0e8970"},"score":2.8,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/check-repro.yml:1","Warn: no topLevel permission defined: .github/workflows/ci.yml:1","Warn: no topLevel permission defined: .github/workflows/stale.yml:1","Warn: no topLevel permission defined: .github/workflows/triage.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#sast"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#license"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#binary-artifacts"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#branch-protection"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#fuzzing"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/check-repro.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/check-repro.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:72: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/ci.yml/main?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:79: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/ci.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/stale.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/triage.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/triage.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/triage.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/triage.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/triage.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/triage.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/triage.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/web-ridge/react-native-ridge-navigation/triage.yml/main?enable=pin","Info:   0 out of  10 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/76c3e11cee0b6c358ec6b328605537d2be0e8970/docs/checks.md#pinned-dependencies"}}]},"last_synced_at":"2026-04-11T16:16:51.333Z","repository_id":38425751,"created_at":"2026-04-11T16:16:51.333Z","updated_at":"2026-04-11T16:16:51.333Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35096012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-03T02:00:05.635Z","response_time":110,"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","typescript"],"created_at":"2024-11-11T21:36:26.131Z","updated_at":"2026-07-03T18:01:11.980Z","avatar_url":"https://github.com/web-ridge.png","language":"TypeScript","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=7B9KKQLXTEW9Q\u0026source=url"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/6492229/124349256-854c4680-dbee-11eb-84ca-fd410a4a0fcd.png\" width=\"128\"\u003e\n  \u003cbr\u003e\n  react-native-ridge-navigation\n\u003c/h1\u003e\n\nSimple and performant navigation on iOS, Android and the web with simple and type-safe api.\n\nBuild on top of [grahammendick/navigation](https://github.com/grahammendick/navigation). Check it out if you want more\ncontrol over the navigation!\n\n\n\n## Features\n\n- New architecture (Fabric) ready\n- Simple api\n- 100% Type safety (routes, params, bottom tabs)\n- Bundle splitting (lazy loading, smart prefetching)\n- Render as you fetch on iOS, Android \u0026 web\n- Works on Android, iOS \u0026 web!\n- Preload data on mouseDown (or more sensitive on hover, see `\u003cLink /\u003e` example)\n- Preload component on hover (on web)\n- Automatic deep-linking\n- Real-time light/dark mode\n- Out of the box scroll restoration (on web), because screens in tab are pushed on top of each other!\n- A lot of control over the web layout\n- Universal links (already works, but docs need work)\n- PWA documentation (already works, but docs need work)\n\n## Example\n\n[![Demo of react-native-ridge-navigation](https://drive.google.com/uc?id=1nE0DzlaVza_h3K1KCkPnK5NfIXfYM5c-)](https://www.youtube.com/watch?v=EvNxrRIF7C0)\nThis is an older video which used react-native-navigation so we have newer material you bottom bar in the meantime :)\nView video in better frame [on YouTube](https://www.youtube.com/watch?v=EvNxrRIF7C0)\n\n## About us\n\nWe want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native.\n\nGive us a follow on Twitter:\n[RichardLindhout](https://twitter.com/RichardLindhout),\n[web_ridge](https://twitter.com/web_ridge)\n\n### Demo\n\n[See example: reactnativeridgenavigation.com](https://www.reactnativeridgenavigation.com/)\n\n### Source\n\n[See source of example app](https://github.com/web-ridge/react-native-ridge-navigation/tree/main/example)\n\n### Register screens\n\nYou can register screens with a preload function, the params will be automatically in string format based on the url.\n\n```tsx\n// NavigatorRoutes.ts\nconst PostScreen = registerScreen(\n  '/post/:id',\n  lazy(() =\u003e import('./PostScreen'),\n  ({ id }) =\u003e {\n    queryClient.prefetchQuery(\n      queryKeyPostScreen({ id }),\n      queryKeyPostScreenPromise({ id }),\n      { staleTime: 3000 }\n    );\n\n    // if you return something here it can be used in the screen itself or somewhere else with\n    // usePreloadResult(routes.PostScreen)\n    // in this case react-query handles it based on queryKey so it's not needed but with Relay.dev it is.\n    // you can put the result of the usePreloadResult in your usePreloadedQuery if you use Relay.dev\n\n  }\n);\n\nconst routes = {\n  PostScreen,\n  // ...\n}\nexport default routes\n```\n\n## Supported stacks\n\n- normal\n- bottomTabs\n\nevery screen can be used within every stack. You don't have to configure screens for a stack.\n\n## Installation\n\n#### 1. If you don't have an app yet (optional, but recommended)\n\nUse Expo with prebuild (Expo Go is not supported since we have native libraries)\n\n#### 2. Install deps + library\n\n```\nyarn add react-native-ridge-navigation navigation-react-native\n```\n\nor with npm\n\n```\nnpm install react-native-ridge-navigation navigation-react-native\n```\n\n\nSupport for Material You bottom bar in Android\n\n#### 1. add file `expo-plugin-android-material-you-bottom-bar.js` to your root folder\n\n```js\nconst { withAndroidStyles } = require(\"@expo/config-plugins\");\n\nmodule.exports = function androidMaterialYouBottomBarPlugin(config) {\n  return withAndroidStyles(config, async (config) =\u003e {\n    const styleFile = config.modResults;\n    const appTheme = styleFile.resources.style.find(\n      (style) =\u003e style.$.name === 'AppTheme',\n    );\n    appTheme.$.parent = 'Theme.Material3.DayNight.NoActionBar';\n\n    return config;\n  });\n};\n```\n\n#### 2. add this to your expo config app.config.js or app.json\n\n```json\n\"plugins\": [\n\"./expo-plugin-android-material-you-bottom-bar\"\n]\n```\n\n## Usage\n\n```tsx\nimport {\n  createNormalRoot,\n  createNavigation,\n  createBottomTabsRoot,\n  createScreens,\n  defaultTheme,\n} from 'react-native-ridge-navigation';\n\nexport const NavigationRoots = {\n  RootHome: 'home',\n  RootAuth: 'auth',\n};\n\n// svg to png\n// https://webkul.github.io/myscale/\n//\n// tab icon\n// http://nsimage.brosteins.com/Home\nexport const BottomRoots = {\n  Posts: {\n    path: '/post',\n    title: () =\u003e 'Posts',\n    icon: require('./img/palette-swatch-outline/icon-20.png'),\n    selectedIcon: require('./img/palette-swatch/icon-20.png'),\n    child: routes.PostsScreen,\n  },\n  Account: {\n    path: '/account',\n    title: () =\u003e 'Account',\n    icon: require('./img/account-circle-outline/icon-20.png'),\n    selectedIcon: require('./img/account-circle/icon-20.png'),\n    child: routes.AccountScreen,\n  },\n};\n\n```\n\n```tsx\n// App.tsx\nimport * as React from 'react';\nimport { SafeAreaProvider } from 'react-native-safe-area-context';\nimport AsyncBoundary from './helpers/AsyncBoundary';\nimport {\n  createBottomTabsRoot,\n  createNormalRoot,\n  NavigationProvider,\n} from 'react-native-ridge-navigation';\n\nimport { BottomRoot, NavigationRoots, screens } from './Navigator';\nimport routes from './Routes';\nimport AsyncBoundaryScreen from './helpers/AsyncBoundaryScreen';\n\nconst navigationRoot = {\n  [NavigationRoots.RootHome]: createBottomTabsRoot(\n    [BottomRoot.Home, BottomRoot.Posts, BottomRoot.Account],\n    {\n      breakingPointWidth: 500,\n      components: {\n        override: HeaderWeb,\n      },\n    }\n  ),\n  [NavigationRoots.RootAuth]: createNormalRoot(routes.AuthScreen),\n};\n\nexport default function App() {\n  return (\n    \u003cSafeAreaProvider\u003e\n      \u003cNavigationProvider\n        screens={screens}\n        SuspenseContainer={AsyncBoundaryScreen}\n        navigationRoot={navigationRoot}\n      /\u003e\n    \u003c/SafeAreaProvider\u003e\n  );\n}\n\n```\n\nSee example code for the asyncboundary stuff :)\n\n## New screen\n\nUse the `\u003cLink /\u003e` component as much as possible since it will work with ctrl+click on the web :)\n\n```tsx\n\u003cLink\n  to={routes.PostScreen}\n  params={{ id: `${item.id}` }}\n  // linkMode=\"default\" // optional if sensitive the preload will be called on hover instead of mouseDown\n\u003e\n  {(linkProps) =\u003e (\n    \u003cPressable  {...linkProps}\u003e // or other touchables/buttons\n      \u003cText\u003ego to post\u003c/Text\u003e\n    \u003c/Pressable\u003e\n  )}\n\u003c/Link\u003e\n\n\n\n```\n\n## createLinkComponent\n\nUse the `createLinkComponent` component to create re-usable links without render props. E.g to create a linkable button\nfor react-native-paper\n\n```tsx\n//ButtonLink.tsx\nimport { Button } from 'react-native-paper';\nimport { createLinkComponent } from 'react-native-ridge-navigation';\n\nconst ButtonLink = createLinkComponent(Button);\nexport default ButtonLink;\n```\n\n```tsx\n\u003cButtonLink\n  to={routes.PostScreen}\n  params={{ id: '2' }}\n  mode=\"contained\"\n  // all optional RNP props\n  // all optional Link props\n\u003e\n  Go further\n\u003c/ButtonLink\u003e\n```\n\nAlternatives (push, replace, refresh or fluent)\n\n```tsx\nconst { push, replace, refresh, fluent } = useNavigation();\n\n// call this where if you can't use \u003cLink /\u003e\npush(routes.PostScreen, {\n  id: `${item.id}`\n});\n\n// call this if e.g. after a create you want to go to edit screen\n// but without pushing history to the url-stack or app-stack :)\nreplace(routes.PostScreen, {\n  id: `${item.id}`\n});\n\n// call this if you want to refresh the screen with new params\nrefresh(routes.PostScreen, {\n  id: `${item.id}`\n});\n\n// normal root, replace full history\nfluent(\n  fluentRootNormal(NavigationRoots.RootAuth),\n  fluentScreen(Routes.HomeScreen, {}),\n  fluentScreen(Routes.PostScreen, { id: '10' }),\n  fluentScreen(Routes.PostScreen, { id: '20' }),\n  fluentScreen(Routes.PostScreen, { id: '30' })\n);\n\n// bottom root, replace full history\nfluent(\n  fluentRootBottomTabs(NavigationRoots.RootHome, BottomRoot.Account),\n  fluentScreen(Routes.HomeScreen, {}),\n  fluentScreen(Routes.PostScreen, { id: '10' }),\n  fluentScreen(Routes.PostScreen, { id: '20' }),\n  fluentScreen(Routes.PostScreen, { id: '30' })\n);\n```\n\n## Switch root\n\nSwitch root can be used to switch from e.g. the auth screen to a different entrypoint of your app. E.g. check the role\nand switch the stacks to different roots for different user roles.\n\n```tsx\n\u003cSwitchRoot rootKey={NavigationRoots.RootHome} params={{}} /\u003e;\n// or e.g.\n\u003cSwitchRoot rootKey={NavigationRoots.RootAuth} params={{}} /\u003e;\n```\n\n## useNavigation\n\nAll available properties\n\n```tsx\nconst {\n  pop, // go back\n  switchRoot,\n  preload, // call preload (done automatic on link mouseDown\n  push, // calls preload + pushes screen\n  replace, // calls preload + replaces screen\n  refresh, // calls preload + replaces params of screen\n} = useNavigation()\n```\n\n## Control bottom tabs\n\n```tsx\n  const { switchToTab, currentTab } = useBottomTabIndex();\nconst { updateBadge, badges } = useBottomTabBadges();\n// updateBadge(BottomRoots.Projects, '10');\n// switchToTab(BottomRoot.Posts);\n```\n\n## Modal stack\n\nIf you want a nested stack e.g. in a modal, check out\nthe [example code](https://github.com/web-ridge/react-native-ridge-navigation/blob/main/example/src/Account/AccountScreen.tsx)\n.\n\n```tsx\nimport {\n  NavigationNestedProvider,\n  ModalBackHandler,\n} from 'react-native-ridge-navigation';\n\n\u003cModalBackHandler\u003e\n  {(handleBack) =\u003e (\n    \u003cModal\n      visible={modalVisible}\n      style={{ backgroundColor: theme.colors.background }}\n      statusBarTranslucent={true}\n      presentationStyle=\"pageSheet\"\n      animationType=\"slide\"\n      onRequestClose={() =\u003e {\n        if (!handleBack()) setModalVisible(false);\n      }}\n    \u003e\n      \u003cNavigationNestedProvider\u003e\n        {/* you can render your children here and push to all registered screens*/}\n        \u003cView style={{ height: 250, backgroundColor: 'pink' }}\u003e\n          \u003cHeader title=\"Modal stack\" /\u003e\n          \u003cButton onPress={onClose}\u003eClose modal\u003c/Button\u003e\n          \u003cLink to={routes.PostScreen} params={{ id: '2' }}\u003e\n            {(linkProps) =\u003e \u003cButton {...linkProps}\u003eAccount\u003c/Button\u003e}\n          \u003c/Link\u003e\n        \u003c/View\u003e\n      \u003c/NavigationNestedProvider\u003e\n    \u003c/Modal\u003e\n  )}\n\u003c/ModalBackHandler\u003e\n```\n\n## Deep linking\n\nYou have to enable url schemes etc in your app and it'll work!\n\nIf you want to deep link into a bottom tab or other screen you can use the fluent navigation in development mode and it will log the required url to go to the right screen :)\n\n## More\n\n```ts\n  // global\n  createLinkComponent,\n  SwitchRoot,\n  BottomTabLink,\n  Link\n  BackLink // for now .pop() but we'll update this according to Android guidelines later on (to always go back in hierarchy)\n  lazyWithPreload // only available on the web: see example app\n  Redirect,\n  StatusBar,\n  FocusAwareStatusBar,\n  NavigationRoot,\n  createNavigation,\n  createBottomTabsRoot,\n  createNormalRoot,\n  registerScreen,\n  createScreens,\n  defaultTheme,\n  setTheme,\n  getTheme,\n  createSimpleTheme,\n  setPreloadResult, // should not need this as it is done automatically\n\n  // common hooks\n  useParams,\n  useNavigation,\n\n\n  // extra\n  useBottomTabIndex,\n  useBottomTabBadges,\n  useBottomTabRefresh,\n  useTheme,\n  useIsFocused,\n  useFocus,// same as useNavigating\n  useNavigating,\n  useNavigated,\n  useUnloaded,\n  usePreloadResult // e.g. usePreloadResult(routes.PostScreen)\n```\n\n## Do global stuff like updating badge\n\nIf you want to use a component globally with the navigation context pass them as children of the NavigationProvider\n\n```tsx\n\u003cNavigationProvider {...}\u003e\n  \u003cUpdateBottomTabBadgeSubscriber /\u003e\n\u003c/NavigationProvider\u003e\n```\n\n# Scroll fix on web version\n\nOn the web version we need to disable window scroll since else it will sometimes use windows scroll instead of the\nscrollview Add this to your css\n\n```css\nbody {\n  overflow: hidden;\n}\n```\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n### Checkout our other libraries\n\n- Simple form library for React Native with great UX for developer and\n  end-user [react-native-use-form](https://github.com/web-ridge/react-native-use-form)\n- Smooth and fast cross platform Material Design date and time picker for React Native\n  Paper: [react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)\n- Smooth and fast cross platform Material Design Tabs for React Native\n  Paper: [react-native-paper-tabs](https://github.com/web-ridge/react-native-paper-tabs)\n\n- Simple translations in React (\n  Native): [react-ridge-translations](https://github.com/web-ridge/react-ridge-translations)\n- Simple global state management in React (Native): [react-ridge-state](https://github.com/web-ridge/react-ridge-state)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-ridge%2Freact-native-ridge-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-ridge%2Freact-native-ridge-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-ridge%2Freact-native-ridge-navigation/lists"}