From 9b23fc41f088a7799d930675b9896a78483b7385 Mon Sep 17 00:00:00 2001 From: satya164 Date: Sun, 22 Oct 2023 22:36:00 +0000 Subject: [PATCH] Deploy website - based on eeb0d4e00528df8ded02ac9cbae37423d728aaf6 --- 404.html | 8 ++++---- assets/js/0334870a.22c9fef4.js | 1 + assets/js/0334870a.e7265d90.js | 1 - assets/js/0bcf026f.0e9a77e1.js | 1 + assets/js/0bcf026f.e3ee708f.js | 1 - assets/js/1233d971.39be567d.js | 1 - assets/js/1233d971.5aa324d4.js | 1 + assets/js/14acaad8.4a65e21f.js | 1 - assets/js/14acaad8.c88ef513.js | 1 + assets/js/1c2eab2d.91da7eb3.js | 1 + assets/js/1c2eab2d.a5c2ad45.js | 1 - assets/js/20989594.093a5d51.js | 1 + assets/js/20989594.abe7fd79.js | 1 - assets/js/220adfdd.7669851c.js | 1 - assets/js/220adfdd.f878b33e.js | 1 + assets/js/2a1e22c6.69202de4.js | 1 - assets/js/2a1e22c6.84f53c4c.js | 1 + assets/js/{a5a8f997.88b6e79a.js => a5a8f997.e7e66dad.js} | 2 +- assets/js/{c259c03a.8cbe6337.js => c259c03a.eb9339fc.js} | 2 +- assets/js/{c2c0d6a0.31ef28bc.js => c2c0d6a0.f10a5e52.js} | 2 +- assets/js/main.391f3efc.js | 2 ++ ...892635.js.LICENSE.txt => main.391f3efc.js.LICENSE.txt} | 0 assets/js/main.e8892635.js | 2 -- ...{runtime~main.9ae08191.js => runtime~main.49dbaf9f.js} | 2 +- blog/2018/02/06/react-navigation-1.0/index.html | 8 ++++---- blog/2018/04/06/react-navigation-2.0-rc/index.html | 8 ++++---- blog/2018/05/07/react-navigation-2.0/index.html | 8 ++++---- blog/2018/11/01/react-navigation-3.0-rc/index.html | 8 ++++---- blog/2018/11/17/react-navigation-3.0/index.html | 8 ++++---- blog/2019/09/16/react-navigation-4.0/index.html | 8 ++++---- blog/2019/10/17/react-navigation-native/index.html | 8 ++++---- .../04/using-react-navigation-5-with-ui-kitten/index.html | 8 ++++---- .../index.html | 8 ++++---- blog/2020/02/06/react-navigation-5.0/index.html | 8 ++++---- blog/2020/05/16/web-support/index.html | 8 ++++---- blog/2020/05/19/joining-github-sponsors/index.html | 8 ++++---- blog/2021/03/12/react-navigation-6.0-next/index.html | 8 ++++---- blog/2021/08/14/react-navigation-6.0/index.html | 8 ++++---- blog/archive/index.html | 8 ++++---- blog/index.html | 8 ++++---- blog/page/2/index.html | 8 ++++---- blog/tags/announcement/index.html | 8 ++++---- blog/tags/announcement/page/2/index.html | 8 ++++---- blog/tags/index.html | 8 ++++---- blog/tags/react-native-paper/index.html | 8 ++++---- blog/tags/release/index.html | 8 ++++---- blog/tags/tutorial/index.html | 8 ++++---- blog/tags/ui-kitten/index.html | 8 ++++---- blog/tags/web/index.html | 8 ++++---- docs/1.x/alternatives/index.html | 8 ++++---- docs/1.x/api-reference/index.html | 8 ++++---- docs/1.x/auth-flow/index.html | 8 ++++---- docs/1.x/connecting-navigation-prop/index.html | 8 ++++---- docs/1.x/contributing/index.html | 8 ++++---- docs/1.x/custom-android-back-button-handling/index.html | 8 ++++---- docs/1.x/custom-navigator-overview/index.html | 8 ++++---- docs/1.x/custom-navigators/index.html | 8 ++++---- docs/1.x/custom-routers/index.html | 8 ++++---- docs/1.x/customize-styles/index.html | 8 ++++---- docs/1.x/deep-linking/index.html | 8 ++++---- docs/1.x/drawer-based-navigation/index.html | 8 ++++---- docs/1.x/drawer-navigator/index.html | 8 ++++---- docs/1.x/getting-started/index.html | 8 ++++---- docs/1.x/glossary-of-terms/index.html | 8 ++++---- docs/1.x/handling-iphonex/index.html | 8 ++++---- docs/1.x/header-buttons/index.html | 8 ++++---- docs/1.x/headers/index.html | 8 ++++---- docs/1.x/hello-react-navigation/index.html | 8 ++++---- docs/1.x/listen-lifecycle-events/index.html | 8 ++++---- docs/1.x/modal/index.html | 8 ++++---- docs/1.x/navigating-without-navigation-prop/index.html | 8 ++++---- docs/1.x/navigating/index.html | 8 ++++---- docs/1.x/navigation-actions/index.html | 8 ++++---- docs/1.x/navigation-options/index.html | 8 ++++---- docs/1.x/navigation-prop/index.html | 8 ++++---- docs/1.x/navigation-views/index.html | 8 ++++---- docs/1.x/next-steps/index.html | 8 ++++---- docs/1.x/params/index.html | 8 ++++---- docs/1.x/partial-overlay/index.html | 8 ++++---- docs/1.x/pitch/index.html | 8 ++++---- docs/1.x/redux-integration/index.html | 8 ++++---- docs/1.x/routers/index.html | 8 ++++---- docs/1.x/screen-tracking/index.html | 8 ++++---- docs/1.x/set-params-on-back/index.html | 8 ++++---- docs/1.x/stack-navigator/index.html | 8 ++++---- docs/1.x/status-bar/index.html | 8 ++++---- docs/1.x/supported-react-native-versions/index.html | 8 ++++---- docs/1.x/switch-navigator/index.html | 8 ++++---- docs/1.x/tab-based-navigation/index.html | 8 ++++---- docs/1.x/tab-navigator/index.html | 8 ++++---- docs/1.x/transitioner/index.html | 8 ++++---- docs/1.x/with-navigation-focus/index.html | 8 ++++---- docs/1.x/with-navigation/index.html | 8 ++++---- docs/2.x/alternatives/index.html | 8 ++++---- docs/2.x/api-reference/index.html | 8 ++++---- docs/2.x/app-containers/index.html | 8 ++++---- docs/2.x/auth-flow/index.html | 8 ++++---- docs/2.x/bottom-tab-navigator/index.html | 8 ++++---- docs/2.x/common-mistakes/index.html | 8 ++++---- docs/2.x/community-libraries-and-navigators/index.html | 8 ++++---- docs/2.x/connecting-navigation-prop/index.html | 8 ++++---- docs/2.x/contributing/index.html | 8 ++++---- docs/2.x/custom-android-back-button-handling/index.html | 8 ++++---- docs/2.x/custom-navigator-overview/index.html | 8 ++++---- docs/2.x/custom-navigators/index.html | 8 ++++---- docs/2.x/custom-routers/index.html | 8 ++++---- docs/2.x/deep-linking/index.html | 8 ++++---- docs/2.x/drawer-actions/index.html | 8 ++++---- docs/2.x/drawer-based-navigation/index.html | 8 ++++---- docs/2.x/drawer-navigator/index.html | 8 ++++---- docs/2.x/getting-started/index.html | 8 ++++---- docs/2.x/glossary-of-terms/index.html | 8 ++++---- docs/2.x/handling-iphonex/index.html | 8 ++++---- docs/2.x/header-buttons/index.html | 8 ++++---- docs/2.x/headers/index.html | 8 ++++---- docs/2.x/hello-react-navigation/index.html | 8 ++++---- docs/2.x/limitations/index.html | 8 ++++---- docs/2.x/material-bottom-tab-navigator/index.html | 8 ++++---- docs/2.x/material-top-tab-navigator/index.html | 8 ++++---- docs/2.x/modal/index.html | 8 ++++---- docs/2.x/more-resources/index.html | 8 ++++---- docs/2.x/navigating-without-navigation-prop/index.html | 8 ++++---- docs/2.x/navigating/index.html | 8 ++++---- docs/2.x/navigation-actions/index.html | 8 ++++---- docs/2.x/navigation-context/index.html | 8 ++++---- docs/2.x/navigation-events/index.html | 8 ++++---- docs/2.x/navigation-key/index.html | 8 ++++---- docs/2.x/navigation-lifecycle/index.html | 8 ++++---- docs/2.x/navigation-options-resolution/index.html | 8 ++++---- docs/2.x/navigation-prop/index.html | 8 ++++---- docs/2.x/navigation-views/index.html | 8 ++++---- docs/2.x/next-steps/index.html | 8 ++++---- docs/2.x/params/index.html | 8 ++++---- docs/2.x/pitch/index.html | 8 ++++---- docs/2.x/react-native-screens/index.html | 8 ++++---- docs/2.x/redux-integration/index.html | 8 ++++---- docs/2.x/routers/index.html | 8 ++++---- docs/2.x/screen-tracking/index.html | 8 ++++---- docs/2.x/stack-actions/index.html | 8 ++++---- docs/2.x/stack-navigator/index.html | 8 ++++---- docs/2.x/state-persistence/index.html | 8 ++++---- docs/2.x/status-bar/index.html | 8 ++++---- docs/2.x/supported-react-native-versions/index.html | 8 ++++---- docs/2.x/switch-navigator/index.html | 8 ++++---- docs/2.x/tab-based-navigation/index.html | 8 ++++---- docs/2.x/tab-navigator/index.html | 8 ++++---- docs/2.x/transitioner/index.html | 8 ++++---- docs/2.x/with-navigation-focus/index.html | 8 ++++---- docs/2.x/with-navigation/index.html | 8 ++++---- docs/3.x/MST-integration/index.html | 8 ++++---- docs/3.x/alternatives/index.html | 8 ++++---- docs/3.x/animated-switch-navigator/index.html | 8 ++++---- docs/3.x/app-containers/index.html | 8 ++++---- docs/3.x/auth-flow/index.html | 8 ++++---- docs/3.x/bottom-tab-navigator/index.html | 8 ++++---- docs/3.x/common-mistakes/index.html | 8 ++++---- docs/3.x/community-libraries-and-navigators/index.html | 8 ++++---- docs/3.x/connecting-navigation-prop/index.html | 8 ++++---- docs/3.x/contributing/index.html | 8 ++++---- docs/3.x/custom-android-back-button-handling/index.html | 8 ++++---- docs/3.x/custom-navigator-overview/index.html | 8 ++++---- docs/3.x/custom-navigators/index.html | 8 ++++---- docs/3.x/custom-routers/index.html | 8 ++++---- docs/3.x/deep-linking/index.html | 8 ++++---- docs/3.x/drawer-actions/index.html | 8 ++++---- docs/3.x/drawer-based-navigation/index.html | 8 ++++---- docs/3.x/drawer-navigator/index.html | 8 ++++---- docs/3.x/function-after-focusing-screen/index.html | 8 ++++---- docs/3.x/getting-started/index.html | 8 ++++---- docs/3.x/glossary-of-terms/index.html | 8 ++++---- docs/3.x/handling-iphonex/index.html | 8 ++++---- docs/3.x/header-buttons/index.html | 8 ++++---- docs/3.x/headers/index.html | 8 ++++---- docs/3.x/hello-react-navigation/index.html | 8 ++++---- docs/3.x/limitations/index.html | 8 ++++---- docs/3.x/localization/index.html | 8 ++++---- docs/3.x/material-bottom-tab-navigator/index.html | 8 ++++---- docs/3.x/material-top-tab-navigator/index.html | 8 ++++---- docs/3.x/modal/index.html | 8 ++++---- docs/3.x/more-resources/index.html | 8 ++++---- docs/3.x/navigating-without-navigation-prop/index.html | 8 ++++---- docs/3.x/navigating/index.html | 8 ++++---- docs/3.x/navigation-actions/index.html | 8 ++++---- docs/3.x/navigation-context/index.html | 8 ++++---- docs/3.x/navigation-events/index.html | 8 ++++---- docs/3.x/navigation-key/index.html | 8 ++++---- docs/3.x/navigation-lifecycle/index.html | 8 ++++---- docs/3.x/navigation-options-resolution/index.html | 8 ++++---- docs/3.x/navigation-prop/index.html | 8 ++++---- docs/3.x/navigation-views/index.html | 8 ++++---- docs/3.x/next-steps/index.html | 8 ++++---- docs/3.x/params/index.html | 8 ++++---- docs/3.x/pitch/index.html | 8 ++++---- docs/3.x/react-native-screens/index.html | 8 ++++---- docs/3.x/redux-integration/index.html | 8 ++++---- docs/3.x/routers/index.html | 8 ++++---- docs/3.x/screen-tracking/index.html | 8 ++++---- docs/3.x/scrollables/index.html | 8 ++++---- docs/3.x/stack-actions/index.html | 8 ++++---- docs/3.x/stack-navigator/index.html | 8 ++++---- docs/3.x/state-persistence/index.html | 8 ++++---- docs/3.x/status-bar/index.html | 8 ++++---- docs/3.x/supported-react-native-versions/index.html | 8 ++++---- docs/3.x/switch-actions/index.html | 8 ++++---- docs/3.x/switch-navigator/index.html | 8 ++++---- docs/3.x/tab-based-navigation/index.html | 8 ++++---- docs/3.x/tab-navigator/index.html | 8 ++++---- docs/3.x/themes/index.html | 8 ++++---- docs/3.x/transitioner/index.html | 8 ++++---- docs/3.x/web-support/index.html | 8 ++++---- docs/3.x/with-navigation-focus/index.html | 8 ++++---- docs/3.x/with-navigation/index.html | 8 ++++---- docs/4.x/MST-integration/index.html | 8 ++++---- docs/4.x/alternatives/index.html | 8 ++++---- docs/4.x/animated-switch-navigator/index.html | 8 ++++---- docs/4.x/app-containers/index.html | 8 ++++---- docs/4.x/auth-flow/index.html | 8 ++++---- docs/4.x/bottom-tab-navigator/index.html | 8 ++++---- docs/4.x/common-mistakes/index.html | 8 ++++---- docs/4.x/community-libraries-and-navigators/index.html | 8 ++++---- docs/4.x/connecting-navigation-prop/index.html | 8 ++++---- docs/4.x/contributing/index.html | 8 ++++---- docs/4.x/custom-android-back-button-handling/index.html | 8 ++++---- docs/4.x/custom-navigator-overview/index.html | 8 ++++---- docs/4.x/custom-navigators/index.html | 8 ++++---- docs/4.x/custom-routers/index.html | 8 ++++---- docs/4.x/deep-linking/index.html | 8 ++++---- docs/4.x/drawer-actions/index.html | 8 ++++---- docs/4.x/drawer-based-navigation/index.html | 8 ++++---- docs/4.x/drawer-navigator/index.html | 8 ++++---- docs/4.x/function-after-focusing-screen/index.html | 8 ++++---- docs/4.x/getting-started/index.html | 8 ++++---- docs/4.x/glossary-of-terms/index.html | 8 ++++---- docs/4.x/handling-iphonex/index.html | 8 ++++---- docs/4.x/header-buttons/index.html | 8 ++++---- docs/4.x/headers/index.html | 8 ++++---- docs/4.x/hello-react-navigation/index.html | 8 ++++---- docs/4.x/limitations/index.html | 8 ++++---- docs/4.x/localization/index.html | 8 ++++---- docs/4.x/material-bottom-tab-navigator/index.html | 8 ++++---- docs/4.x/material-top-tab-navigator/index.html | 8 ++++---- docs/4.x/modal/index.html | 8 ++++---- docs/4.x/more-resources/index.html | 8 ++++---- docs/4.x/navigating-without-navigation-prop/index.html | 8 ++++---- docs/4.x/navigating/index.html | 8 ++++---- docs/4.x/navigation-actions/index.html | 8 ++++---- docs/4.x/navigation-context/index.html | 8 ++++---- docs/4.x/navigation-events/index.html | 8 ++++---- docs/4.x/navigation-key/index.html | 8 ++++---- docs/4.x/navigation-lifecycle/index.html | 8 ++++---- docs/4.x/navigation-options-resolution/index.html | 8 ++++---- docs/4.x/navigation-prop/index.html | 8 ++++---- docs/4.x/navigation-views/index.html | 8 ++++---- docs/4.x/next-steps/index.html | 8 ++++---- docs/4.x/params/index.html | 8 ++++---- docs/4.x/pitch/index.html | 8 ++++---- docs/4.x/react-native-screens/index.html | 8 ++++---- docs/4.x/redux-integration/index.html | 8 ++++---- docs/4.x/routers/index.html | 8 ++++---- docs/4.x/screen-tracking/index.html | 8 ++++---- docs/4.x/scrollables/index.html | 8 ++++---- docs/4.x/stack-actions/index.html | 8 ++++---- docs/4.x/stack-navigator-1.0/index.html | 8 ++++---- docs/4.x/stack-navigator/index.html | 8 ++++---- docs/4.x/state-persistence/index.html | 8 ++++---- docs/4.x/status-bar/index.html | 8 ++++---- docs/4.x/supported-react-native-versions/index.html | 8 ++++---- docs/4.x/switch-actions/index.html | 8 ++++---- docs/4.x/switch-navigator/index.html | 8 ++++---- docs/4.x/tab-based-navigation/index.html | 8 ++++---- docs/4.x/themes/index.html | 8 ++++---- docs/4.x/troubleshooting/index.html | 8 ++++---- docs/4.x/typescript/index.html | 8 ++++---- docs/4.x/upgrading-from-3.x/index.html | 8 ++++---- docs/4.x/web-support/index.html | 8 ++++---- docs/4.x/with-navigation-focus/index.html | 8 ++++---- docs/4.x/with-navigation/index.html | 8 ++++---- docs/5.x/MST-integration/index.html | 8 ++++---- docs/5.x/alternatives/index.html | 8 ++++---- docs/5.x/auth-flow/index.html | 8 ++++---- docs/5.x/bottom-tab-navigator/index.html | 8 ++++---- docs/5.x/community-libraries-and-navigators/index.html | 8 ++++---- docs/5.x/compatibility/index.html | 8 ++++---- docs/5.x/configuring-links/index.html | 8 ++++---- docs/5.x/connecting-navigation-prop/index.html | 8 ++++---- docs/5.x/contributing/index.html | 8 ++++---- docs/5.x/custom-android-back-button-handling/index.html | 8 ++++---- docs/5.x/custom-navigators/index.html | 8 ++++---- docs/5.x/custom-routers/index.html | 8 ++++---- docs/5.x/deep-linking/index.html | 8 ++++---- docs/5.x/devtools/index.html | 8 ++++---- docs/5.x/drawer-actions/index.html | 8 ++++---- docs/5.x/drawer-based-navigation/index.html | 8 ++++---- docs/5.x/drawer-navigator/index.html | 8 ++++---- docs/5.x/function-after-focusing-screen/index.html | 8 ++++---- docs/5.x/getting-started/index.html | 8 ++++---- docs/5.x/glossary-of-terms/index.html | 8 ++++---- docs/5.x/handling-safe-area/index.html | 8 ++++---- docs/5.x/header-buttons/index.html | 8 ++++---- docs/5.x/headers/index.html | 8 ++++---- docs/5.x/hello-react-navigation/index.html | 8 ++++---- docs/5.x/hiding-tabbar-in-screens/index.html | 8 ++++---- docs/5.x/limitations/index.html | 8 ++++---- docs/5.x/link/index.html | 8 ++++---- docs/5.x/material-bottom-tab-navigator/index.html | 8 ++++---- docs/5.x/material-top-tab-navigator/index.html | 8 ++++---- docs/5.x/modal/index.html | 8 ++++---- docs/5.x/more-resources/index.html | 8 ++++---- docs/5.x/native-stack-navigator/index.html | 8 ++++---- docs/5.x/navigating-without-navigation-prop/index.html | 8 ++++---- docs/5.x/navigating/index.html | 8 ++++---- docs/5.x/navigation-actions/index.html | 8 ++++---- docs/5.x/navigation-container/index.html | 8 ++++---- docs/5.x/navigation-context/index.html | 8 ++++---- docs/5.x/navigation-events/index.html | 8 ++++---- docs/5.x/navigation-lifecycle/index.html | 8 ++++---- docs/5.x/navigation-prop/index.html | 8 ++++---- docs/5.x/navigation-state/index.html | 8 ++++---- docs/5.x/nesting-navigators/index.html | 8 ++++---- docs/5.x/next-steps/index.html | 8 ++++---- docs/5.x/params/index.html | 8 ++++---- docs/5.x/pitch/index.html | 8 ++++---- docs/5.x/preventing-going-back/index.html | 8 ++++---- docs/5.x/react-native-screens/index.html | 8 ++++---- docs/5.x/redux-integration/index.html | 8 ++++---- docs/5.x/route-prop/index.html | 8 ++++---- docs/5.x/screen-options-resolution/index.html | 8 ++++---- docs/5.x/screen-options/index.html | 8 ++++---- docs/5.x/screen-tracking/index.html | 8 ++++---- docs/5.x/screen/index.html | 8 ++++---- docs/5.x/server-container/index.html | 8 ++++---- docs/5.x/server-rendering/index.html | 8 ++++---- docs/5.x/stack-actions/index.html | 8 ++++---- docs/5.x/stack-navigator/index.html | 8 ++++---- docs/5.x/state-persistence/index.html | 8 ++++---- docs/5.x/status-bar/index.html | 8 ++++---- docs/5.x/supported-react-native-versions/index.html | 8 ++++---- docs/5.x/tab-actions/index.html | 8 ++++---- docs/5.x/tab-based-navigation/index.html | 8 ++++---- docs/5.x/testing/index.html | 8 ++++---- docs/5.x/themes/index.html | 8 ++++---- docs/5.x/troubleshooting/index.html | 8 ++++---- docs/5.x/typescript/index.html | 8 ++++---- docs/5.x/upgrading-from-4.x/index.html | 8 ++++---- docs/5.x/use-focus-effect/index.html | 8 ++++---- docs/5.x/use-is-focused/index.html | 8 ++++---- docs/5.x/use-link-builder/index.html | 8 ++++---- docs/5.x/use-link-props/index.html | 8 ++++---- docs/5.x/use-link-to/index.html | 8 ++++---- docs/5.x/use-linking/index.html | 8 ++++---- docs/5.x/use-navigation-state/index.html | 8 ++++---- docs/5.x/use-navigation/index.html | 8 ++++---- docs/5.x/use-route/index.html | 8 ++++---- docs/5.x/use-scroll-to-top/index.html | 8 ++++---- docs/5.x/use-theme/index.html | 8 ++++---- docs/5.x/used-by/index.html | 8 ++++---- docs/5.x/web-support/index.html | 8 ++++---- docs/7.x/MST-integration/index.html | 8 ++++---- docs/7.x/auth-flow/index.html | 8 ++++---- docs/7.x/bottom-tab-navigator/index.html | 8 ++++---- docs/7.x/configuring-links/index.html | 8 ++++---- docs/7.x/connecting-navigation-prop/index.html | 8 ++++---- docs/7.x/contributing/index.html | 8 ++++---- docs/7.x/custom-android-back-button-handling/index.html | 8 ++++---- docs/7.x/custom-navigators/index.html | 8 ++++---- docs/7.x/custom-routers/index.html | 8 ++++---- docs/7.x/deep-linking/index.html | 8 ++++---- docs/7.x/devtools/index.html | 8 ++++---- docs/7.x/drawer-actions/index.html | 8 ++++---- docs/7.x/drawer-based-navigation/index.html | 8 ++++---- docs/7.x/drawer-layout/index.html | 8 ++++---- docs/7.x/drawer-navigator/index.html | 8 ++++---- docs/7.x/elements/index.html | 8 ++++---- docs/7.x/function-after-focusing-screen/index.html | 8 ++++---- docs/7.x/getting-started/index.html | 8 ++++---- docs/7.x/glossary-of-terms/index.html | 8 ++++---- docs/7.x/group/index.html | 8 ++++---- docs/7.x/handling-safe-area/index.html | 8 ++++---- docs/7.x/header-buttons/index.html | 8 ++++---- docs/7.x/headers/index.html | 8 ++++---- docs/7.x/hello-react-navigation/index.html | 8 ++++---- docs/7.x/hiding-tabbar-in-screens/index.html | 8 ++++---- docs/7.x/limitations/index.html | 8 ++++---- docs/7.x/link/index.html | 8 ++++---- docs/7.x/material-top-tab-navigator/index.html | 8 ++++---- docs/7.x/migration-guides/index.html | 8 ++++---- docs/7.x/modal/index.html | 8 ++++---- docs/7.x/more-resources/index.html | 8 ++++---- docs/7.x/multiple-drawers/index.html | 8 ++++---- docs/7.x/native-stack-navigator/index.html | 8 ++++---- docs/7.x/navigating-without-navigation-prop/index.html | 8 ++++---- docs/7.x/navigating/index.html | 8 ++++---- docs/7.x/navigation-actions/index.html | 8 ++++---- docs/7.x/navigation-container/index.html | 8 ++++---- docs/7.x/navigation-context/index.html | 8 ++++---- docs/7.x/navigation-events/index.html | 8 ++++---- docs/7.x/navigation-lifecycle/index.html | 8 ++++---- docs/7.x/navigation-prop/index.html | 8 ++++---- .../index.html | 8 ++++---- docs/7.x/navigation-state/index.html | 8 ++++---- docs/7.x/nesting-navigators/index.html | 8 ++++---- docs/7.x/next-steps/index.html | 8 ++++---- docs/7.x/params/index.html | 8 ++++---- docs/7.x/pitch/index.html | 8 ++++---- docs/7.x/preventing-going-back/index.html | 8 ++++---- docs/7.x/redux-integration/index.html | 8 ++++---- docs/7.x/route-prop/index.html | 8 ++++---- docs/7.x/screen-options-resolution/index.html | 8 ++++---- docs/7.x/screen-options/index.html | 8 ++++---- docs/7.x/screen-tracking/index.html | 8 ++++---- docs/7.x/screen/index.html | 8 ++++---- docs/7.x/server-container/index.html | 8 ++++---- docs/7.x/server-rendering/index.html | 8 ++++---- docs/7.x/shared-element-transitions/index.html | 8 ++++---- docs/7.x/stack-actions/index.html | 8 ++++---- docs/7.x/stack-navigator/index.html | 8 ++++---- docs/7.x/state-persistence/index.html | 8 ++++---- docs/7.x/static-api-reference/index.html | 8 ++++---- docs/7.x/static-authentication/index.html | 8 ++++---- docs/7.x/static-combine-with-dynamic/index.html | 8 ++++---- docs/7.x/static-configuration/index.html | 8 ++++---- docs/7.x/static-typescript/index.html | 8 ++++---- docs/7.x/status-bar/index.html | 8 ++++---- docs/7.x/tab-actions/index.html | 8 ++++---- docs/7.x/tab-based-navigation/index.html | 8 ++++---- docs/7.x/tab-view/index.html | 8 ++++---- docs/7.x/testing/index.html | 8 ++++---- docs/7.x/themes/index.html | 8 ++++---- docs/7.x/troubleshooting/index.html | 8 ++++---- docs/7.x/typescript/index.html | 8 ++++---- docs/7.x/upgrading-from-6.x/index.html | 8 ++++---- docs/7.x/use-focus-effect/index.html | 8 ++++---- docs/7.x/use-is-focused/index.html | 8 ++++---- docs/7.x/use-link-builder/index.html | 8 ++++---- docs/7.x/use-link-props/index.html | 8 ++++---- docs/7.x/use-link-to/index.html | 8 ++++---- docs/7.x/use-navigation-state/index.html | 8 ++++---- docs/7.x/use-navigation/index.html | 8 ++++---- docs/7.x/use-route/index.html | 8 ++++---- docs/7.x/use-scroll-to-top/index.html | 8 ++++---- docs/7.x/use-theme/index.html | 8 ++++---- docs/7.x/used-by/index.html | 8 ++++---- docs/7.x/web-support/index.html | 8 ++++---- docs/MST-integration/index.html | 8 ++++---- docs/auth-flow/index.html | 8 ++++---- docs/bottom-tab-navigator/index.html | 8 ++++---- docs/configuring-links/index.html | 8 ++++---- docs/connecting-navigation-prop/index.html | 8 ++++---- docs/contributing/index.html | 8 ++++---- docs/custom-android-back-button-handling/index.html | 8 ++++---- docs/custom-navigators/index.html | 8 ++++---- docs/custom-routers/index.html | 8 ++++---- docs/deep-linking/index.html | 8 ++++---- docs/devtools/index.html | 8 ++++---- docs/drawer-actions/index.html | 8 ++++---- docs/drawer-based-navigation/index.html | 8 ++++---- docs/drawer-layout/index.html | 8 ++++---- docs/drawer-navigator/index.html | 8 ++++---- docs/elements/index.html | 8 ++++---- docs/function-after-focusing-screen/index.html | 8 ++++---- docs/getting-started/index.html | 8 ++++---- docs/glossary-of-terms/index.html | 8 ++++---- docs/group/index.html | 8 ++++---- docs/handling-safe-area/index.html | 8 ++++---- docs/header-buttons/index.html | 8 ++++---- docs/headers/index.html | 8 ++++---- docs/hello-react-navigation/index.html | 8 ++++---- docs/hiding-tabbar-in-screens/index.html | 8 ++++---- docs/limitations/index.html | 8 ++++---- docs/link/index.html | 8 ++++---- docs/material-bottom-tab-navigator/index.html | 8 ++++---- docs/material-top-tab-navigator/index.html | 8 ++++---- docs/migration-guides/index.html | 8 ++++---- docs/modal/index.html | 8 ++++---- docs/more-resources/index.html | 8 ++++---- docs/multiple-drawers/index.html | 8 ++++---- docs/native-stack-navigator/index.html | 8 ++++---- docs/navigating-without-navigation-prop/index.html | 8 ++++---- docs/navigating/index.html | 8 ++++---- docs/navigation-actions/index.html | 8 ++++---- docs/navigation-container/index.html | 8 ++++---- docs/navigation-context/index.html | 8 ++++---- docs/navigation-events/index.html | 8 ++++---- docs/navigation-lifecycle/index.html | 8 ++++---- docs/navigation-prop/index.html | 8 ++++---- .../index.html | 8 ++++---- docs/navigation-state/index.html | 8 ++++---- docs/nesting-navigators/index.html | 8 ++++---- docs/next-steps/index.html | 8 ++++---- docs/params/index.html | 8 ++++---- docs/pitch/index.html | 8 ++++---- docs/preventing-going-back/index.html | 8 ++++---- docs/redux-integration/index.html | 8 ++++---- docs/route-prop/index.html | 8 ++++---- docs/screen-options-resolution/index.html | 8 ++++---- docs/screen-options/index.html | 8 ++++---- docs/screen-tracking/index.html | 8 ++++---- docs/screen/index.html | 8 ++++---- docs/server-container/index.html | 8 ++++---- docs/server-rendering/index.html | 8 ++++---- docs/shared-element-transitions/index.html | 8 ++++---- docs/stack-actions/index.html | 8 ++++---- docs/stack-navigator/index.html | 8 ++++---- docs/state-persistence/index.html | 8 ++++---- docs/status-bar/index.html | 8 ++++---- docs/tab-actions/index.html | 8 ++++---- docs/tab-based-navigation/index.html | 8 ++++---- docs/tab-view/index.html | 8 ++++---- docs/testing/index.html | 8 ++++---- docs/themes/index.html | 8 ++++---- docs/troubleshooting/index.html | 8 ++++---- docs/typescript/index.html | 8 ++++---- docs/upgrading-from-5.x/index.html | 8 ++++---- docs/use-focus-effect/index.html | 8 ++++---- docs/use-is-focused/index.html | 8 ++++---- docs/use-link-builder/index.html | 8 ++++---- docs/use-link-props/index.html | 8 ++++---- docs/use-link-to/index.html | 8 ++++---- docs/use-navigation-state/index.html | 8 ++++---- docs/use-navigation/index.html | 8 ++++---- docs/use-route/index.html | 8 ++++---- docs/use-scroll-to-top/index.html | 8 ++++---- docs/use-theme/index.html | 8 ++++---- docs/used-by/index.html | 8 ++++---- docs/web-support/index.html | 8 ++++---- help/index.html | 8 ++++---- home/BLM/index.html | 8 ++++---- home/Features/index.html | 8 ++++---- home/Splash/SplashLeftIllustration/index.html | 8 ++++---- home/Splash/SplashRightIllustration/index.html | 8 ++++---- home/Splash/index.html | 8 ++++---- home/Sponsors/index.html | 8 ++++---- index.html | 8 ++++---- layouts/DocItem/index.html | 8 ++++---- layouts/DocPage/index.html | 8 ++++---- search/index.html | 8 ++++---- versions/index.html | 8 ++++---- 537 files changed, 2070 insertions(+), 2070 deletions(-) create mode 100644 assets/js/0334870a.22c9fef4.js delete mode 100644 assets/js/0334870a.e7265d90.js create mode 100644 assets/js/0bcf026f.0e9a77e1.js delete mode 100644 assets/js/0bcf026f.e3ee708f.js delete mode 100644 assets/js/1233d971.39be567d.js create mode 100644 assets/js/1233d971.5aa324d4.js delete mode 100644 assets/js/14acaad8.4a65e21f.js create mode 100644 assets/js/14acaad8.c88ef513.js create mode 100644 assets/js/1c2eab2d.91da7eb3.js delete mode 100644 assets/js/1c2eab2d.a5c2ad45.js create mode 100644 assets/js/20989594.093a5d51.js delete mode 100644 assets/js/20989594.abe7fd79.js delete mode 100644 assets/js/220adfdd.7669851c.js create mode 100644 assets/js/220adfdd.f878b33e.js delete mode 100644 assets/js/2a1e22c6.69202de4.js create mode 100644 assets/js/2a1e22c6.84f53c4c.js rename assets/js/{a5a8f997.88b6e79a.js => a5a8f997.e7e66dad.js} (59%) rename assets/js/{c259c03a.8cbe6337.js => c259c03a.eb9339fc.js} (63%) rename assets/js/{c2c0d6a0.31ef28bc.js => c2c0d6a0.f10a5e52.js} (63%) create mode 100644 assets/js/main.391f3efc.js rename assets/js/{main.e8892635.js.LICENSE.txt => main.391f3efc.js.LICENSE.txt} (100%) delete mode 100644 assets/js/main.e8892635.js rename assets/js/{runtime~main.9ae08191.js => runtime~main.49dbaf9f.js} (97%) diff --git a/404.html b/404.html index 58b91cff006..dfc9e413395 100644 --- a/404.html +++ b/404.html @@ -17,13 +17,13 @@ - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - + + \ No newline at end of file diff --git a/assets/js/0334870a.22c9fef4.js b/assets/js/0334870a.22c9fef4.js new file mode 100644 index 00000000000..8f60ff3f267 --- /dev/null +++ b/assets/js/0334870a.22c9fef4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[63057],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return d}});var o=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function c(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var i=o.createContext({}),s=function(e){var t=o.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):c(c({},t),e)),n},p=function(e){var t=s(e.components);return o.createElement(i.Provider,{value:t},e.children)},u="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},m=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,i=e.parentName,p=a(e,["components","mdxType","originalType","parentName"]),u=s(n),m=r,d=u["".concat(i,".").concat(m)]||u[m]||f[m]||l;return n?o.createElement(d,c(c({ref:t},p),{},{components:n})):o.createElement(d,c({ref:t},p))}));function d(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,c=new Array(l);c[0]=m;var a={};for(var i in t)hasOwnProperty.call(t,i)&&(a[i]=t[i]);a.originalType=e,a[u]="string"==typeof e?e:r,c[1]=a;for(var s=2;s{/* content */};\n}\n")),(0,l.kt)("h2",{id:"using-with-class-component"},"Using with class component"),(0,l.kt)("p",null,"You can wrap your class component in a function component to use the hook:"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"class Albums extends React.Component {\n render() {\n return {/* content */};\n }\n}\n\n// Wrap and export\nexport default function (props) {\n const ref = React.useRef(null);\n\n useScrollToTop(ref);\n\n return ;\n}\n")),(0,l.kt)("h2",{id:"providing-scroll-offset"},"Providing scroll offset"),(0,l.kt)("p",null,"If you require offset to scroll position you can wrap and decorate passed reference:"),(0,l.kt)("samp",{id:"use-scroll-to-top-offset"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { useScrollToTop } from '@react-navigation/native';\n\nfunction Albums() {\n const ref = React.useRef(null);\n\n useScrollToTop(\n React.useRef({\n scrollToTop: () => ref.current?.scrollTo({ y: 100 }),\n })\n );\n\n return {/* content */};\n}\n")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/0334870a.e7265d90.js b/assets/js/0334870a.e7265d90.js deleted file mode 100644 index 6c16cdf6cd6..00000000000 --- a/assets/js/0334870a.e7265d90.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[63057],{3905:function(e,t,n){n.d(t,{Zo:function(){return s},kt:function(){return m}});var r=n(67294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var i=r.createContext({}),c=function(e){var t=r.useContext(i),n=t;return e&&(n="function"==typeof e?e(t):l(l({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(i.Provider,{value:t},e.children)},p="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,i=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=c(n),d=o,m=p["".concat(i,".").concat(d)]||p[d]||f[d]||a;return n?r.createElement(m,l(l({ref:t},s),{},{components:n})):r.createElement(m,l({ref:t},s))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,l=new Array(a);l[0]=d;var u={};for(var i in t)hasOwnProperty.call(t,i)&&(u[i]=t[i]);u.originalType=e,u[p]="string"==typeof e?e:o,l[1]=u;for(var c=2;c child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function f(e){var t=e.values,n=e.children;return(0,o.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,c.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function d(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function m(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId,a=(0,u.k6)(),l=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,i._X)(l),(0,o.useCallback)((function(e){if(l){var t=new URLSearchParams(a.location.search);t.set(l,e),a.replace(Object.assign({},a.location,{search:t.toString()}))}}),[l,a])]}function v(e){var t,n,r,a,l=e.defaultValue,u=e.queryString,i=void 0!==u&&u,c=e.groupId,p=f(e),v=(0,o.useState)((function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!d({value:n,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var o=null!=(t=r.find((function(e){return e.default})))?t:r[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:l,tabValues:p})})),b=v[0],h=v[1],g=m({queryString:i,groupId:c}),y=g[0],w=g[1],T=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),n=(0,s.Nk)(t),r=n[0],a=n[1],[r,(0,o.useCallback)((function(e){t&&a.set(e)}),[t,a])]),k=T[0],S=T[1],x=function(){var e=null!=y?y:k;return d({value:e,tabValues:p})?e:null}();return(0,o.useLayoutEffect)((function(){x&&h(x)}),[x]),{selectedValue:b,selectValue:(0,o.useCallback)((function(e){if(!d({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);h(e),w(e),S(e)}),[w,S,p]),tabValues:p}}var b=n(72389),h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e){var t=e.className,n=e.block,u=e.selectedValue,i=e.selectValue,c=e.tabValues,s=[],p=(0,l.o5)().blockElementScrollPositionUntilNextRender,f=function(e){var t=e.currentTarget,n=s.indexOf(t),r=c[n].value;r!==u&&(p(t),i(r))},d=function(e){var t,n=null;switch(e.key){case"Enter":f(e);break;case"ArrowRight":var r,o=s.indexOf(e.currentTarget)+1;n=null!=(r=s[o])?r:s[0];break;case"ArrowLeft":var a,l=s.indexOf(e.currentTarget)-1;n=null!=(a=s[l])?a:s[s.length-1]}null==(t=n)||t.focus()};return o.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":n},t)},c.map((function(e){var t=e.value,n=e.label,l=e.attributes;return o.createElement("li",(0,r.Z)({role:"tab",tabIndex:u===t?0:-1,"aria-selected":u===t,key:t,ref:function(e){return s.push(e)},onKeyDown:d,onClick:f},l,{className:(0,a.Z)("tabs__item",h.tabItem,null==l?void 0:l.className,{"tabs__item--active":u===t})}),null!=n?n:t)})))}function y(e){var t=e.lazy,n=e.children,r=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var a=n.find((function(e){return e.props.value===r}));return a?(0,o.cloneElement)(a,{className:"margin-top--md"}):null}return o.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==r})})))}function w(e){var t=v(e);return o.createElement("div",{className:(0,a.Z)("tabs-container",h.tabList)},o.createElement(g,(0,r.Z)({},e,t)),o.createElement(y,(0,r.Z)({},e,t)))}function T(e){var t=(0,b.Z)();return o.createElement(w,(0,r.Z)({key:String(t)},e))}},18396:function(e,t,n){n.r(t),n.d(t,{assets:function(){return s},contentTitle:function(){return i},default:function(){return m},frontMatter:function(){return u},metadata:function(){return c},toc:function(){return p}});var r=n(83117),o=n(80102),a=(n(67294),n(3905)),l=(n(74866),n(85162),["components"]),u={id:"use-scroll-to-top",title:"useScrollToTop",sidebar_label:"useScrollToTop"},i=void 0,c={unversionedId:"use-scroll-to-top",id:"version-6.x/use-scroll-to-top",title:"useScrollToTop",description:"The expected native behavior of scrollable components is to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.",source:"@site/versioned_docs/version-6.x/use-scroll-to-top.md",sourceDirName:".",slug:"/use-scroll-to-top",permalink:"/docs/use-scroll-to-top",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/use-scroll-to-top.md",tags:[],version:"6.x",frontMatter:{id:"use-scroll-to-top",title:"useScrollToTop",sidebar_label:"useScrollToTop"},sidebar:"version-6.x/docs",previous:{title:"useLinkBuilder",permalink:"/docs/use-link-builder"},next:{title:"useTheme",permalink:"/docs/use-theme"}},s={},p=[{value:"Using with class component",id:"using-with-class-component",level:2},{value:"Providing scroll offset",id:"providing-scroll-offset",level:2}],f={toc:p},d="wrapper";function m(e){var t=e.components,n=(0,o.Z)(e,l);return(0,a.kt)(d,(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("p",null,"The expected native behavior of scrollable components is to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars."),(0,a.kt)("p",null,"In order to achieve it we export ",(0,a.kt)("inlineCode",{parentName:"p"},"useScrollToTop")," which accept ref to scrollable component (e,g. ",(0,a.kt)("inlineCode",{parentName:"p"},"ScrollView")," or ",(0,a.kt)("inlineCode",{parentName:"p"},"FlatList"),")."),(0,a.kt)("p",null,"Example:"),(0,a.kt)("samp",{id:"use-scroll-to-top"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { useScrollToTop } from '@react-navigation/native';\n\nfunction Albums() {\n const ref = React.useRef(null);\n\n useScrollToTop(ref);\n\n return {/* content */};\n}\n")),(0,a.kt)("h2",{id:"using-with-class-component"},"Using with class component"),(0,a.kt)("p",null,"You can wrap your class component in a function component to use the hook:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"class Albums extends React.Component {\n render() {\n return {/* content */};\n }\n}\n\n// Wrap and export\nexport default function (props) {\n const ref = React.useRef(null);\n\n useScrollToTop(ref);\n\n return ;\n}\n")),(0,a.kt)("h2",{id:"providing-scroll-offset"},"Providing scroll offset"),(0,a.kt)("p",null,"If you require offset to scroll position you can wrap and decorate passed reference:"),(0,a.kt)("samp",{id:"use-scroll-to-top-offset"}),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport { ScrollView } from 'react-native';\nimport { useScrollToTop } from '@react-navigation/native';\n\nfunction Albums() {\n const ref = React.useRef(null);\n\n useScrollToTop(\n React.useRef({\n scrollToTop: () => ref.current?.scrollTo({ y: 100 }),\n })\n );\n\n return {/* content */};\n}\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/0bcf026f.0e9a77e1.js b/assets/js/0bcf026f.0e9a77e1.js new file mode 100644 index 00000000000..748c96dbc1c --- /dev/null +++ b/assets/js/0bcf026f.0e9a77e1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[85831],{3905:function(e,t,n){n.d(t,{Zo:function(){return l},kt:function(){return d}});var r=n(67294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=r.createContext({}),u=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},l=function(e){var t=u(e.components);return r.createElement(c.Provider,{value:t},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},f=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(n),f=o,d=s["".concat(c,".").concat(f)]||s[f]||m[f]||i;return n?r.createElement(d,a(a({ref:t},l),{},{components:n})):r.createElement(d,a({ref:t},l))}));function d(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=f;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p[s]="string"==typeof e?e:o,a[1]=p;for(var u=2;u\n This is the profile screen of the app\n {route.name}\n \n );\n}\n")))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/0bcf026f.e3ee708f.js b/assets/js/0bcf026f.e3ee708f.js deleted file mode 100644 index 1af4fe61652..00000000000 --- a/assets/js/0bcf026f.e3ee708f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[85831],{3905:function(e,t,n){n.d(t,{Zo:function(){return s},kt:function(){return m}});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},p="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=c(n),d=a,m=p["".concat(l,".").concat(d)]||p[d]||f[d]||o;return n?r.createElement(m,i(i({ref:t},s),{},{components:n})):r.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var u={};for(var l in t)hasOwnProperty.call(t,l)&&(u[l]=t[l]);u.originalType=e,u[p]="string"==typeof e?e:a,i[1]=u;for(var c=2;c child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function f(e){var t=e.values,n=e.children;return(0,a.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,c.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function d(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function m(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId,o=(0,u.k6)(),i=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,l._X)(i),(0,a.useCallback)((function(e){if(i){var t=new URLSearchParams(o.location.search);t.set(i,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}}),[i,o])]}function v(e){var t,n,r,o,i=e.defaultValue,u=e.queryString,l=void 0!==u&&u,c=e.groupId,p=f(e),v=(0,a.useState)((function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!d({value:n,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var a=null!=(t=r.find((function(e){return e.default})))?t:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:i,tabValues:p})})),b=v[0],h=v[1],g=m({queryString:l,groupId:c}),y=g[0],k=g[1],w=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),n=(0,s.Nk)(t),r=n[0],o=n[1],[r,(0,a.useCallback)((function(e){t&&o.set(e)}),[t,o])]),E=w[0],N=w[1],O=function(){var e=null!=y?y:E;return d({value:e,tabValues:p})?e:null}();return(0,a.useLayoutEffect)((function(){O&&h(O)}),[O]),{selectedValue:b,selectValue:(0,a.useCallback)((function(e){if(!d({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);h(e),k(e),N(e)}),[k,N,p]),tabValues:p}}var b=n(72389),h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e){var t=e.className,n=e.block,u=e.selectedValue,l=e.selectValue,c=e.tabValues,s=[],p=(0,i.o5)().blockElementScrollPositionUntilNextRender,f=function(e){var t=e.currentTarget,n=s.indexOf(t),r=c[n].value;r!==u&&(p(t),l(r))},d=function(e){var t,n=null;switch(e.key){case"Enter":f(e);break;case"ArrowRight":var r,a=s.indexOf(e.currentTarget)+1;n=null!=(r=s[a])?r:s[0];break;case"ArrowLeft":var o,i=s.indexOf(e.currentTarget)-1;n=null!=(o=s[i])?o:s[s.length-1]}null==(t=n)||t.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},t)},c.map((function(e){var t=e.value,n=e.label,i=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:u===t?0:-1,"aria-selected":u===t,key:t,ref:function(e){return s.push(e)},onKeyDown:d,onClick:f},i,{className:(0,o.Z)("tabs__item",h.tabItem,null==i?void 0:i.className,{"tabs__item--active":u===t})}),null!=n?n:t)})))}function y(e){var t=e.lazy,n=e.children,r=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var o=n.find((function(e){return e.props.value===r}));return o?(0,a.cloneElement)(o,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})})))}function k(e){var t=v(e);return a.createElement("div",{className:(0,o.Z)("tabs-container",h.tabList)},a.createElement(g,(0,r.Z)({},e,t)),a.createElement(y,(0,r.Z)({},e,t)))}function w(e){var t=(0,b.Z)();return a.createElement(k,(0,r.Z)({key:String(t)},e))}},4443:function(e,t,n){n.r(t),n.d(t,{assets:function(){return s},contentTitle:function(){return l},default:function(){return m},frontMatter:function(){return u},metadata:function(){return c},toc:function(){return p}});var r=n(83117),a=n(80102),o=(n(67294),n(3905)),i=(n(74866),n(85162),["components"]),u={id:"route-prop",title:"Route prop reference",sidebar_label:"Route prop"},l=void 0,c={unversionedId:"route-prop",id:"version-6.x/route-prop",title:"Route prop reference",description:"Each screen component in your app is provided with the route prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives).",source:"@site/versioned_docs/version-6.x/route-prop.md",sourceDirName:".",slug:"/route-prop",permalink:"/docs/route-prop",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/route-prop.md",tags:[],version:"6.x",frontMatter:{id:"route-prop",title:"Route prop reference",sidebar_label:"Route prop"},sidebar:"version-6.x/docs",previous:{title:"Options for screens",permalink:"/docs/screen-options"},next:{title:"Navigation prop",permalink:"/docs/navigation-prop"}},s={},p=[],f={toc:p},d="wrapper";function m(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)(d,(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Each ",(0,o.kt)("inlineCode",{parentName:"p"},"screen")," component in your app is provided with the ",(0,o.kt)("inlineCode",{parentName:"p"},"route")," prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives)."),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"route"),(0,o.kt)("ul",{parentName:"li"},(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"key")," - Unique key of the screen. Created automatically or added while navigating to this screen."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"name")," - Name of the screen. Defined in navigator component hierarchy."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"path")," - An optional string containing the path that opened the screen, exists when the screen was opened via a deep link."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"params")," - An optional object containing params which is defined while navigating e.g. ",(0,o.kt)("inlineCode",{parentName:"li"},"navigate('Twitter', { user: 'Dan Abramov' })"),".")))),(0,o.kt)("samp",{id:"route-prop"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"function ProfileScreen({ route }) {\n return (\n \n This is the profile screen of the app\n {route.name}\n \n );\n}\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1233d971.39be567d.js b/assets/js/1233d971.39be567d.js deleted file mode 100644 index 14008df3f83..00000000000 --- a/assets/js/1233d971.39be567d.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[73825],{3905:function(e,r,t){t.d(r,{Zo:function(){return s},kt:function(){return v}});var n=t(67294);function a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function o(e){for(var r=1;r=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=n.createContext({}),c=function(e){var r=n.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):o(o({},r),e)),t},s=function(e){var r=c(e.components);return n.createElement(l.Provider,{value:r},e.children)},f="mdxType",p={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},d=n.forwardRef((function(e,r){var t=e.components,a=e.mdxType,u=e.originalType,l=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),f=c(t),d=a,v=f["".concat(l,".").concat(d)]||f[d]||p[d]||u;return t?n.createElement(v,o(o({ref:r},s),{},{components:t})):n.createElement(v,o({ref:r},s))}));function v(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var u=t.length,o=new Array(u);o[0]=d;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i[f]="string"==typeof e?e:a,o[1]=i;for(var c=2;c child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var r=e.props;return{value:r.value,label:r.label,attributes:r.attributes,default:r.default}}))}function p(e){var r=e.values,t=e.children;return(0,a.useMemo)((function(){var e=null!=r?r:f(t);return function(e){var r=(0,c.l)(e,(function(e,r){return e.value===r.value}));if(r.length>0)throw new Error('Docusaurus error: Duplicate values "'+r.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[r,t])}function d(e){var r=e.value;return e.tabValues.some((function(e){return e.value===r}))}function v(e){var r=e.queryString,t=void 0!==r&&r,n=e.groupId,u=(0,i.k6)(),o=function(e){var r=e.queryString,t=void 0!==r&&r,n=e.groupId;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:t,groupId:n});return[(0,l._X)(o),(0,a.useCallback)((function(e){if(o){var r=new URLSearchParams(u.location.search);r.set(o,e),u.replace(Object.assign({},u.location,{search:r.toString()}))}}),[o,u])]}function b(e){var r,t,n,u,o=e.defaultValue,i=e.queryString,l=void 0!==i&&i,c=e.groupId,f=p(e),b=(0,a.useState)((function(){return function(e){var r,t=e.defaultValue,n=e.tabValues;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!d({value:t,tabValues:n}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+n.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}var a=null!=(r=n.find((function(e){return e.default})))?r:n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:o,tabValues:f})})),m=b[0],h=b[1],y=v({queryString:l,groupId:c}),g=y[0],w=y[1],O=(r=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),t=(0,s.Nk)(r),n=t[0],u=t[1],[n,(0,a.useCallback)((function(e){r&&u.set(e)}),[r,u])]),E=O[0],I=O[1],k=function(){var e=null!=g?g:E;return d({value:e,tabValues:f})?e:null}();return(0,a.useLayoutEffect)((function(){k&&h(k)}),[k]),{selectedValue:m,selectValue:(0,a.useCallback)((function(e){if(!d({value:e,tabValues:f}))throw new Error("Can't select invalid tab value="+e);h(e),w(e),I(e)}),[w,I,f]),tabValues:f}}var m=t(72389),h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function y(e){var r=e.className,t=e.block,i=e.selectedValue,l=e.selectValue,c=e.tabValues,s=[],f=(0,o.o5)().blockElementScrollPositionUntilNextRender,p=function(e){var r=e.currentTarget,t=s.indexOf(r),n=c[t].value;n!==i&&(f(r),l(n))},d=function(e){var r,t=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":var n,a=s.indexOf(e.currentTarget)+1;t=null!=(n=s[a])?n:s[0];break;case"ArrowLeft":var u,o=s.indexOf(e.currentTarget)-1;t=null!=(u=s[o])?u:s[s.length-1]}null==(r=t)||r.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,u.Z)("tabs",{"tabs--block":t},r)},c.map((function(e){var r=e.value,t=e.label,o=e.attributes;return a.createElement("li",(0,n.Z)({role:"tab",tabIndex:i===r?0:-1,"aria-selected":i===r,key:r,ref:function(e){return s.push(e)},onKeyDown:d,onClick:p},o,{className:(0,u.Z)("tabs__item",h.tabItem,null==o?void 0:o.className,{"tabs__item--active":i===r})}),null!=t?t:r)})))}function g(e){var r=e.lazy,t=e.children,n=e.selectedValue;if(t=Array.isArray(t)?t:[t],r){var u=t.find((function(e){return e.props.value===n}));return u?(0,a.cloneElement)(u,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},t.map((function(e,r){return(0,a.cloneElement)(e,{key:r,hidden:e.props.value!==n})})))}function w(e){var r=b(e);return a.createElement("div",{className:(0,u.Z)("tabs-container",h.tabList)},a.createElement(y,(0,n.Z)({},e,r)),a.createElement(g,(0,n.Z)({},e,r)))}function O(e){var r=(0,m.Z)();return a.createElement(w,(0,n.Z)({key:String(r)},e))}},72551:function(e,r,t){t.r(r),t.d(r,{assets:function(){return s},contentTitle:function(){return l},default:function(){return v},frontMatter:function(){return i},metadata:function(){return c},toc:function(){return f}});var n=t(83117),a=t(80102),u=(t(67294),t(3905)),o=(t(74866),t(85162),["components"]),i={id:"api-reference",title:"API Reference",sidebar_label:"Overview"},l=void 0,c={unversionedId:"api-reference",id:"version-1.x/api-reference",title:"API Reference",description:"This section of the documentation describes the public API of React Navigation. It always refers to the latest version of the library.",source:"@site/versioned_docs/version-1.x/api-reference.md",sourceDirName:".",slug:"/api-reference",permalink:"/docs/1.x/api-reference",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-1.x/api-reference.md",tags:[],version:"1.x",frontMatter:{id:"api-reference",title:"API Reference",sidebar_label:"Overview"},sidebar:"api",next:{title:"Navigation prop",permalink:"/docs/1.x/navigation-prop"}},s={},f=[],p={toc:f},d="wrapper";function v(e){var r=e.components,t=(0,a.Z)(e,o);return(0,u.kt)(d,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,u.kt)("p",null,"This section of the documentation describes the public API of React Navigation. It always refers to the latest version of the library."))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1233d971.5aa324d4.js b/assets/js/1233d971.5aa324d4.js new file mode 100644 index 00000000000..471e64cec80 --- /dev/null +++ b/assets/js/1233d971.5aa324d4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[73825],{3905:function(e,t,r){r.d(t,{Zo:function(){return p},kt:function(){return v}});var n=r(67294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=n.createContext({}),f=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},p=function(e){var t=f(e.components);return n.createElement(u.Provider,{value:t},e.children)},s="mdxType",l={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=f(r),d=o,v=s["".concat(u,".").concat(d)]||s[d]||l[d]||i;return r?n.createElement(v,a(a({ref:t},p),{},{components:r})):n.createElement(v,a({ref:t},p))}));function v(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c[s]="string"==typeof e?e:o,a[1]=c;for(var f=2;f=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}var l=n.createContext({}),c=function(e){var r=n.useContext(l),t=r;return e&&(t="function"==typeof e?e(r):o(o({},r),e)),t},s=function(e){var r=c(e.components);return n.createElement(l.Provider,{value:r},e.children)},f="mdxType",p={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},d=n.forwardRef((function(e,r){var t=e.components,a=e.mdxType,u=e.originalType,l=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),f=c(t),d=a,v=f["".concat(l,".").concat(d)]||f[d]||p[d]||u;return t?n.createElement(v,o(o({ref:r},s),{},{components:t})):n.createElement(v,o({ref:r},s))}));function v(e,r){var t=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var u=t.length,o=new Array(u);o[0]=d;var i={};for(var l in r)hasOwnProperty.call(r,l)&&(i[l]=r[l]);i.originalType=e,i[f]="string"==typeof e?e:a,o[1]=i;for(var c=2;c child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var r=e.props;return{value:r.value,label:r.label,attributes:r.attributes,default:r.default}}))}function p(e){var r=e.values,t=e.children;return(0,a.useMemo)((function(){var e=null!=r?r:f(t);return function(e){var r=(0,c.l)(e,(function(e,r){return e.value===r.value}));if(r.length>0)throw new Error('Docusaurus error: Duplicate values "'+r.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[r,t])}function d(e){var r=e.value;return e.tabValues.some((function(e){return e.value===r}))}function v(e){var r=e.queryString,t=void 0!==r&&r,n=e.groupId,u=(0,i.k6)(),o=function(e){var r=e.queryString,t=void 0!==r&&r,n=e.groupId;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:t,groupId:n});return[(0,l._X)(o),(0,a.useCallback)((function(e){if(o){var r=new URLSearchParams(u.location.search);r.set(o,e),u.replace(Object.assign({},u.location,{search:r.toString()}))}}),[o,u])]}function b(e){var r,t,n,u,o=e.defaultValue,i=e.queryString,l=void 0!==i&&i,c=e.groupId,f=p(e),b=(0,a.useState)((function(){return function(e){var r,t=e.defaultValue,n=e.tabValues;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!d({value:t,tabValues:n}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+n.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}var a=null!=(r=n.find((function(e){return e.default})))?r:n[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:o,tabValues:f})})),m=b[0],h=b[1],y=v({queryString:l,groupId:c}),g=y[0],w=y[1],O=(r=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),t=(0,s.Nk)(r),n=t[0],u=t[1],[n,(0,a.useCallback)((function(e){r&&u.set(e)}),[r,u])]),E=O[0],I=O[1],k=function(){var e=null!=g?g:E;return d({value:e,tabValues:f})?e:null}();return(0,a.useLayoutEffect)((function(){k&&h(k)}),[k]),{selectedValue:m,selectValue:(0,a.useCallback)((function(e){if(!d({value:e,tabValues:f}))throw new Error("Can't select invalid tab value="+e);h(e),w(e),I(e)}),[w,I,f]),tabValues:f}}var m=t(72389),h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function y(e){var r=e.className,t=e.block,i=e.selectedValue,l=e.selectValue,c=e.tabValues,s=[],f=(0,o.o5)().blockElementScrollPositionUntilNextRender,p=function(e){var r=e.currentTarget,t=s.indexOf(r),n=c[t].value;n!==i&&(f(r),l(n))},d=function(e){var r,t=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":var n,a=s.indexOf(e.currentTarget)+1;t=null!=(n=s[a])?n:s[0];break;case"ArrowLeft":var u,o=s.indexOf(e.currentTarget)-1;t=null!=(u=s[o])?u:s[s.length-1]}null==(r=t)||r.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,u.Z)("tabs",{"tabs--block":t},r)},c.map((function(e){var r=e.value,t=e.label,o=e.attributes;return a.createElement("li",(0,n.Z)({role:"tab",tabIndex:i===r?0:-1,"aria-selected":i===r,key:r,ref:function(e){return s.push(e)},onKeyDown:d,onClick:p},o,{className:(0,u.Z)("tabs__item",h.tabItem,null==o?void 0:o.className,{"tabs__item--active":i===r})}),null!=t?t:r)})))}function g(e){var r=e.lazy,t=e.children,n=e.selectedValue;if(t=Array.isArray(t)?t:[t],r){var u=t.find((function(e){return e.props.value===n}));return u?(0,a.cloneElement)(u,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},t.map((function(e,r){return(0,a.cloneElement)(e,{key:r,hidden:e.props.value!==n})})))}function w(e){var r=b(e);return a.createElement("div",{className:(0,u.Z)("tabs-container",h.tabList)},a.createElement(y,(0,n.Z)({},e,r)),a.createElement(g,(0,n.Z)({},e,r)))}function O(e){var r=(0,m.Z)();return a.createElement(w,(0,n.Z)({key:String(r)},e))}},95531:function(e,r,t){t.r(r),t.d(r,{assets:function(){return s},contentTitle:function(){return l},default:function(){return v},frontMatter:function(){return i},metadata:function(){return c},toc:function(){return f}});var n=t(83117),a=t(80102),u=(t(67294),t(3905)),o=(t(74866),t(85162),["components"]),i={id:"api-reference",title:"API Reference",sidebar_label:"Overview"},l=void 0,c={unversionedId:"api-reference",id:"version-2.x/api-reference",title:"API Reference",description:"This section of the documentation describes the public API of React Navigation. It always refers to the latest version of the library.",source:"@site/versioned_docs/version-2.x/api-reference.md",sourceDirName:".",slug:"/api-reference",permalink:"/docs/2.x/api-reference",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-2.x/api-reference.md",tags:[],version:"2.x",frontMatter:{id:"api-reference",title:"API Reference",sidebar_label:"Overview"},sidebar:"version-2.x-api",next:{title:"Navigation prop",permalink:"/docs/2.x/navigation-prop"}},s={},f=[],p={toc:f},d="wrapper";function v(e){var r=e.components,t=(0,a.Z)(e,o);return(0,u.kt)(d,(0,n.Z)({},p,t,{components:r,mdxType:"MDXLayout"}),(0,u.kt)("p",null,"This section of the documentation describes the public API of React Navigation. It always refers to the latest version of the library."))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/14acaad8.c88ef513.js b/assets/js/14acaad8.c88ef513.js new file mode 100644 index 00000000000..2feb55aaa3d --- /dev/null +++ b/assets/js/14acaad8.c88ef513.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[435],{3905:function(e,t,r){r.d(t,{Zo:function(){return p},kt:function(){return v}});var n=r(67294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var u=n.createContext({}),f=function(e){var t=n.useContext(u),r=t;return e&&(r="function"==typeof e?e(t):a(a({},t),e)),r},p=function(e){var t=f(e.components);return n.createElement(u.Provider,{value:t},e.children)},s="mdxType",l={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,u=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),s=f(r),d=o,v=s["".concat(u,".").concat(d)]||s[d]||l[d]||i;return r?n.createElement(v,a(a({ref:t},p),{},{components:r})):n.createElement(v,a({ref:t},p))}));function v(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,a=new Array(i);a[0]=d;var c={};for(var u in t)hasOwnProperty.call(t,u)&&(c[u]=t[u]);c.originalType=e,c[s]="string"==typeof e?e:o,a[1]=c;for(var f=2;f=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=o.createContext({}),u=function(e){var t=o.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},p=function(e){var t=u(e.components);return o.createElement(s.Provider,{value:t},e.children)},l="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return o.createElement(o.Fragment,{},t)}},d=o.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),l=u(n),d=r,m=l["".concat(s,".").concat(d)]||l[d]||f[d]||i;return n?o.createElement(m,a(a({ref:t},p),{},{components:n})):o.createElement(m,a({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,a=new Array(i);a[0]=d;var c={};for(var s in t)hasOwnProperty.call(t,s)&&(c[s]=t[s]);c.originalType=e,c[l]="string"==typeof e?e:r,a[1]=c;for(var u=2;u{this.props.isFocused ? 'Focused' : 'Not focused'};\n }\n}\n\n// withNavigationFocus returns a component that wraps FocusStateLabel and passes\n// in the navigation prop\nexport default withNavigationFocus(FocusStateLabel);\n")))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/1c2eab2d.a5c2ad45.js b/assets/js/1c2eab2d.a5c2ad45.js deleted file mode 100644 index 6e7a40cbf79..00000000000 --- a/assets/js/1c2eab2d.a5c2ad45.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[83604],{3905:function(e,t,n){n.d(t,{Zo:function(){return s},kt:function(){return v}});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},f="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),f=c(n),d=a,v=f["".concat(l,".").concat(d)]||f[d]||p[d]||o;return n?r.createElement(v,i(i({ref:t},s),{},{components:n})):r.createElement(v,i({ref:t},s))}));function v(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var u={};for(var l in t)hasOwnProperty.call(t,l)&&(u[l]=t[l]);u.originalType=e,u[f]="string"==typeof e?e:a,i[1]=u;for(var c=2;c child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function p(e){var t=e.values,n=e.children;return(0,a.useMemo)((function(){var e=null!=t?t:f(n);return function(e){var t=(0,c.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function d(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function v(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId,o=(0,u.k6)(),i=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,l._X)(i),(0,a.useCallback)((function(e){if(i){var t=new URLSearchParams(o.location.search);t.set(i,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}}),[i,o])]}function m(e){var t,n,r,o,i=e.defaultValue,u=e.queryString,l=void 0!==u&&u,c=e.groupId,f=p(e),m=(0,a.useState)((function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!d({value:n,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var a=null!=(t=r.find((function(e){return e.default})))?t:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:i,tabValues:f})})),h=m[0],b=m[1],g=v({queryString:l,groupId:c}),w=g[0],y=g[1],x=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),n=(0,s.Nk)(t),r=n[0],o=n[1],[r,(0,a.useCallback)((function(e){t&&o.set(e)}),[t,o])]),N=x[0],k=x[1],E=function(){var e=null!=w?w:N;return d({value:e,tabValues:f})?e:null}();return(0,a.useLayoutEffect)((function(){E&&b(E)}),[E]),{selectedValue:h,selectValue:(0,a.useCallback)((function(e){if(!d({value:e,tabValues:f}))throw new Error("Can't select invalid tab value="+e);b(e),y(e),k(e)}),[y,k,f]),tabValues:f}}var h=n(72389),b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e){var t=e.className,n=e.block,u=e.selectedValue,l=e.selectValue,c=e.tabValues,s=[],f=(0,i.o5)().blockElementScrollPositionUntilNextRender,p=function(e){var t=e.currentTarget,n=s.indexOf(t),r=c[n].value;r!==u&&(f(t),l(r))},d=function(e){var t,n=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":var r,a=s.indexOf(e.currentTarget)+1;n=null!=(r=s[a])?r:s[0];break;case"ArrowLeft":var o,i=s.indexOf(e.currentTarget)-1;n=null!=(o=s[i])?o:s[s.length-1]}null==(t=n)||t.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},t)},c.map((function(e){var t=e.value,n=e.label,i=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:u===t?0:-1,"aria-selected":u===t,key:t,ref:function(e){return s.push(e)},onKeyDown:d,onClick:p},i,{className:(0,o.Z)("tabs__item",b.tabItem,null==i?void 0:i.className,{"tabs__item--active":u===t})}),null!=n?n:t)})))}function w(e){var t=e.lazy,n=e.children,r=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var o=n.find((function(e){return e.props.value===r}));return o?(0,a.cloneElement)(o,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})})))}function y(e){var t=m(e);return a.createElement("div",{className:(0,o.Z)("tabs-container",b.tabList)},a.createElement(g,(0,r.Z)({},e,t)),a.createElement(w,(0,r.Z)({},e,t)))}function x(e){var t=(0,h.Z)();return a.createElement(y,(0,r.Z)({key:String(t)},e))}},21553:function(e,t,n){n.r(t),n.d(t,{assets:function(){return s},contentTitle:function(){return l},default:function(){return v},frontMatter:function(){return u},metadata:function(){return c},toc:function(){return f}});var r=n(83117),a=n(80102),o=(n(67294),n(3905)),i=(n(74866),n(85162),["components"]),u={id:"with-navigation-focus",title:"withNavigationFocus",sidebar_label:"withNavigationFocus"},l=void 0,c={unversionedId:"with-navigation-focus",id:"version-2.x/with-navigation-focus",title:"withNavigationFocus",description:"withNavigationFocus is a higher order component which passes the isFocused prop into a wrapped component. It's useful if you need to use the focus state in the render function of your screen component or another component rendered somewhere inside of a screen.",source:"@site/versioned_docs/version-2.x/with-navigation-focus.md",sourceDirName:".",slug:"/with-navigation-focus",permalink:"/docs/2.x/with-navigation-focus",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-2.x/with-navigation-focus.md",tags:[],version:"2.x",frontMatter:{id:"with-navigation-focus",title:"withNavigationFocus",sidebar_label:"withNavigationFocus"},sidebar:"version-2.x-api",previous:{title:"withNavigation",permalink:"/docs/2.x/with-navigation"},next:{title:"NavigationEvents",permalink:"/docs/2.x/navigation-events"}},s={},f=[{value:"Example",id:"example",level:2}],p={toc:f},d="wrapper";function v(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)(d,(0,r.Z)({},p,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,(0,o.kt)("inlineCode",{parentName:"p"},"withNavigationFocus")," is a higher order component which passes the ",(0,o.kt)("inlineCode",{parentName:"p"},"isFocused")," prop into a wrapped component. It's useful if you need to use the focus state in the render function of your screen component or another component rendered somewhere inside of a screen."),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"withNavigationFocus(Component)")," returns a component.")),(0,o.kt)("h2",{id:"example"},"Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"import React from 'react';\nimport { Text } from 'react-native';\nimport { withNavigationFocus } from 'react-navigation';\n\nclass FocusStateLabel extends React.Component {\n render() {\n return {this.props.isFocused ? 'Focused' : 'Not focused'};\n }\n}\n\n// withNavigationFocus returns a component that wraps FocusStateLabel and passes\n// in the navigation prop\nexport default withNavigationFocus(FocusStateLabel);\n")))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/20989594.093a5d51.js b/assets/js/20989594.093a5d51.js new file mode 100644 index 00000000000..b203df33912 --- /dev/null +++ b/assets/js/20989594.093a5d51.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[71280],{3905:function(e,t,n){n.d(t,{Zo:function(){return l},kt:function(){return f}});var r=n(67294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var c=r.createContext({}),u=function(e){var t=r.useContext(c),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},l=function(e){var t=u(e.components);return r.createElement(c.Provider,{value:t},e.children)},s="mdxType",m={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,i=e.originalType,c=e.parentName,l=p(e,["components","mdxType","originalType","parentName"]),s=u(n),d=o,f=s["".concat(c,".").concat(d)]||s[d]||m[d]||i;return n?r.createElement(f,a(a({ref:t},l),{},{components:n})):r.createElement(f,a({ref:t},l))}));function f(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=n.length,a=new Array(i);a[0]=d;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=e,p[s]="string"==typeof e?e:o,a[1]=p;for(var u=2;u\n This is the profile screen of the app\n {route.name}\n \n );\n}\n")),(0,i.kt)("p",null,"You might also find a ",(0,i.kt)("inlineCode",{parentName:"p"},"state")," property on the route object in some cases. This property contains the child navigator's state and may exist when you have a navigator inside this screen. It's important to note that ",(0,i.kt)("strong",{parentName:"p"},"this property may be ",(0,i.kt)("inlineCode",{parentName:"strong"},"undefined"))," even if you have a child navigator. It gets initialized only after the first navigation in the child navigator. It's ",(0,i.kt)("strong",{parentName:"p"},"not recommended")," to use this property."))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/20989594.abe7fd79.js b/assets/js/20989594.abe7fd79.js deleted file mode 100644 index 26b5289ed0c..00000000000 --- a/assets/js/20989594.abe7fd79.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[71280],{3905:function(e,t,n){n.d(t,{Zo:function(){return s},kt:function(){return m}});var r=n(67294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=r.createContext({}),c=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},s=function(e){var t=c(e.components);return r.createElement(l.Provider,{value:t},e.children)},p="mdxType",f={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,l=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=c(n),d=a,m=p["".concat(l,".").concat(d)]||p[d]||f[d]||o;return n?r.createElement(m,i(i({ref:t},s),{},{components:n})):r.createElement(m,i({ref:t},s))}));function m(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=d;var u={};for(var l in t)hasOwnProperty.call(t,l)&&(u[l]=t[l]);u.originalType=e,u[p]="string"==typeof e?e:a,i[1]=u;for(var c=2;c child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function f(e){var t=e.values,n=e.children;return(0,a.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,c.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function d(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function m(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId,o=(0,u.k6)(),i=function(e){var t=e.queryString,n=void 0!==t&&t,r=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,l._X)(i),(0,a.useCallback)((function(e){if(i){var t=new URLSearchParams(o.location.search);t.set(i,e),o.replace(Object.assign({},o.location,{search:t.toString()}))}}),[i,o])]}function v(e){var t,n,r,o,i=e.defaultValue,u=e.queryString,l=void 0!==u&&u,c=e.groupId,p=f(e),v=(0,a.useState)((function(){return function(e){var t,n=e.defaultValue,r=e.tabValues;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!d({value:n,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+r.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var a=null!=(t=r.find((function(e){return e.default})))?t:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:i,tabValues:p})})),h=v[0],b=v[1],g=m({queryString:l,groupId:c}),y=g[0],k=g[1],w=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),n=(0,s.Nk)(t),r=n[0],o=n[1],[r,(0,a.useCallback)((function(e){t&&o.set(e)}),[t,o])]),N=w[0],E=w[1],x=function(){var e=null!=y?y:N;return d({value:e,tabValues:p})?e:null}();return(0,a.useLayoutEffect)((function(){x&&b(x)}),[x]),{selectedValue:h,selectValue:(0,a.useCallback)((function(e){if(!d({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);b(e),k(e),E(e)}),[k,E,p]),tabValues:p}}var h=n(72389),b={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function g(e){var t=e.className,n=e.block,u=e.selectedValue,l=e.selectValue,c=e.tabValues,s=[],p=(0,i.o5)().blockElementScrollPositionUntilNextRender,f=function(e){var t=e.currentTarget,n=s.indexOf(t),r=c[n].value;r!==u&&(p(t),l(r))},d=function(e){var t,n=null;switch(e.key){case"Enter":f(e);break;case"ArrowRight":var r,a=s.indexOf(e.currentTarget)+1;n=null!=(r=s[a])?r:s[0];break;case"ArrowLeft":var o,i=s.indexOf(e.currentTarget)-1;n=null!=(o=s[i])?o:s[s.length-1]}null==(t=n)||t.focus()};return a.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":n},t)},c.map((function(e){var t=e.value,n=e.label,i=e.attributes;return a.createElement("li",(0,r.Z)({role:"tab",tabIndex:u===t?0:-1,"aria-selected":u===t,key:t,ref:function(e){return s.push(e)},onKeyDown:d,onClick:f},i,{className:(0,o.Z)("tabs__item",b.tabItem,null==i?void 0:i.className,{"tabs__item--active":u===t})}),null!=n?n:t)})))}function y(e){var t=e.lazy,n=e.children,r=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var o=n.find((function(e){return e.props.value===r}));return o?(0,a.cloneElement)(o,{className:"margin-top--md"}):null}return a.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,a.cloneElement)(e,{key:t,hidden:e.props.value!==r})})))}function k(e){var t=v(e);return a.createElement("div",{className:(0,o.Z)("tabs-container",b.tabList)},a.createElement(g,(0,r.Z)({},e,t)),a.createElement(y,(0,r.Z)({},e,t)))}function w(e){var t=(0,h.Z)();return a.createElement(k,(0,r.Z)({key:String(t)},e))}},35880:function(e,t,n){n.r(t),n.d(t,{assets:function(){return s},contentTitle:function(){return l},default:function(){return m},frontMatter:function(){return u},metadata:function(){return c},toc:function(){return p}});var r=n(83117),a=n(80102),o=(n(67294),n(3905)),i=(n(74866),n(85162),["components"]),u={id:"route-prop",title:"Route prop reference",sidebar_label:"Route prop"},l=void 0,c={unversionedId:"route-prop",id:"version-5.x/route-prop",title:"Route prop reference",description:"Each screen component in your app is provided with the route prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives).",source:"@site/versioned_docs/version-5.x/route-prop.md",sourceDirName:".",slug:"/route-prop",permalink:"/docs/5.x/route-prop",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-5.x/route-prop.md",tags:[],version:"5.x",frontMatter:{id:"route-prop",title:"Route prop reference",sidebar_label:"Route prop"},sidebar:"version-5.x/docs",previous:{title:"Options for screens",permalink:"/docs/5.x/screen-options"},next:{title:"Navigation prop",permalink:"/docs/5.x/navigation-prop"}},s={},p=[],f={toc:p},d="wrapper";function m(e){var t=e.components,n=(0,a.Z)(e,i);return(0,o.kt)(d,(0,r.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Each ",(0,o.kt)("inlineCode",{parentName:"p"},"screen")," component in your app is provided with the ",(0,o.kt)("inlineCode",{parentName:"p"},"route")," prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives)."),(0,o.kt)("ul",null,(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"route"),(0,o.kt)("ul",{parentName:"li"},(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"key")," - Unique key of the screen. Created automatically or added while navigating to this screen."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"name")," - Name of the screen. Defined in navigator component hierarchy."),(0,o.kt)("li",{parentName:"ul"},(0,o.kt)("inlineCode",{parentName:"li"},"params")," - An optional object containing params which is defined while navigating e.g. ",(0,o.kt)("inlineCode",{parentName:"li"},"navigate('Twitter', { user: 'Dan Abramov' })"),".")))),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-js"},"function ProfileScreen({ route }) {\n return (\n \n This is the profile screen of the app\n {route.name}\n \n );\n}\n")),(0,o.kt)("p",null,"You might also find a ",(0,o.kt)("inlineCode",{parentName:"p"},"state")," property on the route object in some cases. This property contains the child navigator's state and may exist when you have a navigator inside this screen. It's important to note that ",(0,o.kt)("strong",{parentName:"p"},"this property may be ",(0,o.kt)("inlineCode",{parentName:"strong"},"undefined"))," even if you have a child navigator. It gets initialized only after the first navigation in the child navigator. It's ",(0,o.kt)("strong",{parentName:"p"},"not recommended")," to use this property."))}m.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/220adfdd.7669851c.js b/assets/js/220adfdd.7669851c.js deleted file mode 100644 index 4ab579d6e7f..00000000000 --- a/assets/js/220adfdd.7669851c.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[83073],{3905:function(e,n,t){t.d(n,{Zo:function(){return s},kt:function(){return f}});var a=t(67294);function r(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);n&&(a=a.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,a)}return t}function i(e){for(var n=1;n=0||(r[t]=e[t]);return r}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(r[t]=e[t])}return r}var l=a.createContext({}),c=function(e){var n=a.useContext(l),t=n;return e&&(t="function"==typeof e?e(n):i(i({},n),e)),t},s=function(e){var n=c(e.components);return a.createElement(l.Provider,{value:n},e.children)},p="mdxType",v={inlineCode:"code",wrapper:function(e){var n=e.children;return a.createElement(a.Fragment,{},n)}},g=a.forwardRef((function(e,n){var t=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,s=u(e,["components","mdxType","originalType","parentName"]),p=c(t),g=r,f=p["".concat(l,".").concat(g)]||p[g]||v[g]||o;return t?a.createElement(f,i(i({ref:n},s),{},{components:t})):a.createElement(f,i({ref:n},s))}));function f(e,n){var t=arguments,r=n&&n.mdxType;if("string"==typeof e||r){var o=t.length,i=new Array(o);i[0]=g;var u={};for(var l in n)hasOwnProperty.call(n,l)&&(u[l]=n[l]);u.originalType=e,u[p]="string"==typeof e?e:r,i[1]=u;for(var c=2;c child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var n=e.props;return{value:n.value,label:n.label,attributes:n.attributes,default:n.default}}))}function v(e){var n=e.values,t=e.children;return(0,r.useMemo)((function(){var e=null!=n?n:p(t);return function(e){var n=(0,c.l)(e,(function(e,n){return e.value===n.value}));if(n.length>0)throw new Error('Docusaurus error: Duplicate values "'+n.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[n,t])}function g(e){var n=e.value;return e.tabValues.some((function(e){return e.value===n}))}function f(e){var n=e.queryString,t=void 0!==n&&n,a=e.groupId,o=(0,u.k6)(),i=function(e){var n=e.queryString,t=void 0!==n&&n,a=e.groupId;if("string"==typeof t)return t;if(!1===t)return null;if(!0===t&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:t,groupId:a});return[(0,l._X)(i),(0,r.useCallback)((function(e){if(i){var n=new URLSearchParams(o.location.search);n.set(i,e),o.replace(Object.assign({},o.location,{search:n.toString()}))}}),[i,o])]}function d(e){var n,t,a,o,i=e.defaultValue,u=e.queryString,l=void 0!==u&&u,c=e.groupId,p=v(e),d=(0,r.useState)((function(){return function(e){var n,t=e.defaultValue,a=e.tabValues;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}var r=null!=(n=a.find((function(e){return e.default})))?n:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:i,tabValues:p})})),m=d[0],h=d[1],y=f({queryString:l,groupId:c}),b=y[0],w=y[1],N=(n=function(e){return e?"docusaurus.tab."+e:null}({groupId:c}.groupId),t=(0,s.Nk)(n),a=t[0],o=t[1],[a,(0,r.useCallback)((function(e){n&&o.set(e)}),[n,o])]),k=N[0],T=N[1],x=function(){var e=null!=b?b:k;return g({value:e,tabValues:p})?e:null}();return(0,r.useLayoutEffect)((function(){x&&h(x)}),[x]),{selectedValue:m,selectValue:(0,r.useCallback)((function(e){if(!g({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);h(e),w(e),T(e)}),[w,T,p]),tabValues:p}}var m=t(72389),h={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function y(e){var n=e.className,t=e.block,u=e.selectedValue,l=e.selectValue,c=e.tabValues,s=[],p=(0,i.o5)().blockElementScrollPositionUntilNextRender,v=function(e){var n=e.currentTarget,t=s.indexOf(n),a=c[t].value;a!==u&&(p(n),l(a))},g=function(e){var n,t=null;switch(e.key){case"Enter":v(e);break;case"ArrowRight":var a,r=s.indexOf(e.currentTarget)+1;t=null!=(a=s[r])?a:s[0];break;case"ArrowLeft":var o,i=s.indexOf(e.currentTarget)-1;t=null!=(o=s[i])?o:s[s.length-1]}null==(n=t)||n.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":t},n)},c.map((function(e){var n=e.value,t=e.label,i=e.attributes;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:u===n?0:-1,"aria-selected":u===n,key:n,ref:function(e){return s.push(e)},onKeyDown:g,onClick:v},i,{className:(0,o.Z)("tabs__item",h.tabItem,null==i?void 0:i.className,{"tabs__item--active":u===n})}),null!=t?t:n)})))}function b(e){var n=e.lazy,t=e.children,a=e.selectedValue;if(t=Array.isArray(t)?t:[t],n){var o=t.find((function(e){return e.props.value===a}));return o?(0,r.cloneElement)(o,{className:"margin-top--md"}):null}return r.createElement("div",{className:"margin-top--md"},t.map((function(e,n){return(0,r.cloneElement)(e,{key:n,hidden:e.props.value!==a})})))}function w(e){var n=d(e);return r.createElement("div",{className:(0,o.Z)("tabs-container",h.tabList)},r.createElement(y,(0,a.Z)({},e,n)),r.createElement(b,(0,a.Z)({},e,n)))}function N(e){var n=(0,m.Z)();return r.createElement(w,(0,a.Z)({key:String(n)},e))}},83880:function(e,n,t){t.r(n),t.d(n,{assets:function(){return s},contentTitle:function(){return l},default:function(){return f},frontMatter:function(){return u},metadata:function(){return c},toc:function(){return p}});var a=t(83117),r=t(80102),o=(t(67294),t(3905)),i=(t(74866),t(85162),["components"]),u={id:"navigating-without-navigation-prop",title:"Navigating without the navigation prop",sidebar_label:"Navigating without the navigation prop"},l=void 0,c={unversionedId:"navigating-without-navigation-prop",id:"version-2.x/navigating-without-navigation-prop",title:"Navigating without the navigation prop",description:"Calling functions such as navigate or popToTop on the navigation prop is not the only way to navigate around your app. As an alternative, you can dispatch navigation actions on your top-level navigator, provided you aren't passing your own navigation prop as you would with a redux integration. The presented approach is useful in situations when you want to trigger a navigation action from places where you do not have access to the navigation prop, or if you're looking for an alternative to using the navigation prop.",source:"@site/versioned_docs/version-2.x/navigating-without-navigation-prop.md",sourceDirName:".",slug:"/navigating-without-navigation-prop",permalink:"/docs/2.x/navigating-without-navigation-prop",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-2.x/navigating-without-navigation-prop.md",tags:[],version:"2.x",frontMatter:{id:"navigating-without-navigation-prop",title:"Navigating without the navigation prop",sidebar_label:"Navigating without the navigation prop"},sidebar:"version-2.x-docs",previous:{title:"Access the navigation prop from any component",permalink:"/docs/2.x/connecting-navigation-prop"},next:{title:"Using the navigation key",permalink:"/docs/2.x/navigation-key"}},s={},p=[],v={toc:p},g="wrapper";function f(e){var n=e.components,t=(0,r.Z)(e,i);return(0,o.kt)(g,(0,a.Z)({},v,t,{components:n,mdxType:"MDXLayout"}),(0,o.kt)("p",null,"Calling functions such as ",(0,o.kt)("inlineCode",{parentName:"p"},"navigate")," or ",(0,o.kt)("inlineCode",{parentName:"p"},"popToTop")," on the ",(0,o.kt)("inlineCode",{parentName:"p"},"navigation")," prop is not the only way to navigate around your app. As an alternative, you can dispatch navigation actions on your top-level navigator, provided you aren't passing your own ",(0,o.kt)("inlineCode",{parentName:"p"},"navigation")," prop as you would with a redux integration. The presented approach is useful in situations when you want to trigger a navigation action from places where you do not have access to the ",(0,o.kt)("inlineCode",{parentName:"p"},"navigation")," prop, or if you're looking for an alternative to using the ",(0,o.kt)("inlineCode",{parentName:"p"},"navigation")," prop."),(0,o.kt)("p",null,"You can get access to a navigator through a ",(0,o.kt)("inlineCode",{parentName:"p"},"ref")," and pass it to the ",(0,o.kt)("inlineCode",{parentName:"p"},"NavigationService")," which we will later use to navigate. Use this only with the top-level (root) navigator of your app."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"// App.js\n\nimport NavigationService from './NavigationService';\n\nconst TopLevelNavigator = createStackNavigator({ /* ... */ })\n\nclass App extends React.Component {\n // ...\n\n render() {\n return (\n {\n NavigationService.setTopLevelNavigator(navigatorRef);\n }}\n />\n );\n }\n}\n")),(0,o.kt)("p",null,"In the next step, we define ",(0,o.kt)("inlineCode",{parentName:"p"},"NavigationService")," which is a simple module with functions that dispatch user-defined navigation actions."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"// NavigationService.js\n\nimport { NavigationActions } from 'react-navigation';\n\nlet _navigator;\n\nfunction setTopLevelNavigator(navigatorRef) {\n _navigator = navigatorRef;\n}\n\nfunction navigate(routeName, params) {\n _navigator.dispatch(\n NavigationActions.navigate({\n routeName,\n params,\n })\n );\n}\n\n// add other navigation functions that you need and export them\n\nexport default {\n navigate,\n setTopLevelNavigator,\n};\n")),(0,o.kt)("p",null,"Then, in any of your javascript modules, just import the ",(0,o.kt)("inlineCode",{parentName:"p"},"NavigationService")," and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works just as well when used from within them."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"// any js module\nimport NavigationService from 'path-to-NavigationService.js';\n\n// ...\n\nNavigationService.navigate('ChatScreen', { userName: 'Lucy' });\n")),(0,o.kt)("p",null,"In ",(0,o.kt)("inlineCode",{parentName:"p"},"NavigationService"),", you can create your own navigation actions, or compose multiple navigation actions into one, and then easily reuse them throughout your application. When writing tests, you may mock the navigation functions, and make assertions on whether the correct functions are called, with the correct parameters."))}f.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/220adfdd.f878b33e.js b/assets/js/220adfdd.f878b33e.js new file mode 100644 index 00000000000..04ad9396120 --- /dev/null +++ b/assets/js/220adfdd.f878b33e.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[83073],{3905:function(n,t,e){e.d(t,{Zo:function(){return s},kt:function(){return h}});var a=e(67294);function i(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function o(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(n);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,a)}return e}function r(n){for(var t=1;t=0||(i[e]=n[e]);return i}(n,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(n);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(i[e]=n[e])}return i}var c=a.createContext({}),u=function(n){var t=a.useContext(c),e=t;return n&&(e="function"==typeof n?n(t):r(r({},t),n)),e},s=function(n){var t=u(n.components);return a.createElement(c.Provider,{value:t},n.children)},v="mdxType",g={inlineCode:"code",wrapper:function(n){var t=n.children;return a.createElement(a.Fragment,{},t)}},l=a.forwardRef((function(n,t){var e=n.components,i=n.mdxType,o=n.originalType,c=n.parentName,s=p(n,["components","mdxType","originalType","parentName"]),v=u(e),l=i,h=v["".concat(c,".").concat(l)]||v[l]||g[l]||o;return e?a.createElement(h,r(r({ref:t},s),{},{components:e})):a.createElement(h,r({ref:t},s))}));function h(n,t){var e=arguments,i=t&&t.mdxType;if("string"==typeof n||i){var o=e.length,r=new Array(o);r[0]=l;var p={};for(var c in t)hasOwnProperty.call(t,c)&&(p[c]=t[c]);p.originalType=n,p[v]="string"==typeof n?n:i,r[1]=p;for(var u=2;u {\n NavigationService.setTopLevelNavigator(navigatorRef);\n }}\n />\n );\n }\n}\n")),(0,o.kt)("p",null,"In the next step, we define ",(0,o.kt)("inlineCode",{parentName:"p"},"NavigationService")," which is a simple module with functions that dispatch user-defined navigation actions."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"// NavigationService.js\n\nimport { NavigationActions } from 'react-navigation';\n\nlet _navigator;\n\nfunction setTopLevelNavigator(navigatorRef) {\n _navigator = navigatorRef;\n}\n\nfunction navigate(routeName, params) {\n _navigator.dispatch(\n NavigationActions.navigate({\n routeName,\n params,\n })\n );\n}\n\n// add other navigation functions that you need and export them\n\nexport default {\n navigate,\n setTopLevelNavigator,\n};\n")),(0,o.kt)("p",null,"Then, in any of your javascript modules, just import the ",(0,o.kt)("inlineCode",{parentName:"p"},"NavigationService")," and call functions which you exported from it. You may use this approach outside of your React components and, in fact, it works just as well when used from within them."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-javascript"},"// any js module\nimport NavigationService from 'path-to-NavigationService.js';\n\n// ...\n\nNavigationService.navigate('ChatScreen', { userName: 'Lucy' });\n")),(0,o.kt)("p",null,"In ",(0,o.kt)("inlineCode",{parentName:"p"},"NavigationService"),", you can create your own navigation actions, or compose multiple navigation actions into one, and then easily reuse them throughout your application. When writing tests, you may mock the navigation functions, and make assertions on whether the correct functions are called, with the correct parameters."))}h.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2a1e22c6.69202de4.js b/assets/js/2a1e22c6.69202de4.js deleted file mode 100644 index c6250e3e52e..00000000000 --- a/assets/js/2a1e22c6.69202de4.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[36234],{3905:function(e,t,a){a.d(t,{Zo:function(){return c},kt:function(){return h}});var n=a(67294);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var s=n.createContext({}),u=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},c=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},b=n.forwardRef((function(e,t){var a=e.components,o=e.mdxType,r=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=u(a),b=o,h=d["".concat(s,".").concat(b)]||d[b]||p[b]||r;return a?n.createElement(h,i(i({ref:t},c),{},{components:a})):n.createElement(h,i({ref:t},c))}));function h(e,t){var a=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=a.length,i=new Array(r);i[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:o,i[1]=l;for(var u=2;u child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function p(e){var t=e.values,a=e.children;return(0,o.useMemo)((function(){var e=null!=t?t:d(a);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,a])}function b(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function h(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId,r=(0,l.k6)(),i=function(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId;if("string"==typeof a)return a;if(!1===a)return null;if(!0===a&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:a,groupId:n});return[(0,s._X)(i),(0,o.useCallback)((function(e){if(i){var t=new URLSearchParams(r.location.search);t.set(i,e),r.replace(Object.assign({},r.location,{search:t.toString()}))}}),[i,r])]}function m(e){var t,a,n,r,i=e.defaultValue,l=e.queryString,s=void 0!==l&&l,u=e.groupId,d=p(e),m=(0,o.useState)((function(){return function(e){var t,a=e.defaultValue,n=e.tabValues;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(a){if(!b({value:a,tabValues:n}))throw new Error('Docusaurus error: The has a defaultValue "'+a+'" but none of its children has the corresponding value. Available values are: '+n.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return a}var o=null!=(t=n.find((function(e){return e.default})))?t:n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:i,tabValues:d})})),v=m[0],k=m[1],f=h({queryString:s,groupId:u}),g=f[0],y=f[1],N=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),a=(0,c.Nk)(t),n=a[0],r=a[1],[n,(0,o.useCallback)((function(e){t&&r.set(e)}),[t,r])]),C=N[0],T=N[1],B=function(){var e=null!=g?g:C;return b({value:e,tabValues:d})?e:null}();return(0,o.useLayoutEffect)((function(){B&&k(B)}),[B]),{selectedValue:v,selectValue:(0,o.useCallback)((function(e){if(!b({value:e,tabValues:d}))throw new Error("Can't select invalid tab value="+e);k(e),y(e),T(e)}),[y,T,d]),tabValues:d}}var v=a(72389),k={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function f(e){var t=e.className,a=e.block,l=e.selectedValue,s=e.selectValue,u=e.tabValues,c=[],d=(0,i.o5)().blockElementScrollPositionUntilNextRender,p=function(e){var t=e.currentTarget,a=c.indexOf(t),n=u[a].value;n!==l&&(d(t),s(n))},b=function(e){var t,a=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":var n,o=c.indexOf(e.currentTarget)+1;a=null!=(n=c[o])?n:c[0];break;case"ArrowLeft":var r,i=c.indexOf(e.currentTarget)-1;a=null!=(r=c[i])?r:c[c.length-1]}null==(t=a)||t.focus()};return o.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":a},t)},u.map((function(e){var t=e.value,a=e.label,i=e.attributes;return o.createElement("li",(0,n.Z)({role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,key:t,ref:function(e){return c.push(e)},onKeyDown:b,onClick:p},i,{className:(0,r.Z)("tabs__item",k.tabItem,null==i?void 0:i.className,{"tabs__item--active":l===t})}),null!=a?a:t)})))}function g(e){var t=e.lazy,a=e.children,n=e.selectedValue;if(a=Array.isArray(a)?a:[a],t){var r=a.find((function(e){return e.props.value===n}));return r?(0,o.cloneElement)(r,{className:"margin-top--md"}):null}return o.createElement("div",{className:"margin-top--md"},a.map((function(e,t){return(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==n})})))}function y(e){var t=m(e);return o.createElement("div",{className:(0,r.Z)("tabs-container",k.tabList)},o.createElement(f,(0,n.Z)({},e,t)),o.createElement(g,(0,n.Z)({},e,t)))}function N(e){var t=(0,v.Z)();return o.createElement(y,(0,n.Z)({key:String(t)},e))}},4947:function(e,t,a){a.r(t),a.d(t,{assets:function(){return p},contentTitle:function(){return c},default:function(){return v},frontMatter:function(){return u},metadata:function(){return d},toc:function(){return b}});var n=a(83117),o=a(80102),r=(a(67294),a(3905)),i=a(74866),l=a(85162),s=["components"],u={id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},c=void 0,d={unversionedId:"bottom-tab-navigator",id:"version-6.x/bottom-tab-navigator",title:"Bottom Tabs Navigator",description:"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.",source:"@site/versioned_docs/version-6.x/bottom-tab-navigator.md",sourceDirName:".",slug:"/bottom-tab-navigator",permalink:"/docs/bottom-tab-navigator",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/bottom-tab-navigator.md",tags:[],version:"6.x",frontMatter:{id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},sidebar:"version-6.x/docs",previous:{title:"Drawer",permalink:"/docs/drawer-navigator"},next:{title:"Material Bottom Tabs",permalink:"/docs/material-bottom-tab-navigator"}},p={},b=[{value:"Installation",id:"installation",level:2},{value:"API Definition",id:"api-definition",level:2},{value:"Props",id:"props",level:3},{value:"id",id:"id",level:4},{value:"initialRouteName",id:"initialroutename",level:4},{value:"screenOptions",id:"screenoptions",level:4},{value:"backBehavior",id:"backbehavior",level:4},{value:"detachInactiveScreens",id:"detachinactivescreens",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"tabBar",id:"tabbar",level:4},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"tabBarLabel",id:"tabbarlabel",level:4},{value:"tabBarShowLabel",id:"tabbarshowlabel",level:4},{value:"tabBarLabelPosition",id:"tabbarlabelposition",level:4},{value:"tabBarLabelStyle",id:"tabbarlabelstyle",level:4},{value:"tabBarIcon",id:"tabbaricon",level:4},{value:"tabBarIconStyle",id:"tabbariconstyle",level:4},{value:"tabBarBadge",id:"tabbarbadge",level:4},{value:"tabBarBadgeStyle",id:"tabbarbadgestyle",level:4},{value:"tabBarAccessibilityLabel",id:"tabbaraccessibilitylabel",level:4},{value:"tabBarTestID",id:"tabbartestid",level:4},{value:"tabBarButton",id:"tabbarbutton",level:4},{value:"tabBarActiveTintColor",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor",id:"tabbarinactivetintcolor",level:4},{value:"tabBarActiveBackgroundColor",id:"tabbaractivebackgroundcolor",level:4},{value:"tabBarInactiveBackgroundColor",id:"tabbarinactivebackgroundcolor",level:4},{value:"tabBarHideOnKeyboard",id:"tabbarhideonkeyboard",level:4},{value:"tabBarItemStyle",id:"tabbaritemstyle",level:4},{value:"tabBarStyle",id:"tabbarstyle",level:4},{value:"tabBarBackground",id:"tabbarbackground",level:4},{value:"lazy",id:"lazy",level:4},{value:"unmountOnBlur",id:"unmountonblur",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"Header related options",id:"header-related-options",level:3},{value:"header",id:"header",level:4},{value:"Specify a height in headerStyle",id:"specify-a-height-in-headerstyle",level:5},{value:"headerShown",id:"headershown",level:4},{value:"Events",id:"events",level:3},{value:"tabPress",id:"tabpress",level:4},{value:"tabLongPress",id:"tablongpress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"jumpTo",id:"jumpto",level:4},{value:"Example",id:"example",level:2}],h={toc:b},m="wrapper";function v(e){var t=e.components,a=(0,o.Z)(e,s);return(0,r.kt)(m,(0,n.Z)({},h,a,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused."),(0,r.kt)("div",{style:{display:"flex",margin:"16px 0"}},(0,r.kt)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0},(0,r.kt)("source",{src:"/assets/navigators/tabs/bottom-tabs-demo.mov"}))),(0,r.kt)("h2",{id:"installation"},"Installation"),(0,r.kt)("p",null,"To use this navigator, ensure that you have ",(0,r.kt)("a",{parentName:"p",href:"/docs/getting-started"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/native")," and its dependencies (follow this guide)"),", then install ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/bottom-tabs")),":"),(0,r.kt)(i.Z,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},(0,r.kt)(l.Z,{value:"npm",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @react-navigation/bottom-tabs\n"))),(0,r.kt)(l.Z,{value:"yarn",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @react-navigation/bottom-tabs\n")))),(0,r.kt)("h2",{id:"api-definition"},"API Definition"),(0,r.kt)("p",null,"To use this tab navigator, import it from ",(0,r.kt)("inlineCode",{parentName:"p"},"@react-navigation/bottom-tabs"),":"),(0,r.kt)("samp",{id:"tab-based-navigation-minimal"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import { createBottomTabNavigator } from \'@react-navigation/bottom-tabs\';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabs() {\n return (\n \n \n \n \n );\n}\n')),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"For a complete usage guide please visit ",(0,r.kt)("a",{parentName:"p",href:"/docs/tab-based-navigation"},"Tab Navigation"))),(0,r.kt)("h3",{id:"props"},"Props"),(0,r.kt)("p",null,"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Navigator")," component accepts following props:"),(0,r.kt)("h4",{id:"id"},(0,r.kt)("inlineCode",{parentName:"h4"},"id")),(0,r.kt)("p",null,"Optional unique ID for the navigator. This can be used with ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-prop#getparent"},(0,r.kt)("inlineCode",{parentName:"a"},"navigation.getParent"))," to refer to this navigator in a child navigator."),(0,r.kt)("h4",{id:"initialroutename"},(0,r.kt)("inlineCode",{parentName:"h4"},"initialRouteName")),(0,r.kt)("p",null,"The name of the route to render on first load of the navigator."),(0,r.kt)("h4",{id:"screenoptions"},(0,r.kt)("inlineCode",{parentName:"h4"},"screenOptions")),(0,r.kt)("p",null,"Default options to use for the screens in the navigator."),(0,r.kt)("h4",{id:"backbehavior"},(0,r.kt)("inlineCode",{parentName:"h4"},"backBehavior")),(0,r.kt)("p",null,"This controls what happens when ",(0,r.kt)("inlineCode",{parentName:"p"},"goBack")," is called in the navigator. This includes pressing the device's back button or back gesture on Android."),(0,r.kt)("p",null,"It supports the following values:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"firstRoute")," - return to the first screen defined in the navigator (default)"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"initialRoute")," - return to initial screen passed in ",(0,r.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop, if not passed, defaults to the first screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"order")," - return to screen defined before the focused screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"history")," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"none")," - do not handle back button")),(0,r.kt)("h4",{id:"detachinactivescreens"},(0,r.kt)("inlineCode",{parentName:"h4"},"detachInactiveScreens")),(0,r.kt)("p",null,"Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/software-mansion/react-native-screens"},"react-native-screens"),". Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("h4",{id:"scenecontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"sceneContainerStyle")),(0,r.kt)("p",null,"Style object for the component wrapping the screen content."),(0,r.kt)("h4",{id:"tabbar"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBar")),(0,r.kt)("p",null,"Function that returns a React element to display as the tab bar."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("samp",{id:"custom-tab-bar"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { View, Text, TouchableOpacity } from 'react-native';\n\nfunction MyTabBar({ state, descriptors, navigation }) {\n return (\n \n {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n // The `merge: true` option makes sure that the params inside the tab screen are preserved\n navigation.navigate({ name: route.name, merge: true });\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: 'tabLongPress',\n target: route.key,\n });\n };\n\n return (\n \n \n {label}\n \n \n );\n })}\n \n );\n}\n\n// ...\n\n }>\n {...}\n\n")),(0,r.kt)("p",null,"This example will render a basic tab bar with labels."),(0,r.kt)("p",null,"Note that you ",(0,r.kt)("strong",{parentName:"p"},"cannot")," use the ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," hook inside the ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," since ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," is only available inside screens. You get a ",(0,r.kt)("inlineCode",{parentName:"p"},"navigation")," prop for your ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," which you can use instead:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"function MyTabBar({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n />\n );\n}\n")),(0,r.kt)("h3",{id:"options"},"Options"),(0,r.kt)("p",null,"The following ",(0,r.kt)("a",{parentName:"p",href:"/docs/screen-options"},"options")," can be used to configure the screens in the navigator. These can be specified under ",(0,r.kt)("inlineCode",{parentName:"p"},"screenOptions")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.navigator")," or ",(0,r.kt)("inlineCode",{parentName:"p"},"options")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Screen"),"."),(0,r.kt)("h4",{id:"title"},(0,r.kt)("inlineCode",{parentName:"h4"},"title")),(0,r.kt)("p",null,"Generic title that can be used as a fallback for ",(0,r.kt)("inlineCode",{parentName:"p"},"headerTitle")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarLabel"),"."),(0,r.kt)("h4",{id:"tabbarlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabel")),(0,r.kt)("p",null,"Title string of a tab displayed in the tab bar or a function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string }")," returns a React.Node, to display in tab bar. When undefined, scene ",(0,r.kt)("inlineCode",{parentName:"p"},"title")," is used. To hide, see ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarShowLabel"),"."),(0,r.kt)("h4",{id:"tabbarshowlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarShowLabel")),(0,r.kt)("p",null,"Whether the tab label should be visible. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("h4",{id:"tabbarlabelposition"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabelPosition")),(0,r.kt)("p",null,"Whether the label is shown below the icon or beside the icon."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"below-icon"),": the label is shown below the icon (typical for iPhones)"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"beside-icon")," the label is shown next to the icon (typical for iPad)")),(0,r.kt)("p",null,"By default, the position is chosen automatically based on device width."),(0,r.kt)("h4",{id:"tabbarlabelstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabelStyle")),(0,r.kt)("p",null,"Style object for the tab label."),(0,r.kt)("h4",{id:"tabbaricon"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIcon")),(0,r.kt)("p",null,"Function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string, size: number }")," returns a React.Node, to display in the tab bar."),(0,r.kt)("h4",{id:"tabbariconstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIconStyle")),(0,r.kt)("p",null,"Style object for the tab icon."),(0,r.kt)("h4",{id:"tabbarbadge"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBadge")),(0,r.kt)("p",null,"Text to show in a badge on the tab icon. Accepts a ",(0,r.kt)("inlineCode",{parentName:"p"},"string")," or a ",(0,r.kt)("inlineCode",{parentName:"p"},"number"),"."),(0,r.kt)("h4",{id:"tabbarbadgestyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBadgeStyle")),(0,r.kt)("p",null,"Style for the badge on the tab icon. You can specify a background color or text color here."),(0,r.kt)("h4",{id:"tabbaraccessibilitylabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAccessibilityLabel")),(0,r.kt)("p",null,"Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab."),(0,r.kt)("h4",{id:"tabbartestid"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarTestID")),(0,r.kt)("p",null,"ID to locate this tab button in tests."),(0,r.kt)("h4",{id:"tabbarbutton"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarButton")),(0,r.kt)("p",null,"Function which returns a React element to render as the tab bar button. It wraps the icon and label. Renders ",(0,r.kt)("inlineCode",{parentName:"p"},"Pressable")," by default."),(0,r.kt)("p",null,"You can specify a custom implementation here:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"tabBarButton: (props) => ;\n")),(0,r.kt)("h4",{id:"tabbaractivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarActiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the active tab."),(0,r.kt)("h4",{id:"tabbarinactivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarInactiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the inactive tabs."),(0,r.kt)("h4",{id:"tabbaractivebackgroundcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarActiveBackgroundColor")),(0,r.kt)("p",null,"Background color for the active tab."),(0,r.kt)("h4",{id:"tabbarinactivebackgroundcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarInactiveBackgroundColor")),(0,r.kt)("p",null,"Background color for the inactive tabs."),(0,r.kt)("h4",{id:"tabbarhideonkeyboard"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarHideOnKeyboard")),(0,r.kt)("p",null,"Whether the tab bar is hidden when the keyboard opens. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),"."),(0,r.kt)("h4",{id:"tabbaritemstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarItemStyle")),(0,r.kt)("p",null,"Style object for the tab item container."),(0,r.kt)("h4",{id:"tabbarstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarStyle")),(0,r.kt)("p",null,"Style object for the tab bar. You can configure styles such as background color here."),(0,r.kt)("p",null,"To show your screen under the tab bar, you can set the ",(0,r.kt)("inlineCode",{parentName:"p"},"position")," style to absolute:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n")),(0,r.kt)("p",null,"You also might need to add a bottom margin to your content if you have a absolutely positioned tab bar. React Navigation won't do it automatically."),(0,r.kt)("p",null,"To get the height of the bottom tab bar, you can use ",(0,r.kt)("inlineCode",{parentName:"p"},"BottomTabBarHeightContext")," with ",(0,r.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/context.html#contextconsumer"},"React's Context API")," or ",(0,r.kt)("inlineCode",{parentName:"p"},"useBottomTabBarHeight"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';\n\n// ...\n\n\n {tabBarHeight => (\n /* render something */\n )}\n\n")),(0,r.kt)("p",null,"or"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';\n\n// ...\n\nconst tabBarHeight = useBottomTabBarHeight();\n")),(0,r.kt)("h4",{id:"tabbarbackground"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBackground")),(0,r.kt)("p",null,"Function which returns a React Element to use as background for the tab bar. You could render an image, a gradient, blur view etc.:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { BlurView } from 'expo-blur';\n\n// ...\n\n (\n \n ),\n }}\n>\n")),(0,r.kt)("p",null,"When using ",(0,r.kt)("inlineCode",{parentName:"p"},"BlurView"),", make sure to set ",(0,r.kt)("inlineCode",{parentName:"p"},"position: 'absolute'")," in ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarStyle")," as well. You'd also need to use ",(0,r.kt)("inlineCode",{parentName:"p"},"useBottomTabBarHeight()")," to add a bottom padding to your content."),(0,r.kt)("h4",{id:"lazy"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazy")),(0,r.kt)("p",null,"Whether this screens should render the first time it's accessed. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),". Set it to ",(0,r.kt)("inlineCode",{parentName:"p"},"false")," if you want to render the screen on initial render."),(0,r.kt)("h4",{id:"unmountonblur"},(0,r.kt)("inlineCode",{parentName:"h4"},"unmountOnBlur")),(0,r.kt)("p",null,"Whether this screen should be unmounted when navigating away from it. Unmounting a screen resets any local state in the screen as well as state of nested navigators in the screen. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),"."),(0,r.kt)("p",null,"Normally, we don't recommend enabling this prop as users don't expect their navigation history to be lost when switching tabs. If you enable this prop, please consider if this will actually provide a better experience for the user."),(0,r.kt)("h4",{id:"freezeonblur"},(0,r.kt)("inlineCode",{parentName:"h4"},"freezeOnBlur")),(0,r.kt)("p",null,"Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),".\nDefaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true")," when ",(0,r.kt)("inlineCode",{parentName:"p"},"enableFreeze()")," from ",(0,r.kt)("inlineCode",{parentName:"p"},"react-native-screens")," package is run at the top of the application."),(0,r.kt)("p",null,"Requires ",(0,r.kt)("inlineCode",{parentName:"p"},"react-native-screens")," version >=3.16.0."),(0,r.kt)("p",null,"Only supported on iOS and Android."),(0,r.kt)("h3",{id:"header-related-options"},"Header related options"),(0,r.kt)("p",null,"You can find the list of header related options ",(0,r.kt)("a",{parentName:"p",href:"/docs/elements#header"},"here"),". These ",(0,r.kt)("a",{parentName:"p",href:"/docs/screen-options"},"options")," can be specified under ",(0,r.kt)("inlineCode",{parentName:"p"},"screenOptions")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.navigator")," or ",(0,r.kt)("inlineCode",{parentName:"p"},"options")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Screen"),". You don't have to be using ",(0,r.kt)("inlineCode",{parentName:"p"},"@react-navigation/elements")," directly to use these options, they are just documented in that page."),(0,r.kt)("p",null,"In addition to those, the following options are also supported in bottom tabs:"),(0,r.kt)("h4",{id:"header"},(0,r.kt)("inlineCode",{parentName:"h4"},"header")),(0,r.kt)("p",null,"Custom header to use instead of the default header."),(0,r.kt)("p",null,"This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"navigation")," - The navigation object for the current screen."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"route")," - The route object for the current screen."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"options")," - The options for the current screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"layout")," - Dimensions of the screen, contains ",(0,r.kt)("inlineCode",{parentName:"li"},"height")," and ",(0,r.kt)("inlineCode",{parentName:"li"},"width")," properties.")),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { getHeaderTitle } from '@react-navigation/elements';\n\n// ..\n\nheader: ({ navigation, route, options }) => {\n const title = getHeaderTitle(options, route.name);\n\n return ;\n};\n")),(0,r.kt)("p",null,"To set a custom header for all the screens in the navigator, you can specify this option in the ",(0,r.kt)("inlineCode",{parentName:"p"},"screenOptions")," prop of the navigator."),(0,r.kt)("h5",{id:"specify-a-height-in-headerstyle"},"Specify a ",(0,r.kt)("inlineCode",{parentName:"h5"},"height")," in ",(0,r.kt)("inlineCode",{parentName:"h5"},"headerStyle")),(0,r.kt)("p",null,"If your custom header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"headerStyle: {\n height: 80, // Specify the height of your custom header\n};\n")),(0,r.kt)("p",null,"Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use ",(0,r.kt)("inlineCode",{parentName:"p"},"options.headerStyle")," from the props."),(0,r.kt)("h4",{id:"headershown"},(0,r.kt)("inlineCode",{parentName:"h4"},"headerShown")),(0,r.kt)("p",null,"Whether to show or hide the header for the screen. The header is shown by default. Setting this to ",(0,r.kt)("inlineCode",{parentName:"p"},"false")," hides the header."),(0,r.kt)("h3",{id:"events"},"Events"),(0,r.kt)("p",null,"The navigator can ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-events"},"emit events")," on certain actions. Supported events are:"),(0,r.kt)("h4",{id:"tabpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"If the tab is not focused, tab press will focus that tab"),(0,r.kt)("li",{parentName:"ul"},"If the tab is already focused:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a scroll view, you can use ",(0,r.kt)("a",{parentName:"li",href:"/docs/use-scroll-to-top"},(0,r.kt)("inlineCode",{parentName:"a"},"useScrollToTop"))," to scroll it to top"),(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a stack navigator, a ",(0,r.kt)("inlineCode",{parentName:"li"},"popToTop")," action is performed on the stack")))),(0,r.kt)("p",null,"To prevent the default behavior, you can call ",(0,r.kt)("inlineCode",{parentName:"p"},"event.preventDefault"),":"),(0,r.kt)("samp",{id:"bottom-tab-prevent-default"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("p",null,"If you have a custom tab bar, make sure to emit this event."),(0,r.kt)("h4",{id:"tablongpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabLongPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period. If you have a custom tab bar, make sure to emit this event."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabLongPress', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("h3",{id:"helpers"},"Helpers"),(0,r.kt)("p",null,"The tab navigator adds the following methods to the navigation prop:"),(0,r.kt)("h4",{id:"jumpto"},(0,r.kt)("inlineCode",{parentName:"h4"},"jumpTo")),(0,r.kt)("p",null,"Navigates to an existing screen in the tab navigator. The method accepts following arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"name")," - ",(0,r.kt)("em",{parentName:"li"},"string")," - Name of the route to jump to."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"params")," - ",(0,r.kt)("em",{parentName:"li"},"object")," - Screen params to use for the destination route.")),(0,r.kt)("samp",{id:"tab-jump-to"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"navigation.jumpTo('Profile', { owner: 'Micha\u015b' });\n")),(0,r.kt)("h2",{id:"example"},"Example"),(0,r.kt)("samp",{id:"bottom-tab-example"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import { createBottomTabNavigator } from \'@react-navigation/bottom-tabs\';\nimport MaterialCommunityIcons from \'react-native-vector-icons/MaterialCommunityIcons\';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabs() {\n return (\n \n (\n \n ),\n }}\n />\n (\n \n ),\n tabBarBadge: 3,\n }}\n />\n (\n \n ),\n }}\n />\n \n );\n}\n')))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/2a1e22c6.84f53c4c.js b/assets/js/2a1e22c6.84f53c4c.js new file mode 100644 index 00000000000..7859b52ad65 --- /dev/null +++ b/assets/js/2a1e22c6.84f53c4c.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[36234],{3905:function(e,t,a){a.d(t,{Zo:function(){return c},kt:function(){return h}});var n=a(67294);function o(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(o[a]=e[a]);return o}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(o[a]=e[a])}return o}var s=n.createContext({}),u=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},c=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},d="mdxType",p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},b=n.forwardRef((function(e,t){var a=e.components,o=e.mdxType,r=e.originalType,s=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=u(a),b=o,h=d["".concat(s,".").concat(b)]||d[b]||p[b]||r;return a?n.createElement(h,i(i({ref:t},c),{},{components:a})):n.createElement(h,i({ref:t},c))}));function h(e,t){var a=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var r=a.length,i=new Array(r);i[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[d]="string"==typeof e?e:o,i[1]=l;for(var u=2;u child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function p(e){var t=e.values,a=e.children;return(0,o.useMemo)((function(){var e=null!=t?t:d(a);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,a])}function b(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function h(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId,r=(0,l.k6)(),i=function(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId;if("string"==typeof a)return a;if(!1===a)return null;if(!0===a&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:a,groupId:n});return[(0,s._X)(i),(0,o.useCallback)((function(e){if(i){var t=new URLSearchParams(r.location.search);t.set(i,e),r.replace(Object.assign({},r.location,{search:t.toString()}))}}),[i,r])]}function m(e){var t,a,n,r,i=e.defaultValue,l=e.queryString,s=void 0!==l&&l,u=e.groupId,d=p(e),m=(0,o.useState)((function(){return function(e){var t,a=e.defaultValue,n=e.tabValues;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(a){if(!b({value:a,tabValues:n}))throw new Error('Docusaurus error: The has a defaultValue "'+a+'" but none of its children has the corresponding value. Available values are: '+n.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return a}var o=null!=(t=n.find((function(e){return e.default})))?t:n[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:i,tabValues:d})})),v=m[0],k=m[1],f=h({queryString:s,groupId:u}),g=f[0],y=f[1],N=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),a=(0,c.Nk)(t),n=a[0],r=a[1],[n,(0,o.useCallback)((function(e){t&&r.set(e)}),[t,r])]),C=N[0],T=N[1],B=function(){var e=null!=g?g:C;return b({value:e,tabValues:d})?e:null}();return(0,o.useLayoutEffect)((function(){B&&k(B)}),[B]),{selectedValue:v,selectValue:(0,o.useCallback)((function(e){if(!b({value:e,tabValues:d}))throw new Error("Can't select invalid tab value="+e);k(e),y(e),T(e)}),[y,T,d]),tabValues:d}}var v=a(72389),k={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function f(e){var t=e.className,a=e.block,l=e.selectedValue,s=e.selectValue,u=e.tabValues,c=[],d=(0,i.o5)().blockElementScrollPositionUntilNextRender,p=function(e){var t=e.currentTarget,a=c.indexOf(t),n=u[a].value;n!==l&&(d(t),s(n))},b=function(e){var t,a=null;switch(e.key){case"Enter":p(e);break;case"ArrowRight":var n,o=c.indexOf(e.currentTarget)+1;a=null!=(n=c[o])?n:c[0];break;case"ArrowLeft":var r,i=c.indexOf(e.currentTarget)-1;a=null!=(r=c[i])?r:c[c.length-1]}null==(t=a)||t.focus()};return o.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":a},t)},u.map((function(e){var t=e.value,a=e.label,i=e.attributes;return o.createElement("li",(0,n.Z)({role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,key:t,ref:function(e){return c.push(e)},onKeyDown:b,onClick:p},i,{className:(0,r.Z)("tabs__item",k.tabItem,null==i?void 0:i.className,{"tabs__item--active":l===t})}),null!=a?a:t)})))}function g(e){var t=e.lazy,a=e.children,n=e.selectedValue;if(a=Array.isArray(a)?a:[a],t){var r=a.find((function(e){return e.props.value===n}));return r?(0,o.cloneElement)(r,{className:"margin-top--md"}):null}return o.createElement("div",{className:"margin-top--md"},a.map((function(e,t){return(0,o.cloneElement)(e,{key:t,hidden:e.props.value!==n})})))}function y(e){var t=m(e);return o.createElement("div",{className:(0,r.Z)("tabs-container",k.tabList)},o.createElement(f,(0,n.Z)({},e,t)),o.createElement(g,(0,n.Z)({},e,t)))}function N(e){var t=(0,v.Z)();return o.createElement(y,(0,n.Z)({key:String(t)},e))}},4947:function(e,t,a){a.r(t),a.d(t,{assets:function(){return p},contentTitle:function(){return c},default:function(){return v},frontMatter:function(){return u},metadata:function(){return d},toc:function(){return b}});var n=a(83117),o=a(80102),r=(a(67294),a(3905)),i=a(74866),l=a(85162),s=["components"],u={id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},c=void 0,d={unversionedId:"bottom-tab-navigator",id:"version-6.x/bottom-tab-navigator",title:"Bottom Tabs Navigator",description:"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.",source:"@site/versioned_docs/version-6.x/bottom-tab-navigator.md",sourceDirName:".",slug:"/bottom-tab-navigator",permalink:"/docs/bottom-tab-navigator",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/bottom-tab-navigator.md",tags:[],version:"6.x",frontMatter:{id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},sidebar:"version-6.x/docs",previous:{title:"Drawer",permalink:"/docs/drawer-navigator"},next:{title:"Material Bottom Tabs",permalink:"/docs/material-bottom-tab-navigator"}},p={},b=[{value:"Installation",id:"installation",level:2},{value:"API Definition",id:"api-definition",level:2},{value:"Props",id:"props",level:3},{value:"id",id:"id",level:4},{value:"initialRouteName",id:"initialroutename",level:4},{value:"screenOptions",id:"screenoptions",level:4},{value:"backBehavior",id:"backbehavior",level:4},{value:"detachInactiveScreens",id:"detachinactivescreens",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"tabBar",id:"tabbar",level:4},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"tabBarLabel",id:"tabbarlabel",level:4},{value:"tabBarShowLabel",id:"tabbarshowlabel",level:4},{value:"tabBarLabelPosition",id:"tabbarlabelposition",level:4},{value:"tabBarLabelStyle",id:"tabbarlabelstyle",level:4},{value:"tabBarIcon",id:"tabbaricon",level:4},{value:"tabBarIconStyle",id:"tabbariconstyle",level:4},{value:"tabBarBadge",id:"tabbarbadge",level:4},{value:"tabBarBadgeStyle",id:"tabbarbadgestyle",level:4},{value:"tabBarAccessibilityLabel",id:"tabbaraccessibilitylabel",level:4},{value:"tabBarTestID",id:"tabbartestid",level:4},{value:"tabBarButton",id:"tabbarbutton",level:4},{value:"tabBarActiveTintColor",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor",id:"tabbarinactivetintcolor",level:4},{value:"tabBarActiveBackgroundColor",id:"tabbaractivebackgroundcolor",level:4},{value:"tabBarInactiveBackgroundColor",id:"tabbarinactivebackgroundcolor",level:4},{value:"tabBarHideOnKeyboard",id:"tabbarhideonkeyboard",level:4},{value:"tabBarItemStyle",id:"tabbaritemstyle",level:4},{value:"tabBarStyle",id:"tabbarstyle",level:4},{value:"tabBarBackground",id:"tabbarbackground",level:4},{value:"lazy",id:"lazy",level:4},{value:"unmountOnBlur",id:"unmountonblur",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"Header related options",id:"header-related-options",level:3},{value:"header",id:"header",level:4},{value:"Specify a height in headerStyle",id:"specify-a-height-in-headerstyle",level:5},{value:"headerShown",id:"headershown",level:4},{value:"Events",id:"events",level:3},{value:"tabPress",id:"tabpress",level:4},{value:"tabLongPress",id:"tablongpress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"jumpTo",id:"jumpto",level:4},{value:"Example",id:"example",level:2}],h={toc:b},m="wrapper";function v(e){var t=e.components,a=(0,o.Z)(e,s);return(0,r.kt)(m,(0,n.Z)({},h,a,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused."),(0,r.kt)("div",{style:{display:"flex",margin:"16px 0"}},(0,r.kt)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0},(0,r.kt)("source",{src:"/assets/navigators/tabs/bottom-tabs-demo.mov"}))),(0,r.kt)("h2",{id:"installation"},"Installation"),(0,r.kt)("p",null,"To use this navigator, ensure that you have ",(0,r.kt)("a",{parentName:"p",href:"/docs/getting-started"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/native")," and its dependencies (follow this guide)"),", then install ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/bottom-tabs")),":"),(0,r.kt)(i.Z,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},(0,r.kt)(l.Z,{value:"npm",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @react-navigation/bottom-tabs\n"))),(0,r.kt)(l.Z,{value:"yarn",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @react-navigation/bottom-tabs\n")))),(0,r.kt)("h2",{id:"api-definition"},"API Definition"),(0,r.kt)("p",null,"To use this tab navigator, import it from ",(0,r.kt)("inlineCode",{parentName:"p"},"@react-navigation/bottom-tabs"),":"),(0,r.kt)("samp",{id:"tab-based-navigation-minimal"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import { createBottomTabNavigator } from \'@react-navigation/bottom-tabs\';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabs() {\n return (\n \n \n \n \n );\n}\n')),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"For a complete usage guide please visit ",(0,r.kt)("a",{parentName:"p",href:"/docs/tab-based-navigation"},"Tab Navigation"))),(0,r.kt)("h3",{id:"props"},"Props"),(0,r.kt)("p",null,"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Navigator")," component accepts following props:"),(0,r.kt)("h4",{id:"id"},(0,r.kt)("inlineCode",{parentName:"h4"},"id")),(0,r.kt)("p",null,"Optional unique ID for the navigator. This can be used with ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-prop#getparent"},(0,r.kt)("inlineCode",{parentName:"a"},"navigation.getParent"))," to refer to this navigator in a child navigator."),(0,r.kt)("h4",{id:"initialroutename"},(0,r.kt)("inlineCode",{parentName:"h4"},"initialRouteName")),(0,r.kt)("p",null,"The name of the route to render on first load of the navigator."),(0,r.kt)("h4",{id:"screenoptions"},(0,r.kt)("inlineCode",{parentName:"h4"},"screenOptions")),(0,r.kt)("p",null,"Default options to use for the screens in the navigator."),(0,r.kt)("h4",{id:"backbehavior"},(0,r.kt)("inlineCode",{parentName:"h4"},"backBehavior")),(0,r.kt)("p",null,"This controls what happens when ",(0,r.kt)("inlineCode",{parentName:"p"},"goBack")," is called in the navigator. This includes pressing the device's back button or back gesture on Android."),(0,r.kt)("p",null,"It supports the following values:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"firstRoute")," - return to the first screen defined in the navigator (default)"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"initialRoute")," - return to initial screen passed in ",(0,r.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop, if not passed, defaults to the first screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"order")," - return to screen defined before the focused screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"history")," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"none")," - do not handle back button")),(0,r.kt)("h4",{id:"detachinactivescreens"},(0,r.kt)("inlineCode",{parentName:"h4"},"detachInactiveScreens")),(0,r.kt)("p",null,"Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/software-mansion/react-native-screens"},"react-native-screens"),". Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("h4",{id:"scenecontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"sceneContainerStyle")),(0,r.kt)("p",null,"Style object for the component wrapping the screen content."),(0,r.kt)("h4",{id:"tabbar"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBar")),(0,r.kt)("p",null,"Function that returns a React element to display as the tab bar."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("samp",{id:"custom-tab-bar"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { View, Text, TouchableOpacity } from 'react-native';\n\nfunction MyTabBar({ state, descriptors, navigation }) {\n return (\n \n {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: 'tabLongPress',\n target: route.key,\n });\n };\n\n return (\n \n \n {label}\n \n \n );\n })}\n \n );\n}\n\n// ...\n\n }>\n {...}\n\n")),(0,r.kt)("p",null,"This example will render a basic tab bar with labels."),(0,r.kt)("p",null,"Note that you ",(0,r.kt)("strong",{parentName:"p"},"cannot")," use the ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," hook inside the ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," since ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," is only available inside screens. You get a ",(0,r.kt)("inlineCode",{parentName:"p"},"navigation")," prop for your ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," which you can use instead:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"function MyTabBar({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n />\n );\n}\n")),(0,r.kt)("h3",{id:"options"},"Options"),(0,r.kt)("p",null,"The following ",(0,r.kt)("a",{parentName:"p",href:"/docs/screen-options"},"options")," can be used to configure the screens in the navigator. These can be specified under ",(0,r.kt)("inlineCode",{parentName:"p"},"screenOptions")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.navigator")," or ",(0,r.kt)("inlineCode",{parentName:"p"},"options")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Screen"),"."),(0,r.kt)("h4",{id:"title"},(0,r.kt)("inlineCode",{parentName:"h4"},"title")),(0,r.kt)("p",null,"Generic title that can be used as a fallback for ",(0,r.kt)("inlineCode",{parentName:"p"},"headerTitle")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarLabel"),"."),(0,r.kt)("h4",{id:"tabbarlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabel")),(0,r.kt)("p",null,"Title string of a tab displayed in the tab bar or a function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string }")," returns a React.Node, to display in tab bar. When undefined, scene ",(0,r.kt)("inlineCode",{parentName:"p"},"title")," is used. To hide, see ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarShowLabel"),"."),(0,r.kt)("h4",{id:"tabbarshowlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarShowLabel")),(0,r.kt)("p",null,"Whether the tab label should be visible. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("h4",{id:"tabbarlabelposition"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabelPosition")),(0,r.kt)("p",null,"Whether the label is shown below the icon or beside the icon."),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"below-icon"),": the label is shown below the icon (typical for iPhones)"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"beside-icon")," the label is shown next to the icon (typical for iPad)")),(0,r.kt)("p",null,"By default, the position is chosen automatically based on device width."),(0,r.kt)("h4",{id:"tabbarlabelstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabelStyle")),(0,r.kt)("p",null,"Style object for the tab label."),(0,r.kt)("h4",{id:"tabbaricon"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIcon")),(0,r.kt)("p",null,"Function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string, size: number }")," returns a React.Node, to display in the tab bar."),(0,r.kt)("h4",{id:"tabbariconstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIconStyle")),(0,r.kt)("p",null,"Style object for the tab icon."),(0,r.kt)("h4",{id:"tabbarbadge"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBadge")),(0,r.kt)("p",null,"Text to show in a badge on the tab icon. Accepts a ",(0,r.kt)("inlineCode",{parentName:"p"},"string")," or a ",(0,r.kt)("inlineCode",{parentName:"p"},"number"),"."),(0,r.kt)("h4",{id:"tabbarbadgestyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBadgeStyle")),(0,r.kt)("p",null,"Style for the badge on the tab icon. You can specify a background color or text color here."),(0,r.kt)("h4",{id:"tabbaraccessibilitylabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAccessibilityLabel")),(0,r.kt)("p",null,"Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab."),(0,r.kt)("h4",{id:"tabbartestid"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarTestID")),(0,r.kt)("p",null,"ID to locate this tab button in tests."),(0,r.kt)("h4",{id:"tabbarbutton"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarButton")),(0,r.kt)("p",null,"Function which returns a React element to render as the tab bar button. It wraps the icon and label. Renders ",(0,r.kt)("inlineCode",{parentName:"p"},"Pressable")," by default."),(0,r.kt)("p",null,"You can specify a custom implementation here:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"tabBarButton: (props) => ;\n")),(0,r.kt)("h4",{id:"tabbaractivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarActiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the active tab."),(0,r.kt)("h4",{id:"tabbarinactivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarInactiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the inactive tabs."),(0,r.kt)("h4",{id:"tabbaractivebackgroundcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarActiveBackgroundColor")),(0,r.kt)("p",null,"Background color for the active tab."),(0,r.kt)("h4",{id:"tabbarinactivebackgroundcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarInactiveBackgroundColor")),(0,r.kt)("p",null,"Background color for the inactive tabs."),(0,r.kt)("h4",{id:"tabbarhideonkeyboard"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarHideOnKeyboard")),(0,r.kt)("p",null,"Whether the tab bar is hidden when the keyboard opens. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),"."),(0,r.kt)("h4",{id:"tabbaritemstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarItemStyle")),(0,r.kt)("p",null,"Style object for the tab item container."),(0,r.kt)("h4",{id:"tabbarstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarStyle")),(0,r.kt)("p",null,"Style object for the tab bar. You can configure styles such as background color here."),(0,r.kt)("p",null,"To show your screen under the tab bar, you can set the ",(0,r.kt)("inlineCode",{parentName:"p"},"position")," style to absolute:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n")),(0,r.kt)("p",null,"You also might need to add a bottom margin to your content if you have a absolutely positioned tab bar. React Navigation won't do it automatically."),(0,r.kt)("p",null,"To get the height of the bottom tab bar, you can use ",(0,r.kt)("inlineCode",{parentName:"p"},"BottomTabBarHeightContext")," with ",(0,r.kt)("a",{parentName:"p",href:"https://reactjs.org/docs/context.html#contextconsumer"},"React's Context API")," or ",(0,r.kt)("inlineCode",{parentName:"p"},"useBottomTabBarHeight"),":"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';\n\n// ...\n\n\n {tabBarHeight => (\n /* render something */\n )}\n\n")),(0,r.kt)("p",null,"or"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';\n\n// ...\n\nconst tabBarHeight = useBottomTabBarHeight();\n")),(0,r.kt)("h4",{id:"tabbarbackground"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBackground")),(0,r.kt)("p",null,"Function which returns a React Element to use as background for the tab bar. You could render an image, a gradient, blur view etc.:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { BlurView } from 'expo-blur';\n\n// ...\n\n (\n \n ),\n }}\n>\n")),(0,r.kt)("p",null,"When using ",(0,r.kt)("inlineCode",{parentName:"p"},"BlurView"),", make sure to set ",(0,r.kt)("inlineCode",{parentName:"p"},"position: 'absolute'")," in ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarStyle")," as well. You'd also need to use ",(0,r.kt)("inlineCode",{parentName:"p"},"useBottomTabBarHeight()")," to add a bottom padding to your content."),(0,r.kt)("h4",{id:"lazy"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazy")),(0,r.kt)("p",null,"Whether this screens should render the first time it's accessed. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),". Set it to ",(0,r.kt)("inlineCode",{parentName:"p"},"false")," if you want to render the screen on initial render."),(0,r.kt)("h4",{id:"unmountonblur"},(0,r.kt)("inlineCode",{parentName:"h4"},"unmountOnBlur")),(0,r.kt)("p",null,"Whether this screen should be unmounted when navigating away from it. Unmounting a screen resets any local state in the screen as well as state of nested navigators in the screen. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),"."),(0,r.kt)("p",null,"Normally, we don't recommend enabling this prop as users don't expect their navigation history to be lost when switching tabs. If you enable this prop, please consider if this will actually provide a better experience for the user."),(0,r.kt)("h4",{id:"freezeonblur"},(0,r.kt)("inlineCode",{parentName:"h4"},"freezeOnBlur")),(0,r.kt)("p",null,"Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),".\nDefaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true")," when ",(0,r.kt)("inlineCode",{parentName:"p"},"enableFreeze()")," from ",(0,r.kt)("inlineCode",{parentName:"p"},"react-native-screens")," package is run at the top of the application."),(0,r.kt)("p",null,"Requires ",(0,r.kt)("inlineCode",{parentName:"p"},"react-native-screens")," version >=3.16.0."),(0,r.kt)("p",null,"Only supported on iOS and Android."),(0,r.kt)("h3",{id:"header-related-options"},"Header related options"),(0,r.kt)("p",null,"You can find the list of header related options ",(0,r.kt)("a",{parentName:"p",href:"/docs/elements#header"},"here"),". These ",(0,r.kt)("a",{parentName:"p",href:"/docs/screen-options"},"options")," can be specified under ",(0,r.kt)("inlineCode",{parentName:"p"},"screenOptions")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.navigator")," or ",(0,r.kt)("inlineCode",{parentName:"p"},"options")," prop of ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Screen"),". You don't have to be using ",(0,r.kt)("inlineCode",{parentName:"p"},"@react-navigation/elements")," directly to use these options, they are just documented in that page."),(0,r.kt)("p",null,"In addition to those, the following options are also supported in bottom tabs:"),(0,r.kt)("h4",{id:"header"},(0,r.kt)("inlineCode",{parentName:"h4"},"header")),(0,r.kt)("p",null,"Custom header to use instead of the default header."),(0,r.kt)("p",null,"This accepts a function that returns a React Element to display as a header. The function receives an object containing the following properties as the argument:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"navigation")," - The navigation object for the current screen."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"route")," - The route object for the current screen."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"options")," - The options for the current screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"layout")," - Dimensions of the screen, contains ",(0,r.kt)("inlineCode",{parentName:"li"},"height")," and ",(0,r.kt)("inlineCode",{parentName:"li"},"width")," properties.")),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { getHeaderTitle } from '@react-navigation/elements';\n\n// ..\n\nheader: ({ navigation, route, options }) => {\n const title = getHeaderTitle(options, route.name);\n\n return ;\n};\n")),(0,r.kt)("p",null,"To set a custom header for all the screens in the navigator, you can specify this option in the ",(0,r.kt)("inlineCode",{parentName:"p"},"screenOptions")," prop of the navigator."),(0,r.kt)("h5",{id:"specify-a-height-in-headerstyle"},"Specify a ",(0,r.kt)("inlineCode",{parentName:"h5"},"height")," in ",(0,r.kt)("inlineCode",{parentName:"h5"},"headerStyle")),(0,r.kt)("p",null,"If your custom header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"headerStyle: {\n height: 80, // Specify the height of your custom header\n};\n")),(0,r.kt)("p",null,"Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use ",(0,r.kt)("inlineCode",{parentName:"p"},"options.headerStyle")," from the props."),(0,r.kt)("h4",{id:"headershown"},(0,r.kt)("inlineCode",{parentName:"h4"},"headerShown")),(0,r.kt)("p",null,"Whether to show or hide the header for the screen. The header is shown by default. Setting this to ",(0,r.kt)("inlineCode",{parentName:"p"},"false")," hides the header."),(0,r.kt)("h3",{id:"events"},"Events"),(0,r.kt)("p",null,"The navigator can ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-events"},"emit events")," on certain actions. Supported events are:"),(0,r.kt)("h4",{id:"tabpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"If the tab is not focused, tab press will focus that tab"),(0,r.kt)("li",{parentName:"ul"},"If the tab is already focused:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a scroll view, you can use ",(0,r.kt)("a",{parentName:"li",href:"/docs/use-scroll-to-top"},(0,r.kt)("inlineCode",{parentName:"a"},"useScrollToTop"))," to scroll it to top"),(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a stack navigator, a ",(0,r.kt)("inlineCode",{parentName:"li"},"popToTop")," action is performed on the stack")))),(0,r.kt)("p",null,"To prevent the default behavior, you can call ",(0,r.kt)("inlineCode",{parentName:"p"},"event.preventDefault"),":"),(0,r.kt)("samp",{id:"bottom-tab-prevent-default"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("p",null,"If you have a custom tab bar, make sure to emit this event."),(0,r.kt)("h4",{id:"tablongpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabLongPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period. If you have a custom tab bar, make sure to emit this event."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabLongPress', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("h3",{id:"helpers"},"Helpers"),(0,r.kt)("p",null,"The tab navigator adds the following methods to the navigation prop:"),(0,r.kt)("h4",{id:"jumpto"},(0,r.kt)("inlineCode",{parentName:"h4"},"jumpTo")),(0,r.kt)("p",null,"Navigates to an existing screen in the tab navigator. The method accepts following arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"name")," - ",(0,r.kt)("em",{parentName:"li"},"string")," - Name of the route to jump to."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"params")," - ",(0,r.kt)("em",{parentName:"li"},"object")," - Screen params to use for the destination route.")),(0,r.kt)("samp",{id:"tab-jump-to"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"navigation.jumpTo('Profile', { owner: 'Micha\u015b' });\n")),(0,r.kt)("h2",{id:"example"},"Example"),(0,r.kt)("samp",{id:"bottom-tab-example"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import { createBottomTabNavigator } from \'@react-navigation/bottom-tabs\';\nimport MaterialCommunityIcons from \'react-native-vector-icons/MaterialCommunityIcons\';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabs() {\n return (\n \n (\n \n ),\n }}\n />\n (\n \n ),\n tabBarBadge: 3,\n }}\n />\n (\n \n ),\n }}\n />\n \n );\n}\n')))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/a5a8f997.88b6e79a.js b/assets/js/a5a8f997.e7e66dad.js similarity index 59% rename from assets/js/a5a8f997.88b6e79a.js rename to assets/js/a5a8f997.e7e66dad.js index 52b2d9b2484..f8b4291bda6 100644 --- a/assets/js/a5a8f997.88b6e79a.js +++ b/assets/js/a5a8f997.e7e66dad.js @@ -1 +1 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[19249],{3905:function(e,t,a){a.d(t,{Zo:function(){return p},kt:function(){return m}});var n=a(67294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var s=n.createContext({}),d=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},p=function(e){var t=d(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},b=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,r=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=d(a),b=i,m=u["".concat(s,".").concat(b)]||u[b]||c[b]||r;return a?n.createElement(m,o(o({ref:t},p),{},{components:a})):n.createElement(m,o({ref:t},p))}));function m(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=a.length,o=new Array(r);o[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[u]="string"==typeof e?e:i,o[1]=l;for(var d=2;d child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function c(e){var t=e.values,a=e.children;return(0,i.useMemo)((function(){var e=null!=t?t:u(a);return function(e){var t=(0,d.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,a])}function b(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function m(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId,r=(0,l.k6)(),o=function(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId;if("string"==typeof a)return a;if(!1===a)return null;if(!0===a&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:a,groupId:n});return[(0,s._X)(o),(0,i.useCallback)((function(e){if(o){var t=new URLSearchParams(r.location.search);t.set(o,e),r.replace(Object.assign({},r.location,{search:t.toString()}))}}),[o,r])]}function h(e){var t,a,n,r,o=e.defaultValue,l=e.queryString,s=void 0!==l&&l,d=e.groupId,u=c(e),h=(0,i.useState)((function(){return function(e){var t,a=e.defaultValue,n=e.tabValues;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(a){if(!b({value:a,tabValues:n}))throw new Error('Docusaurus error: The has a defaultValue "'+a+'" but none of its children has the corresponding value. Available values are: '+n.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return a}var i=null!=(t=n.find((function(e){return e.default})))?t:n[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:o,tabValues:u})})),v=h[0],k=h[1],f=m({queryString:s,groupId:d}),g=f[0],y=f[1],N=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:d}.groupId),a=(0,p.Nk)(t),n=a[0],r=a[1],[n,(0,i.useCallback)((function(e){t&&r.set(e)}),[t,r])]),w=N[0],T=N[1],C=function(){var e=null!=g?g:w;return b({value:e,tabValues:u})?e:null}();return(0,i.useLayoutEffect)((function(){C&&k(C)}),[C]),{selectedValue:v,selectValue:(0,i.useCallback)((function(e){if(!b({value:e,tabValues:u}))throw new Error("Can't select invalid tab value="+e);k(e),y(e),T(e)}),[y,T,u]),tabValues:u}}var v=a(72389),k={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function f(e){var t=e.className,a=e.block,l=e.selectedValue,s=e.selectValue,d=e.tabValues,p=[],u=(0,o.o5)().blockElementScrollPositionUntilNextRender,c=function(e){var t=e.currentTarget,a=p.indexOf(t),n=d[a].value;n!==l&&(u(t),s(n))},b=function(e){var t,a=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":var n,i=p.indexOf(e.currentTarget)+1;a=null!=(n=p[i])?n:p[0];break;case"ArrowLeft":var r,o=p.indexOf(e.currentTarget)-1;a=null!=(r=p[o])?r:p[p.length-1]}null==(t=a)||t.focus()};return i.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":a},t)},d.map((function(e){var t=e.value,a=e.label,o=e.attributes;return i.createElement("li",(0,n.Z)({role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,key:t,ref:function(e){return p.push(e)},onKeyDown:b,onClick:c},o,{className:(0,r.Z)("tabs__item",k.tabItem,null==o?void 0:o.className,{"tabs__item--active":l===t})}),null!=a?a:t)})))}function g(e){var t=e.lazy,a=e.children,n=e.selectedValue;if(a=Array.isArray(a)?a:[a],t){var r=a.find((function(e){return e.props.value===n}));return r?(0,i.cloneElement)(r,{className:"margin-top--md"}):null}return i.createElement("div",{className:"margin-top--md"},a.map((function(e,t){return(0,i.cloneElement)(e,{key:t,hidden:e.props.value!==n})})))}function y(e){var t=h(e);return i.createElement("div",{className:(0,r.Z)("tabs-container",k.tabList)},i.createElement(f,(0,n.Z)({},e,t)),i.createElement(g,(0,n.Z)({},e,t)))}function N(e){var t=(0,v.Z)();return i.createElement(y,(0,n.Z)({key:String(t)},e))}},41879:function(e,t,a){a.r(t),a.d(t,{assets:function(){return c},contentTitle:function(){return p},default:function(){return v},frontMatter:function(){return d},metadata:function(){return u},toc:function(){return b}});var n=a(83117),i=a(80102),r=(a(67294),a(3905)),o=a(74866),l=a(85162),s=["components"],d={id:"material-top-tab-navigator",title:"Material Top Tabs Navigator",sidebar_label:"Material Top Tabs"},p=void 0,u={unversionedId:"material-top-tab-navigator",id:"version-6.x/material-top-tab-navigator",title:"Material Top Tabs Navigator",description:"A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.",source:"@site/versioned_docs/version-6.x/material-top-tab-navigator.md",sourceDirName:".",slug:"/material-top-tab-navigator",permalink:"/docs/material-top-tab-navigator",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/material-top-tab-navigator.md",tags:[],version:"6.x",frontMatter:{id:"material-top-tab-navigator",title:"Material Top Tabs Navigator",sidebar_label:"Material Top Tabs"},sidebar:"version-6.x/docs",previous:{title:"Material Bottom Tabs",permalink:"/docs/material-bottom-tab-navigator"},next:{title:"Developer tools",permalink:"/docs/devtools"}},c={},b=[{value:"Installation",id:"installation",level:2},{value:"API Definition",id:"api-definition",level:2},{value:"Props",id:"props",level:3},{value:"id",id:"id",level:4},{value:"initialRouteName",id:"initialroutename",level:4},{value:"screenOptions",id:"screenoptions",level:4},{value:"backBehavior",id:"backbehavior",level:4},{value:"tabBarPosition",id:"tabbarposition",level:4},{value:"keyboardDismissMode",id:"keyboarddismissmode",level:4},{value:"initialLayout",id:"initiallayout",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"style",id:"style",level:4},{value:"tabBar",id:"tabbar",level:4},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"tabBarLabel",id:"tabbarlabel",level:4},{value:"tabBarAccessibilityLabel",id:"tabbaraccessibilitylabel",level:4},{value:"tabBarAllowFontScaling",id:"tabbarallowfontscaling",level:4},{value:"tabBarShowLabel",id:"tabbarshowlabel",level:4},{value:"tabBarIcon",id:"tabbaricon",level:4},{value:"tabBarShowIcon",id:"tabbarshowicon",level:4},{value:"tabBarBadge",id:"tabbarbadge",level:4},{value:"tabBarIndicator",id:"tabbarindicator",level:4},{value:"tabBarIndicatorStyle",id:"tabbarindicatorstyle",level:4},{value:"tabBarIndicatorContainerStyle",id:"tabbarindicatorcontainerstyle",level:4},{value:"tabBarTestID",id:"tabbartestid",level:4},{value:"tabBarActiveTintColor",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor",id:"tabbarinactivetintcolor",level:4},{value:"tabBarGap",id:"tabbargap",level:4},{value:"tabBarAndroidRipple",id:"tabbarandroidripple",level:4},{value:"tabBarPressColor",id:"tabbarpresscolor",level:4},{value:"tabBarPressOpacity",id:"tabbarpressopacity",level:4},{value:"tabBarBounces",id:"tabbarbounces",level:4},{value:"tabBarScrollEnabled",id:"tabbarscrollenabled",level:4},{value:"tabBarIconStyle",id:"tabbariconstyle",level:4},{value:"tabBarLabelStyle",id:"tabbarlabelstyle",level:4},{value:"tabBarItemStyle",id:"tabbaritemstyle",level:4},{value:"tabBarContentContainerStyle",id:"tabbarcontentcontainerstyle",level:4},{value:"tabBarStyle",id:"tabbarstyle",level:4},{value:"swipeEnabled",id:"swipeenabled",level:4},{value:"lazy",id:"lazy",level:4},{value:"lazyPreloadDistance",id:"lazypreloaddistance",level:4},{value:"lazyPlaceholder",id:"lazyplaceholder",level:4},{value:"Events",id:"events",level:3},{value:"tabPress",id:"tabpress",level:4},{value:"tabLongPress",id:"tablongpress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"jumpTo",id:"jumpto",level:4},{value:"Example",id:"example",level:2}],m={toc:b},h="wrapper";function v(e){var t=e.components,a=(0,i.Z)(e,s);return(0,r.kt)(h,(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately."),(0,r.kt)("div",{style:{display:"flex",margin:"16px 0"}},(0,r.kt)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0},(0,r.kt)("source",{src:"/assets/navigators/tabs/material-top-tabs.mov"}))),(0,r.kt)("p",null,"This wraps ",(0,r.kt)("a",{parentName:"p",href:"/docs/tab-view"},(0,r.kt)("inlineCode",{parentName:"a"},"react-native-tab-view")),". If you want to use the tab view without React Navigation integration, use the library directly instead."),(0,r.kt)("h2",{id:"installation"},"Installation"),(0,r.kt)("p",null,"To use this navigator, ensure that you have ",(0,r.kt)("a",{parentName:"p",href:"/docs/getting-started"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/native")," and its dependencies (follow this guide)"),", then install ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/react-navigation/react-navigation/tree/main/packages/material-top-tabs"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/material-top-tabs")),":"),(0,r.kt)(o.Z,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},(0,r.kt)(l.Z,{value:"npm",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @react-navigation/material-top-tabs react-native-tab-view\n"))),(0,r.kt)(l.Z,{value:"yarn",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @react-navigation/material-top-tabs react-native-tab-view\n")))),(0,r.kt)("p",null,"Then, you need to install ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/callstack/react-native-pager-view"},(0,r.kt)("inlineCode",{parentName:"a"},"react-native-pager-view"))," which is required by the navigator."),(0,r.kt)("p",null,"If you have a Expo managed project, in your project directory, run:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npx expo install react-native-pager-view\n")),(0,r.kt)("p",null,"If you have a bare React Native project, in your project directory, run:"),(0,r.kt)(o.Z,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},(0,r.kt)(l.Z,{value:"npm",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install react-native-pager-view\n"))),(0,r.kt)(l.Z,{value:"yarn",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add react-native-pager-view\n")))),(0,r.kt)("p",null,"If you're on a Mac and developing for iOS, you also need to install the pods (via ",(0,r.kt)("a",{parentName:"p",href:"https://cocoapods.org/"},"Cocoapods"),") to complete the linking."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npx pod-install ios\n")),(0,r.kt)("h2",{id:"api-definition"},"API Definition"),(0,r.kt)("p",null,"To use this tab navigator, import it from ",(0,r.kt)("inlineCode",{parentName:"p"},"@react-navigation/material-top-tabs"),":"),(0,r.kt)("samp",{id:"material-top-tab-based-navigation-minimal"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import { createMaterialTopTabNavigator } from \'@react-navigation/material-top-tabs\';\n\nconst Tab = createMaterialTopTabNavigator();\n\nfunction MyTabs() {\n return (\n \n \n \n \n );\n}\n')),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"For a complete usage guide please visit ",(0,r.kt)("a",{parentName:"p",href:"/docs/tab-based-navigation"},"Tab Navigation"))),(0,r.kt)("h3",{id:"props"},"Props"),(0,r.kt)("p",null,"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Navigator")," component accepts following props:"),(0,r.kt)("h4",{id:"id"},(0,r.kt)("inlineCode",{parentName:"h4"},"id")),(0,r.kt)("p",null,"Optional unique ID for the navigator. This can be used with ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-prop#getparent"},(0,r.kt)("inlineCode",{parentName:"a"},"navigation.getParent"))," to refer to this navigator in a child navigator."),(0,r.kt)("h4",{id:"initialroutename"},(0,r.kt)("inlineCode",{parentName:"h4"},"initialRouteName")),(0,r.kt)("p",null,"The name of the route to render on first load of the navigator."),(0,r.kt)("h4",{id:"screenoptions"},(0,r.kt)("inlineCode",{parentName:"h4"},"screenOptions")),(0,r.kt)("p",null,"Default options to use for the screens in the navigator."),(0,r.kt)("h4",{id:"backbehavior"},(0,r.kt)("inlineCode",{parentName:"h4"},"backBehavior")),(0,r.kt)("p",null,"This controls what happens when ",(0,r.kt)("inlineCode",{parentName:"p"},"goBack")," is called in the navigator. This includes pressing the device's back button or back gesture on Android."),(0,r.kt)("p",null,"It supports the following values:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"firstRoute")," - return to the first screen defined in the navigator (default)"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"initialRoute")," - return to initial screen passed in ",(0,r.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop, if not passed, defaults to the first screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"order")," - return to screen defined before the focused screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"history")," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"none")," - do not handle back button")),(0,r.kt)("h4",{id:"tabbarposition"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarPosition")),(0,r.kt)("p",null,"Position of the tab bar in the tab view. Possible values are ",(0,r.kt)("inlineCode",{parentName:"p"},"'top'")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"'bottom'"),". Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"'top'"),"."),(0,r.kt)("h4",{id:"keyboarddismissmode"},(0,r.kt)("inlineCode",{parentName:"h4"},"keyboardDismissMode")),(0,r.kt)("p",null,"String indicating whether the keyboard gets dismissed in response to a drag gesture. Possible values are:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"'auto'")," (default): the keyboard is dismissed when the index changes."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"'on-drag'"),": the keyboard is dismissed when a drag begins."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"'none'"),": drags do not dismiss the keyboard.")),(0,r.kt)("h4",{id:"initiallayout"},(0,r.kt)("inlineCode",{parentName:"h4"},"initialLayout")),(0,r.kt)("p",null,"Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. For most apps, this is a good default:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"{\n width: Dimensions.get('window').width;\n}\n")),(0,r.kt)("h4",{id:"scenecontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"sceneContainerStyle")),(0,r.kt)("p",null,"Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping."),(0,r.kt)("h4",{id:"style"},(0,r.kt)("inlineCode",{parentName:"h4"},"style")),(0,r.kt)("p",null,"Style to apply to the tab view container."),(0,r.kt)("h4",{id:"tabbar"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBar")),(0,r.kt)("p",null,"Function that returns a React element to display as the tab bar."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("samp",{id:"material-top-tab-custom-tab-bar"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { Animated, View, TouchableOpacity } from 'react-native';\n\nfunction MyTabBar({ state, descriptors, navigation, position }) {\n return (\n \n {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n // The `merge: true` option makes sure that the params inside the tab screen are preserved\n navigation.navigate({ name: route.name, merge: true });\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: 'tabLongPress',\n target: route.key,\n });\n };\n\n const inputRange = state.routes.map((_, i) => i);\n const opacity = position.interpolate({\n inputRange,\n outputRange: inputRange.map(i => (i === index ? 1 : 0)),\n });\n\n return (\n \n \n {label}\n \n \n );\n })}\n \n );\n}\n\n// ...\n\n }>\n {...}\n\n")),(0,r.kt)("p",null,"This example will render a basic tab bar with labels."),(0,r.kt)("p",null,"Note that you ",(0,r.kt)("strong",{parentName:"p"},"cannot")," use the ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," hook inside the ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," since ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," is only available inside screens. You get a ",(0,r.kt)("inlineCode",{parentName:"p"},"navigation")," prop for your ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," which you can use instead:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"function MyTabBar({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n />\n );\n}\n")),(0,r.kt)("h3",{id:"options"},"Options"),(0,r.kt)("p",null,"The following ",(0,r.kt)("a",{parentName:"p",href:"/docs/screen-options"},"options")," can be used to configure the screens in the navigator:"),(0,r.kt)("p",null,"Example:"),(0,r.kt)("samp",{id:"material-top-tab-options"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n {/* ... */}\n\n")),(0,r.kt)("h4",{id:"title"},(0,r.kt)("inlineCode",{parentName:"h4"},"title")),(0,r.kt)("p",null,"Generic title that can be used as a fallback for ",(0,r.kt)("inlineCode",{parentName:"p"},"headerTitle")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarLabel"),"."),(0,r.kt)("h4",{id:"tabbarlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabel")),(0,r.kt)("p",null,"Title string of a tab displayed in the tab bar or a function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string }")," returns a React.Node, to display in tab bar. When undefined, scene ",(0,r.kt)("inlineCode",{parentName:"p"},"title")," is used. To hide, see ",(0,r.kt)("a",{parentName:"p",href:"#tabbarshowlabel"},(0,r.kt)("inlineCode",{parentName:"a"},"tabBarShowLabel"))," option."),(0,r.kt)("h4",{id:"tabbaraccessibilitylabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAccessibilityLabel")),(0,r.kt)("p",null,"Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab."),(0,r.kt)("h4",{id:"tabbarallowfontscaling"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAllowFontScaling")),(0,r.kt)("p",null,"Whether label font should scale to respect Text Size accessibility settings."),(0,r.kt)("h4",{id:"tabbarshowlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarShowLabel")),(0,r.kt)("p",null,"Whether the tab label should be visible. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("h4",{id:"tabbaricon"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIcon")),(0,r.kt)("p",null,"Function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string }")," returns a React.Node, to display in the tab bar."),(0,r.kt)("h4",{id:"tabbarshowicon"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarShowIcon")),(0,r.kt)("p",null,"Whether the tab icon should be visible. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),"."),(0,r.kt)("h4",{id:"tabbarbadge"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBadge")),(0,r.kt)("p",null,"Function that returns a React element to use as a badge for the tab."),(0,r.kt)("h4",{id:"tabbarindicator"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIndicator")),(0,r.kt)("p",null,"Function that returns a React element as the tab bar indicator."),(0,r.kt)("h4",{id:"tabbarindicatorstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIndicatorStyle")),(0,r.kt)("p",null,"Style object for the tab bar indicator."),(0,r.kt)("h4",{id:"tabbarindicatorcontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIndicatorContainerStyle")),(0,r.kt)("p",null,"Style object for the view containing the tab bar indicator."),(0,r.kt)("h4",{id:"tabbartestid"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarTestID")),(0,r.kt)("p",null,"ID to locate this tab button in tests."),(0,r.kt)("h4",{id:"tabbaractivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarActiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the active tab."),(0,r.kt)("h4",{id:"tabbarinactivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarInactiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the inactive tabs."),(0,r.kt)("h4",{id:"tabbargap"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarGap")),(0,r.kt)("p",null,"Spacing between the tab items in the tab bar."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n\n")),(0,r.kt)("h4",{id:"tabbarandroidripple"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAndroidRipple")),(0,r.kt)("p",null,"Allows to customize the android ripple effect."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n\n")),(0,r.kt)("h4",{id:"tabbarpresscolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarPressColor")),(0,r.kt)("p",null,"Color for material ripple."),(0,r.kt)("p",null,"Only supported on Android."),(0,r.kt)("h4",{id:"tabbarpressopacity"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarPressOpacity")),(0,r.kt)("p",null,"Opacity for pressed tab."),(0,r.kt)("p",null,"Only supported on iOS."),(0,r.kt)("h4",{id:"tabbarbounces"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBounces")),(0,r.kt)("p",null,"Boolean indicating whether the tab bar bounces when overscrolling."),(0,r.kt)("h4",{id:"tabbarscrollenabled"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarScrollEnabled")),(0,r.kt)("p",null,"Boolean indicating whether to make the tab bar scrollable."),(0,r.kt)("p",null,"If you set this to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),", you should also specify a width in ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarItemStyle")," to improve the performance of initial render."),(0,r.kt)("h4",{id:"tabbariconstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIconStyle")),(0,r.kt)("p",null,"Style object for the tab icon container."),(0,r.kt)("h4",{id:"tabbarlabelstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabelStyle")),(0,r.kt)("p",null,"Style object for the tab label."),(0,r.kt)("h4",{id:"tabbaritemstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarItemStyle")),(0,r.kt)("p",null,"Style object for the individual tab items."),(0,r.kt)("h4",{id:"tabbarcontentcontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarContentContainerStyle")),(0,r.kt)("p",null,"Style object for the view containing the tab items."),(0,r.kt)("h4",{id:"tabbarstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarStyle")),(0,r.kt)("p",null,"Style object for the tab bar."),(0,r.kt)("h4",{id:"swipeenabled"},(0,r.kt)("inlineCode",{parentName:"h4"},"swipeEnabled")),(0,r.kt)("p",null,"Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing ",(0,r.kt)("inlineCode",{parentName:"p"},"false")," will disable swipe gestures, but the user can still switch tabs by pressing the tab bar."),(0,r.kt)("h4",{id:"lazy"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazy")),(0,r.kt)("p",null,"Whether this screen should be lazily rendered. When this is set to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),", the screen will be rendered as it comes into the viewport. By default all screens are rendered to provide a smoother swipe experience. But you might want to defer the rendering of screens out of the viewport until the user sees them. To enable lazy rendering for this screen, set ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy")," to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("p",null,"When you enable ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy"),", the lazy loaded screens will usually take some time to render when they come into the viewport. You can use the ",(0,r.kt)("inlineCode",{parentName:"p"},"lazyPlaceholder")," prop to customize what the user sees during this short period."),(0,r.kt)("h4",{id:"lazypreloaddistance"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazyPreloadDistance")),(0,r.kt)("p",null,"When ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy")," is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop. This value defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"0")," which means lazy pages are loaded as they come into the viewport."),(0,r.kt)("h4",{id:"lazyplaceholder"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazyPlaceholder")),(0,r.kt)("p",null,"Function that returns a React element to render if this screen hasn't been rendered yet. The ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy")," option also needs to be enabled for this to work."),(0,r.kt)("p",null,"This view is usually only shown for a split second. Keep it lightweight."),(0,r.kt)("p",null,"By default, this renders ",(0,r.kt)("inlineCode",{parentName:"p"},"null"),"."),(0,r.kt)("h3",{id:"events"},"Events"),(0,r.kt)("p",null,"The navigator can ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-events"},"emit events")," on certain actions. Supported events are:"),(0,r.kt)("h4",{id:"tabpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"If the tab is not focused, tab press will focus that tab"),(0,r.kt)("li",{parentName:"ul"},"If the tab is already focused:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a scroll view, you can use ",(0,r.kt)("a",{parentName:"li",href:"/docs/use-scroll-to-top"},(0,r.kt)("inlineCode",{parentName:"a"},"useScrollToTop"))," to scroll it to top"),(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a stack navigator, a ",(0,r.kt)("inlineCode",{parentName:"li"},"popToTop")," action is performed on the stack")))),(0,r.kt)("p",null,"To prevent the default behavior, you can call ",(0,r.kt)("inlineCode",{parentName:"p"},"event.preventDefault"),":"),(0,r.kt)("samp",{id:"material-top-tab-prevent-default"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("h4",{id:"tablongpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabLongPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabLongPress', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("h3",{id:"helpers"},"Helpers"),(0,r.kt)("p",null,"The tab navigator adds the following methods to the navigation prop:"),(0,r.kt)("h4",{id:"jumpto"},(0,r.kt)("inlineCode",{parentName:"h4"},"jumpTo")),(0,r.kt)("p",null,"Navigates to an existing screen in the tab navigator. The method accepts following arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"name")," - ",(0,r.kt)("em",{parentName:"li"},"string")," - Name of the route to jump to."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"params")," - ",(0,r.kt)("em",{parentName:"li"},"object")," - Screen params to pass to the destination route.")),(0,r.kt)("samp",{id:"material-top-tab-jump-to"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"navigation.jumpTo('Profile', { name: 'Micha\u015b' });\n")),(0,r.kt)("h2",{id:"example"},"Example"),(0,r.kt)("samp",{id:"material-top-tab-example"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';\n\nconst Tab = createMaterialTopTabNavigator();\n\nfunction MyTabs() {\n return (\n \n \n \n \n \n );\n}\n")))}v.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[19249],{3905:function(e,t,a){a.d(t,{Zo:function(){return p},kt:function(){return m}});var n=a(67294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function r(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var t=1;t=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var s=n.createContext({}),d=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):o(o({},t),e)),a},p=function(e){var t=d(e.components);return n.createElement(s.Provider,{value:t},e.children)},u="mdxType",c={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},b=n.forwardRef((function(e,t){var a=e.components,i=e.mdxType,r=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),u=d(a),b=i,m=u["".concat(s,".").concat(b)]||u[b]||c[b]||r;return a?n.createElement(m,o(o({ref:t},p),{},{components:a})):n.createElement(m,o({ref:t},p))}));function m(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var r=a.length,o=new Array(r);o[0]=b;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[u]="string"==typeof e?e:i,o[1]=l;for(var d=2;d child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function c(e){var t=e.values,a=e.children;return(0,i.useMemo)((function(){var e=null!=t?t:u(a);return function(e){var t=(0,d.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,a])}function b(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function m(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId,r=(0,l.k6)(),o=function(e){var t=e.queryString,a=void 0!==t&&t,n=e.groupId;if("string"==typeof a)return a;if(!1===a)return null;if(!0===a&&!n)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=n?n:null}({queryString:a,groupId:n});return[(0,s._X)(o),(0,i.useCallback)((function(e){if(o){var t=new URLSearchParams(r.location.search);t.set(o,e),r.replace(Object.assign({},r.location,{search:t.toString()}))}}),[o,r])]}function h(e){var t,a,n,r,o=e.defaultValue,l=e.queryString,s=void 0!==l&&l,d=e.groupId,u=c(e),h=(0,i.useState)((function(){return function(e){var t,a=e.defaultValue,n=e.tabValues;if(0===n.length)throw new Error("Docusaurus error: the component requires at least one children component");if(a){if(!b({value:a,tabValues:n}))throw new Error('Docusaurus error: The has a defaultValue "'+a+'" but none of its children has the corresponding value. Available values are: '+n.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return a}var i=null!=(t=n.find((function(e){return e.default})))?t:n[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:o,tabValues:u})})),v=h[0],k=h[1],f=m({queryString:s,groupId:d}),g=f[0],y=f[1],N=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:d}.groupId),a=(0,p.Nk)(t),n=a[0],r=a[1],[n,(0,i.useCallback)((function(e){t&&r.set(e)}),[t,r])]),w=N[0],T=N[1],C=function(){var e=null!=g?g:w;return b({value:e,tabValues:u})?e:null}();return(0,i.useLayoutEffect)((function(){C&&k(C)}),[C]),{selectedValue:v,selectValue:(0,i.useCallback)((function(e){if(!b({value:e,tabValues:u}))throw new Error("Can't select invalid tab value="+e);k(e),y(e),T(e)}),[y,T,u]),tabValues:u}}var v=a(72389),k={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function f(e){var t=e.className,a=e.block,l=e.selectedValue,s=e.selectValue,d=e.tabValues,p=[],u=(0,o.o5)().blockElementScrollPositionUntilNextRender,c=function(e){var t=e.currentTarget,a=p.indexOf(t),n=d[a].value;n!==l&&(u(t),s(n))},b=function(e){var t,a=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":var n,i=p.indexOf(e.currentTarget)+1;a=null!=(n=p[i])?n:p[0];break;case"ArrowLeft":var r,o=p.indexOf(e.currentTarget)-1;a=null!=(r=p[o])?r:p[p.length-1]}null==(t=a)||t.focus()};return i.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":a},t)},d.map((function(e){var t=e.value,a=e.label,o=e.attributes;return i.createElement("li",(0,n.Z)({role:"tab",tabIndex:l===t?0:-1,"aria-selected":l===t,key:t,ref:function(e){return p.push(e)},onKeyDown:b,onClick:c},o,{className:(0,r.Z)("tabs__item",k.tabItem,null==o?void 0:o.className,{"tabs__item--active":l===t})}),null!=a?a:t)})))}function g(e){var t=e.lazy,a=e.children,n=e.selectedValue;if(a=Array.isArray(a)?a:[a],t){var r=a.find((function(e){return e.props.value===n}));return r?(0,i.cloneElement)(r,{className:"margin-top--md"}):null}return i.createElement("div",{className:"margin-top--md"},a.map((function(e,t){return(0,i.cloneElement)(e,{key:t,hidden:e.props.value!==n})})))}function y(e){var t=h(e);return i.createElement("div",{className:(0,r.Z)("tabs-container",k.tabList)},i.createElement(f,(0,n.Z)({},e,t)),i.createElement(g,(0,n.Z)({},e,t)))}function N(e){var t=(0,v.Z)();return i.createElement(y,(0,n.Z)({key:String(t)},e))}},41879:function(e,t,a){a.r(t),a.d(t,{assets:function(){return c},contentTitle:function(){return p},default:function(){return v},frontMatter:function(){return d},metadata:function(){return u},toc:function(){return b}});var n=a(83117),i=a(80102),r=(a(67294),a(3905)),o=a(74866),l=a(85162),s=["components"],d={id:"material-top-tab-navigator",title:"Material Top Tabs Navigator",sidebar_label:"Material Top Tabs"},p=void 0,u={unversionedId:"material-top-tab-navigator",id:"version-6.x/material-top-tab-navigator",title:"Material Top Tabs Navigator",description:"A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately.",source:"@site/versioned_docs/version-6.x/material-top-tab-navigator.md",sourceDirName:".",slug:"/material-top-tab-navigator",permalink:"/docs/material-top-tab-navigator",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/material-top-tab-navigator.md",tags:[],version:"6.x",frontMatter:{id:"material-top-tab-navigator",title:"Material Top Tabs Navigator",sidebar_label:"Material Top Tabs"},sidebar:"version-6.x/docs",previous:{title:"Material Bottom Tabs",permalink:"/docs/material-bottom-tab-navigator"},next:{title:"Developer tools",permalink:"/docs/devtools"}},c={},b=[{value:"Installation",id:"installation",level:2},{value:"API Definition",id:"api-definition",level:2},{value:"Props",id:"props",level:3},{value:"id",id:"id",level:4},{value:"initialRouteName",id:"initialroutename",level:4},{value:"screenOptions",id:"screenoptions",level:4},{value:"backBehavior",id:"backbehavior",level:4},{value:"tabBarPosition",id:"tabbarposition",level:4},{value:"keyboardDismissMode",id:"keyboarddismissmode",level:4},{value:"initialLayout",id:"initiallayout",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"style",id:"style",level:4},{value:"tabBar",id:"tabbar",level:4},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"tabBarLabel",id:"tabbarlabel",level:4},{value:"tabBarAccessibilityLabel",id:"tabbaraccessibilitylabel",level:4},{value:"tabBarAllowFontScaling",id:"tabbarallowfontscaling",level:4},{value:"tabBarShowLabel",id:"tabbarshowlabel",level:4},{value:"tabBarIcon",id:"tabbaricon",level:4},{value:"tabBarShowIcon",id:"tabbarshowicon",level:4},{value:"tabBarBadge",id:"tabbarbadge",level:4},{value:"tabBarIndicator",id:"tabbarindicator",level:4},{value:"tabBarIndicatorStyle",id:"tabbarindicatorstyle",level:4},{value:"tabBarIndicatorContainerStyle",id:"tabbarindicatorcontainerstyle",level:4},{value:"tabBarTestID",id:"tabbartestid",level:4},{value:"tabBarActiveTintColor",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor",id:"tabbarinactivetintcolor",level:4},{value:"tabBarGap",id:"tabbargap",level:4},{value:"tabBarAndroidRipple",id:"tabbarandroidripple",level:4},{value:"tabBarPressColor",id:"tabbarpresscolor",level:4},{value:"tabBarPressOpacity",id:"tabbarpressopacity",level:4},{value:"tabBarBounces",id:"tabbarbounces",level:4},{value:"tabBarScrollEnabled",id:"tabbarscrollenabled",level:4},{value:"tabBarIconStyle",id:"tabbariconstyle",level:4},{value:"tabBarLabelStyle",id:"tabbarlabelstyle",level:4},{value:"tabBarItemStyle",id:"tabbaritemstyle",level:4},{value:"tabBarContentContainerStyle",id:"tabbarcontentcontainerstyle",level:4},{value:"tabBarStyle",id:"tabbarstyle",level:4},{value:"swipeEnabled",id:"swipeenabled",level:4},{value:"lazy",id:"lazy",level:4},{value:"lazyPreloadDistance",id:"lazypreloaddistance",level:4},{value:"lazyPlaceholder",id:"lazyplaceholder",level:4},{value:"Events",id:"events",level:3},{value:"tabPress",id:"tabpress",level:4},{value:"tabLongPress",id:"tablongpress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"jumpTo",id:"jumpto",level:4},{value:"Example",id:"example",level:2}],m={toc:b},h="wrapper";function v(e){var t=e.components,a=(0,i.Z)(e,s);return(0,r.kt)(h,(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("p",null,"A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or swiping horizontally. Transitions are animated by default. Screen components for each route are mounted immediately."),(0,r.kt)("div",{style:{display:"flex",margin:"16px 0"}},(0,r.kt)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0},(0,r.kt)("source",{src:"/assets/navigators/tabs/material-top-tabs.mov"}))),(0,r.kt)("p",null,"This wraps ",(0,r.kt)("a",{parentName:"p",href:"/docs/tab-view"},(0,r.kt)("inlineCode",{parentName:"a"},"react-native-tab-view")),". If you want to use the tab view without React Navigation integration, use the library directly instead."),(0,r.kt)("h2",{id:"installation"},"Installation"),(0,r.kt)("p",null,"To use this navigator, ensure that you have ",(0,r.kt)("a",{parentName:"p",href:"/docs/getting-started"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/native")," and its dependencies (follow this guide)"),", then install ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/react-navigation/react-navigation/tree/main/packages/material-top-tabs"},(0,r.kt)("inlineCode",{parentName:"a"},"@react-navigation/material-top-tabs")),":"),(0,r.kt)(o.Z,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},(0,r.kt)(l.Z,{value:"npm",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @react-navigation/material-top-tabs react-native-tab-view\n"))),(0,r.kt)(l.Z,{value:"yarn",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add @react-navigation/material-top-tabs react-native-tab-view\n")))),(0,r.kt)("p",null,"Then, you need to install ",(0,r.kt)("a",{parentName:"p",href:"https://github.com/callstack/react-native-pager-view"},(0,r.kt)("inlineCode",{parentName:"a"},"react-native-pager-view"))," which is required by the navigator."),(0,r.kt)("p",null,"If you have a Expo managed project, in your project directory, run:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npx expo install react-native-pager-view\n")),(0,r.kt)("p",null,"If you have a bare React Native project, in your project directory, run:"),(0,r.kt)(o.Z,{defaultValue:"npm",values:[{label:"npm",value:"npm"},{label:"Yarn",value:"yarn"}],mdxType:"Tabs"},(0,r.kt)(l.Z,{value:"npm",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install react-native-pager-view\n"))),(0,r.kt)(l.Z,{value:"yarn",mdxType:"TabItem"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"yarn add react-native-pager-view\n")))),(0,r.kt)("p",null,"If you're on a Mac and developing for iOS, you also need to install the pods (via ",(0,r.kt)("a",{parentName:"p",href:"https://cocoapods.org/"},"Cocoapods"),") to complete the linking."),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npx pod-install ios\n")),(0,r.kt)("h2",{id:"api-definition"},"API Definition"),(0,r.kt)("p",null,"To use this tab navigator, import it from ",(0,r.kt)("inlineCode",{parentName:"p"},"@react-navigation/material-top-tabs"),":"),(0,r.kt)("samp",{id:"material-top-tab-based-navigation-minimal"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},'import { createMaterialTopTabNavigator } from \'@react-navigation/material-top-tabs\';\n\nconst Tab = createMaterialTopTabNavigator();\n\nfunction MyTabs() {\n return (\n \n \n \n \n );\n}\n')),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},"For a complete usage guide please visit ",(0,r.kt)("a",{parentName:"p",href:"/docs/tab-based-navigation"},"Tab Navigation"))),(0,r.kt)("h3",{id:"props"},"Props"),(0,r.kt)("p",null,"The ",(0,r.kt)("inlineCode",{parentName:"p"},"Tab.Navigator")," component accepts following props:"),(0,r.kt)("h4",{id:"id"},(0,r.kt)("inlineCode",{parentName:"h4"},"id")),(0,r.kt)("p",null,"Optional unique ID for the navigator. This can be used with ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-prop#getparent"},(0,r.kt)("inlineCode",{parentName:"a"},"navigation.getParent"))," to refer to this navigator in a child navigator."),(0,r.kt)("h4",{id:"initialroutename"},(0,r.kt)("inlineCode",{parentName:"h4"},"initialRouteName")),(0,r.kt)("p",null,"The name of the route to render on first load of the navigator."),(0,r.kt)("h4",{id:"screenoptions"},(0,r.kt)("inlineCode",{parentName:"h4"},"screenOptions")),(0,r.kt)("p",null,"Default options to use for the screens in the navigator."),(0,r.kt)("h4",{id:"backbehavior"},(0,r.kt)("inlineCode",{parentName:"h4"},"backBehavior")),(0,r.kt)("p",null,"This controls what happens when ",(0,r.kt)("inlineCode",{parentName:"p"},"goBack")," is called in the navigator. This includes pressing the device's back button or back gesture on Android."),(0,r.kt)("p",null,"It supports the following values:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"firstRoute")," - return to the first screen defined in the navigator (default)"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"initialRoute")," - return to initial screen passed in ",(0,r.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop, if not passed, defaults to the first screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"order")," - return to screen defined before the focused screen"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"history")," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"none")," - do not handle back button")),(0,r.kt)("h4",{id:"tabbarposition"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarPosition")),(0,r.kt)("p",null,"Position of the tab bar in the tab view. Possible values are ",(0,r.kt)("inlineCode",{parentName:"p"},"'top'")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"'bottom'"),". Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"'top'"),"."),(0,r.kt)("h4",{id:"keyboarddismissmode"},(0,r.kt)("inlineCode",{parentName:"h4"},"keyboardDismissMode")),(0,r.kt)("p",null,"String indicating whether the keyboard gets dismissed in response to a drag gesture. Possible values are:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"'auto'")," (default): the keyboard is dismissed when the index changes."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"'on-drag'"),": the keyboard is dismissed when a drag begins."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"'none'"),": drags do not dismiss the keyboard.")),(0,r.kt)("h4",{id:"initiallayout"},(0,r.kt)("inlineCode",{parentName:"h4"},"initialLayout")),(0,r.kt)("p",null,"Object containing the initial height and width of the screens. Passing this will improve the initial rendering performance. For most apps, this is a good default:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"{\n width: Dimensions.get('window').width;\n}\n")),(0,r.kt)("h4",{id:"scenecontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"sceneContainerStyle")),(0,r.kt)("p",null,"Style to apply to the view wrapping each screen. You can pass this to override some default styles such as overflow clipping."),(0,r.kt)("h4",{id:"style"},(0,r.kt)("inlineCode",{parentName:"h4"},"style")),(0,r.kt)("p",null,"Style to apply to the tab view container."),(0,r.kt)("h4",{id:"tabbar"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBar")),(0,r.kt)("p",null,"Function that returns a React element to display as the tab bar."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("samp",{id:"material-top-tab-custom-tab-bar"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { Animated, View, TouchableOpacity } from 'react-native';\n\nfunction MyTabBar({ state, descriptors, navigation, position }) {\n return (\n \n {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: 'tabLongPress',\n target: route.key,\n });\n };\n\n const inputRange = state.routes.map((_, i) => i);\n const opacity = position.interpolate({\n inputRange,\n outputRange: inputRange.map(i => (i === index ? 1 : 0)),\n });\n\n return (\n \n \n {label}\n \n \n );\n })}\n \n );\n}\n\n// ...\n\n }>\n {...}\n\n")),(0,r.kt)("p",null,"This example will render a basic tab bar with labels."),(0,r.kt)("p",null,"Note that you ",(0,r.kt)("strong",{parentName:"p"},"cannot")," use the ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," hook inside the ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," since ",(0,r.kt)("inlineCode",{parentName:"p"},"useNavigation")," is only available inside screens. You get a ",(0,r.kt)("inlineCode",{parentName:"p"},"navigation")," prop for your ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBar")," which you can use instead:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"function MyTabBar({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n />\n );\n}\n")),(0,r.kt)("h3",{id:"options"},"Options"),(0,r.kt)("p",null,"The following ",(0,r.kt)("a",{parentName:"p",href:"/docs/screen-options"},"options")," can be used to configure the screens in the navigator:"),(0,r.kt)("p",null,"Example:"),(0,r.kt)("samp",{id:"material-top-tab-options"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n {/* ... */}\n\n")),(0,r.kt)("h4",{id:"title"},(0,r.kt)("inlineCode",{parentName:"h4"},"title")),(0,r.kt)("p",null,"Generic title that can be used as a fallback for ",(0,r.kt)("inlineCode",{parentName:"p"},"headerTitle")," and ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarLabel"),"."),(0,r.kt)("h4",{id:"tabbarlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabel")),(0,r.kt)("p",null,"Title string of a tab displayed in the tab bar or a function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string }")," returns a React.Node, to display in tab bar. When undefined, scene ",(0,r.kt)("inlineCode",{parentName:"p"},"title")," is used. To hide, see ",(0,r.kt)("a",{parentName:"p",href:"#tabbarshowlabel"},(0,r.kt)("inlineCode",{parentName:"a"},"tabBarShowLabel"))," option."),(0,r.kt)("h4",{id:"tabbaraccessibilitylabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAccessibilityLabel")),(0,r.kt)("p",null,"Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab."),(0,r.kt)("h4",{id:"tabbarallowfontscaling"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAllowFontScaling")),(0,r.kt)("p",null,"Whether label font should scale to respect Text Size accessibility settings."),(0,r.kt)("h4",{id:"tabbarshowlabel"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarShowLabel")),(0,r.kt)("p",null,"Whether the tab label should be visible. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("h4",{id:"tabbaricon"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIcon")),(0,r.kt)("p",null,"Function that given ",(0,r.kt)("inlineCode",{parentName:"p"},"{ focused: boolean, color: string }")," returns a React.Node, to display in the tab bar."),(0,r.kt)("h4",{id:"tabbarshowicon"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarShowIcon")),(0,r.kt)("p",null,"Whether the tab icon should be visible. Defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"false"),"."),(0,r.kt)("h4",{id:"tabbarbadge"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBadge")),(0,r.kt)("p",null,"Function that returns a React element to use as a badge for the tab."),(0,r.kt)("h4",{id:"tabbarindicator"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIndicator")),(0,r.kt)("p",null,"Function that returns a React element as the tab bar indicator."),(0,r.kt)("h4",{id:"tabbarindicatorstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIndicatorStyle")),(0,r.kt)("p",null,"Style object for the tab bar indicator."),(0,r.kt)("h4",{id:"tabbarindicatorcontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIndicatorContainerStyle")),(0,r.kt)("p",null,"Style object for the view containing the tab bar indicator."),(0,r.kt)("h4",{id:"tabbartestid"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarTestID")),(0,r.kt)("p",null,"ID to locate this tab button in tests."),(0,r.kt)("h4",{id:"tabbaractivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarActiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the active tab."),(0,r.kt)("h4",{id:"tabbarinactivetintcolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarInactiveTintColor")),(0,r.kt)("p",null,"Color for the icon and label in the inactive tabs."),(0,r.kt)("h4",{id:"tabbargap"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarGap")),(0,r.kt)("p",null,"Spacing between the tab items in the tab bar."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n\n")),(0,r.kt)("h4",{id:"tabbarandroidripple"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarAndroidRipple")),(0,r.kt)("p",null,"Allows to customize the android ripple effect."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"\n\n")),(0,r.kt)("h4",{id:"tabbarpresscolor"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarPressColor")),(0,r.kt)("p",null,"Color for material ripple."),(0,r.kt)("p",null,"Only supported on Android."),(0,r.kt)("h4",{id:"tabbarpressopacity"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarPressOpacity")),(0,r.kt)("p",null,"Opacity for pressed tab."),(0,r.kt)("p",null,"Only supported on iOS."),(0,r.kt)("h4",{id:"tabbarbounces"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarBounces")),(0,r.kt)("p",null,"Boolean indicating whether the tab bar bounces when overscrolling."),(0,r.kt)("h4",{id:"tabbarscrollenabled"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarScrollEnabled")),(0,r.kt)("p",null,"Boolean indicating whether to make the tab bar scrollable."),(0,r.kt)("p",null,"If you set this to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),", you should also specify a width in ",(0,r.kt)("inlineCode",{parentName:"p"},"tabBarItemStyle")," to improve the performance of initial render."),(0,r.kt)("h4",{id:"tabbariconstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarIconStyle")),(0,r.kt)("p",null,"Style object for the tab icon container."),(0,r.kt)("h4",{id:"tabbarlabelstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarLabelStyle")),(0,r.kt)("p",null,"Style object for the tab label."),(0,r.kt)("h4",{id:"tabbaritemstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarItemStyle")),(0,r.kt)("p",null,"Style object for the individual tab items."),(0,r.kt)("h4",{id:"tabbarcontentcontainerstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarContentContainerStyle")),(0,r.kt)("p",null,"Style object for the view containing the tab items."),(0,r.kt)("h4",{id:"tabbarstyle"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabBarStyle")),(0,r.kt)("p",null,"Style object for the tab bar."),(0,r.kt)("h4",{id:"swipeenabled"},(0,r.kt)("inlineCode",{parentName:"h4"},"swipeEnabled")),(0,r.kt)("p",null,"Boolean indicating whether to enable swipe gestures. Swipe gestures are enabled by default. Passing ",(0,r.kt)("inlineCode",{parentName:"p"},"false")," will disable swipe gestures, but the user can still switch tabs by pressing the tab bar."),(0,r.kt)("h4",{id:"lazy"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazy")),(0,r.kt)("p",null,"Whether this screen should be lazily rendered. When this is set to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),", the screen will be rendered as it comes into the viewport. By default all screens are rendered to provide a smoother swipe experience. But you might want to defer the rendering of screens out of the viewport until the user sees them. To enable lazy rendering for this screen, set ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy")," to ",(0,r.kt)("inlineCode",{parentName:"p"},"true"),"."),(0,r.kt)("p",null,"When you enable ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy"),", the lazy loaded screens will usually take some time to render when they come into the viewport. You can use the ",(0,r.kt)("inlineCode",{parentName:"p"},"lazyPlaceholder")," prop to customize what the user sees during this short period."),(0,r.kt)("h4",{id:"lazypreloaddistance"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazyPreloadDistance")),(0,r.kt)("p",null,"When ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy")," is enabled, you can specify how many adjacent screens should be preloaded in advance with this prop. This value defaults to ",(0,r.kt)("inlineCode",{parentName:"p"},"0")," which means lazy pages are loaded as they come into the viewport."),(0,r.kt)("h4",{id:"lazyplaceholder"},(0,r.kt)("inlineCode",{parentName:"h4"},"lazyPlaceholder")),(0,r.kt)("p",null,"Function that returns a React element to render if this screen hasn't been rendered yet. The ",(0,r.kt)("inlineCode",{parentName:"p"},"lazy")," option also needs to be enabled for this to work."),(0,r.kt)("p",null,"This view is usually only shown for a split second. Keep it lightweight."),(0,r.kt)("p",null,"By default, this renders ",(0,r.kt)("inlineCode",{parentName:"p"},"null"),"."),(0,r.kt)("h3",{id:"events"},"Events"),(0,r.kt)("p",null,"The navigator can ",(0,r.kt)("a",{parentName:"p",href:"/docs/navigation-events"},"emit events")," on certain actions. Supported events are:"),(0,r.kt)("h4",{id:"tabpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"If the tab is not focused, tab press will focus that tab"),(0,r.kt)("li",{parentName:"ul"},"If the tab is already focused:",(0,r.kt)("ul",{parentName:"li"},(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a scroll view, you can use ",(0,r.kt)("a",{parentName:"li",href:"/docs/use-scroll-to-top"},(0,r.kt)("inlineCode",{parentName:"a"},"useScrollToTop"))," to scroll it to top"),(0,r.kt)("li",{parentName:"ul"},"If the screen for the tab renders a stack navigator, a ",(0,r.kt)("inlineCode",{parentName:"li"},"popToTop")," action is performed on the stack")))),(0,r.kt)("p",null,"To prevent the default behavior, you can call ",(0,r.kt)("inlineCode",{parentName:"p"},"event.preventDefault"),":"),(0,r.kt)("samp",{id:"material-top-tab-prevent-default"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("h4",{id:"tablongpress"},(0,r.kt)("inlineCode",{parentName:"h4"},"tabLongPress")),(0,r.kt)("p",null,"This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period."),(0,r.kt)("p",null,"Example:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabLongPress', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n")),(0,r.kt)("h3",{id:"helpers"},"Helpers"),(0,r.kt)("p",null,"The tab navigator adds the following methods to the navigation prop:"),(0,r.kt)("h4",{id:"jumpto"},(0,r.kt)("inlineCode",{parentName:"h4"},"jumpTo")),(0,r.kt)("p",null,"Navigates to an existing screen in the tab navigator. The method accepts following arguments:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"name")," - ",(0,r.kt)("em",{parentName:"li"},"string")," - Name of the route to jump to."),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("inlineCode",{parentName:"li"},"params")," - ",(0,r.kt)("em",{parentName:"li"},"object")," - Screen params to pass to the destination route.")),(0,r.kt)("samp",{id:"material-top-tab-jump-to"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"navigation.jumpTo('Profile', { name: 'Micha\u015b' });\n")),(0,r.kt)("h2",{id:"example"},"Example"),(0,r.kt)("samp",{id:"material-top-tab-example"}),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-js"},"import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';\n\nconst Tab = createMaterialTopTabNavigator();\n\nfunction MyTabs() {\n return (\n \n \n \n \n \n );\n}\n")))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/c259c03a.8cbe6337.js b/assets/js/c259c03a.eb9339fc.js similarity index 63% rename from assets/js/c259c03a.8cbe6337.js rename to assets/js/c259c03a.eb9339fc.js index 6da19e9941f..55937a2f90d 100644 --- a/assets/js/c259c03a.8cbe6337.js +++ b/assets/js/c259c03a.eb9339fc.js @@ -1 +1 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[54521],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return v}});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),u=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(e.components);return a.createElement(l.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,v=p["".concat(l,".").concat(m)]||p[m]||d[m]||i;return n?a.createElement(v,o(o({ref:t},c),{},{components:n})):a.createElement(v,o({ref:t},c))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var u=2;u child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function d(e){var t=e.values,n=e.children;return(0,r.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function m(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function v(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId,i=(0,s.k6)(),o=function(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:n,groupId:a});return[(0,l._X)(o),(0,r.useCallback)((function(e){if(o){var t=new URLSearchParams(i.location.search);t.set(o,e),i.replace(Object.assign({},i.location,{search:t.toString()}))}}),[o,i])]}function g(e){var t,n,a,i,o=e.defaultValue,s=e.queryString,l=void 0!==s&&s,u=e.groupId,p=d(e),g=(0,r.useState)((function(){return function(e){var t,n=e.defaultValue,a=e.tabValues;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+a.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var r=null!=(t=a.find((function(e){return e.default})))?t:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:o,tabValues:p})})),h=g[0],f=g[1],b=v({queryString:l,groupId:u}),N=b[0],k=b[1],y=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),n=(0,c.Nk)(t),a=n[0],i=n[1],[a,(0,r.useCallback)((function(e){t&&i.set(e)}),[t,i])]),w=y[0],T=y[1],C=function(){var e=null!=N?N:w;return m({value:e,tabValues:p})?e:null}();return(0,r.useLayoutEffect)((function(){C&&f(C)}),[C]),{selectedValue:h,selectValue:(0,r.useCallback)((function(e){if(!m({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);f(e),k(e),T(e)}),[k,T,p]),tabValues:p}}var h=n(72389),f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function b(e){var t=e.className,n=e.block,s=e.selectedValue,l=e.selectValue,u=e.tabValues,c=[],p=(0,o.o5)().blockElementScrollPositionUntilNextRender,d=function(e){var t=e.currentTarget,n=c.indexOf(t),a=u[n].value;a!==s&&(p(t),l(a))},m=function(e){var t,n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var a,r=c.indexOf(e.currentTarget)+1;n=null!=(a=c[r])?a:c[0];break;case"ArrowLeft":var i,o=c.indexOf(e.currentTarget)-1;n=null!=(i=c[o])?i:c[c.length-1]}null==(t=n)||t.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t)},u.map((function(e){var t=e.value,n=e.label,o=e.attributes;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:function(e){return c.push(e)},onKeyDown:m,onClick:d},o,{className:(0,i.Z)("tabs__item",f.tabItem,null==o?void 0:o.className,{"tabs__item--active":s===t})}),null!=n?n:t)})))}function N(e){var t=e.lazy,n=e.children,a=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var i=n.find((function(e){return e.props.value===a}));return i?(0,r.cloneElement)(i,{className:"margin-top--md"}):null}return r.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})})))}function k(e){var t=g(e);return r.createElement("div",{className:(0,i.Z)("tabs-container",f.tabList)},r.createElement(b,(0,a.Z)({},e,t)),r.createElement(N,(0,a.Z)({},e,t)))}function y(e){var t=(0,h.Z)();return r.createElement(k,(0,a.Z)({key:String(t)},e))}},80498:function(e,t,n){n.r(t),n.d(t,{assets:function(){return c},contentTitle:function(){return l},default:function(){return v},frontMatter:function(){return s},metadata:function(){return u},toc:function(){return p}});var a=n(83117),r=n(80102),i=(n(67294),n(3905)),o=(n(74866),n(85162),["components"]),s={id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},l=void 0,u={unversionedId:"custom-navigators",id:"version-6.x/custom-navigators",title:"Custom navigators",description:"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.",source:"@site/versioned_docs/version-6.x/custom-navigators.md",sourceDirName:".",slug:"/custom-navigators",permalink:"/docs/custom-navigators",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/custom-navigators.md",tags:[],version:"6.x",frontMatter:{id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},sidebar:"version-6.x/docs",previous:{title:"Custom routers",permalink:"/docs/custom-routers"},next:{title:"Migration Guides",permalink:"/docs/migration-guides"}},c={},p=[{value:"Built-in Navigators",id:"built-in-navigators",level:2},{value:"API for building custom navigators",id:"api-for-building-custom-navigators",level:2},{value:"useNavigationBuilder",id:"usenavigationbuilder",level:3},{value:"createNavigatorFactory",id:"createnavigatorfactory",level:3},{value:"Type-checking navigators",id:"type-checking-navigators",level:2},{value:"Extending Navigators",id:"extending-navigators",level:2}],d={toc:p},m="wrapper";function v(e){var t=e.components,n=(0,r.Z)(e,o);return(0,i.kt)(m,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure."),(0,i.kt)("p",null,"Under the hood, navigators are plain React components."),(0,i.kt)("h2",{id:"built-in-navigators"},"Built-in Navigators"),(0,i.kt)("p",null,"We include some commonly needed navigators such as:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/stack-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createStackNavigator"))," - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/drawer-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createDrawerNavigator"))," - Provides a drawer that slides in from the left of the screen by default."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/bottom-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createBottomTabNavigator"))," - Renders a tab bar that lets the user switch between several screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/material-top-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createMaterialTopTabNavigator"))," - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/material-bottom-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createMaterialBottomTabNavigator"))," - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar.")),(0,i.kt)("h2",{id:"api-for-building-custom-navigators"},"API for building custom navigators"),(0,i.kt)("p",null,"A navigator bundles a router and a view which takes the ",(0,i.kt)("a",{parentName:"p",href:"/docs/navigation-state"},"navigation state")," and decides how to render it. We export a ",(0,i.kt)("inlineCode",{parentName:"p"},"useNavigationBuilder")," hook to build custom navigators that integrate with rest of React Navigation."),(0,i.kt)("h3",{id:"usenavigationbuilder"},(0,i.kt)("inlineCode",{parentName:"h3"},"useNavigationBuilder")),(0,i.kt)("p",null,"This hook allows a component to hook into React Navigation. It accepts the following arguments:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"createRouter")," - A factory method which returns a router object (e.g. ",(0,i.kt)("inlineCode",{parentName:"p"},"StackRouter"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),").")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"options")," - Options for the hook and the router. The navigator should forward its props here so that user can provide props to configure the navigator. By default, the following options are accepted:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"children")," (required) - The ",(0,i.kt)("inlineCode",{parentName:"li"},"children")," prop should contain route configurations as ",(0,i.kt)("inlineCode",{parentName:"li"},"Screen")," components."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," prop should contain default options for all of the screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop determines the screen to focus on initial render. This prop is forwarded to the router.")),(0,i.kt)("p",{parentName:"li"},"If any other options are passed here, they'll be forwarded to the router."))),(0,i.kt)("p",null,"The hook returns an object with following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"state")," - The ",(0,i.kt)("a",{parentName:"p",href:"/docs/navigation-state"},"navigation state")," for the navigator. The component can take this state and decide how to render it.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," - The navigation object containing various helper methods for the navigator to manipulate the ",(0,i.kt)("a",{parentName:"p",href:"/docs/navigation-state"},"navigation state"),". This isn't the same as the navigation object for the screen and includes some helpers such as ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," to emit events to the screens.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"descriptors")," - This is an object containing descriptors for each route with the route keys as its properties. The descriptor for a route can be accessed by ",(0,i.kt)("inlineCode",{parentName:"p"},"descriptors[route.key]"),". Each descriptor contains the following properties:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," - The navigation prop for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive ",(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," prop as well, such as a header component."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," - A getter which returns the options such as ",(0,i.kt)("inlineCode",{parentName:"li"},"title")," for the screen if they are specified."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"render")," - A function which can be used to render the actual screen. Calling ",(0,i.kt)("inlineCode",{parentName:"li"},"descriptors[route.key].render()")," will return a React element containing the screen content. It's important to use this method to render a screen, otherwise any child navigators won't be connected to the navigation tree properly.")))),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport { Text, Pressable, View } from 'react-native';\nimport {\n NavigationHelpersContext,\n useNavigationBuilder,\n TabRouter,\n TabActions,\n} from '@react-navigation/native';\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route) => (\n {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.dispatch({\n ...TabActions.jumpTo(route.name),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title || route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," object for navigators also has an ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," method to emit custom events to the child screens. The usage looks like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"navigation.emit({\n type: 'transitionStart',\n data: { blurring: false },\n target: route.key,\n});\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," is available under the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," property in the ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," object, i.e. ",(0,i.kt)("inlineCode",{parentName:"p"},"event.data"),"."),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property determines the screen that will receive the event. If the ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property is omitted, the event is dispatched to all screens in the navigator."),(0,i.kt)("h3",{id:"createnavigatorfactory"},(0,i.kt)("inlineCode",{parentName:"h3"},"createNavigatorFactory")),(0,i.kt)("p",null,"This ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," function is used to create a function that will ",(0,i.kt)("inlineCode",{parentName:"p"},"Navigator")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"Screen")," pair. Custom navigators need to wrap the navigator component in ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," before exporting."),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import {\n useNavigationBuilder,\n createNavigatorFactory,\n} from '@react-navigation/native';\n\n// ...\n\nexport const createMyNavigator = createNavigatorFactory(TabNavigator);\n")),(0,i.kt)("p",null,"Then it can be used like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'import { createMyNavigator } from \'./myNavigator\';\n\nconst My = createMyNavigator();\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n')),(0,i.kt)("h2",{id:"type-checking-navigators"},"Type-checking navigators"),(0,i.kt)("p",null,"To type-check navigators, we need to provide 3 types:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Type of the props accepted by the view"),(0,i.kt)("li",{parentName:"ul"},"Type of supported screen options"),(0,i.kt)("li",{parentName:"ul"},"A map of event types emitted by the navigator")),(0,i.kt)("p",null,"For example, to type-check our custom tab navigator, we can do something like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport {\n View,\n Text,\n Pressable,\n StyleProp,\n ViewStyle,\n StyleSheet,\n} from 'react-native';\nimport {\n createNavigatorFactory,\n DefaultNavigatorOptions,\n ParamListBase,\n CommonActions,\n TabActionHelpers,\n TabNavigationState,\n TabRouter,\n TabRouterOptions,\n useNavigationBuilder,\n} from '@react-navigation/native';\n\n// Props accepted by the view\ntype TabNavigationConfig = {\n tabBarStyle: StyleProp;\n contentStyle: StyleProp;\n};\n\n// Supported screen options\ntype TabNavigationOptions = {\n title?: string;\n};\n\n// Map of event name and the type of data (in event.data)\n//\n// canPreventDefault: true adds the defaultPrevented property to the\n// emitted events.\ntype TabNavigationEventMap = {\n tabPress: {\n data: { isAlreadyFocused: boolean };\n canPreventDefault: true;\n };\n};\n\n// The props accepted by the component is a combination of 3 things\ntype Props = DefaultNavigatorOptions<\n ParamListBase,\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap\n> &\n TabRouterOptions &\n TabNavigationConfig;\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}: Props) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder<\n TabNavigationState,\n TabRouterOptions,\n TabActionHelpers,\n TabNavigationOptions,\n TabNavigationEventMap\n >(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route) => (\n {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n data: {\n isAlreadyFocused: route.key === state.routes[state.index].key,\n },\n });\n\n if (!event.defaultPrevented) {\n navigation.dispatch({\n ...CommonActions.navigate(route),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title || route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n\nexport default createNavigatorFactory<\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap,\n typeof TabNavigator\n>(TabNavigator);\n")),(0,i.kt)("h2",{id:"extending-navigators"},"Extending Navigators"),(0,i.kt)("p",null,"All of the built-in navigators export their views, which we can reuse and build additional functionality on top of them. For example, if we want to re-build the bottom tab navigator, we need the following code:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport {\n useNavigationBuilder,\n createNavigatorFactory,\n TabRouter,\n} from '@react-navigation/native';\nimport { BottomTabView } from '@react-navigation/bottom-tabs';\n\nfunction BottomTabNavigator({\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n ...rest\n}) {\n const { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n return (\n \n \n \n );\n}\n\nexport default createNavigatorFactory(BottomTabNavigator);\n")),(0,i.kt)("p",null,"Now, we can customize it to add additional functionality or change the behavior. For example, use a ",(0,i.kt)("a",{parentName:"p",href:"/docs/custom-routers"},"custom router")," instead of the default ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import MyRouter from './MyRouter';\n\n// ...\n\nconst { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(MyRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n// ...\n")))}v.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[54521],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return v}});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),u=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(e.components);return a.createElement(l.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,v=p["".concat(l,".").concat(m)]||p[m]||d[m]||i;return n?a.createElement(v,o(o({ref:t},c),{},{components:n})):a.createElement(v,o({ref:t},c))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var u=2;u child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function d(e){var t=e.values,n=e.children;return(0,r.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function m(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function v(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId,i=(0,s.k6)(),o=function(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:n,groupId:a});return[(0,l._X)(o),(0,r.useCallback)((function(e){if(o){var t=new URLSearchParams(i.location.search);t.set(o,e),i.replace(Object.assign({},i.location,{search:t.toString()}))}}),[o,i])]}function g(e){var t,n,a,i,o=e.defaultValue,s=e.queryString,l=void 0!==s&&s,u=e.groupId,p=d(e),g=(0,r.useState)((function(){return function(e){var t,n=e.defaultValue,a=e.tabValues;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+a.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var r=null!=(t=a.find((function(e){return e.default})))?t:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:o,tabValues:p})})),h=g[0],f=g[1],b=v({queryString:l,groupId:u}),N=b[0],k=b[1],y=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),n=(0,c.Nk)(t),a=n[0],i=n[1],[a,(0,r.useCallback)((function(e){t&&i.set(e)}),[t,i])]),w=y[0],T=y[1],C=function(){var e=null!=N?N:w;return m({value:e,tabValues:p})?e:null}();return(0,r.useLayoutEffect)((function(){C&&f(C)}),[C]),{selectedValue:h,selectValue:(0,r.useCallback)((function(e){if(!m({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);f(e),k(e),T(e)}),[k,T,p]),tabValues:p}}var h=n(72389),f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function b(e){var t=e.className,n=e.block,s=e.selectedValue,l=e.selectValue,u=e.tabValues,c=[],p=(0,o.o5)().blockElementScrollPositionUntilNextRender,d=function(e){var t=e.currentTarget,n=c.indexOf(t),a=u[n].value;a!==s&&(p(t),l(a))},m=function(e){var t,n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var a,r=c.indexOf(e.currentTarget)+1;n=null!=(a=c[r])?a:c[0];break;case"ArrowLeft":var i,o=c.indexOf(e.currentTarget)-1;n=null!=(i=c[o])?i:c[c.length-1]}null==(t=n)||t.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t)},u.map((function(e){var t=e.value,n=e.label,o=e.attributes;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:function(e){return c.push(e)},onKeyDown:m,onClick:d},o,{className:(0,i.Z)("tabs__item",f.tabItem,null==o?void 0:o.className,{"tabs__item--active":s===t})}),null!=n?n:t)})))}function N(e){var t=e.lazy,n=e.children,a=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var i=n.find((function(e){return e.props.value===a}));return i?(0,r.cloneElement)(i,{className:"margin-top--md"}):null}return r.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})})))}function k(e){var t=g(e);return r.createElement("div",{className:(0,i.Z)("tabs-container",f.tabList)},r.createElement(b,(0,a.Z)({},e,t)),r.createElement(N,(0,a.Z)({},e,t)))}function y(e){var t=(0,h.Z)();return r.createElement(k,(0,a.Z)({key:String(t)},e))}},80498:function(e,t,n){n.r(t),n.d(t,{assets:function(){return c},contentTitle:function(){return l},default:function(){return v},frontMatter:function(){return s},metadata:function(){return u},toc:function(){return p}});var a=n(83117),r=n(80102),i=(n(67294),n(3905)),o=(n(74866),n(85162),["components"]),s={id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},l=void 0,u={unversionedId:"custom-navigators",id:"version-6.x/custom-navigators",title:"Custom navigators",description:"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.",source:"@site/versioned_docs/version-6.x/custom-navigators.md",sourceDirName:".",slug:"/custom-navigators",permalink:"/docs/custom-navigators",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/custom-navigators.md",tags:[],version:"6.x",frontMatter:{id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},sidebar:"version-6.x/docs",previous:{title:"Custom routers",permalink:"/docs/custom-routers"},next:{title:"Migration Guides",permalink:"/docs/migration-guides"}},c={},p=[{value:"Built-in Navigators",id:"built-in-navigators",level:2},{value:"API for building custom navigators",id:"api-for-building-custom-navigators",level:2},{value:"useNavigationBuilder",id:"usenavigationbuilder",level:3},{value:"createNavigatorFactory",id:"createnavigatorfactory",level:3},{value:"Type-checking navigators",id:"type-checking-navigators",level:2},{value:"Extending Navigators",id:"extending-navigators",level:2}],d={toc:p},m="wrapper";function v(e){var t=e.components,n=(0,r.Z)(e,o);return(0,i.kt)(m,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure."),(0,i.kt)("p",null,"Under the hood, navigators are plain React components."),(0,i.kt)("h2",{id:"built-in-navigators"},"Built-in Navigators"),(0,i.kt)("p",null,"We include some commonly needed navigators such as:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/stack-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createStackNavigator"))," - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/drawer-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createDrawerNavigator"))," - Provides a drawer that slides in from the left of the screen by default."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/bottom-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createBottomTabNavigator"))," - Renders a tab bar that lets the user switch between several screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/material-top-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createMaterialTopTabNavigator"))," - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/material-bottom-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createMaterialBottomTabNavigator"))," - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar.")),(0,i.kt)("h2",{id:"api-for-building-custom-navigators"},"API for building custom navigators"),(0,i.kt)("p",null,"A navigator bundles a router and a view which takes the ",(0,i.kt)("a",{parentName:"p",href:"/docs/navigation-state"},"navigation state")," and decides how to render it. We export a ",(0,i.kt)("inlineCode",{parentName:"p"},"useNavigationBuilder")," hook to build custom navigators that integrate with rest of React Navigation."),(0,i.kt)("h3",{id:"usenavigationbuilder"},(0,i.kt)("inlineCode",{parentName:"h3"},"useNavigationBuilder")),(0,i.kt)("p",null,"This hook allows a component to hook into React Navigation. It accepts the following arguments:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"createRouter")," - A factory method which returns a router object (e.g. ",(0,i.kt)("inlineCode",{parentName:"p"},"StackRouter"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),").")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"options")," - Options for the hook and the router. The navigator should forward its props here so that user can provide props to configure the navigator. By default, the following options are accepted:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"children")," (required) - The ",(0,i.kt)("inlineCode",{parentName:"li"},"children")," prop should contain route configurations as ",(0,i.kt)("inlineCode",{parentName:"li"},"Screen")," components."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," prop should contain default options for all of the screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop determines the screen to focus on initial render. This prop is forwarded to the router.")),(0,i.kt)("p",{parentName:"li"},"If any other options are passed here, they'll be forwarded to the router."))),(0,i.kt)("p",null,"The hook returns an object with following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"state")," - The ",(0,i.kt)("a",{parentName:"p",href:"/docs/navigation-state"},"navigation state")," for the navigator. The component can take this state and decide how to render it.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," - The navigation object containing various helper methods for the navigator to manipulate the ",(0,i.kt)("a",{parentName:"p",href:"/docs/navigation-state"},"navigation state"),". This isn't the same as the navigation object for the screen and includes some helpers such as ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," to emit events to the screens.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"descriptors")," - This is an object containing descriptors for each route with the route keys as its properties. The descriptor for a route can be accessed by ",(0,i.kt)("inlineCode",{parentName:"p"},"descriptors[route.key]"),". Each descriptor contains the following properties:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," - The navigation prop for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive ",(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," prop as well, such as a header component."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," - A getter which returns the options such as ",(0,i.kt)("inlineCode",{parentName:"li"},"title")," for the screen if they are specified."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"render")," - A function which can be used to render the actual screen. Calling ",(0,i.kt)("inlineCode",{parentName:"li"},"descriptors[route.key].render()")," will return a React element containing the screen content. It's important to use this method to render a screen, otherwise any child navigators won't be connected to the navigation tree properly.")))),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport { Text, Pressable, View } from 'react-native';\nimport {\n NavigationHelpersContext,\n useNavigationBuilder,\n TabRouter,\n TabActions,\n} from '@react-navigation/native';\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route, index) => (\n {\n const isFocused = state.index === index;\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.dispatch({\n ...TabActions.jumpTo(route.name, route.params),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title ?? route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," object for navigators also has an ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," method to emit custom events to the child screens. The usage looks like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"navigation.emit({\n type: 'transitionStart',\n data: { blurring: false },\n target: route.key,\n});\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," is available under the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," property in the ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," object, i.e. ",(0,i.kt)("inlineCode",{parentName:"p"},"event.data"),"."),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property determines the screen that will receive the event. If the ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property is omitted, the event is dispatched to all screens in the navigator."),(0,i.kt)("h3",{id:"createnavigatorfactory"},(0,i.kt)("inlineCode",{parentName:"h3"},"createNavigatorFactory")),(0,i.kt)("p",null,"This ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," function is used to create a function that will ",(0,i.kt)("inlineCode",{parentName:"p"},"Navigator")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"Screen")," pair. Custom navigators need to wrap the navigator component in ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," before exporting."),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import {\n useNavigationBuilder,\n createNavigatorFactory,\n} from '@react-navigation/native';\n\n// ...\n\nexport const createMyNavigator = createNavigatorFactory(TabNavigator);\n")),(0,i.kt)("p",null,"Then it can be used like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'import { createMyNavigator } from \'./myNavigator\';\n\nconst My = createMyNavigator();\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n')),(0,i.kt)("h2",{id:"type-checking-navigators"},"Type-checking navigators"),(0,i.kt)("p",null,"To type-check navigators, we need to provide 3 types:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Type of the props accepted by the view"),(0,i.kt)("li",{parentName:"ul"},"Type of supported screen options"),(0,i.kt)("li",{parentName:"ul"},"A map of event types emitted by the navigator")),(0,i.kt)("p",null,"For example, to type-check our custom tab navigator, we can do something like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport {\n View,\n Text,\n Pressable,\n StyleProp,\n ViewStyle,\n StyleSheet,\n} from 'react-native';\nimport {\n createNavigatorFactory,\n DefaultNavigatorOptions,\n ParamListBase,\n CommonActions,\n TabActionHelpers,\n TabNavigationState,\n TabRouter,\n TabRouterOptions,\n useNavigationBuilder,\n} from '@react-navigation/native';\n\n// Props accepted by the view\ntype TabNavigationConfig = {\n tabBarStyle: StyleProp;\n contentStyle: StyleProp;\n};\n\n// Supported screen options\ntype TabNavigationOptions = {\n title?: string;\n};\n\n// Map of event name and the type of data (in event.data)\n//\n// canPreventDefault: true adds the defaultPrevented property to the\n// emitted events.\ntype TabNavigationEventMap = {\n tabPress: {\n data: { isAlreadyFocused: boolean };\n canPreventDefault: true;\n };\n};\n\n// The props accepted by the component is a combination of 3 things\ntype Props = DefaultNavigatorOptions<\n ParamListBase,\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap\n> &\n TabRouterOptions &\n TabNavigationConfig;\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}: Props) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder<\n TabNavigationState,\n TabRouterOptions,\n TabActionHelpers,\n TabNavigationOptions,\n TabNavigationEventMap\n >(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route, index) => (\n {\n const isFocused = state.index === index;\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n data: {\n isAlreadyFocused: isFocused,\n },\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.dispatch({\n ...CommonActions.navigate(route),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title ?? route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n\nexport default createNavigatorFactory<\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap,\n typeof TabNavigator\n>(TabNavigator);\n")),(0,i.kt)("h2",{id:"extending-navigators"},"Extending Navigators"),(0,i.kt)("p",null,"All of the built-in navigators export their views, which we can reuse and build additional functionality on top of them. For example, if we want to re-build the bottom tab navigator, we need the following code:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport {\n useNavigationBuilder,\n createNavigatorFactory,\n TabRouter,\n} from '@react-navigation/native';\nimport { BottomTabView } from '@react-navigation/bottom-tabs';\n\nfunction BottomTabNavigator({\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n ...rest\n}) {\n const { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n return (\n \n \n \n );\n}\n\nexport default createNavigatorFactory(BottomTabNavigator);\n")),(0,i.kt)("p",null,"Now, we can customize it to add additional functionality or change the behavior. For example, use a ",(0,i.kt)("a",{parentName:"p",href:"/docs/custom-routers"},"custom router")," instead of the default ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import MyRouter from './MyRouter';\n\n// ...\n\nconst { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(MyRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n// ...\n")))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/c2c0d6a0.31ef28bc.js b/assets/js/c2c0d6a0.f10a5e52.js similarity index 63% rename from assets/js/c2c0d6a0.31ef28bc.js rename to assets/js/c2c0d6a0.f10a5e52.js index f5f3966daaf..147612ef194 100644 --- a/assets/js/c2c0d6a0.31ef28bc.js +++ b/assets/js/c2c0d6a0.f10a5e52.js @@ -1 +1 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[33242],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return v}});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),u=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(e.components);return a.createElement(l.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,v=p["".concat(l,".").concat(m)]||p[m]||d[m]||i;return n?a.createElement(v,o(o({ref:t},c),{},{components:n})):a.createElement(v,o({ref:t},c))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var u=2;u child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function d(e){var t=e.values,n=e.children;return(0,r.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function m(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function v(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId,i=(0,s.k6)(),o=function(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:n,groupId:a});return[(0,l._X)(o),(0,r.useCallback)((function(e){if(o){var t=new URLSearchParams(i.location.search);t.set(o,e),i.replace(Object.assign({},i.location,{search:t.toString()}))}}),[o,i])]}function g(e){var t,n,a,i,o=e.defaultValue,s=e.queryString,l=void 0!==s&&s,u=e.groupId,p=d(e),g=(0,r.useState)((function(){return function(e){var t,n=e.defaultValue,a=e.tabValues;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+a.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var r=null!=(t=a.find((function(e){return e.default})))?t:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:o,tabValues:p})})),h=g[0],f=g[1],b=v({queryString:l,groupId:u}),N=b[0],k=b[1],y=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),n=(0,c.Nk)(t),a=n[0],i=n[1],[a,(0,r.useCallback)((function(e){t&&i.set(e)}),[t,i])]),w=y[0],T=y[1],C=function(){var e=null!=N?N:w;return m({value:e,tabValues:p})?e:null}();return(0,r.useLayoutEffect)((function(){C&&f(C)}),[C]),{selectedValue:h,selectValue:(0,r.useCallback)((function(e){if(!m({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);f(e),k(e),T(e)}),[k,T,p]),tabValues:p}}var h=n(72389),f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function b(e){var t=e.className,n=e.block,s=e.selectedValue,l=e.selectValue,u=e.tabValues,c=[],p=(0,o.o5)().blockElementScrollPositionUntilNextRender,d=function(e){var t=e.currentTarget,n=c.indexOf(t),a=u[n].value;a!==s&&(p(t),l(a))},m=function(e){var t,n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var a,r=c.indexOf(e.currentTarget)+1;n=null!=(a=c[r])?a:c[0];break;case"ArrowLeft":var i,o=c.indexOf(e.currentTarget)-1;n=null!=(i=c[o])?i:c[c.length-1]}null==(t=n)||t.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t)},u.map((function(e){var t=e.value,n=e.label,o=e.attributes;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:function(e){return c.push(e)},onKeyDown:m,onClick:d},o,{className:(0,i.Z)("tabs__item",f.tabItem,null==o?void 0:o.className,{"tabs__item--active":s===t})}),null!=n?n:t)})))}function N(e){var t=e.lazy,n=e.children,a=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var i=n.find((function(e){return e.props.value===a}));return i?(0,r.cloneElement)(i,{className:"margin-top--md"}):null}return r.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})})))}function k(e){var t=g(e);return r.createElement("div",{className:(0,i.Z)("tabs-container",f.tabList)},r.createElement(b,(0,a.Z)({},e,t)),r.createElement(N,(0,a.Z)({},e,t)))}function y(e){var t=(0,h.Z)();return r.createElement(k,(0,a.Z)({key:String(t)},e))}},10491:function(e,t,n){n.r(t),n.d(t,{assets:function(){return c},contentTitle:function(){return l},default:function(){return v},frontMatter:function(){return s},metadata:function(){return u},toc:function(){return p}});var a=n(83117),r=n(80102),i=(n(67294),n(3905)),o=(n(74866),n(85162),["components"]),s={id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},l=void 0,u={unversionedId:"custom-navigators",id:"version-7.x/custom-navigators",title:"Custom navigators",description:"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.",source:"@site/versioned_docs/version-7.x/custom-navigators.md",sourceDirName:".",slug:"/custom-navigators",permalink:"/docs/7.x/custom-navigators",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/custom-navigators.md",tags:[],version:"7.x",frontMatter:{id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},sidebar:"version-7.x/docs",previous:{title:"Custom routers",permalink:"/docs/7.x/custom-routers"},next:{title:"Migration Guides",permalink:"/docs/7.x/migration-guides"}},c={},p=[{value:"Built-in Navigators",id:"built-in-navigators",level:2},{value:"API for building custom navigators",id:"api-for-building-custom-navigators",level:2},{value:"useNavigationBuilder",id:"usenavigationbuilder",level:3},{value:"createNavigatorFactory",id:"createnavigatorfactory",level:3},{value:"Type-checking navigators",id:"type-checking-navigators",level:2},{value:"Extending Navigators",id:"extending-navigators",level:2}],d={toc:p},m="wrapper";function v(e){var t=e.components,n=(0,r.Z)(e,o);return(0,i.kt)(m,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure."),(0,i.kt)("p",null,"Under the hood, navigators are plain React components."),(0,i.kt)("h2",{id:"built-in-navigators"},"Built-in Navigators"),(0,i.kt)("p",null,"We include some commonly needed navigators such as:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/stack-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createStackNavigator"))," - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/drawer-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createDrawerNavigator"))," - Provides a drawer that slides in from the left of the screen by default."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/bottom-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createBottomTabNavigator"))," - Renders a tab bar that lets the user switch between several screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/material-top-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createMaterialTopTabNavigator"))," - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar.")),(0,i.kt)("h2",{id:"api-for-building-custom-navigators"},"API for building custom navigators"),(0,i.kt)("p",null,"A navigator bundles a router and a view which takes the ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/navigation-state"},"navigation state")," and decides how to render it. We export a ",(0,i.kt)("inlineCode",{parentName:"p"},"useNavigationBuilder")," hook to build custom navigators that integrate with rest of React Navigation."),(0,i.kt)("h3",{id:"usenavigationbuilder"},(0,i.kt)("inlineCode",{parentName:"h3"},"useNavigationBuilder")),(0,i.kt)("p",null,"This hook allows a component to hook into React Navigation. It accepts the following arguments:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"createRouter")," - A factory method which returns a router object (e.g. ",(0,i.kt)("inlineCode",{parentName:"p"},"StackRouter"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),").")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"options")," - Options for the hook and the router. The navigator should forward its props here so that user can provide props to configure the navigator. By default, the following options are accepted:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"children")," (required) - The ",(0,i.kt)("inlineCode",{parentName:"li"},"children")," prop should contain route configurations as ",(0,i.kt)("inlineCode",{parentName:"li"},"Screen")," components."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," prop should contain default options for all of the screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop determines the screen to focus on initial render. This prop is forwarded to the router.")),(0,i.kt)("p",{parentName:"li"},"If any other options are passed here, they'll be forwarded to the router."))),(0,i.kt)("p",null,"The hook returns an object with following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"state")," - The ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/navigation-state"},"navigation state")," for the navigator. The component can take this state and decide how to render it.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," - The navigation object containing various helper methods for the navigator to manipulate the ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/navigation-state"},"navigation state"),". This isn't the same as the navigation object for the screen and includes some helpers such as ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," to emit events to the screens.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"descriptors")," - This is an object containing descriptors for each route with the route keys as its properties. The descriptor for a route can be accessed by ",(0,i.kt)("inlineCode",{parentName:"p"},"descriptors[route.key]"),". Each descriptor contains the following properties:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," - The navigation prop for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive ",(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," prop as well, such as a header component."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," - A getter which returns the options such as ",(0,i.kt)("inlineCode",{parentName:"li"},"title")," for the screen if they are specified."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"render")," - A function which can be used to render the actual screen. Calling ",(0,i.kt)("inlineCode",{parentName:"li"},"descriptors[route.key].render()")," will return a React element containing the screen content. It's important to use this method to render a screen, otherwise any child navigators won't be connected to the navigation tree properly.")))),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport { Text, Pressable, View } from 'react-native';\nimport {\n NavigationHelpersContext,\n useNavigationBuilder,\n TabRouter,\n TabActions,\n} from '@react-navigation/native';\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route) => (\n {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!event.defaultPrevented) {\n navigation.dispatch({\n ...TabActions.jumpTo(route.name),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title || route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," object for navigators also has an ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," method to emit custom events to the child screens. The usage looks like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"navigation.emit({\n type: 'transitionStart',\n data: { blurring: false },\n target: route.key,\n});\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," is available under the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," property in the ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," object, i.e. ",(0,i.kt)("inlineCode",{parentName:"p"},"event.data"),"."),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property determines the screen that will receive the event. If the ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property is omitted, the event is dispatched to all screens in the navigator."),(0,i.kt)("h3",{id:"createnavigatorfactory"},(0,i.kt)("inlineCode",{parentName:"h3"},"createNavigatorFactory")),(0,i.kt)("p",null,"This ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," function is used to create a function that will ",(0,i.kt)("inlineCode",{parentName:"p"},"Navigator")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"Screen")," pair. Custom navigators need to wrap the navigator component in ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," before exporting."),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import {\n useNavigationBuilder,\n createNavigatorFactory,\n} from '@react-navigation/native';\n\n// ...\n\nexport const createMyNavigator = createNavigatorFactory(TabNavigator);\n")),(0,i.kt)("p",null,"Then it can be used like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'import { createMyNavigator } from \'./myNavigator\';\n\nconst My = createMyNavigator();\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n')),(0,i.kt)("h2",{id:"type-checking-navigators"},"Type-checking navigators"),(0,i.kt)("p",null,"To type-check navigators, we need to provide 3 types:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Type of the props accepted by the view"),(0,i.kt)("li",{parentName:"ul"},"Type of supported screen options"),(0,i.kt)("li",{parentName:"ul"},"A map of event types emitted by the navigator")),(0,i.kt)("p",null,"For example, to type-check our custom tab navigator, we can do something like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport {\n View,\n Text,\n Pressable,\n StyleProp,\n ViewStyle,\n StyleSheet,\n} from 'react-native';\nimport {\n createNavigatorFactory,\n DefaultNavigatorOptions,\n ParamListBase,\n CommonActions,\n TabActionHelpers,\n TabNavigationState,\n TabRouter,\n TabRouterOptions,\n useNavigationBuilder,\n} from '@react-navigation/native';\n\n// Props accepted by the view\ntype TabNavigationConfig = {\n tabBarStyle: StyleProp;\n contentStyle: StyleProp;\n};\n\n// Supported screen options\ntype TabNavigationOptions = {\n title?: string;\n};\n\n// Map of event name and the type of data (in event.data)\n//\n// canPreventDefault: true adds the defaultPrevented property to the\n// emitted events.\ntype TabNavigationEventMap = {\n tabPress: {\n data: { isAlreadyFocused: boolean };\n canPreventDefault: true;\n };\n};\n\n// The props accepted by the component is a combination of 3 things\ntype Props = DefaultNavigatorOptions<\n ParamListBase,\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap\n> &\n TabRouterOptions &\n TabNavigationConfig;\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}: Props) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder<\n TabNavigationState,\n TabRouterOptions,\n TabActionHelpers,\n TabNavigationOptions,\n TabNavigationEventMap\n >(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route) => (\n {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n data: {\n isAlreadyFocused: route.key === state.routes[state.index].key,\n },\n });\n\n if (!event.defaultPrevented) {\n navigation.dispatch({\n ...CommonActions.navigate(route),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title || route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n\nexport default createNavigatorFactory<\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap,\n typeof TabNavigator\n>(TabNavigator);\n")),(0,i.kt)("h2",{id:"extending-navigators"},"Extending Navigators"),(0,i.kt)("p",null,"All of the built-in navigators export their views, which we can reuse and build additional functionality on top of them. For example, if we want to re-build the bottom tab navigator, we need the following code:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport {\n useNavigationBuilder,\n createNavigatorFactory,\n TabRouter,\n} from '@react-navigation/native';\nimport { BottomTabView } from '@react-navigation/bottom-tabs';\n\nfunction BottomTabNavigator({\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n ...rest\n}) {\n const { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n return (\n \n \n \n );\n}\n\nexport default createNavigatorFactory(BottomTabNavigator);\n")),(0,i.kt)("p",null,"Now, we can customize it to add additional functionality or change the behavior. For example, use a ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/custom-routers"},"custom router")," instead of the default ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import MyRouter from './MyRouter';\n\n// ...\n\nconst { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(MyRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n// ...\n")))}v.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[33242],{3905:function(e,t,n){n.d(t,{Zo:function(){return c},kt:function(){return v}});var a=n(67294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=a.createContext({}),u=function(e){var t=a.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},c=function(e){var t=u(e.components);return a.createElement(l.Provider,{value:t},e.children)},p="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,l=e.parentName,c=s(e,["components","mdxType","originalType","parentName"]),p=u(n),m=r,v=p["".concat(l,".").concat(m)]||p[m]||d[m]||i;return n?a.createElement(v,o(o({ref:t},c),{},{components:n})):a.createElement(v,o({ref:t},c))}));function v(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=m;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s[p]="string"==typeof e?e:r,o[1]=s;for(var u=2;u child <"+("string"==typeof e.type?e.type:e.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')}))}(e).map((function(e){var t=e.props;return{value:t.value,label:t.label,attributes:t.attributes,default:t.default}}))}function d(e){var t=e.values,n=e.children;return(0,r.useMemo)((function(){var e=null!=t?t:p(n);return function(e){var t=(0,u.l)(e,(function(e,t){return e.value===t.value}));if(t.length>0)throw new Error('Docusaurus error: Duplicate values "'+t.map((function(e){return e.value})).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[t,n])}function m(e){var t=e.value;return e.tabValues.some((function(e){return e.value===t}))}function v(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId,i=(0,s.k6)(),o=function(e){var t=e.queryString,n=void 0!==t&&t,a=e.groupId;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!a)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=a?a:null}({queryString:n,groupId:a});return[(0,l._X)(o),(0,r.useCallback)((function(e){if(o){var t=new URLSearchParams(i.location.search);t.set(o,e),i.replace(Object.assign({},i.location,{search:t.toString()}))}}),[o,i])]}function g(e){var t,n,a,i,o=e.defaultValue,s=e.queryString,l=void 0!==s&&s,u=e.groupId,p=d(e),g=(0,r.useState)((function(){return function(e){var t,n=e.defaultValue,a=e.tabValues;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(n){if(!m({value:n,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+n+'" but none of its children has the corresponding value. Available values are: '+a.map((function(e){return e.value})).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return n}var r=null!=(t=a.find((function(e){return e.default})))?t:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:o,tabValues:p})})),h=g[0],f=g[1],b=v({queryString:l,groupId:u}),N=b[0],k=b[1],y=(t=function(e){return e?"docusaurus.tab."+e:null}({groupId:u}.groupId),n=(0,c.Nk)(t),a=n[0],i=n[1],[a,(0,r.useCallback)((function(e){t&&i.set(e)}),[t,i])]),w=y[0],T=y[1],C=function(){var e=null!=N?N:w;return m({value:e,tabValues:p})?e:null}();return(0,r.useLayoutEffect)((function(){C&&f(C)}),[C]),{selectedValue:h,selectValue:(0,r.useCallback)((function(e){if(!m({value:e,tabValues:p}))throw new Error("Can't select invalid tab value="+e);f(e),k(e),T(e)}),[k,T,p]),tabValues:p}}var h=n(72389),f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};function b(e){var t=e.className,n=e.block,s=e.selectedValue,l=e.selectValue,u=e.tabValues,c=[],p=(0,o.o5)().blockElementScrollPositionUntilNextRender,d=function(e){var t=e.currentTarget,n=c.indexOf(t),a=u[n].value;a!==s&&(p(t),l(a))},m=function(e){var t,n=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":var a,r=c.indexOf(e.currentTarget)+1;n=null!=(a=c[r])?a:c[0];break;case"ArrowLeft":var i,o=c.indexOf(e.currentTarget)-1;n=null!=(i=c[o])?i:c[c.length-1]}null==(t=n)||t.focus()};return r.createElement("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":n},t)},u.map((function(e){var t=e.value,n=e.label,o=e.attributes;return r.createElement("li",(0,a.Z)({role:"tab",tabIndex:s===t?0:-1,"aria-selected":s===t,key:t,ref:function(e){return c.push(e)},onKeyDown:m,onClick:d},o,{className:(0,i.Z)("tabs__item",f.tabItem,null==o?void 0:o.className,{"tabs__item--active":s===t})}),null!=n?n:t)})))}function N(e){var t=e.lazy,n=e.children,a=e.selectedValue;if(n=Array.isArray(n)?n:[n],t){var i=n.find((function(e){return e.props.value===a}));return i?(0,r.cloneElement)(i,{className:"margin-top--md"}):null}return r.createElement("div",{className:"margin-top--md"},n.map((function(e,t){return(0,r.cloneElement)(e,{key:t,hidden:e.props.value!==a})})))}function k(e){var t=g(e);return r.createElement("div",{className:(0,i.Z)("tabs-container",f.tabList)},r.createElement(b,(0,a.Z)({},e,t)),r.createElement(N,(0,a.Z)({},e,t)))}function y(e){var t=(0,h.Z)();return r.createElement(k,(0,a.Z)({key:String(t)},e))}},10491:function(e,t,n){n.r(t),n.d(t,{assets:function(){return c},contentTitle:function(){return l},default:function(){return v},frontMatter:function(){return s},metadata:function(){return u},toc:function(){return p}});var a=n(83117),r=n(80102),i=(n(67294),n(3905)),o=(n(74866),n(85162),["components"]),s={id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},l=void 0,u={unversionedId:"custom-navigators",id:"version-7.x/custom-navigators",title:"Custom navigators",description:"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.",source:"@site/versioned_docs/version-7.x/custom-navigators.md",sourceDirName:".",slug:"/custom-navigators",permalink:"/docs/7.x/custom-navigators",draft:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/custom-navigators.md",tags:[],version:"7.x",frontMatter:{id:"custom-navigators",title:"Custom navigators",sidebar_label:"Custom navigators"},sidebar:"version-7.x/docs",previous:{title:"Custom routers",permalink:"/docs/7.x/custom-routers"},next:{title:"Migration Guides",permalink:"/docs/7.x/migration-guides"}},c={},p=[{value:"Built-in Navigators",id:"built-in-navigators",level:2},{value:"API for building custom navigators",id:"api-for-building-custom-navigators",level:2},{value:"useNavigationBuilder",id:"usenavigationbuilder",level:3},{value:"createNavigatorFactory",id:"createnavigatorfactory",level:3},{value:"Type-checking navigators",id:"type-checking-navigators",level:2},{value:"Extending Navigators",id:"extending-navigators",level:2}],d={toc:p},m="wrapper";function v(e){var t=e.components,n=(0,r.Z)(e,o);return(0,i.kt)(m,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure."),(0,i.kt)("p",null,"Under the hood, navigators are plain React components."),(0,i.kt)("h2",{id:"built-in-navigators"},"Built-in Navigators"),(0,i.kt)("p",null,"We include some commonly needed navigators such as:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/stack-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createStackNavigator"))," - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/drawer-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createDrawerNavigator"))," - Provides a drawer that slides in from the left of the screen by default."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/bottom-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createBottomTabNavigator"))," - Renders a tab bar that lets the user switch between several screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"/docs/7.x/material-top-tab-navigator"},(0,i.kt)("inlineCode",{parentName:"a"},"createMaterialTopTabNavigator"))," - Renders tab view which lets the user switch between several screens using swipe gesture or the tab bar.")),(0,i.kt)("h2",{id:"api-for-building-custom-navigators"},"API for building custom navigators"),(0,i.kt)("p",null,"A navigator bundles a router and a view which takes the ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/navigation-state"},"navigation state")," and decides how to render it. We export a ",(0,i.kt)("inlineCode",{parentName:"p"},"useNavigationBuilder")," hook to build custom navigators that integrate with rest of React Navigation."),(0,i.kt)("h3",{id:"usenavigationbuilder"},(0,i.kt)("inlineCode",{parentName:"h3"},"useNavigationBuilder")),(0,i.kt)("p",null,"This hook allows a component to hook into React Navigation. It accepts the following arguments:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"createRouter")," - A factory method which returns a router object (e.g. ",(0,i.kt)("inlineCode",{parentName:"p"},"StackRouter"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),").")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"options")," - Options for the hook and the router. The navigator should forward its props here so that user can provide props to configure the navigator. By default, the following options are accepted:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"children")," (required) - The ",(0,i.kt)("inlineCode",{parentName:"li"},"children")," prop should contain route configurations as ",(0,i.kt)("inlineCode",{parentName:"li"},"Screen")," components."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"screenOptions")," prop should contain default options for all of the screens."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," - The ",(0,i.kt)("inlineCode",{parentName:"li"},"initialRouteName")," prop determines the screen to focus on initial render. This prop is forwarded to the router.")),(0,i.kt)("p",{parentName:"li"},"If any other options are passed here, they'll be forwarded to the router."))),(0,i.kt)("p",null,"The hook returns an object with following properties:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"state")," - The ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/navigation-state"},"navigation state")," for the navigator. The component can take this state and decide how to render it.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," - The navigation object containing various helper methods for the navigator to manipulate the ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/navigation-state"},"navigation state"),". This isn't the same as the navigation object for the screen and includes some helpers such as ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," to emit events to the screens.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"descriptors")," - This is an object containing descriptors for each route with the route keys as its properties. The descriptor for a route can be accessed by ",(0,i.kt)("inlineCode",{parentName:"p"},"descriptors[route.key]"),". Each descriptor contains the following properties:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," - The navigation prop for the screen. You don't need to pass this to the screen manually. But it's useful if we're rendering components outside the screen that need to receive ",(0,i.kt)("inlineCode",{parentName:"li"},"navigation")," prop as well, such as a header component."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"options")," - A getter which returns the options such as ",(0,i.kt)("inlineCode",{parentName:"li"},"title")," for the screen if they are specified."),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"render")," - A function which can be used to render the actual screen. Calling ",(0,i.kt)("inlineCode",{parentName:"li"},"descriptors[route.key].render()")," will return a React element containing the screen content. It's important to use this method to render a screen, otherwise any child navigators won't be connected to the navigation tree properly.")))),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport { Text, Pressable, View } from 'react-native';\nimport {\n NavigationHelpersContext,\n useNavigationBuilder,\n TabRouter,\n TabActions,\n} from '@react-navigation/native';\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route) => (\n {\n const isFocused = state.index === index;\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.dispatch({\n ...TabActions.jumpTo(route.name, route.params),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title ?? route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"navigation")," object for navigators also has an ",(0,i.kt)("inlineCode",{parentName:"p"},"emit")," method to emit custom events to the child screens. The usage looks like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"navigation.emit({\n type: 'transitionStart',\n data: { blurring: false },\n target: route.key,\n});\n")),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," is available under the ",(0,i.kt)("inlineCode",{parentName:"p"},"data")," property in the ",(0,i.kt)("inlineCode",{parentName:"p"},"event")," object, i.e. ",(0,i.kt)("inlineCode",{parentName:"p"},"event.data"),"."),(0,i.kt)("p",null,"The ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property determines the screen that will receive the event. If the ",(0,i.kt)("inlineCode",{parentName:"p"},"target")," property is omitted, the event is dispatched to all screens in the navigator."),(0,i.kt)("h3",{id:"createnavigatorfactory"},(0,i.kt)("inlineCode",{parentName:"h3"},"createNavigatorFactory")),(0,i.kt)("p",null,"This ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," function is used to create a function that will ",(0,i.kt)("inlineCode",{parentName:"p"},"Navigator")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"Screen")," pair. Custom navigators need to wrap the navigator component in ",(0,i.kt)("inlineCode",{parentName:"p"},"createNavigatorFactory")," before exporting."),(0,i.kt)("p",null,"Example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import {\n useNavigationBuilder,\n createNavigatorFactory,\n} from '@react-navigation/native';\n\n// ...\n\nexport const createMyNavigator = createNavigatorFactory(TabNavigator);\n")),(0,i.kt)("p",null,"Then it can be used like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},'import { createMyNavigator } from \'./myNavigator\';\n\nconst My = createMyNavigator();\n\nfunction App() {\n return (\n \n \n \n \n );\n}\n')),(0,i.kt)("h2",{id:"type-checking-navigators"},"Type-checking navigators"),(0,i.kt)("p",null,"To type-check navigators, we need to provide 3 types:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Type of the props accepted by the view"),(0,i.kt)("li",{parentName:"ul"},"Type of supported screen options"),(0,i.kt)("li",{parentName:"ul"},"A map of event types emitted by the navigator")),(0,i.kt)("p",null,"For example, to type-check our custom tab navigator, we can do something like this:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-tsx"},"import * as React from 'react';\nimport {\n View,\n Text,\n Pressable,\n StyleProp,\n ViewStyle,\n StyleSheet,\n} from 'react-native';\nimport {\n createNavigatorFactory,\n DefaultNavigatorOptions,\n ParamListBase,\n CommonActions,\n TabActionHelpers,\n TabNavigationState,\n TabRouter,\n TabRouterOptions,\n useNavigationBuilder,\n} from '@react-navigation/native';\n\n// Props accepted by the view\ntype TabNavigationConfig = {\n tabBarStyle: StyleProp;\n contentStyle: StyleProp;\n};\n\n// Supported screen options\ntype TabNavigationOptions = {\n title?: string;\n};\n\n// Map of event name and the type of data (in event.data)\n//\n// canPreventDefault: true adds the defaultPrevented property to the\n// emitted events.\ntype TabNavigationEventMap = {\n tabPress: {\n data: { isAlreadyFocused: boolean };\n canPreventDefault: true;\n };\n};\n\n// The props accepted by the component is a combination of 3 things\ntype Props = DefaultNavigatorOptions<\n ParamListBase,\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap\n> &\n TabRouterOptions &\n TabNavigationConfig;\n\nfunction TabNavigator({\n initialRouteName,\n children,\n screenOptions,\n tabBarStyle,\n contentStyle,\n}: Props) {\n const { state, navigation, descriptors, NavigationContent } =\n useNavigationBuilder<\n TabNavigationState,\n TabRouterOptions,\n TabActionHelpers,\n TabNavigationOptions,\n TabNavigationEventMap\n >(TabRouter, {\n children,\n screenOptions,\n initialRouteName,\n });\n\n return (\n \n \n {state.routes.map((route, index) => (\n {\n const isFocused = state.index === index;\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n data: {\n isAlreadyFocused: isFocused,\n },\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.dispatch({\n ...CommonActions.navigate(route),\n target: state.key,\n });\n }\n }}\n style={{ flex: 1 }}\n >\n {descriptors[route.key].options.title || route.name}\n \n ))}\n \n \n {state.routes.map((route, i) => {\n return (\n \n {descriptors[route.key].render()}\n \n );\n })}\n \n \n );\n}\n\nexport default createNavigatorFactory<\n TabNavigationState,\n TabNavigationOptions,\n TabNavigationEventMap,\n typeof TabNavigator\n>(TabNavigator);\n")),(0,i.kt)("h2",{id:"extending-navigators"},"Extending Navigators"),(0,i.kt)("p",null,"All of the built-in navigators export their views, which we can reuse and build additional functionality on top of them. For example, if we want to re-build the bottom tab navigator, we need the following code:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import * as React from 'react';\nimport {\n useNavigationBuilder,\n createNavigatorFactory,\n TabRouter,\n} from '@react-navigation/native';\nimport { BottomTabView } from '@react-navigation/bottom-tabs';\n\nfunction BottomTabNavigator({\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n ...rest\n}) {\n const { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(TabRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n return (\n \n \n \n );\n}\n\nexport default createNavigatorFactory(BottomTabNavigator);\n")),(0,i.kt)("p",null,"Now, we can customize it to add additional functionality or change the behavior. For example, use a ",(0,i.kt)("a",{parentName:"p",href:"/docs/7.x/custom-routers"},"custom router")," instead of the default ",(0,i.kt)("inlineCode",{parentName:"p"},"TabRouter"),":"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-js"},"import MyRouter from './MyRouter';\n\n// ...\n\nconst { state, descriptors, navigation, NavigationContent } =\n useNavigationBuilder(MyRouter, {\n initialRouteName,\n backBehavior,\n children,\n screenOptions,\n });\n\n// ...\n")))}v.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/main.391f3efc.js b/assets/js/main.391f3efc.js new file mode 100644 index 00000000000..f6d2ce8d4a8 --- /dev/null +++ b/assets/js/main.391f3efc.js @@ -0,0 +1,2 @@ +/*! For license information please see main.391f3efc.js.LICENSE.txt */ +(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[40179],{20830:function(e,t,n){"use strict";n.d(t,{W:function(){return r}});var o=n(67294);function r(){return o.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},o.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},723:function(e,t,n){"use strict";n.d(t,{Z:function(){return f}});var o=n(67294),r=n(83117),i=n(68356),a=n.n(i),s=n(16887),c={"00d72952":[function(){return n.e(25590).then(n.bind(n,59212))},"@site/versioned_docs/version-5.x/link.md",59212],"017fa78e":[function(){return Promise.all([n.e(40532),n.e(64067)]).then(n.bind(n,15629))},"@site/versioned_docs/version-5.x/stack-navigator.md",15629],"01a1bba5":[function(){return n.e(50347).then(n.t.bind(n,78530,19))},"~docs/default/version-6-x-metadata-prop-658.json",78530],"01a85c17":[function(){return Promise.all([n.e(40532),n.e(64013)]).then(n.bind(n,91223))},"@theme/BlogTagsListPage",91223],"02715c9e":[function(){return n.e(97535).then(n.t.bind(n,71290,19))},"~docs/default/version-1-x-metadata-prop-27c.json",71290],"029dc854":[function(){return Promise.all([n.e(40532),n.e(23273)]).then(n.bind(n,66438))},"@site/versioned_docs/version-2.x/navigating.md",66438],"02f293a2":[function(){return Promise.all([n.e(40532),n.e(36926)]).then(n.bind(n,26951))},"@site/versioned_docs/version-1.x/auth-flow.md",26951],"0334870a":[function(){return n.e(63057).then(n.bind(n,18396))},"@site/versioned_docs/version-6.x/use-scroll-to-top.md",18396],"055cb6cb":[function(){return n.e(62348).then(n.bind(n,30393))},"@site/blog/2020-05-16-web-support.md",30393],"060b58ec":[function(){return Promise.all([n.e(40532),n.e(38407)]).then(n.bind(n,85057))},"@site/versioned_docs/version-3.x/transitioner.md",85057],"06aa38ed":[function(){return Promise.all([n.e(40532),n.e(78657)]).then(n.bind(n,73396))},"@site/versioned_docs/version-4.x/headers.md",73396],"0732884c":[function(){return Promise.all([n.e(40532),n.e(81963)]).then(n.bind(n,29665))},"@site/versioned_docs/version-5.x/stack-actions.md",29665],"07fb801c":[function(){return Promise.all([n.e(40532),n.e(19250)]).then(n.bind(n,844))},"@site/versioned_docs/version-4.x/community-libraries-and-navigators.md",844],"08731dbd":[function(){return Promise.all([n.e(40532),n.e(88095)]).then(n.bind(n,81539))},"@site/versioned_docs/version-6.x/multiple-drawers.md",81539],"08c74c36":[function(){return Promise.all([n.e(40532),n.e(98639)]).then(n.bind(n,73764))},"@site/versioned_docs/version-1.x/tab-based-navigation.md",73764],"09dc4294":[function(){return Promise.all([n.e(40532),n.e(34475)]).then(n.bind(n,34899))},"@site/versioned_docs/version-4.x/react-native-screens.md",34899],"0ad77dda":[function(){return n.e(31912).then(n.bind(n,32067))},"@site/blog/2018-04-06-react-navigation-2.0-rc.md",32067],"0bcf026f":[function(){return n.e(85831).then(n.bind(n,4443))},"@site/versioned_docs/version-6.x/route-prop.md",4443],"0cd801b6":[function(){return Promise.all([n.e(40532),n.e(44554)]).then(n.bind(n,74433))},"@site/versioned_docs/version-6.x/elements.md",74433],"0e0a3cb0":[function(){return Promise.all([n.e(40532),n.e(25392)]).then(n.bind(n,32125))},"@site/versioned_docs/version-4.x/getting-started.md",32125],"0e9dd1f6":[function(){return Promise.all([n.e(40532),n.e(64039)]).then(n.bind(n,40644))},"@site/versioned_docs/version-6.x/stack-actions.md",40644],"0e9f90e2":[function(){return Promise.all([n.e(40532),n.e(93970)]).then(n.bind(n,24310))},"@site/versioned_docs/version-2.x/common-mistakes.md",24310],"0f251e76":[function(){return Promise.all([n.e(40532),n.e(65492)]).then(n.bind(n,32585))},"@site/versioned_docs/version-3.x/custom-android-back-button-handling.md",32585],"0fd48e70":[function(){return n.e(80898).then(n.bind(n,35746))},"@site/blog/2020-05-19-joining-github-sponsors.md?truncated=true",35746],"116934ab":[function(){return Promise.all([n.e(40532),n.e(36590)]).then(n.bind(n,76852))},"@site/versioned_docs/version-2.x/modal.md",76852],"11c37a84":[function(){return Promise.all([n.e(40532),n.e(36912)]).then(n.bind(n,55574))},"@site/versioned_docs/version-5.x/server-rendering.md",55574],"11edefd1":[function(){return Promise.all([n.e(40532),n.e(38431)]).then(n.bind(n,20992))},"@site/versioned_docs/version-5.x/bottom-tab-navigator.md",20992],"11fb85f3":[function(){return Promise.all([n.e(40532),n.e(21862)]).then(n.bind(n,52775))},"@site/versioned_docs/version-5.x/drawer-actions.md",52775],"1233d971":[function(){return n.e(73825).then(n.bind(n,72551))},"@site/versioned_docs/version-1.x/api-reference.md",72551],"1279275a":[function(){return Promise.all([n.e(40532),n.e(82723)]).then(n.bind(n,69680))},"@site/versioned_docs/version-6.x/navigation-context.md",69680],"13e4d9ef":[function(){return Promise.all([n.e(40532),n.e(96802)]).then(n.bind(n,26572))},"@site/versioned_docs/version-2.x/material-top-tab-navigator.md",26572],14616538:[function(){return Promise.all([n.e(40532),n.e(88187)]).then(n.bind(n,50096))},"@site/versioned_docs/version-5.x/screen-options-resolution.md",50096],14716511:[function(){return Promise.all([n.e(40532),n.e(30506)]).then(n.bind(n,32528))},"@site/versioned_docs/version-1.x/status-bar.md",32528],"14acaad8":[function(){return n.e(435).then(n.bind(n,95531))},"@site/versioned_docs/version-2.x/api-reference.md",95531],"156bcb80":[function(){return Promise.all([n.e(40532),n.e(39198)]).then(n.bind(n,87922))},"@site/versioned_docs/version-3.x/tab-based-navigation.md",87922],"15cb52a8":[function(){return Promise.all([n.e(40532),n.e(26819)]).then(n.bind(n,62387))},"@site/versioned_docs/version-2.x/header-buttons.md",62387],"15f1c7c7":[function(){return Promise.all([n.e(40532),n.e(93480)]).then(n.bind(n,80419))},"@site/versioned_docs/version-3.x/stack-actions.md",80419],"168ed425":[function(){return Promise.all([n.e(40532),n.e(76385)]).then(n.bind(n,16815))},"@site/versioned_docs/version-1.x/routers.md",16815],"16d126b2":[function(){return Promise.all([n.e(40532),n.e(81959)]).then(n.bind(n,59198))},"@site/versioned_docs/version-6.x/redux-integration.md",59198],"17b59e25":[function(){return Promise.all([n.e(40532),n.e(89551)]).then(n.bind(n,42586))},"@site/versioned_docs/version-7.x/native-stack-navigator.md",42586],"17d003f0":[function(){return Promise.all([n.e(40532),n.e(89626)]).then(n.bind(n,75294))},"@site/versioned_docs/version-2.x/routers.md",75294],"17ec3dcd":[function(){return Promise.all([n.e(40532),n.e(42743)]).then(n.bind(n,40572))},"@site/versioned_docs/version-5.x/custom-navigators.md",40572],"188f698f":[function(){return Promise.all([n.e(40532),n.e(86561)]).then(n.bind(n,50399))},"@site/versioned_docs/version-7.x/use-scroll-to-top.md",50399],"18b2070b":[function(){return Promise.all([n.e(40532),n.e(81519)]).then(n.bind(n,15149))},"@site/versioned_docs/version-5.x/navigation-events.md",15149],"18b93cb3":[function(){return n.e(3042).then(n.bind(n,29732))},"@site/src/pages/versions.js",29732],"18bf351a":[function(){return Promise.all([n.e(40532),n.e(41447)]).then(n.bind(n,84318))},"@site/versioned_docs/version-6.x/stack-navigator.md",84318],"190dc87f":[function(){return Promise.all([n.e(40532),n.e(74799)]).then(n.bind(n,7087))},"@site/versioned_docs/version-7.x/static-configuration.md",7087],"198136e6":[function(){return Promise.all([n.e(40532),n.e(9795)]).then(n.bind(n,6276))},"@site/versioned_docs/version-3.x/header-buttons.md",6276],"1a4e3797":[function(){return Promise.all([n.e(40532),n.e(97920)]).then(n.bind(n,39172))},"@theme/SearchPage",39172],"1ae011e9":[function(){return Promise.all([n.e(40532),n.e(23818)]).then(n.bind(n,84114))},"@site/versioned_docs/version-7.x/tab-actions.md",84114],"1b06775d":[function(){return Promise.all([n.e(40532),n.e(660)]).then(n.bind(n,25626))},"@site/versioned_docs/version-4.x/animated-switch-navigator.md",25626],"1b79fc76":[function(){return n.e(66301).then(n.bind(n,51794))},"@site/blog/2018-11-17-react-navigation-3.0.md?truncated=true",51794],"1be5ddd6":[function(){return Promise.all([n.e(40532),n.e(22316)]).then(n.bind(n,58649))},"@site/versioned_docs/version-6.x/server-container.md",58649],"1c007cbb":[function(){return Promise.all([n.e(40532),n.e(13126)]).then(n.bind(n,42607))},"@site/versioned_docs/version-2.x/tab-navigator.md",42607],"1c2eab2d":[function(){return n.e(83604).then(n.bind(n,21553))},"@site/versioned_docs/version-2.x/with-navigation-focus.md",21553],"1ca07b31":[function(){return Promise.all([n.e(40532),n.e(94007)]).then(n.bind(n,51714))},"@site/versioned_docs/version-5.x/more-resources.md",51714],"1d424ec3":[function(){return Promise.all([n.e(40532),n.e(62989)]).then(n.bind(n,99996))},"@site/versioned_docs/version-3.x/material-top-tab-navigator.md",99996],"1e63bad8":[function(){return Promise.all([n.e(40532),n.e(70525)]).then(n.bind(n,21657))},"@site/versioned_docs/version-5.x/contributing.md",21657],"1eecde9e":[function(){return Promise.all([n.e(40532),n.e(64222)]).then(n.bind(n,12683))},"@site/versioned_docs/version-6.x/shared-element-transitions.md",12683],"1f922c0a":[function(){return Promise.all([n.e(40532),n.e(62573)]).then(n.bind(n,94463))},"@site/versioned_docs/version-5.x/drawer-navigator.md",94463],"1fc9112c":[function(){return Promise.all([n.e(40532),n.e(18998)]).then(n.bind(n,63811))},"@site/versioned_docs/version-4.x/navigation-context.md",63811],20697995:[function(){return n.e(31817).then(n.bind(n,47989))},"@site/blog/2018-05-07-react-navigation-2.0.md",47989],"208b9e32":[function(){return Promise.all([n.e(40532),n.e(21453)]).then(n.bind(n,20089))},"@site/versioned_docs/version-5.x/use-route.md",20089],20989594:[function(){return n.e(71280).then(n.bind(n,35880))},"@site/versioned_docs/version-5.x/route-prop.md",35880],"20f68260":[function(){return Promise.all([n.e(40532),n.e(16707)]).then(n.bind(n,93697))},"@site/versioned_docs/version-2.x/glossary-of-terms.md",93697],"2152a276":[function(){return Promise.all([n.e(40532),n.e(96450)]).then(n.bind(n,89654))},"@site/versioned_docs/version-7.x/use-link-builder.md",89654],"220adfdd":[function(){return n.e(83073).then(n.bind(n,83880))},"@site/versioned_docs/version-2.x/navigating-without-navigation-prop.md",83880],22592995:[function(){return Promise.all([n.e(40532),n.e(65799)]).then(n.bind(n,32828))},"@site/versioned_docs/version-7.x/navigating-without-navigation-prop.md",32828],"22cce5e3":[function(){return Promise.all([n.e(40532),n.e(6679)]).then(n.bind(n,59458))},"@site/versioned_docs/version-1.x/transitioner.md",59458],"2330c7a5":[function(){return Promise.all([n.e(40532),n.e(64464)]).then(n.bind(n,95087))},"@site/versioned_docs/version-2.x/navigation-key.md",95087],"2345d271":[function(){return Promise.all([n.e(40532),n.e(44501)]).then(n.bind(n,58471))},"@site/versioned_docs/version-2.x/state-persistence.md",58471],23828948:[function(){return Promise.all([n.e(40532),n.e(93575)]).then(n.bind(n,25393))},"@site/versioned_docs/version-5.x/react-native-screens.md",25393],"23dd3248":[function(){return Promise.all([n.e(40532),n.e(62405)]).then(n.bind(n,36409))},"@site/versioned_docs/version-6.x/use-focus-effect.md",36409],"242b7c9d":[function(){return Promise.all([n.e(40532),n.e(62519)]).then(n.bind(n,35324))},"@site/versioned_docs/version-6.x/screen-options.md",35324],"2725af3e":[function(){return n.e(62019).then(n.bind(n,81047))},"@site/blog/2018-11-01-react-navigation-3.0-rc.md",81047],"2742fd1f":[function(){return Promise.all([n.e(40532),n.e(42272)]).then(n.bind(n,36462))},"@site/versioned_docs/version-6.x/drawer-navigator.md",36462],"278698af":[function(){return Promise.all([n.e(40532),n.e(83612)]).then(n.bind(n,5472))},"@site/versioned_docs/version-2.x/redux-integration.md",5472],"27e00fa9":[function(){return Promise.all([n.e(40532),n.e(26177)]).then(n.bind(n,93864))},"@site/versioned_docs/version-2.x/status-bar.md",93864],"283e63f8":[function(){return n.e(44157).then(n.t.bind(n,52844,19))},"~blog/default/blog-tags-announcement-752.json",52844],"2895d14d":[function(){return Promise.all([n.e(40532),n.e(67373)]).then(n.bind(n,70832))},"@site/versioned_docs/version-7.x/next-steps.md",70832],"28ae1e59":[function(){return Promise.all([n.e(40532),n.e(26277)]).then(n.bind(n,11142))},"@site/versioned_docs/version-7.x/drawer-actions.md",11142],"2965ee69":[function(){return Promise.all([n.e(40532),n.e(78624)]).then(n.bind(n,13938))},"@site/versioned_docs/version-2.x/app-containers.md",13938],"298dce3d":[function(){return n.e(64454).then(n.bind(n,73828))},"@site/blog/2018-05-07-react-navigation-2.0.md?truncated=true",73828],"29af1846":[function(){return Promise.all([n.e(40532),n.e(2980)]).then(n.bind(n,36029))},"@site/versioned_docs/version-3.x/with-navigation.md",36029],"2a1e22c6":[function(){return Promise.all([n.e(40532),n.e(36234)]).then(n.bind(n,4947))},"@site/versioned_docs/version-6.x/bottom-tab-navigator.md",4947],"2a793fe9":[function(){return Promise.all([n.e(40532),n.e(47793)]).then(n.bind(n,6459))},"@site/versioned_docs/version-2.x/auth-flow.md",6459],"2ad06cff":[function(){return Promise.all([n.e(40532),n.e(94961)]).then(n.bind(n,66661))},"@site/versioned_docs/version-3.x/custom-navigator-overview.md",66661],"2bba45e9":[function(){return Promise.all([n.e(40532),n.e(95801)]).then(n.bind(n,63224))},"@site/versioned_docs/version-6.x/native-stack-navigator.md",63224],"2bc9c82b":[function(){return Promise.all([n.e(40532),n.e(42041)]).then(n.bind(n,21107))},"@site/versioned_docs/version-5.x/connecting-navigation-prop.md",21107],"2bf47602":[function(){return Promise.all([n.e(40532),n.e(15091)]).then(n.bind(n,48837))},"@site/versioned_docs/version-1.x/handling-iphonex.md",48837],"2c1dfa59":[function(){return n.e(41370).then(n.bind(n,67532))},"@site/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md",67532],"2c6e00e5":[function(){return Promise.all([n.e(40532),n.e(13120)]).then(n.bind(n,49243))},"@site/versioned_docs/version-4.x/glossary-of-terms.md",49243],"2e2591dd":[function(){return Promise.all([n.e(40532),n.e(1393)]).then(n.bind(n,87216))},"@site/versioned_docs/version-6.x/navigating-without-navigation-prop.md",87216],"2e363522":[function(){return Promise.all([n.e(40532),n.e(38963)]).then(n.bind(n,71595))},"@site/versioned_docs/version-3.x/localization.md",71595],"2e5371a8":[function(){return Promise.all([n.e(40532),n.e(41434)]).then(n.bind(n,16968))},"@site/versioned_docs/version-5.x/screen-options.md",16968],"2f88b479":[function(){return Promise.all([n.e(40532),n.e(68562)]).then(n.bind(n,86123))},"@site/versioned_docs/version-4.x/navigation-events.md",86123],"2f8e0f44":[function(){return Promise.all([n.e(40532),n.e(85261)]).then(n.bind(n,13925))},"@site/versioned_docs/version-4.x/drawer-actions.md",13925],"2faf7e03":[function(){return n.e(72442).then(n.bind(n,90355))},"@site/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md?truncated=true",90355],"2ff338f7":[function(){return Promise.all([n.e(40532),n.e(66034)]).then(n.bind(n,97520))},"@site/versioned_docs/version-7.x/static-api-reference.md",97520],"317e2018":[function(){return n.e(52735).then(n.bind(n,34918))},"@site/blog/2019-09-16-react-navigation-4.0.md",34918],"31a4dab7":[function(){return Promise.all([n.e(40532),n.e(35201)]).then(n.bind(n,6753))},"@site/versioned_docs/version-4.x/common-mistakes.md",6753],"320f57a7":[function(){return Promise.all([n.e(40532),n.e(94474)]).then(n.bind(n,88546))},"@site/versioned_docs/version-4.x/switch-actions.md",88546],"322cbdb3":[function(){return Promise.all([n.e(40532),n.e(12665)]).then(n.bind(n,27118))},"@site/versioned_docs/version-3.x/themes.md",27118],"3288f5dd":[function(){return n.e(19987).then(n.bind(n,78293))},"@site/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md",78293],"32c90e4f":[function(){return Promise.all([n.e(40532),n.e(15823)]).then(n.bind(n,38901))},"@site/versioned_docs/version-3.x/custom-navigators.md",38901],"34642e36":[function(){return Promise.all([n.e(40532),n.e(24076)]).then(n.bind(n,71909))},"@site/versioned_docs/version-2.x/navigation-context.md",71909],34737634:[function(){return Promise.all([n.e(40532),n.e(39136)]).then(n.bind(n,81499))},"@site/versioned_docs/version-1.x/navigating.md",81499],"3473afe0":[function(){return Promise.all([n.e(40532),n.e(63355)]).then(n.bind(n,422))},"@site/versioned_docs/version-4.x/with-navigation-focus.md",422],34750482:[function(){return Promise.all([n.e(40532),n.e(92715)]).then(n.bind(n,60532))},"@site/versioned_docs/version-7.x/drawer-based-navigation.md",60532],"349caeb8":[function(){return Promise.all([n.e(40532),n.e(38041)]).then(n.bind(n,2182))},"@site/versioned_docs/version-1.x/header-buttons.md",2182],"34a92c49":[function(){return Promise.all([n.e(40532),n.e(11529)]).then(n.bind(n,51277))},"@site/versioned_docs/version-2.x/navigation-lifecycle.md",51277],"34afa66a":[function(){return Promise.all([n.e(40532),n.e(42277)]).then(n.bind(n,7553))},"@site/versioned_docs/version-3.x/navigation-lifecycle.md",7553],"34b88438":[function(){return Promise.all([n.e(40532),n.e(47240)]).then(n.bind(n,36703))},"@site/versioned_docs/version-1.x/listen-lifecycle-events.md",36703],"34e8079f":[function(){return Promise.all([n.e(40532),n.e(25101)]).then(n.bind(n,59506))},"@site/versioned_docs/version-6.x/navigation-lifecycle.md",59506],"35cd4f7e":[function(){return Promise.all([n.e(40532),n.e(56289)]).then(n.bind(n,19083))},"@site/src/pages/home/BLM/index.js",19083],"369bd8f8":[function(){return n.e(25391).then(n.t.bind(n,75650,19))},"~blog/default/blog-tags-tutorial-e7d-list.json",75650],"36dd008b":[function(){return Promise.all([n.e(40532),n.e(89776)]).then(n.bind(n,33179))},"@site/versioned_docs/version-2.x/custom-routers.md",33179],"37bf63f8":[function(){return Promise.all([n.e(40532),n.e(57310)]).then(n.bind(n,32756))},"@site/versioned_docs/version-6.x/auth-flow.md",32756],"385a96ec":[function(){return Promise.all([n.e(40532),n.e(26806)]).then(n.bind(n,26466))},"@site/versioned_docs/version-4.x/more-resources.md",26466],38945924:[function(){return Promise.all([n.e(40532),n.e(77685)]).then(n.bind(n,81637))},"@site/versioned_docs/version-3.x/navigation-prop.md",81637],"38e75df9":[function(){return Promise.all([n.e(40532),n.e(10369)]).then(n.bind(n,42236))},"@site/versioned_docs/version-3.x/status-bar.md",42236],"38f0ae39":[function(){return Promise.all([n.e(40532),n.e(31724)]).then(n.bind(n,98777))},"@site/versioned_docs/version-7.x/pitch.md",98777],"38fc62f0":[function(){return Promise.all([n.e(40532),n.e(40883)]).then(n.bind(n,52433))},"@site/versioned_docs/version-5.x/use-focus-effect.md",52433],"3a7a90e6":[function(){return Promise.all([n.e(40532),n.e(22190)]).then(n.bind(n,41402))},"@site/versioned_docs/version-5.x/alternatives.md",41402],"3bdd1be4":[function(){return n.e(96750).then(n.bind(n,44122))},"@site/blog/2018-11-17-react-navigation-3.0.md",44122],"3d2d3ec8":[function(){return Promise.all([n.e(40532),n.e(90008)]).then(n.bind(n,49283))},"@site/versioned_docs/version-2.x/screen-tracking.md",49283],"3d5c69eb":[function(){return Promise.all([n.e(40532),n.e(28774)]).then(n.bind(n,65116))},"@site/versioned_docs/version-5.x/hello-react-navigation.md",65116],"3d65d037":[function(){return Promise.all([n.e(40532),n.e(34609)]).then(n.bind(n,91301))},"@site/versioned_docs/version-7.x/web-support.md",91301],"3dd22c0a":[function(){return Promise.all([n.e(40532),n.e(2409)]).then(n.bind(n,26351))},"@site/versioned_docs/version-3.x/screen-tracking.md",26351],"3ddd3618":[function(){return Promise.all([n.e(40532),n.e(43107)]).then(n.bind(n,40501))},"@site/versioned_docs/version-3.x/with-navigation-focus.md",40501],"3e290227":[function(){return Promise.all([n.e(40532),n.e(69264)]).then(n.bind(n,9700))},"@site/versioned_docs/version-6.x/status-bar.md",9700],"3f09e8c5":[function(){return Promise.all([n.e(40532),n.e(78777)]).then(n.bind(n,66216))},"@site/versioned_docs/version-4.x/material-top-tab-navigator.md",66216],"3fdc919d":[function(){return Promise.all([n.e(40532),n.e(81043)]).then(n.bind(n,26881))},"@site/versioned_docs/version-7.x/redux-integration.md",26881],"3fe99ec0":[function(){return Promise.all([n.e(40532),n.e(42568)]).then(n.bind(n,17371))},"@site/versioned_docs/version-6.x/navigation-solutions-and-community-libraries.md",17371],"3ff188ce":[function(){return Promise.all([n.e(40532),n.e(53473)]).then(n.bind(n,7833))},"@site/versioned_docs/version-7.x/static-combine-with-dynamic.md",7833],"4097ee88":[function(){return Promise.all([n.e(40532),n.e(11456)]).then(n.bind(n,70027))},"@site/versioned_docs/version-1.x/navigation-views.md",70027],"41d864f0":[function(){return Promise.all([n.e(40532),n.e(18999)]).then(n.bind(n,66251))},"@site/versioned_docs/version-3.x/navigating-without-navigation-prop.md",66251],"421dbb3b":[function(){return Promise.all([n.e(40532),n.e(22782)]).then(n.bind(n,24356))},"@site/versioned_docs/version-3.x/handling-iphonex.md",24356],"4294b48d":[function(){return Promise.all([n.e(40532),n.e(2448)]).then(n.bind(n,37272))},"@site/versioned_docs/version-6.x/hiding-tabbar-in-screens.md",37272],"42baf60a":[function(){return Promise.all([n.e(40532),n.e(43969)]).then(n.bind(n,41406))},"@site/versioned_docs/version-3.x/animated-switch-navigator.md",41406],"430040aa":[function(){return Promise.all([n.e(40532),n.e(49375)]).then(n.bind(n,7435))},"@site/versioned_docs/version-4.x/pitch.md",7435],"43562d64":[function(){return Promise.all([n.e(40532),n.e(47643)]).then(n.bind(n,86883))},"@site/versioned_docs/version-7.x/navigation-prop.md",86883],"43895b73":[function(){return Promise.all([n.e(40532),n.e(8960)]).then(n.bind(n,56733))},"@site/versioned_docs/version-3.x/navigation-options-resolution.md",56733],"451c00d0":[function(){return n.e(10801).then(n.t.bind(n,90637,19))},"~blog/default/blog-tags-react-native-paper-084.json",90637],"454aff66":[function(){return Promise.all([n.e(40532),n.e(94754)]).then(n.bind(n,24311))},"@site/versioned_docs/version-6.x/use-navigation-state.md",24311],"4554b8eb":[function(){return Promise.all([n.e(40532),n.e(82827)]).then(n.bind(n,36929))},"@site/versioned_docs/version-3.x/more-resources.md",36929],"45aab7e5":[function(){return n.e(94499).then(n.t.bind(n,4962,19))},"~docs/default/version-2-x-metadata-prop-4fa.json",4962],"45add071":[function(){return Promise.all([n.e(40532),n.e(34835)]).then(n.bind(n,36183))},"@site/versioned_docs/version-7.x/connecting-navigation-prop.md",36183],"45e61a04":[function(){return Promise.all([n.e(40532),n.e(79720)]).then(n.bind(n,27476))},"@site/versioned_docs/version-4.x/navigation-key.md",27476],"472ed44a":[function(){return Promise.all([n.e(40532),n.e(54825)]).then(n.bind(n,96510))},"@site/versioned_docs/version-6.x/tab-based-navigation.md",96510],"47734c36":[function(){return Promise.all([n.e(40532),n.e(82806)]).then(n.bind(n,48390))},"@site/versioned_docs/version-3.x/material-bottom-tab-navigator.md",48390],"4790fcfc":[function(){return Promise.all([n.e(40532),n.e(70918)]).then(n.bind(n,70582))},"@site/versioned_docs/version-5.x/supported-react-native-versions.md",70582],"47cdb689":[function(){return Promise.all([n.e(40532),n.e(1697)]).then(n.bind(n,34709))},"@site/versioned_docs/version-6.x/tab-view.md",34709],"480dd063":[function(){return Promise.all([n.e(40532),n.e(85476)]).then(n.bind(n,70370))},"@site/versioned_docs/version-2.x/alternatives.md",70370],"48179b36":[function(){return Promise.all([n.e(40532),n.e(5882)]).then(n.bind(n,32679))},"@site/versioned_docs/version-1.x/contributing.md",32679],"482751c5":[function(){return Promise.all([n.e(40532),n.e(25655)]).then(n.bind(n,4841))},"@site/versioned_docs/version-3.x/next-steps.md",4841],"48627ccf":[function(){return Promise.all([n.e(40532),n.e(91324)]).then(n.bind(n,5445))},"@site/versioned_docs/version-7.x/getting-started.md",5445],"487aa00f":[function(){return Promise.all([n.e(40532),n.e(76474)]).then(n.bind(n,67244))},"@site/versioned_docs/version-7.x/route-prop.md",67244],"48bce793":[function(){return Promise.all([n.e(40532),n.e(83388)]).then(n.bind(n,70626))},"@site/versioned_docs/version-6.x/themes.md",70626],"493070b6":[function(){return Promise.all([n.e(40532),n.e(84999)]).then(n.bind(n,52993))},"@site/versioned_docs/version-2.x/material-bottom-tab-navigator.md",52993],"4950f112":[function(){return n.e(8543).then(n.t.bind(n,23618,19))},"~blog/default/blog-tags-ui-kitten-157.json",23618],"4971bf21":[function(){return Promise.all([n.e(40532),n.e(60189)]).then(n.bind(n,40689))},"@site/versioned_docs/version-6.x/custom-routers.md",40689],"4a85a9e1":[function(){return Promise.all([n.e(40532),n.e(9772)]).then(n.bind(n,19872))},"@site/versioned_docs/version-4.x/navigating-without-navigation-prop.md",19872],"4aa34a2d":[function(){return Promise.all([n.e(40532),n.e(94928)]).then(n.bind(n,8681))},"@site/versioned_docs/version-2.x/custom-navigator-overview.md",8681],"4affc812":[function(){return Promise.all([n.e(40532),n.e(41941)]).then(n.bind(n,55137))},"@site/versioned_docs/version-7.x/themes.md",55137],"4d2cce11":[function(){return Promise.all([n.e(40532),n.e(44757)]).then(n.bind(n,15846))},"@site/versioned_docs/version-6.x/pitch.md",15846],"4d989974":[function(){return Promise.all([n.e(40532),n.e(61092)]).then(n.bind(n,29793))},"@site/versioned_docs/version-1.x/navigating-without-navigation-prop.md",29793],"4dad2d95":[function(){return Promise.all([n.e(40532),n.e(66986)]).then(n.bind(n,60115))},"@site/versioned_docs/version-6.x/params.md",60115],"4dd5a1e2":[function(){return Promise.all([n.e(40532),n.e(48263)]).then(n.bind(n,37490))},"@site/versioned_docs/version-6.x/use-link-builder.md",37490],"4de4f0aa":[function(){return Promise.all([n.e(40532),n.e(8054)]).then(n.bind(n,12473))},"@site/versioned_docs/version-3.x/modal.md",12473],"4ed526a6":[function(){return Promise.all([n.e(40532),n.e(60018)]).then(n.bind(n,49417))},"@site/versioned_docs/version-4.x/switch-navigator.md",49417],"4ee3e0f9":[function(){return n.e(73006).then(n.t.bind(n,15745,19))},"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",15745],"4f17f4e8":[function(){return Promise.all([n.e(40532),n.e(62617)]).then(n.bind(n,82042))},"@site/versioned_docs/version-3.x/scrollables.md",82042],"4f52b89f":[function(){return Promise.all([n.e(40532),n.e(57702)]).then(n.bind(n,2948))},"@site/versioned_docs/version-6.x/screen-tracking.md",2948],"4f9396e4":[function(){return Promise.all([n.e(40532),n.e(89619)]).then(n.bind(n,67036))},"@site/versioned_docs/version-3.x/navigation-views.md",67036],"5050cca3":[function(){return Promise.all([n.e(40532),n.e(9311)]).then(n.bind(n,98961))},"@site/versioned_docs/version-4.x/modal.md",98961],"506fd606":[function(){return Promise.all([n.e(40532),n.e(11790)]).then(n.bind(n,38758))},"@site/versioned_docs/version-4.x/navigation-actions.md",38758],"508f3f9b":[function(){return Promise.all([n.e(40532),n.e(87666)]).then(n.bind(n,17544))},"@site/versioned_docs/version-5.x/custom-routers.md",17544],"50f409bc":[function(){return Promise.all([n.e(40532),n.e(92048)]).then(n.bind(n,84040))},"@site/versioned_docs/version-7.x/deep-linking.md",84040],"51035c32":[function(){return Promise.all([n.e(40532),n.e(60329)]).then(n.bind(n,82893))},"@site/versioned_docs/version-4.x/with-navigation.md",82893],"51368b5b":[function(){return Promise.all([n.e(40532),n.e(76422)]).then(n.bind(n,40698))},"@site/versioned_docs/version-5.x/web-support.md",40698],"524cb6b9":[function(){return Promise.all([n.e(40532),n.e(46800)]).then(n.bind(n,54056))},"@site/versioned_docs/version-7.x/header-buttons.md",54056],"53be29f2":[function(){return Promise.all([n.e(40532),n.e(23258)]).then(n.bind(n,38559))},"@site/versioned_docs/version-6.x/preventing-going-back.md",38559],"54ce2ec1":[function(){return Promise.all([n.e(40532),n.e(91883)]).then(n.bind(n,18940))},"@site/versioned_docs/version-1.x/with-navigation-focus.md",18940],"553b20f2":[function(){return Promise.all([n.e(40532),n.e(54591)]).then(n.bind(n,29535))},"@site/versioned_docs/version-4.x/typescript.md",29535],"55b83a48":[function(){return Promise.all([n.e(40532),n.e(33408)]).then(n.bind(n,54013))},"@site/versioned_docs/version-3.x/headers.md",54013],"55b92464":[function(){return Promise.all([n.e(40532),n.e(31047)]).then(n.bind(n,52241))},"@site/versioned_docs/version-6.x/navigation-prop.md",52241],"561a3eb1":[function(){return n.e(12541).then(n.t.bind(n,33722,19))},"~docs/default/version-5-x-metadata-prop-e8f.json",33722],"572e4edf":[function(){return Promise.all([n.e(40532),n.e(45098)]).then(n.bind(n,88291))},"@site/versioned_docs/version-5.x/devtools.md",88291],"57bdb9cf":[function(){return Promise.all([n.e(40532),n.e(73597)]).then(n.bind(n,62823))},"@site/versioned_docs/version-5.x/headers.md",62823],"5834e856":[function(){return Promise.all([n.e(40532),n.e(40364)]).then(n.bind(n,66544))},"@site/versioned_docs/version-4.x/params.md",66544],"585dd972":[function(){return Promise.all([n.e(40532),n.e(22081)]).then(n.bind(n,38109))},"@site/versioned_docs/version-3.x/navigating.md",38109],"58932f68":[function(){return Promise.all([n.e(40532),n.e(80690)]).then(n.bind(n,72840))},"@site/versioned_docs/version-4.x/navigation-lifecycle.md",72840],"5a6dc606":[function(){return Promise.all([n.e(40532),n.e(12227)]).then(n.bind(n,96553))},"@site/versioned_docs/version-2.x/custom-navigators.md",96553],"5a6e47ce":[function(){return Promise.all([n.e(40532),n.e(7519)]).then(n.bind(n,53833))},"@site/versioned_docs/version-6.x/navigating.md",53833],"5a783331":[function(){return Promise.all([n.e(40532),n.e(26463)]).then(n.bind(n,77097))},"@site/versioned_docs/version-7.x/screen-tracking.md",77097],"5da2bafc":[function(){return Promise.all([n.e(40532),n.e(90174)]).then(n.bind(n,79927))},"/home/runner/work/react-navigation.github.io/react-navigation.github.io/src/pages/layouts/DocPage.js",79927],"5dde19ad":[function(){return n.e(80434).then(n.t.bind(n,492,19))},"~docs/default/version-3-x-metadata-prop-df2.json",492],"5e9f5e1a":[function(){return Promise.resolve().then(n.bind(n,36809))},"@generated/docusaurus.config",36809],"5ee02d5e":[function(){return Promise.all([n.e(40532),n.e(78236)]).then(n.bind(n,21509))},"@site/versioned_docs/version-3.x/hello-react-navigation.md",21509],"5f32cb9f":[function(){return Promise.all([n.e(40532),n.e(98596)]).then(n.bind(n,19301))},"@site/versioned_docs/version-6.x/getting-started.md",19301],"5f5c23d7":[function(){return Promise.all([n.e(40532),n.e(53247)]).then(n.bind(n,51826))},"@site/versioned_docs/version-7.x/navigation-state.md",51826],"5f623a5c":[function(){return Promise.all([n.e(40532),n.e(4442)]).then(n.bind(n,5038))},"@site/versioned_docs/version-5.x/screen.md",5038],"5f7a57d5":[function(){return Promise.all([n.e(40532),n.e(11534)]).then(n.bind(n,30737))},"@site/versioned_docs/version-6.x/use-is-focused.md",30737],"5f99a06b":[function(){return Promise.all([n.e(40532),n.e(32065)]).then(n.bind(n,51988))},"@site/versioned_docs/version-6.x/state-persistence.md",51988],"5fa34f3e":[function(){return Promise.all([n.e(40532),n.e(12944)]).then(n.bind(n,60466))},"@site/versioned_docs/version-5.x/use-theme.md",60466],"6054d54f":[function(){return Promise.all([n.e(40532),n.e(39176)]).then(n.bind(n,32455))},"@site/versioned_docs/version-6.x/connecting-navigation-prop.md",32455],"61322d15":[function(){return Promise.all([n.e(40532),n.e(99937)]).then(n.bind(n,85581))},"@site/versioned_docs/version-6.x/handling-safe-area.md",85581],"61da15b7":[function(){return Promise.all([n.e(40532),n.e(86259)]).then(n.bind(n,3148))},"@site/versioned_docs/version-7.x/hello-react-navigation.md",3148],"6289cd6c":[function(){return Promise.all([n.e(40532),n.e(50149)]).then(n.bind(n,12301))},"@site/versioned_docs/version-2.x/react-native-screens.md",12301],"6354cbd6":[function(){return Promise.all([n.e(40532),n.e(83340)]).then(n.bind(n,95251))},"@site/versioned_docs/version-1.x/custom-routers.md",95251],"63a36266":[function(){return Promise.all([n.e(40532),n.e(11125),n.e(49967)]).then(n.bind(n,17425))},"@site/versioned_docs/version-5.x/configuring-links.md",17425],"63f4abc2":[function(){return Promise.all([n.e(40532),n.e(2905)]).then(n.bind(n,72804))},"@site/versioned_docs/version-2.x/handling-iphonex.md",72804],65636706:[function(){return Promise.all([n.e(40532),n.e(11125),n.e(34568)]).then(n.bind(n,87893))},"@site/versioned_docs/version-6.x/configuring-links.md",87893],"6578c24b":[function(){return Promise.all([n.e(40532),n.e(76548)]).then(n.bind(n,58681))},"@site/versioned_docs/version-6.x/next-steps.md",58681],66169356:[function(){return Promise.all([n.e(40532),n.e(34366)]).then(n.bind(n,48844))},"@site/versioned_docs/version-4.x/navigating.md",48844],"662e2520":[function(){return Promise.all([n.e(40532),n.e(85954)]).then(n.bind(n,46856))},"@site/versioned_docs/version-1.x/navigation-prop.md",46856],66875650:[function(){return Promise.all([n.e(40532),n.e(89352)]).then(n.bind(n,26977))},"@site/versioned_docs/version-1.x/stack-navigator.md",26977],"66b225ca":[function(){return n.e(63038).then(n.bind(n,68139))},"@site/blog/2019-09-16-react-navigation-4.0.md?truncated=true",68139],"66e8e455":[function(){return n.e(3024).then(n.bind(n,76054))},"@site/blog/2021-08-14-react-navigation-6.0.md",76054],"67bc1365":[function(){return Promise.all([n.e(40532),n.e(47284)]).then(n.bind(n,41627))},"@site/versioned_docs/version-4.x/themes.md",41627],"682ba1cc":[function(){return Promise.all([n.e(40532),n.e(88895)]).then(n.bind(n,11149))},"@site/versioned_docs/version-3.x/community-libraries-and-navigators.md",11149],"682ce172":[function(){return Promise.all([n.e(40532),n.e(25073)]).then(n.bind(n,63925))},"@site/versioned_docs/version-2.x/transitioner.md",63925],"6875c492":[function(){return Promise.all([n.e(40532),n.e(71313),n.e(46048),n.e(48610)]).then(n.bind(n,41714))},"@theme/BlogTagsPostsPage",41714],"68b0fc05":[function(){return Promise.all([n.e(40532),n.e(18889)]).then(n.bind(n,51144))},"@site/versioned_docs/version-3.x/common-mistakes.md",51144],"691c8b2c":[function(){return Promise.all([n.e(40532),n.e(47715)]).then(n.bind(n,77512))},"@site/versioned_docs/version-3.x/routers.md",77512],"693618f8":[function(){return Promise.all([n.e(40532),n.e(20211)]).then(n.bind(n,64063))},"@site/versioned_docs/version-3.x/bottom-tab-navigator.md",64063],"69616a12":[function(){return Promise.all([n.e(40532),n.e(31756)]).then(n.bind(n,64275))},"@site/versioned_docs/version-1.x/glossary-of-terms.md",64275],"69e3adff":[function(){return Promise.all([n.e(40532),n.e(35549)]).then(n.bind(n,94024))},"@site/versioned_docs/version-4.x/localization.md",94024],"6a29eacd":[function(){return Promise.all([n.e(40532),n.e(21513)]).then(n.bind(n,20454))},"@site/versioned_docs/version-2.x/supported-react-native-versions.md",20454],"6a7fdb9e":[function(){return Promise.all([n.e(40532),n.e(36708)]).then(n.bind(n,91076))},"@site/versioned_docs/version-5.x/community-libraries-and-navigators.md",91076],"6b20cb2f":[function(){return Promise.all([n.e(40532),n.e(24279)]).then(n.bind(n,29545))},"@site/versioned_docs/version-7.x/migration-guides.md",29545],"6ba5b985":[function(){return Promise.all([n.e(40532),n.e(70057)]).then(n.bind(n,59010))},"@site/versioned_docs/version-1.x/headers.md",59010],"6bc8f2a2":[function(){return Promise.all([n.e(40532),n.e(44266)]).then(n.bind(n,56925))},"@site/versioned_docs/version-7.x/troubleshooting.md",56925],"6bcec069":[function(){return Promise.all([n.e(40532),n.e(21411)]).then(n.bind(n,16583))},"@site/versioned_docs/version-7.x/use-route.md",16583],"6d5e2782":[function(){return n.e(44458).then(n.t.bind(n,55553,19))},"~blog/default/blog-tags-ui-kitten-157-list.json",55553],"6d6cabdc":[function(){return Promise.all([n.e(40532),n.e(37203)]).then(n.bind(n,41602))},"@site/versioned_docs/version-7.x/navigation-container.md",41602],"6df3dc9e":[function(){return Promise.all([n.e(40532),n.e(61998)]).then(n.bind(n,63803))},"@site/versioned_docs/version-7.x/use-is-focused.md",63803],"6f0a4736":[function(){return Promise.all([n.e(40532),n.e(5024)]).then(n.bind(n,86212))},"@site/versioned_docs/version-3.x/navigation-context.md",86212],"6f67031a":[function(){return Promise.all([n.e(40532),n.e(82763)]).then(n.bind(n,13118))},"@site/versioned_docs/version-4.x/screen-tracking.md",13118],"6f680f40":[function(){return Promise.all([n.e(40532),n.e(96536)]).then(n.bind(n,79150))},"@site/versioned_docs/version-7.x/navigation-context.md",79150],"6f859436":[function(){return Promise.all([n.e(40532),n.e(16457)]).then(n.bind(n,53651))},"@site/versioned_docs/version-1.x/drawer-based-navigation.md",53651],"6f9c9b78":[function(){return Promise.all([n.e(40532),n.e(2186)]).then(n.bind(n,22506))},"@site/versioned_docs/version-3.x/pitch.md",22506],"6fc7b633":[function(){return Promise.all([n.e(40532),n.e(3922)]).then(n.bind(n,45262))},"@site/versioned_docs/version-5.x/tab-based-navigation.md",45262],"720ec844":[function(){return Promise.all([n.e(40532),n.e(5725)]).then(n.bind(n,65133))},"@site/versioned_docs/version-4.x/material-bottom-tab-navigator.md",65133],"723a1d1f":[function(){return Promise.all([n.e(40532),n.e(79307)]).then(n.bind(n,46166))},"@site/versioned_docs/version-6.x/navigation-actions.md",46166],72619197:[function(){return n.e(56541).then(n.bind(n,28852))},"@site/blog/2019-10-17-react-navigation-native.md",28852],"726a3ae5":[function(){return Promise.all([n.e(40532),n.e(20841)]).then(n.bind(n,3521))},"@site/versioned_docs/version-1.x/with-navigation.md",3521],"7278614b":[function(){return n.e(23521).then(n.bind(n,58567))},"@site/blog/2020-05-16-web-support.md?truncated=true",58567],"72a85bb9":[function(){return Promise.all([n.e(40532),n.e(44456)]).then(n.bind(n,84900))},"@site/versioned_docs/version-5.x/use-link-props.md",84900],"732a0bdd":[function(){return Promise.all([n.e(40532),n.e(52223)]).then(n.bind(n,81731))},"@site/versioned_docs/version-1.x/modal.md",81731],"7396804a":[function(){return Promise.all([n.e(40532),n.e(72664)]).then(n.bind(n,92038))},"@site/versioned_docs/version-2.x/with-navigation.md",92038],"73cd3c7f":[function(){return Promise.all([n.e(40532),n.e(47625)]).then(n.bind(n,5012))},"@site/versioned_docs/version-4.x/contributing.md",5012],74450489:[function(){return n.e(90489).then(n.t.bind(n,19159,19))},"~blog/default/blog-tags-web-0e7.json",19159],"7446ee19":[function(){return n.e(51711).then(n.t.bind(n,73492,19))},"~blog/default/blog-tags-announcement-page-2-671-list.json",73492],"74cdd3dc":[function(){return Promise.all([n.e(40532),n.e(36054)]).then(n.bind(n,39845))},"@site/versioned_docs/version-7.x/material-top-tab-navigator.md",39845],"74ef9c09":[function(){return Promise.all([n.e(40532),n.e(31450)]).then(n.bind(n,84786))},"@site/versioned_docs/version-6.x/use-route.md",84786],"75086e52":[function(){return Promise.all([n.e(40532),n.e(29200)]).then(n.bind(n,42704))},"@site/versioned_docs/version-7.x/contributing.md",42704],"75a3cde9":[function(){return Promise.all([n.e(40532),n.e(71486)]).then(n.bind(n,4310))},"@site/versioned_docs/version-2.x/navigation-actions.md",4310],76725556:[function(){return Promise.all([n.e(40532),n.e(58269)]).then(n.bind(n,35440))},"@site/versioned_docs/version-6.x/use-theme.md",35440],"769a6239":[function(){return Promise.all([n.e(40532),n.e(98709)]).then(n.bind(n,69436))},"@site/versioned_docs/version-1.x/pitch.md",69436],"7745b380":[function(){return Promise.all([n.e(40532),n.e(22531)]).then(n.bind(n,73016))},"@site/versioned_docs/version-6.x/header-buttons.md",73016],"77aa6ed4":[function(){return Promise.all([n.e(40532),n.e(49810)]).then(n.bind(n,10919))},"@site/versioned_docs/version-7.x/screen.md",10919],"77e23114":[function(){return n.e(35074).then(n.t.bind(n,67217,19))},"~blog/default/blog-tags-tutorial-e7d.json",67217],"78260baf":[function(){return Promise.all([n.e(40532),n.e(52878)]).then(n.bind(n,25641))},"@site/versioned_docs/version-7.x/used-by.md",25641],79893160:[function(){return Promise.all([n.e(40532),n.e(92110)]).then(n.bind(n,28266))},"@site/versioned_docs/version-3.x/custom-routers.md",28266],"79ac6895":[function(){return Promise.all([n.e(40532),n.e(50116)]).then(n.bind(n,46405))},"@site/versioned_docs/version-1.x/next-steps.md",46405],"79dbb029":[function(){return Promise.all([n.e(40532),n.e(53556)]).then(n.bind(n,34437))},"@site/versioned_docs/version-5.x/auth-flow.md",34437],"79f65c0a":[function(){return n.e(16766).then(n.t.bind(n,83769,19))},"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",83769],"7a316a81":[function(){return Promise.all([n.e(40532),n.e(6479)]).then(n.bind(n,41678))},"@site/versioned_docs/version-4.x/supported-react-native-versions.md",41678],"7a359cef":[function(){return Promise.all([n.e(40532),n.e(4074)]).then(n.bind(n,83650))},"@site/versioned_docs/version-3.x/deep-linking.md",83650],"7a69f3f2":[function(){return Promise.all([n.e(40532),n.e(24886)]).then(n.bind(n,58010))},"@site/versioned_docs/version-4.x/troubleshooting.md",58010],"7ac60746":[function(){return Promise.all([n.e(40532),n.e(60691)]).then(n.bind(n,60108))},"@site/versioned_docs/version-3.x/drawer-based-navigation.md",60108],"7be16658":[function(){return Promise.all([n.e(40532),n.e(20694)]).then(n.bind(n,95370))},"@site/versioned_docs/version-7.x/status-bar.md",95370],"7bf45219":[function(){return Promise.all([n.e(40532),n.e(13083)]).then(n.bind(n,27409))},"@site/versioned_docs/version-1.x/drawer-navigator.md",27409],"7c94a739":[function(){return Promise.all([n.e(40532),n.e(76602)]).then(n.bind(n,83296))},"@site/versioned_docs/version-4.x/navigation-options-resolution.md",83296],"7cbef4dd":[function(){return Promise.all([n.e(40532),n.e(90759)]).then(n.bind(n,8142))},"@site/versioned_docs/version-4.x/MST-integration.md",8142],"7e37206e":[function(){return n.e(62740).then(n.bind(n,75401))},"@site/src/pages/help.js",75401],"7e788281":[function(){return Promise.all([n.e(40532),n.e(67888)]).then(n.bind(n,75655))},"@site/versioned_docs/version-5.x/drawer-based-navigation.md",75655],"7f0203ae":[function(){return Promise.all([n.e(40532),n.e(32343)]).then(n.bind(n,26582))},"@site/versioned_docs/version-2.x/custom-android-back-button-handling.md",26582],"7f3ebd16":[function(){return Promise.all([n.e(40532),n.e(34863)]).then(n.bind(n,94013))},"@site/versioned_docs/version-7.x/upgrading-from-6.x.md",94013],"7f524dd3":[function(){return Promise.all([n.e(40532),n.e(75684)]).then(n.bind(n,37386))},"@site/versioned_docs/version-6.x/navigation-state.md",37386],"802bca5d":[function(){return n.e(97856).then(n.bind(n,26928))},"@site/blog/2018-11-01-react-navigation-3.0-rc.md?truncated=true",26928],"814f3328":[function(){return n.e(52535).then(n.t.bind(n,45641,19))},"~blog/default/blog-post-list-prop-default.json",45641],"81cb56fd":[function(){return Promise.all([n.e(40532),n.e(94920)]).then(n.bind(n,36549))},"@site/versioned_docs/version-7.x/testing.md",36549],"825d5fdb":[function(){return Promise.all([n.e(40532),n.e(88784)]).then(n.bind(n,98955))},"@site/versioned_docs/version-2.x/navigation-views.md",98955],"82bb0d50":[function(){return Promise.all([n.e(40532),n.e(88584)]).then(n.bind(n,78607))},"@site/versioned_docs/version-6.x/function-after-focusing-screen.md",78607],"82bb8736":[function(){return Promise.all([n.e(40532),n.e(61566)]).then(n.bind(n,20450))},"@site/versioned_docs/version-5.x/params.md",20450],"8386ba1d":[function(){return Promise.all([n.e(40532),n.e(54931)]).then(n.bind(n,60047))},"@site/versioned_docs/version-7.x/group.md",60047],"83d480e9":[function(){return n.e(60205).then(n.t.bind(n,43672,19))},"~blog/default/blog-tags-release-b5c.json",43672],"8520aa43":[function(){return Promise.all([n.e(40532),n.e(4604)]).then(n.bind(n,27875))},"@site/versioned_docs/version-1.x/navigation-actions.md",27875],"8521727c":[function(){return Promise.all([n.e(40532),n.e(60504)]).then(n.bind(n,19643))},"@site/versioned_docs/version-5.x/status-bar.md",19643],"8526e2d7":[function(){return Promise.all([n.e(40532),n.e(92684)]).then(n.bind(n,85939))},"@site/versioned_docs/version-4.x/navigation-views.md",85939],"857226cd":[function(){return Promise.all([n.e(40532),n.e(60216)]).then(n.bind(n,99669))},"@site/versioned_docs/version-4.x/custom-navigator-overview.md",99669],"85ef44ad":[function(){return Promise.all([n.e(40532),n.e(19618)]).then(n.bind(n,63126))},"@site/versioned_docs/version-4.x/bottom-tab-navigator.md",63126],"8674297c":[function(){return Promise.all([n.e(40532),n.e(36166)]).then(n.bind(n,28549))},"@site/versioned_docs/version-1.x/custom-navigators.md",28549],"868d8162":[function(){return Promise.all([n.e(40532),n.e(8200)]).then(n.bind(n,38927))},"@site/versioned_docs/version-7.x/function-after-focusing-screen.md",38927],"86d1f714":[function(){return Promise.all([n.e(40532),n.e(59158)]).then(n.bind(n,68108))},"@site/versioned_docs/version-3.x/alternatives.md",68108],"86ee57b9":[function(){return Promise.all([n.e(40532),n.e(36405)]).then(n.bind(n,38144))},"@site/versioned_docs/version-6.x/headers.md",38144],"86eecf59":[function(){return Promise.all([n.e(40532),n.e(71313),n.e(63937)]).then(n.bind(n,57715))},"/home/runner/work/react-navigation.github.io/react-navigation.github.io/src/pages/layouts/DocItem.js",57715],"86f1fc09":[function(){return n.e(81558).then(n.bind(n,8264))},"@site/blog/2021-03-12-react-navigation-6.0-next.md?truncated=true",8264],"87087cb3":[function(){return Promise.all([n.e(40532),n.e(43900)]).then(n.bind(n,82268))},"@site/versioned_docs/version-4.x/hello-react-navigation.md",82268],87288241:[function(){return Promise.all([n.e(40532),n.e(56287)]).then(n.bind(n,10915))},"@site/src/pages/home/Splash/index.js",10915],"87fb05fe":[function(){return Promise.all([n.e(40532),n.e(1547)]).then(n.bind(n,39184))},"@site/versioned_docs/version-3.x/connecting-navigation-prop.md",39184],"88089c81":[function(){return n.e(71379).then(n.bind(n,56849))},"@site/blog/2018-02-06-react-navigation-1.0.md?truncated=true",56849],"882617a0":[function(){return n.e(84603).then(n.bind(n,36708))},"@site/blog/2020-05-19-joining-github-sponsors.md",36708],"884b85fa":[function(){return Promise.all([n.e(40532),n.e(17432)]).then(n.bind(n,63983))},"@site/versioned_docs/version-5.x/navigation-lifecycle.md",63983],"885db2d5":[function(){return n.e(67294).then(n.bind(n,13125))},"@site/blog/2019-10-17-react-navigation-native.md?truncated=true",13125],"891dacb7":[function(){return Promise.all([n.e(40532),n.e(59071)]).then(n.bind(n,79633))},"@site/versioned_docs/version-5.x/limitations.md",79633],"8927ca75":[function(){return n.e(75878).then(n.bind(n,71074))},"@site/blog/2018-04-06-react-navigation-2.0-rc.md?truncated=true",71074],"8a143e5b":[function(){return Promise.all([n.e(40532),n.e(38369)]).then(n.bind(n,16334))},"@site/versioned_docs/version-7.x/nesting-navigators.md",16334],"8a507deb":[function(){return Promise.all([n.e(40532),n.e(80665)]).then(n.bind(n,69745))},"@site/versioned_docs/version-3.x/redux-integration.md",69745],"8c4738b1":[function(){return Promise.all([n.e(40532),n.e(11125),n.e(8)]).then(n.bind(n,48548))},"@site/versioned_docs/version-7.x/configuring-links.md",48548],"8d3063a8":[function(){return Promise.all([n.e(40532),n.e(12305)]).then(n.bind(n,89014))},"@site/versioned_docs/version-7.x/multiple-drawers.md",89014],"8d30a36f":[function(){return Promise.all([n.e(40532),n.e(85730)]).then(n.bind(n,29295))},"@site/versioned_docs/version-6.x/migration-guides.md",29295],"8d8bf681":[function(){return Promise.all([n.e(40532),n.e(53487)]).then(n.bind(n,66394))},"@site/versioned_docs/version-4.x/stack-navigator-1.0.md",66394],"8da40a13":[function(){return Promise.all([n.e(40532),n.e(87187)]).then(n.bind(n,40664))},"@site/versioned_docs/version-1.x/switch-navigator.md",40664],"8dffd375":[function(){return Promise.all([n.e(40532),n.e(82339)]).then(n.bind(n,91064))},"@site/versioned_docs/version-2.x/navigation-events.md",91064],"8eb4e46b":[function(){return n.e(10001).then(n.t.bind(n,82638,19))},"~blog/default/blog-page-2-677.json",82638],"8fea52f3":[function(){return Promise.all([n.e(40532),n.e(91499)]).then(n.bind(n,78875))},"@site/versioned_docs/version-1.x/tab-navigator.md",78875],"900b69c6":[function(){return Promise.all([n.e(40532),n.e(52587)]).then(n.bind(n,81755))},"@site/versioned_docs/version-2.x/hello-react-navigation.md",81755],"9122f241":[function(){return Promise.all([n.e(40532),n.e(25932)]).then(n.bind(n,55079))},"@site/versioned_docs/version-6.x/modal.md",55079],"9150b537":[function(){return Promise.all([n.e(40532),n.e(11498)]).then(n.bind(n,56492))},"@site/versioned_docs/version-4.x/state-persistence.md",56492],"915d8cad":[function(){return Promise.all([n.e(40532),n.e(74756)]).then(n.bind(n,57737))},"@site/versioned_docs/version-1.x/deep-linking.md",57737],"93402b4f":[function(){return Promise.all([n.e(40532),n.e(71370)]).then(n.bind(n,70363))},"@site/versioned_docs/version-7.x/shared-element-transitions.md",70363],"94bac345":[function(){return Promise.all([n.e(40532),n.e(43347)]).then(n.bind(n,74104))},"@site/versioned_docs/version-2.x/pitch.md",74104],"94d96abc":[function(){return Promise.all([n.e(40532),n.e(78273)]).then(n.bind(n,95889))},"@site/versioned_docs/version-5.x/navigation-state.md",95889],"957ba597":[function(){return Promise.all([n.e(40532),n.e(49333)]).then(n.bind(n,50844))},"@site/versioned_docs/version-3.x/glossary-of-terms.md",50844],"9585dc18":[function(){return Promise.all([n.e(40532),n.e(68493)]).then(n.bind(n,54780))},"@site/versioned_docs/version-3.x/function-after-focusing-screen.md",54780],"95e9668b":[function(){return Promise.all([n.e(40532),n.e(17641)]).then(n.bind(n,84365))},"@site/versioned_docs/version-6.x/more-resources.md",84365],"966cb129":[function(){return Promise.all([n.e(40532),n.e(38122)]).then(n.bind(n,55391))},"@site/versioned_docs/version-5.x/compatibility.md",55391],"96c45902":[function(){return Promise.all([n.e(40532),n.e(30098)]).then(n.bind(n,19830))},"@site/versioned_docs/version-7.x/navigation-actions.md",19830],"979dc077":[function(){return Promise.all([n.e(40532),n.e(17506)]).then(n.bind(n,53801))},"@site/versioned_docs/version-6.x/drawer-actions.md",53801],"990502fa":[function(){return Promise.all([n.e(40532),n.e(39138)]).then(n.bind(n,21041))},"@site/versioned_docs/version-2.x/community-libraries-and-navigators.md",21041],"99b846b2":[function(){return Promise.all([n.e(40532),n.e(75969)]).then(n.bind(n,86177))},"@site/versioned_docs/version-3.x/switch-actions.md",86177],"9a16bb9d":[function(){return Promise.all([n.e(40532),n.e(57842)]).then(n.bind(n,30202))},"@site/versioned_docs/version-4.x/drawer-based-navigation.md",30202],"9a1d032e":[function(){return Promise.all([n.e(40532),n.e(86478)]).then(n.bind(n,28515))},"@site/versioned_docs/version-5.x/native-stack-navigator.md",28515],"9ae89415":[function(){return Promise.all([n.e(40532),n.e(23158)]).then(n.bind(n,25375))},"@site/versioned_docs/version-5.x/use-is-focused.md",25375],"9af3f201":[function(){return Promise.all([n.e(40532),n.e(42266)]).then(n.bind(n,76594))},"@site/versioned_docs/version-1.x/partial-overlay.md",76594],"9b2fbcce":[function(){return Promise.all([n.e(40532),n.e(88698)]).then(n.bind(n,67110))},"@site/versioned_docs/version-7.x/more-resources.md",67110],"9b8e03c9":[function(){return Promise.all([n.e(40532),n.e(66277)]).then(n.bind(n,91449))},"@site/versioned_docs/version-5.x/navigation-prop.md",91449],"9c021584":[function(){return n.e(37438).then(n.t.bind(n,98055,19))},"~blog/default/blog-tags-release-b5c-list.json",98055],"9d130922":[function(){return Promise.all([n.e(40532),n.e(31762)]).then(n.bind(n,57910))},"@site/versioned_docs/version-7.x/use-navigation.md",57910],"9dbca327":[function(){return Promise.all([n.e(40532),n.e(95760)]).then(n.bind(n,50250))},"@site/versioned_docs/version-6.x/tab-actions.md",50250],"9e4087bc":[function(){return n.e(53608).then(n.bind(n,63169))},"@theme/BlogArchivePage",63169],"9ff2e65d":[function(){return Promise.all([n.e(40532),n.e(70713)]).then(n.bind(n,68565))},"@site/versioned_docs/version-3.x/MST-integration.md",68565],a06a0936:[function(){return Promise.all([n.e(40532),n.e(36730)]).then(n.bind(n,41917))},"@site/versioned_docs/version-5.x/navigating-without-navigation-prop.md",41917],a103d9cd:[function(){return Promise.all([n.e(40532),n.e(70216)]).then(n.bind(n,14313))},"@site/src/pages/home/Sponsors/index.js",14313],a11e2eb6:[function(){return Promise.all([n.e(40532),n.e(73216)]).then(n.bind(n,40094))},"@site/versioned_docs/version-7.x/state-persistence.md",40094],a178b8fa:[function(){return Promise.all([n.e(40532),n.e(25083)]).then(n.bind(n,90376))},"@site/versioned_docs/version-4.x/upgrading-from-3.x.md",90376],a187e2b2:[function(){return Promise.all([n.e(40532),n.e(2759)]).then(n.bind(n,70036))},"@site/versioned_docs/version-6.x/glossary-of-terms.md",70036],a1a99b30:[function(){return n.e(35145).then(n.t.bind(n,7085,19))},"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",7085],a2205702:[function(){return Promise.all([n.e(40532),n.e(60776)]).then(n.bind(n,65142))},"@site/versioned_docs/version-4.x/redux-integration.md",65142],a2851e91:[function(){return Promise.all([n.e(40532),n.e(75068)]).then(n.bind(n,55259))},"@site/versioned_docs/version-6.x/deep-linking.md",55259],a345bb73:[function(){return Promise.all([n.e(40532),n.e(76683)]).then(n.bind(n,90127))},"@site/versioned_docs/version-7.x/typescript.md",90127],a44cee0b:[function(){return Promise.all([n.e(40532),n.e(56417)]).then(n.bind(n,63222))},"@site/versioned_docs/version-2.x/bottom-tab-navigator.md",63222],a4ac0748:[function(){return Promise.all([n.e(40532),n.e(80063)]).then(n.bind(n,17041))},"@site/versioned_docs/version-4.x/auth-flow.md",17041],a4bf4271:[function(){return Promise.all([n.e(40532),n.e(67034)]).then(n.bind(n,90325))},"@site/versioned_docs/version-7.x/custom-android-back-button-handling.md",90325],a4e31e78:[function(){return Promise.all([n.e(40532),n.e(79007)]).then(n.bind(n,28773))},"@site/versioned_docs/version-5.x/troubleshooting.md",28773],a50c5cfe:[function(){return Promise.all([n.e(40532),n.e(66088)]).then(n.bind(n,36321))},"@site/versioned_docs/version-1.x/customize-styles.md",36321],a5a8f997:[function(){return Promise.all([n.e(40532),n.e(19249)]).then(n.bind(n,41879))},"@site/versioned_docs/version-6.x/material-top-tab-navigator.md",41879],a5ad4ffe:[function(){return Promise.all([n.e(40532),n.e(39023)]).then(n.bind(n,33960))},"@site/versioned_docs/version-5.x/used-by.md",33960],a5ae78fa:[function(){return Promise.all([n.e(40532),n.e(93460)]).then(n.bind(n,88349))},"@site/versioned_docs/version-1.x/connecting-navigation-prop.md",88349],a601a56a:[function(){return Promise.all([n.e(40532),n.e(6039)]).then(n.bind(n,59802))},"@site/versioned_docs/version-4.x/custom-navigators.md",59802],a62e5334:[function(){return Promise.all([n.e(40532),n.e(74612)]).then(n.bind(n,51834))},"@site/versioned_docs/version-4.x/deep-linking.md",51834],a6aa9e1f:[function(){return Promise.all([n.e(40532),n.e(71313),n.e(46048),n.e(93089)]).then(n.bind(n,80046))},"@theme/BlogListPage",80046],a7023ddc:[function(){return n.e(11713).then(n.t.bind(n,53457,19))},"~blog/default/blog-tags-tags-4c2.json",53457],a76a7284:[function(){return Promise.all([n.e(40532),n.e(72589)]).then(n.bind(n,11521))},"@site/versioned_docs/version-2.x/contributing.md",11521],a7b093db:[function(){return Promise.all([n.e(40532),n.e(48232)]).then(n.bind(n,56907))},"@site/versioned_docs/version-4.x/connecting-navigation-prop.md",56907],a83f720f:[function(){return Promise.all([n.e(40532),n.e(23)]).then(n.bind(n,38309))},"@site/versioned_docs/version-2.x/limitations.md",38309],a8527a90:[function(){return Promise.all([n.e(40532),n.e(39012)]).then(n.bind(n,25439))},"@site/versioned_docs/version-5.x/use-link-to.md",25439],a90dbb68:[function(){return Promise.all([n.e(40532),n.e(90617)]).then(n.bind(n,74728))},"@site/versioned_docs/version-4.x/custom-routers.md",74728],a92cc67c:[function(){return n.e(67097).then(n.bind(n,15962))},"@site/src/pages/home/Splash/SplashRightIllustration.js",15962],a9397062:[function(){return n.e(34806).then(n.bind(n,71366))},"@site/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md?truncated=true",71366],ab534dd1:[function(){return Promise.all([n.e(40532),n.e(77447)]).then(n.bind(n,61019))},"@site/versioned_docs/version-5.x/preventing-going-back.md",61019],abac2178:[function(){return Promise.all([n.e(40532),n.e(90975)]).then(n.bind(n,63273))},"@site/versioned_docs/version-7.x/use-navigation-state.md",63273],ac11e877:[function(){return n.e(98714).then(n.t.bind(n,24469,19))},"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",24469],ad88f797:[function(){return Promise.all([n.e(40532),n.e(6398)]).then(n.bind(n,14895))},"@site/versioned_docs/version-6.x/use-link-props.md",14895],adcb3b88:[function(){return n.e(24200).then(n.t.bind(n,84819,19))},"~docs/default/version-7-x-metadata-prop-51b.json",84819],ae4abcdb:[function(){return Promise.all([n.e(40532),n.e(35536)]).then(n.bind(n,75718))},"@site/versioned_docs/version-6.x/devtools.md",75718],ae5fe58f:[function(){return Promise.all([n.e(40532),n.e(17307)]).then(n.bind(n,33052))},"@site/versioned_docs/version-1.x/supported-react-native-versions.md",33052],ae733de4:[function(){return Promise.all([n.e(40532),n.e(12915)]).then(n.bind(n,40885))},"@site/versioned_docs/version-7.x/screen-options.md",40885],aeac9b7f:[function(){return Promise.all([n.e(40532),n.e(21942)]).then(n.bind(n,38454))},"@site/versioned_docs/version-7.x/server-container.md",38454],af725e73:[function(){return Promise.all([n.e(40532),n.e(66616)]).then(n.bind(n,3277))},"@site/versioned_docs/version-3.x/limitations.md",3277],b03300d9:[function(){return Promise.all([n.e(40532),n.e(32252)]).then(n.bind(n,79409))},"@site/versioned_docs/version-2.x/drawer-navigator.md",79409],b059735e:[function(){return n.e(55893).then(n.t.bind(n,17288,19))},"~blog/default/blog-tags-web-0e7-list.json",17288],b0b51b63:[function(){return Promise.all([n.e(40532),n.e(94206)]).then(n.bind(n,67034))},"@site/versioned_docs/version-6.x/web-support.md",67034],b0c8eb24:[function(){return Promise.all([n.e(40532),n.e(29302)]).then(n.bind(n,76967))},"@site/versioned_docs/version-6.x/troubleshooting.md",76967],b2248fa5:[function(){return Promise.all([n.e(40532),n.e(78622)]).then(n.bind(n,1304))},"@site/versioned_docs/version-7.x/limitations.md",1304],b265e1a0:[function(){return Promise.all([n.e(40532),n.e(88778)]).then(n.bind(n,7432))},"@site/versioned_docs/version-5.x/header-buttons.md",7432],b296b8b0:[function(){return Promise.all([n.e(40532),n.e(51754)]).then(n.bind(n,99281))},"@site/versioned_docs/version-6.x/material-bottom-tab-navigator.md",99281],b2b675dd:[function(){return n.e(90533).then(n.t.bind(n,28017,19))},"~blog/default/blog-c06.json",28017],b2f554cd:[function(){return n.e(11477).then(n.t.bind(n,30010,19))},"~blog/default/blog-archive-80c.json",30010],b319bd37:[function(){return Promise.all([n.e(40532),n.e(42358)]).then(n.bind(n,31822))},"@site/versioned_docs/version-5.x/deep-linking.md",31822],b38ea63a:[function(){return Promise.all([n.e(40532),n.e(41516)]).then(n.bind(n,69119))},"@site/versioned_docs/version-4.x/header-buttons.md",69119],b3da0717:[function(){return Promise.all([n.e(40532),n.e(69786)]).then(n.bind(n,57039))},"@site/versioned_docs/version-5.x/navigation-actions.md",57039],b48787b6:[function(){return Promise.all([n.e(40532),n.e(87364)]).then(n.bind(n,96898))},"@site/versioned_docs/version-4.x/scrollables.md",96898],b540d135:[function(){return Promise.all([n.e(40532),n.e(58461)]).then(n.bind(n,39823))},"@site/versioned_docs/version-5.x/redux-integration.md",39823],b5e8ae63:[function(){return Promise.all([n.e(40532),n.e(94338)]).then(n.bind(n,13122))},"@site/versioned_docs/version-5.x/modal.md",13122],b62ae7ee:[function(){return Promise.all([n.e(40532),n.e(79346)]).then(n.bind(n,59521))},"@site/versioned_docs/version-7.x/params.md",59521],b65a55e7:[function(){return Promise.all([n.e(40532),n.e(16943)]).then(n.bind(n,82047))},"@site/versioned_docs/version-6.x/navigation-container.md",82047],b6ac21f8:[function(){return Promise.all([n.e(40532),n.e(44122)]).then(n.bind(n,61968))},"@site/versioned_docs/version-5.x/custom-android-back-button-handling.md",61968],b6e1e9f1:[function(){return Promise.all([n.e(40532),n.e(44527)]).then(n.bind(n,14981))},"@site/versioned_docs/version-3.x/switch-navigator.md",14981],b81de6e7:[function(){return Promise.all([n.e(40532),n.e(8327)]).then(n.bind(n,55926))},"@site/versioned_docs/version-2.x/stack-actions.md",55926],b89e1214:[function(){return Promise.all([n.e(40532),n.e(64636)]).then(n.bind(n,89200))},"@site/versioned_docs/version-1.x/getting-started.md",89200],b89f9e6f:[function(){return Promise.all([n.e(40532),n.e(20259)]).then(n.bind(n,24549))},"@site/versioned_docs/version-7.x/hiding-tabbar-in-screens.md",24549],b8aafcf7:[function(){return Promise.all([n.e(40532),n.e(77430)]).then(n.bind(n,16433))},"@site/versioned_docs/version-3.x/getting-started.md",16433],b91c78db:[function(){return Promise.all([n.e(40532),n.e(51391)]).then(n.bind(n,26804))},"@site/versioned_docs/version-7.x/use-link-to.md",26804],b93a612d:[function(){return Promise.all([n.e(40532),n.e(836)]).then(n.bind(n,57785))},"@site/versioned_docs/version-7.x/link.md",57785],b9ccf281:[function(){return Promise.all([n.e(40532),n.e(92091)]).then(n.bind(n,2165))},"@site/versioned_docs/version-5.x/server-container.md",2165],baaf111f:[function(){return Promise.all([n.e(40532),n.e(44484)]).then(n.bind(n,11116))},"@site/versioned_docs/version-2.x/params.md",11116],bbc7a4b0:[function(){return Promise.all([n.e(40532),n.e(53249)]).then(n.bind(n,79932))},"@site/versioned_docs/version-7.x/auth-flow.md",79932],bc98b856:[function(){return Promise.all([n.e(40532),n.e(1092)]).then(n.bind(n,78576))},"@site/versioned_docs/version-7.x/headers.md",78576],bd109270:[function(){return Promise.all([n.e(40532),n.e(5829)]).then(n.bind(n,40066))},"@site/versioned_docs/version-5.x/function-after-focusing-screen.md",40066],bdc0380f:[function(){return Promise.all([n.e(40532),n.e(91188)]).then(n.bind(n,49752))},"@site/versioned_docs/version-7.x/navigating.md",49752],be35566b:[function(){return Promise.all([n.e(40532),n.e(91712)]).then(n.bind(n,74090))},"@site/versioned_docs/version-6.x/testing.md",74090],be5f3a5f:[function(){return Promise.all([n.e(40532),n.e(12344)]).then(n.bind(n,68493))},"@site/versioned_docs/version-7.x/drawer-navigator.md",68493],be9b4d2c:[function(){return Promise.all([n.e(40532),n.e(57807)]).then(n.bind(n,21023))},"@site/versioned_docs/version-7.x/tab-based-navigation.md",21023],beb39e3f:[function(){return Promise.all([n.e(40532),n.e(39315)]).then(n.bind(n,4024))},"@site/versioned_docs/version-6.x/use-link-to.md",4024],bf3d013e:[function(){return Promise.all([n.e(40532),n.e(42682)]).then(n.bind(n,33707))},"@site/versioned_docs/version-1.x/params.md",33707],c0782dcc:[function(){return Promise.all([n.e(40532),n.e(42581)]).then(n.bind(n,61718))},"@site/versioned_docs/version-3.x/drawer-actions.md",61718],c088c624:[function(){return Promise.all([n.e(40532),n.e(34840)]).then(n.bind(n,54264))},"@site/versioned_docs/version-3.x/state-persistence.md",54264],c0b9bd34:[function(){return Promise.all([n.e(40532),n.e(71313),n.e(63937)]).then(n.bind(n,57715))},"@site/src/pages/layouts/DocItem.js",57715],c183ab7f:[function(){return Promise.all([n.e(40532),n.e(64737)]).then(n.bind(n,22402))},"@site/versioned_docs/version-5.x/tab-actions.md",22402],c259c03a:[function(){return Promise.all([n.e(40532),n.e(54521)]).then(n.bind(n,80498))},"@site/versioned_docs/version-6.x/custom-navigators.md",80498],c2c0d6a0:[function(){return Promise.all([n.e(40532),n.e(33242)]).then(n.bind(n,10491))},"@site/versioned_docs/version-7.x/custom-navigators.md",10491],c2e8381f:[function(){return Promise.all([n.e(40532),n.e(45939)]).then(n.bind(n,13718))},"@site/versioned_docs/version-3.x/navigation-events.md",13718],c320ebc8:[function(){return Promise.all([n.e(40532),n.e(48653)]).then(n.bind(n,22538))},"@site/versioned_docs/version-6.x/MST-integration.md",22538],c414ff41:[function(){return Promise.all([n.e(40532),n.e(5978)]).then(n.bind(n,26289))},"@site/versioned_docs/version-2.x/getting-started.md",26289],c47cf68d:[function(){return Promise.all([n.e(40532),n.e(96383)]).then(n.bind(n,58117))},"@site/versioned_docs/version-2.x/deep-linking.md",58117],c4f5d8e4:[function(){return Promise.all([n.e(40532),n.e(64195)]).then(n.bind(n,62841))},"@site/src/pages/index.js",62841],c6c8c51b:[function(){return Promise.all([n.e(40532),n.e(92771)]).then(n.bind(n,59499))},"@site/versioned_docs/version-3.x/app-containers.md",59499],c716f0e7:[function(){return Promise.all([n.e(40532),n.e(85183)]).then(n.bind(n,54941))},"@site/versioned_docs/version-3.x/tab-navigator.md",54941],c71fcd84:[function(){return Promise.all([n.e(40532),n.e(45594)]).then(n.bind(n,73558))},"@site/versioned_docs/version-2.x/switch-navigator.md",73558],c7ff647e:[function(){return Promise.all([n.e(40532),n.e(23659)]).then(n.bind(n,27))},"@site/versioned_docs/version-6.x/server-rendering.md",27],c8d61245:[function(){return Promise.all([n.e(40532),n.e(2889)]).then(n.bind(n,32793))},"@site/versioned_docs/version-4.x/custom-android-back-button-handling.md",32793],c90d5789:[function(){return Promise.all([n.e(40532),n.e(17595)]).then(n.bind(n,51421))},"@site/versioned_docs/version-3.x/web-support.md",51421],c94cee29:[function(){return Promise.all([n.e(40532),n.e(93457)]).then(n.bind(n,95121))},"@site/versioned_docs/version-4.x/alternatives.md",95121],c96bcf0e:[function(){return Promise.all([n.e(40532),n.e(44935)]).then(n.bind(n,37299))},"@site/versioned_docs/version-2.x/stack-navigator.md",37299],c9bae406:[function(){return Promise.all([n.e(40532),n.e(53508)]).then(n.bind(n,19887))},"@site/versioned_docs/version-5.x/material-bottom-tab-navigator.md",19887],cae0f04b:[function(){return n.e(85709).then(n.t.bind(n,24166,19))},"~docs/default/version-4-x-metadata-prop-21f.json",24166],cafedc52:[function(){return Promise.all([n.e(40532),n.e(25255)]).then(n.bind(n,79281))},"@site/versioned_docs/version-5.x/material-top-tab-navigator.md",79281],cb1ca3b7:[function(){return Promise.all([n.e(40532),n.e(25735)]).then(n.bind(n,97374))},"@site/versioned_docs/version-2.x/tab-based-navigation.md",97374],cb35979a:[function(){return Promise.all([n.e(40532),n.e(84387)]).then(n.bind(n,40200))},"@site/versioned_docs/version-7.x/use-focus-effect.md",40200],cb5b2a41:[function(){return Promise.all([n.e(40532),n.e(93621)]).then(n.bind(n,76611))},"@site/versioned_docs/version-4.x/app-containers.md",76611],ccb322b4:[function(){return Promise.all([n.e(40532),n.e(27493)]).then(n.bind(n,91628))},"@site/versioned_docs/version-7.x/server-rendering.md",91628],ccc49370:[function(){return Promise.all([n.e(40532),n.e(71313),n.e(46048),n.e(46103)]).then(n.bind(n,65203))},"@theme/BlogPostPage",65203],cd3769cf:[function(){return Promise.all([n.e(40532),n.e(77719)]).then(n.bind(n,14341))},"@site/versioned_docs/version-3.x/auth-flow.md",14341],cdb30427:[function(){return Promise.all([n.e(40532),n.e(43913)]).then(n.bind(n,74986))},"@site/versioned_docs/version-3.x/params.md",74986],cdc21849:[function(){return Promise.all([n.e(40532),n.e(6715)]).then(n.bind(n,30584))},"@site/versioned_docs/version-7.x/navigation-events.md",30584],cde59865:[function(){return n.e(81816).then(n.bind(n,12894))},"@site/blog/2021-03-12-react-navigation-6.0-next.md",12894],cdf30472:[function(){return Promise.all([n.e(40532),n.e(88156)]).then(n.bind(n,41503))},"@site/versioned_docs/version-7.x/elements.md",41503],ce5a6cfc:[function(){return Promise.all([n.e(40532),n.e(73428)]).then(n.bind(n,69537))},"@site/versioned_docs/version-6.x/screen.md",69537],ceb96a6a:[function(){return Promise.all([n.e(40532),n.e(28004)]).then(n.bind(n,59570))},"@site/versioned_docs/version-7.x/preventing-going-back.md",59570],cec331df:[function(){return Promise.all([n.e(40532),n.e(88873)]).then(n.bind(n,98467))},"@site/versioned_docs/version-5.x/testing.md",98467],cf1736b4:[function(){return Promise.all([n.e(40532),n.e(4037)]).then(n.bind(n,30822))},"@site/versioned_docs/version-7.x/use-theme.md",30822],cf1b6d54:[function(){return Promise.all([n.e(40532),n.e(45168)]).then(n.bind(n,55902))},"@site/versioned_docs/version-4.x/stack-actions.md",55902],d08734b9:[function(){return Promise.all([n.e(40532),n.e(31346)]).then(n.bind(n,78852))},"@site/versioned_docs/version-7.x/screen-options-resolution.md",78852],d1b2904b:[function(){return Promise.all([n.e(40532),n.e(36196)]).then(n.bind(n,38496))},"@site/versioned_docs/version-7.x/navigation-solutions-and-community-libraries.md",38496],d40bf6ce:[function(){return Promise.all([n.e(40532),n.e(54119)]).then(n.bind(n,75306))},"@site/versioned_docs/version-3.x/contributing.md",75306],d42d1fd9:[function(){return Promise.all([n.e(40532),n.e(29810)]).then(n.bind(n,7013))},"@site/versioned_docs/version-2.x/more-resources.md",7013],d4a28cdc:[function(){return Promise.all([n.e(40532),n.e(60095)]).then(n.bind(n,20557))},"@site/versioned_docs/version-5.x/typescript.md",20557],d4bc90ec:[function(){return Promise.all([n.e(40532),n.e(90302)]).then(n.bind(n,1866))},"@site/versioned_docs/version-1.x/alternatives.md",1866],d4e8a61d:[function(){return Promise.all([n.e(40532),n.e(90174)]).then(n.bind(n,79927))},"@site/src/pages/layouts/DocPage.js",79927],d513a03c:[function(){return Promise.all([n.e(40532),n.e(38833)]).then(n.bind(n,18302))},"@site/versioned_docs/version-4.x/tab-based-navigation.md",18302],d52010ac:[function(){return Promise.all([n.e(40532),n.e(5766)]).then(n.bind(n,85980))},"@site/versioned_docs/version-3.x/navigation-actions.md",85980],d547d075:[function(){return Promise.all([n.e(40532),n.e(76389)]).then(n.bind(n,8019))},"@site/versioned_docs/version-3.x/supported-react-native-versions.md",8019],d57ffbba:[function(){return Promise.all([n.e(40532),n.e(399)]).then(n.bind(n,79377))},"@site/versioned_docs/version-5.x/getting-started.md",79377],d5baa5c1:[function(){return Promise.all([n.e(40532),n.e(81848)]).then(n.bind(n,35252))},"@site/versioned_docs/version-5.x/MST-integration.md",35252],d67ed22e:[function(){return Promise.all([n.e(40532),n.e(90446)]).then(n.bind(n,17308))},"@site/versioned_docs/version-6.x/typescript.md",17308],d71b2077:[function(){return Promise.all([n.e(40532),n.e(84944)]).then(n.bind(n,54422))},"@site/versioned_docs/version-1.x/custom-navigator-overview.md",54422],d7f231a5:[function(){return Promise.all([n.e(40532),n.e(24910)]).then(n.bind(n,60839))},"@site/versioned_docs/version-7.x/static-typescript.md",60839],d7f84142:[function(){return Promise.all([n.e(40532),n.e(96060)]).then(n.bind(n,40083))},"@site/versioned_docs/version-4.x/limitations.md",40083],d84a04ad:[function(){return n.e(41080).then(n.bind(n,48121))},"@site/src/pages/home/Splash/SplashLeftIllustration.js",48121],d8cb0df4:[function(){return Promise.all([n.e(40532),n.e(40462)]).then(n.bind(n,36584))},"@site/versioned_docs/version-2.x/headers.md",36584],d92e70e8:[function(){return Promise.all([n.e(40532),n.e(75460)]).then(n.bind(n,14115))},"@site/versioned_docs/version-6.x/nesting-navigators.md",14115],d9dcdbb0:[function(){return Promise.all([n.e(40532),n.e(14781)]).then(n.bind(n,12498))},"@site/versioned_docs/version-5.x/upgrading-from-4.x.md",12498],db02a756:[function(){return Promise.all([n.e(40532),n.e(94892)]).then(n.bind(n,10162))},"@site/versioned_docs/version-5.x/use-link-builder.md",10162],db124b13:[function(){return n.e(33735).then(n.bind(n,84902))},"@site/blog/2020-02-06-react-navigation-5.0.md",84902],db2d2c66:[function(){return Promise.all([n.e(40532),n.e(7391)]).then(n.bind(n,4613))},"@site/versioned_docs/version-4.x/navigation-prop.md",4613],dbb6f292:[function(){return Promise.all([n.e(40532),n.e(22804)]).then(n.bind(n,83996))},"@site/versioned_docs/version-5.x/navigation-container.md",83996],dc42149f:[function(){return Promise.all([n.e(40532),n.e(99322)]).then(n.bind(n,78005))},"@site/versioned_docs/version-6.x/drawer-based-navigation.md",78005],dd056032:[function(){return Promise.all([n.e(40532),n.e(22589)]).then(n.bind(n,67632))},"@site/versioned_docs/version-5.x/use-navigation.md",67632],dde9984f:[function(){return Promise.all([n.e(40532),n.e(36837)]).then(n.bind(n,25317))},"@site/versioned_docs/version-7.x/use-link-props.md",25317],ddf45c7d:[function(){return Promise.all([n.e(40532),n.e(80321)]).then(n.bind(n,27714))},"@site/versioned_docs/version-1.x/screen-tracking.md",27714],de6d21b5:[function(){return Promise.all([n.e(40532),n.e(96641)]).then(n.bind(n,10607))},"@site/versioned_docs/version-7.x/modal.md",10607],deb950c3:[function(){return Promise.all([n.e(40532),n.e(62175)]).then(n.bind(n,75934))},"@site/versioned_docs/version-5.x/use-navigation-state.md",75934],debf69ae:[function(){return Promise.all([n.e(40532),n.e(85354)]).then(n.bind(n,48319))},"@site/versioned_docs/version-4.x/stack-navigator.md",48319],df5aa17f:[function(){return Promise.all([n.e(40532),n.e(13677)]).then(n.bind(n,28139))},"@site/versioned_docs/version-2.x/next-steps.md",28139],df9f3515:[function(){return Promise.all([n.e(40532),n.e(95506)]).then(n.bind(n,9765))},"@site/versioned_docs/version-6.x/link.md",9765],e0160539:[function(){return Promise.all([n.e(40532),n.e(5514)]).then(n.bind(n,40484))},"@site/versioned_docs/version-7.x/custom-routers.md",40484],e14b9321:[function(){return Promise.all([n.e(40532),n.e(78680)]).then(n.bind(n,93807))},"@site/versioned_docs/version-4.x/function-after-focusing-screen.md",93807],e222d324:[function(){return n.e(180).then(n.bind(n,26997))},"@site/blog/2021-08-14-react-navigation-6.0.md?truncated=true",26997],e3217e06:[function(){return Promise.all([n.e(40532),n.e(86415)]).then(n.bind(n,84387))},"@site/versioned_docs/version-5.x/navigation-context.md",84387],e3381aa3:[function(){return Promise.all([n.e(40532),n.e(52450)]).then(n.bind(n,64301))},"@site/versioned_docs/version-7.x/static-authentication.md",64301],e3d4941e:[function(){return Promise.all([n.e(40532),n.e(55583)]).then(n.bind(n,27880))},"@site/versioned_docs/version-1.x/redux-integration.md",27880],e4e30971:[function(){return Promise.all([n.e(40532),n.e(8550)]).then(n.bind(n,17400))},"@site/versioned_docs/version-5.x/use-linking.md",17400],e83bbd46:[function(){return Promise.all([n.e(40532),n.e(92733)]).then(n.bind(n,45751))},"@site/versioned_docs/version-2.x/navigation-prop.md",45751],e88484b3:[function(){return Promise.all([n.e(40532),n.e(73163)]).then(n.bind(n,54308))},"@site/versioned_docs/version-4.x/web-support.md",54308],e8ce4f5a:[function(){return n.e(33123).then(n.t.bind(n,54484,19))},"~blog/default/blog-tags-announcement-page-2-671.json",54484],e95c8dff:[function(){return Promise.all([n.e(40532),n.e(86876)]).then(n.bind(n,5230))},"@site/versioned_docs/version-1.x/navigation-options.md",5230],ea5ec219:[function(){return Promise.all([n.e(40532),n.e(79902)]).then(n.bind(n,25924))},"@site/versioned_docs/version-1.x/custom-android-back-button-handling.md",25924],ea8a36e7:[function(){return Promise.all([n.e(40532),n.e(86152)]).then(n.bind(n,74202))},"@site/versioned_docs/version-7.x/drawer-layout.md",74202],ec406ec4:[function(){return Promise.all([n.e(40532),n.e(83112)]).then(n.bind(n,37317))},"@site/versioned_docs/version-5.x/screen-tracking.md",37317],ece86388:[function(){return n.e(4832).then(n.t.bind(n,42747,19))},"~blog/default/blog-tags-announcement-752-list.json",42747],ee216893:[function(){return Promise.all([n.e(40532),n.e(11545)]).then(n.bind(n,28503))},"@site/versioned_docs/version-2.x/drawer-based-navigation.md",28503],eebb4bfa:[function(){return Promise.all([n.e(40532),n.e(40014)]).then(n.bind(n,97610))},"@site/versioned_docs/version-6.x/used-by.md",97610],eef70735:[function(){return Promise.all([n.e(40532),n.e(5657)]).then(n.bind(n,51242))},"@site/versioned_docs/version-5.x/glossary-of-terms.md",51242],ef5f5123:[function(){return Promise.all([n.e(40532),n.e(98427)]).then(n.bind(n,233))},"@site/versioned_docs/version-4.x/routers.md",233],ef628c14:[function(){return Promise.all([n.e(40532),n.e(81142)]).then(n.bind(n,18))},"@site/versioned_docs/version-6.x/hello-react-navigation.md",18],ef7138f6:[function(){return Promise.all([n.e(40532),n.e(4800)]).then(n.bind(n,80849))},"@site/versioned_docs/version-1.x/set-params-on-back.md",80849],f04ef758:[function(){return Promise.all([n.e(40532),n.e(60010)]).then(n.bind(n,1752))},"@site/versioned_docs/version-4.x/drawer-navigator.md",1752],f066ce3d:[function(){return Promise.all([n.e(40532),n.e(22120)]).then(n.bind(n,15079))},"@site/versioned_docs/version-7.x/devtools.md",15079],f0d91a18:[function(){return Promise.all([n.e(40532),n.e(48239)]).then(n.bind(n,88944))},"@site/versioned_docs/version-5.x/navigating.md",88944],f0fc524c:[function(){return n.e(27075).then(n.t.bind(n,34542,19))},"~blog/default/blog-tags-react-native-paper-084-list.json",34542],f100c192:[function(){return n.e(1566).then(n.bind(n,43256))},"@site/blog/2018-02-06-react-navigation-1.0.md",43256],f123de88:[function(){return Promise.all([n.e(40532),n.e(71338)]).then(n.bind(n,36943))},"@site/versioned_docs/version-3.x/navigation-key.md",36943],f171b4fe:[function(){return Promise.all([n.e(40532),n.e(18098)]).then(n.bind(n,70494))},"@site/versioned_docs/version-7.x/bottom-tab-navigator.md",70494],f176e462:[function(){return Promise.all([n.e(40532),n.e(29360)]).then(n.bind(n,74754))},"@site/versioned_docs/version-6.x/upgrading-from-5.x.md",74754],f1d3306a:[function(){return Promise.all([n.e(40532),n.e(1210)]).then(n.bind(n,63879))},"@site/versioned_docs/version-6.x/custom-android-back-button-handling.md",63879],f22d3a1f:[function(){return Promise.all([n.e(40532),n.e(84193)]).then(n.bind(n,52014))},"@site/versioned_docs/version-5.x/pitch.md",52014],f265caf3:[function(){return Promise.all([n.e(40532),n.e(46283)]).then(n.bind(n,35594))},"@site/versioned_docs/version-2.x/navigation-options-resolution.md",35594],f2fd19de:[function(){return Promise.all([n.e(40532),n.e(25558)]).then(n.bind(n,72607))},"@site/versioned_docs/version-6.x/use-navigation.md",72607],f3135da8:[function(){return Promise.all([n.e(40532),n.e(81170)]).then(n.bind(n,30587))},"@site/versioned_docs/version-5.x/use-scroll-to-top.md",30587],f33b6a3d:[function(){return Promise.all([n.e(40532),n.e(27951)]).then(n.bind(n,414))},"@site/versioned_docs/version-4.x/status-bar.md",414],f3886628:[function(){return Promise.all([n.e(40532),n.e(69757)]).then(n.bind(n,48441))},"@site/versioned_docs/version-6.x/drawer-layout.md",48441],f3898f13:[function(){return Promise.all([n.e(40532),n.e(79163)]).then(n.bind(n,1474))},"@site/versioned_docs/version-5.x/hiding-tabbar-in-screens.md",1474],f4398715:[function(){return Promise.all([n.e(40532),n.e(4675)]).then(n.bind(n,97703))},"@site/versioned_docs/version-3.x/react-native-screens.md",97703],f45c00a7:[function(){return Promise.all([n.e(40532),n.e(62462)]).then(n.bind(n,24386))},"@site/src/pages/home/Features/index.js",24386],f4e7a611:[function(){return Promise.all([n.e(40532),n.e(93760)]).then(n.bind(n,27447))},"@site/versioned_docs/version-5.x/state-persistence.md",27447],f5632d3b:[function(){return Promise.all([n.e(40532),n.e(48878)]).then(n.bind(n,5847))},"@site/versioned_docs/version-5.x/nesting-navigators.md",5847],f60c941b:[function(){return Promise.all([n.e(40532),n.e(67289)]).then(n.bind(n,37679))},"@site/versioned_docs/version-6.x/contributing.md",37679],f60d5e0f:[function(){return Promise.all([n.e(40532),n.e(16163)]).then(n.bind(n,99455))},"@site/versioned_docs/version-7.x/handling-safe-area.md",99455],f6147c3e:[function(){return Promise.all([n.e(40532),n.e(31473)]).then(n.bind(n,79202))},"@site/versioned_docs/version-5.x/handling-safe-area.md",79202],f6756196:[function(){return Promise.all([n.e(40532),n.e(5119)]).then(n.bind(n,96620))},"@site/versioned_docs/version-3.x/drawer-navigator.md",96620],f6f7d065:[function(){return Promise.all([n.e(40532),n.e(55123)]).then(n.bind(n,27405))},"@site/versioned_docs/version-6.x/screen-options-resolution.md",27405],f71ac7f0:[function(){return n.e(95699).then(n.bind(n,91459))},"@site/blog/2020-02-06-react-navigation-5.0.md?truncated=true",91459],f745e7d6:[function(){return Promise.all([n.e(40532),n.e(64749)]).then(n.bind(n,18890))},"@site/versioned_docs/version-6.x/limitations.md",18890],f75590ae:[function(){return Promise.all([n.e(40532),n.e(56661)]).then(n.bind(n,70786))},"@site/versioned_docs/version-3.x/stack-navigator.md",70786],f81e0c67:[function(){return Promise.all([n.e(40532),n.e(93671)]).then(n.bind(n,18550))},"@site/versioned_docs/version-6.x/navigation-events.md",18550],f82f4518:[function(){return Promise.all([n.e(40532),n.e(86019)]).then(n.bind(n,2903))},"@site/versioned_docs/version-7.x/stack-navigator.md",2903],f97eb74e:[function(){return Promise.all([n.e(40532),n.e(64620)]).then(n.bind(n,23541))},"@site/versioned_docs/version-2.x/connecting-navigation-prop.md",23541],fa388b7d:[function(){return Promise.all([n.e(40532),n.e(36814)]).then(n.bind(n,5263))},"@site/versioned_docs/version-5.x/next-steps.md",5263],fb896c9f:[function(){return Promise.all([n.e(40532),n.e(44379)]).then(n.bind(n,76974))},"@site/versioned_docs/version-1.x/hello-react-navigation.md",76974],fc5e52ef:[function(){return Promise.all([n.e(40532),n.e(55112)]).then(n.bind(n,77234))},"@site/versioned_docs/version-2.x/drawer-actions.md",77234],fca5fd4e:[function(){return Promise.all([n.e(40532),n.e(80387)]).then(n.bind(n,1071))},"@site/versioned_docs/version-7.x/glossary-of-terms.md",1071],fd014fef:[function(){return Promise.all([n.e(40532),n.e(56917)]).then(n.bind(n,60960))},"@site/versioned_docs/version-7.x/stack-actions.md",60960],fd4b3cd9:[function(){return Promise.all([n.e(40532),n.e(41887)]).then(n.bind(n,73981))},"@site/versioned_docs/version-7.x/MST-integration.md",73981],fdba686e:[function(){return Promise.all([n.e(40532),n.e(69092)]).then(n.bind(n,37169))},"@site/versioned_docs/version-6.x/group.md",37169],fdeac899:[function(){return Promise.all([n.e(40532),n.e(71402)]).then(n.bind(n,87627))},"@site/versioned_docs/version-5.x/themes.md",87627],fe0c5989:[function(){return Promise.all([n.e(40532),n.e(18841)]).then(n.bind(n,4615))},"@site/versioned_docs/version-4.x/next-steps.md",4615],ff57007e:[function(){return Promise.all([n.e(40532),n.e(12497)]).then(n.bind(n,98332))},"@site/versioned_docs/version-4.x/handling-iphonex.md",98332],ff849402:[function(){return Promise.all([n.e(40532),n.e(71725)]).then(n.bind(n,91069))},"@site/versioned_docs/version-7.x/navigation-lifecycle.md",91069],fffa478c:[function(){return Promise.all([n.e(40532),n.e(28234)]).then(n.bind(n,11891))},"@site/versioned_docs/version-7.x/tab-view.md",11891]};function d(e){var t=e.error,n=e.retry,r=e.pastDelay;return t?o.createElement("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"}},o.createElement("p",null,String(t)),o.createElement("div",null,o.createElement("button",{type:"button",onClick:n},"Retry"))):r?o.createElement("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"}},o.createElement("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb"},o.createElement("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2"},o.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.createElement("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.createElement("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0"},o.createElement("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),o.createElement("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})),o.createElement("circle",{cx:"22",cy:"22",r:"8"},o.createElement("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"}))))):null}var l=n(99670),u=n(30226);function p(e,t){if("*"===e)return a()({loading:d,loader:function(){return n.e(4972).then(n.bind(n,4972))},modules:["@theme/NotFound"],webpack:function(){return[4972]},render:function(e,t){var n=e.default;return o.createElement(u.z,{value:{plugin:{name:"native",id:"default"}}},o.createElement(n,t))}});var i=s[e+"-"+t],p={},f=[],m=[],v=(0,l.Z)(i);return Object.entries(v).forEach((function(e){var t=e[0],n=e[1],o=c[n];o&&(p[t]=o[0],f.push(o[1]),m.push(o[2]))})),a().Map({loading:d,loader:p,modules:f,webpack:function(){return m},render:function(t,n){var a=JSON.parse(JSON.stringify(i));Object.entries(t).forEach((function(t){var n=t[0],o=t[1],r=o.default;if(!r)throw new Error("The page component at "+e+" doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.");"object"!=typeof r&&"function"!=typeof r||Object.keys(o).filter((function(e){return"default"!==e})).forEach((function(e){r[e]=o[e]}));var i=a,s=n.split(".");s.slice(0,-1).forEach((function(e){i=i[e]})),i[s[s.length-1]]=r}));var s=a.__comp;delete a.__comp;var c=a.__context;return delete a.__context,o.createElement(u.z,{value:c},o.createElement(s,(0,r.Z)({},a,n)))}})}var f=[{path:"/blog",component:p("/blog","156"),exact:!0},{path:"/blog/2018/02/06/react-navigation-1.0",component:p("/blog/2018/02/06/react-navigation-1.0","ddc"),exact:!0},{path:"/blog/2018/04/06/react-navigation-2.0-rc",component:p("/blog/2018/04/06/react-navigation-2.0-rc","521"),exact:!0},{path:"/blog/2018/05/07/react-navigation-2.0",component:p("/blog/2018/05/07/react-navigation-2.0","73b"),exact:!0},{path:"/blog/2018/11/01/react-navigation-3.0-rc",component:p("/blog/2018/11/01/react-navigation-3.0-rc","761"),exact:!0},{path:"/blog/2018/11/17/react-navigation-3.0",component:p("/blog/2018/11/17/react-navigation-3.0","767"),exact:!0},{path:"/blog/2019/09/16/react-navigation-4.0",component:p("/blog/2019/09/16/react-navigation-4.0","4b1"),exact:!0},{path:"/blog/2019/10/17/react-navigation-native",component:p("/blog/2019/10/17/react-navigation-native","202"),exact:!0},{path:"/blog/2019/11/04/using-react-navigation-5-with-ui-kitten",component:p("/blog/2019/11/04/using-react-navigation-5-with-ui-kitten","ee2"),exact:!0},{path:"/blog/2020/01/29/using-react-navigation-5-with-react-native-paper",component:p("/blog/2020/01/29/using-react-navigation-5-with-react-native-paper","281"),exact:!0},{path:"/blog/2020/02/06/react-navigation-5.0",component:p("/blog/2020/02/06/react-navigation-5.0","88a"),exact:!0},{path:"/blog/2020/05/16/web-support",component:p("/blog/2020/05/16/web-support","f3b"),exact:!0},{path:"/blog/2020/05/19/joining-github-sponsors",component:p("/blog/2020/05/19/joining-github-sponsors","f0f"),exact:!0},{path:"/blog/2021/03/12/react-navigation-6.0-next",component:p("/blog/2021/03/12/react-navigation-6.0-next","0f0"),exact:!0},{path:"/blog/2021/08/14/react-navigation-6.0",component:p("/blog/2021/08/14/react-navigation-6.0","5ab"),exact:!0},{path:"/blog/archive",component:p("/blog/archive","653"),exact:!0},{path:"/blog/page/2",component:p("/blog/page/2","4dd"),exact:!0},{path:"/blog/tags",component:p("/blog/tags","1d9"),exact:!0},{path:"/blog/tags/announcement",component:p("/blog/tags/announcement","6fb"),exact:!0},{path:"/blog/tags/announcement/page/2",component:p("/blog/tags/announcement/page/2","517"),exact:!0},{path:"/blog/tags/react-native-paper",component:p("/blog/tags/react-native-paper","ae4"),exact:!0},{path:"/blog/tags/release",component:p("/blog/tags/release","c2d"),exact:!0},{path:"/blog/tags/tutorial",component:p("/blog/tags/tutorial","c9b"),exact:!0},{path:"/blog/tags/ui-kitten",component:p("/blog/tags/ui-kitten","aed"),exact:!0},{path:"/blog/tags/web",component:p("/blog/tags/web","f64"),exact:!0},{path:"/help",component:p("/help","ef9"),exact:!0},{path:"/home/BLM/",component:p("/home/BLM/","d97"),exact:!0},{path:"/home/Features/",component:p("/home/Features/","929"),exact:!0},{path:"/home/Splash/",component:p("/home/Splash/","9fc"),exact:!0},{path:"/home/Splash/SplashLeftIllustration",component:p("/home/Splash/SplashLeftIllustration","ce8"),exact:!0},{path:"/home/Splash/SplashRightIllustration",component:p("/home/Splash/SplashRightIllustration","e0b"),exact:!0},{path:"/home/Sponsors/",component:p("/home/Sponsors/","bc9"),exact:!0},{path:"/layouts/DocItem",component:p("/layouts/DocItem","adc"),exact:!0},{path:"/layouts/DocPage",component:p("/layouts/DocPage","f30"),exact:!0},{path:"/search",component:p("/search","cbf"),exact:!0},{path:"/versions",component:p("/versions","d8a"),exact:!0},{path:"/docs/1.x",component:p("/docs/1.x","213"),routes:[{path:"/docs/1.x/alternatives",component:p("/docs/1.x/alternatives","5e0"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/api-reference",component:p("/docs/1.x/api-reference","447"),exact:!0,sidebar:"api"},{path:"/docs/1.x/auth-flow",component:p("/docs/1.x/auth-flow","185"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/connecting-navigation-prop",component:p("/docs/1.x/connecting-navigation-prop","d13"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/contributing",component:p("/docs/1.x/contributing","426"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/custom-android-back-button-handling",component:p("/docs/1.x/custom-android-back-button-handling","acf"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/custom-navigator-overview",component:p("/docs/1.x/custom-navigator-overview","98d"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/custom-navigators",component:p("/docs/1.x/custom-navigators","6d6"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/custom-routers",component:p("/docs/1.x/custom-routers","d96"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/customize-styles",component:p("/docs/1.x/customize-styles","110"),exact:!0},{path:"/docs/1.x/deep-linking",component:p("/docs/1.x/deep-linking","cff"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/drawer-based-navigation",component:p("/docs/1.x/drawer-based-navigation","f54"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/drawer-navigator",component:p("/docs/1.x/drawer-navigator","136"),exact:!0,sidebar:"api"},{path:"/docs/1.x/getting-started",component:p("/docs/1.x/getting-started","c52"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/glossary-of-terms",component:p("/docs/1.x/glossary-of-terms","904"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/handling-iphonex",component:p("/docs/1.x/handling-iphonex","23c"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/header-buttons",component:p("/docs/1.x/header-buttons","700"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/headers",component:p("/docs/1.x/headers","05b"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/hello-react-navigation",component:p("/docs/1.x/hello-react-navigation","230"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/listen-lifecycle-events",component:p("/docs/1.x/listen-lifecycle-events","ea7"),exact:!0},{path:"/docs/1.x/modal",component:p("/docs/1.x/modal","6e6"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/navigating",component:p("/docs/1.x/navigating","647"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/navigating-without-navigation-prop",component:p("/docs/1.x/navigating-without-navigation-prop","4b7"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/navigation-actions",component:p("/docs/1.x/navigation-actions","e26"),exact:!0,sidebar:"api"},{path:"/docs/1.x/navigation-options",component:p("/docs/1.x/navigation-options","eee"),exact:!0},{path:"/docs/1.x/navigation-prop",component:p("/docs/1.x/navigation-prop","088"),exact:!0,sidebar:"api"},{path:"/docs/1.x/navigation-views",component:p("/docs/1.x/navigation-views","45d"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/next-steps",component:p("/docs/1.x/next-steps","62c"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/params",component:p("/docs/1.x/params","04b"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/partial-overlay",component:p("/docs/1.x/partial-overlay","e0e"),exact:!0},{path:"/docs/1.x/pitch",component:p("/docs/1.x/pitch","c54"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/redux-integration",component:p("/docs/1.x/redux-integration","78c"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/routers",component:p("/docs/1.x/routers","bd7"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/screen-tracking",component:p("/docs/1.x/screen-tracking","1c2"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/set-params-on-back",component:p("/docs/1.x/set-params-on-back","b67"),exact:!0},{path:"/docs/1.x/stack-navigator",component:p("/docs/1.x/stack-navigator","65d"),exact:!0,sidebar:"api"},{path:"/docs/1.x/status-bar",component:p("/docs/1.x/status-bar","64a"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/supported-react-native-versions",component:p("/docs/1.x/supported-react-native-versions","182"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/switch-navigator",component:p("/docs/1.x/switch-navigator","387"),exact:!0,sidebar:"api"},{path:"/docs/1.x/tab-based-navigation",component:p("/docs/1.x/tab-based-navigation","551"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/tab-navigator",component:p("/docs/1.x/tab-navigator","6c9"),exact:!0,sidebar:"api"},{path:"/docs/1.x/transitioner",component:p("/docs/1.x/transitioner","4c2"),exact:!0,sidebar:"version-1.x/docs"},{path:"/docs/1.x/with-navigation",component:p("/docs/1.x/with-navigation","96c"),exact:!0,sidebar:"api"},{path:"/docs/1.x/with-navigation-focus",component:p("/docs/1.x/with-navigation-focus","547"),exact:!0,sidebar:"api"}]},{path:"/docs/2.x",component:p("/docs/2.x","380"),routes:[{path:"/docs/2.x/alternatives",component:p("/docs/2.x/alternatives","a8a"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/api-reference",component:p("/docs/2.x/api-reference","0b1"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/app-containers",component:p("/docs/2.x/app-containers","38f"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/auth-flow",component:p("/docs/2.x/auth-flow","8a0"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/bottom-tab-navigator",component:p("/docs/2.x/bottom-tab-navigator","480"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/common-mistakes",component:p("/docs/2.x/common-mistakes","cab"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/community-libraries-and-navigators",component:p("/docs/2.x/community-libraries-and-navigators","104"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/connecting-navigation-prop",component:p("/docs/2.x/connecting-navigation-prop","590"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/contributing",component:p("/docs/2.x/contributing","d78"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-android-back-button-handling",component:p("/docs/2.x/custom-android-back-button-handling","747"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-navigator-overview",component:p("/docs/2.x/custom-navigator-overview","65a"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-navigators",component:p("/docs/2.x/custom-navigators","f67"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-routers",component:p("/docs/2.x/custom-routers","e98"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/deep-linking",component:p("/docs/2.x/deep-linking","37c"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/drawer-actions",component:p("/docs/2.x/drawer-actions","5ed"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/drawer-based-navigation",component:p("/docs/2.x/drawer-based-navigation","9c8"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/drawer-navigator",component:p("/docs/2.x/drawer-navigator","5e7"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/getting-started",component:p("/docs/2.x/getting-started","e56"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/glossary-of-terms",component:p("/docs/2.x/glossary-of-terms","41d"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/handling-iphonex",component:p("/docs/2.x/handling-iphonex","c01"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/header-buttons",component:p("/docs/2.x/header-buttons","f7b"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/headers",component:p("/docs/2.x/headers","cd4"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/hello-react-navigation",component:p("/docs/2.x/hello-react-navigation","da7"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/limitations",component:p("/docs/2.x/limitations","7d4"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/material-bottom-tab-navigator",component:p("/docs/2.x/material-bottom-tab-navigator","ed3"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/material-top-tab-navigator",component:p("/docs/2.x/material-top-tab-navigator","ce5"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/modal",component:p("/docs/2.x/modal","ec5"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/more-resources",component:p("/docs/2.x/more-resources","b27"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigating",component:p("/docs/2.x/navigating","4cb"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigating-without-navigation-prop",component:p("/docs/2.x/navigating-without-navigation-prop","923"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-actions",component:p("/docs/2.x/navigation-actions","40c"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/navigation-context",component:p("/docs/2.x/navigation-context","69b"),exact:!0},{path:"/docs/2.x/navigation-events",component:p("/docs/2.x/navigation-events","29c"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/navigation-key",component:p("/docs/2.x/navigation-key","078"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-lifecycle",component:p("/docs/2.x/navigation-lifecycle","4a8"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-options-resolution",component:p("/docs/2.x/navigation-options-resolution","958"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-prop",component:p("/docs/2.x/navigation-prop","e1f"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/navigation-views",component:p("/docs/2.x/navigation-views","309"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/next-steps",component:p("/docs/2.x/next-steps","a25"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/params",component:p("/docs/2.x/params","9e4"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/pitch",component:p("/docs/2.x/pitch","be0"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/react-native-screens",component:p("/docs/2.x/react-native-screens","206"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/redux-integration",component:p("/docs/2.x/redux-integration","bf3"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/routers",component:p("/docs/2.x/routers","8b9"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/screen-tracking",component:p("/docs/2.x/screen-tracking","329"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/stack-actions",component:p("/docs/2.x/stack-actions","b85"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/stack-navigator",component:p("/docs/2.x/stack-navigator","66c"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/state-persistence",component:p("/docs/2.x/state-persistence","7b8"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/status-bar",component:p("/docs/2.x/status-bar","327"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/supported-react-native-versions",component:p("/docs/2.x/supported-react-native-versions","032"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/switch-navigator",component:p("/docs/2.x/switch-navigator","997"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/tab-based-navigation",component:p("/docs/2.x/tab-based-navigation","708"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/tab-navigator",component:p("/docs/2.x/tab-navigator","ec3"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/transitioner",component:p("/docs/2.x/transitioner","0ce"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/with-navigation",component:p("/docs/2.x/with-navigation","34f"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/with-navigation-focus",component:p("/docs/2.x/with-navigation-focus","638"),exact:!0,sidebar:"version-2.x-api"}]},{path:"/docs/3.x",component:p("/docs/3.x","635"),routes:[{path:"/docs/3.x/alternatives",component:p("/docs/3.x/alternatives","8fe"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/animated-switch-navigator",component:p("/docs/3.x/animated-switch-navigator","14d"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/app-containers",component:p("/docs/3.x/app-containers","f08"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/auth-flow",component:p("/docs/3.x/auth-flow","59f"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/bottom-tab-navigator",component:p("/docs/3.x/bottom-tab-navigator","1cf"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/common-mistakes",component:p("/docs/3.x/common-mistakes","26f"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/community-libraries-and-navigators",component:p("/docs/3.x/community-libraries-and-navigators","956"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/connecting-navigation-prop",component:p("/docs/3.x/connecting-navigation-prop","59d"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/contributing",component:p("/docs/3.x/contributing","477"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-android-back-button-handling",component:p("/docs/3.x/custom-android-back-button-handling","7db"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-navigator-overview",component:p("/docs/3.x/custom-navigator-overview","ca0"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-navigators",component:p("/docs/3.x/custom-navigators","ad2"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-routers",component:p("/docs/3.x/custom-routers","3c9"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/deep-linking",component:p("/docs/3.x/deep-linking","c7a"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/drawer-actions",component:p("/docs/3.x/drawer-actions","fad"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/drawer-based-navigation",component:p("/docs/3.x/drawer-based-navigation","034"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/drawer-navigator",component:p("/docs/3.x/drawer-navigator","4a8"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/function-after-focusing-screen",component:p("/docs/3.x/function-after-focusing-screen","426"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/getting-started",component:p("/docs/3.x/getting-started","d00"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/glossary-of-terms",component:p("/docs/3.x/glossary-of-terms","576"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/handling-iphonex",component:p("/docs/3.x/handling-iphonex","0a6"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/header-buttons",component:p("/docs/3.x/header-buttons","485"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/headers",component:p("/docs/3.x/headers","3b8"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/hello-react-navigation",component:p("/docs/3.x/hello-react-navigation","a54"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/limitations",component:p("/docs/3.x/limitations","789"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/localization",component:p("/docs/3.x/localization","609"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/material-bottom-tab-navigator",component:p("/docs/3.x/material-bottom-tab-navigator","2a1"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/material-top-tab-navigator",component:p("/docs/3.x/material-top-tab-navigator","83c"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/modal",component:p("/docs/3.x/modal","359"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/more-resources",component:p("/docs/3.x/more-resources","44c"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/MST-integration",component:p("/docs/3.x/MST-integration","f7d"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigating",component:p("/docs/3.x/navigating","ee6"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigating-without-navigation-prop",component:p("/docs/3.x/navigating-without-navigation-prop","d4b"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-actions",component:p("/docs/3.x/navigation-actions","564"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-context",component:p("/docs/3.x/navigation-context","2c4"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-events",component:p("/docs/3.x/navigation-events","5a5"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-key",component:p("/docs/3.x/navigation-key","daf"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-lifecycle",component:p("/docs/3.x/navigation-lifecycle","ea5"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-options-resolution",component:p("/docs/3.x/navigation-options-resolution","80b"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-prop",component:p("/docs/3.x/navigation-prop","1db"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-views",component:p("/docs/3.x/navigation-views","182"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/next-steps",component:p("/docs/3.x/next-steps","796"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/params",component:p("/docs/3.x/params","cc4"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/pitch",component:p("/docs/3.x/pitch","da5"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/react-native-screens",component:p("/docs/3.x/react-native-screens","ee1"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/redux-integration",component:p("/docs/3.x/redux-integration","0f0"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/routers",component:p("/docs/3.x/routers","6fe"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/screen-tracking",component:p("/docs/3.x/screen-tracking","208"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/scrollables",component:p("/docs/3.x/scrollables","4a5"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/stack-actions",component:p("/docs/3.x/stack-actions","1b5"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/stack-navigator",component:p("/docs/3.x/stack-navigator","197"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/state-persistence",component:p("/docs/3.x/state-persistence","b23"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/status-bar",component:p("/docs/3.x/status-bar","d26"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/supported-react-native-versions",component:p("/docs/3.x/supported-react-native-versions","179"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/switch-actions",component:p("/docs/3.x/switch-actions","763"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/switch-navigator",component:p("/docs/3.x/switch-navigator","68a"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/tab-based-navigation",component:p("/docs/3.x/tab-based-navigation","a06"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/tab-navigator",component:p("/docs/3.x/tab-navigator","d33"),exact:!0},{path:"/docs/3.x/themes",component:p("/docs/3.x/themes","179"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/transitioner",component:p("/docs/3.x/transitioner","929"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/web-support",component:p("/docs/3.x/web-support","8fb"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/with-navigation",component:p("/docs/3.x/with-navigation","aeb"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/with-navigation-focus",component:p("/docs/3.x/with-navigation-focus","dd5"),exact:!0,sidebar:"version-3.x-docs"}]},{path:"/docs/4.x",component:p("/docs/4.x","93d"),routes:[{path:"/docs/4.x/alternatives",component:p("/docs/4.x/alternatives","8ac"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/animated-switch-navigator",component:p("/docs/4.x/animated-switch-navigator","b9b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/app-containers",component:p("/docs/4.x/app-containers","7df"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/auth-flow",component:p("/docs/4.x/auth-flow","c1c"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/bottom-tab-navigator",component:p("/docs/4.x/bottom-tab-navigator","7dd"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/common-mistakes",component:p("/docs/4.x/common-mistakes","7a0"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/community-libraries-and-navigators",component:p("/docs/4.x/community-libraries-and-navigators","080"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/connecting-navigation-prop",component:p("/docs/4.x/connecting-navigation-prop","e4e"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/contributing",component:p("/docs/4.x/contributing","c6b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-android-back-button-handling",component:p("/docs/4.x/custom-android-back-button-handling","526"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-navigator-overview",component:p("/docs/4.x/custom-navigator-overview","cfc"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-navigators",component:p("/docs/4.x/custom-navigators","81c"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-routers",component:p("/docs/4.x/custom-routers","5c4"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/deep-linking",component:p("/docs/4.x/deep-linking","c2f"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/drawer-actions",component:p("/docs/4.x/drawer-actions","3a5"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/drawer-based-navigation",component:p("/docs/4.x/drawer-based-navigation","009"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/drawer-navigator",component:p("/docs/4.x/drawer-navigator","7ce"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/function-after-focusing-screen",component:p("/docs/4.x/function-after-focusing-screen","1b8"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/getting-started",component:p("/docs/4.x/getting-started","730"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/glossary-of-terms",component:p("/docs/4.x/glossary-of-terms","cfe"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/handling-iphonex",component:p("/docs/4.x/handling-iphonex","04e"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/header-buttons",component:p("/docs/4.x/header-buttons","dbd"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/headers",component:p("/docs/4.x/headers","4d9"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/hello-react-navigation",component:p("/docs/4.x/hello-react-navigation","f56"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/limitations",component:p("/docs/4.x/limitations","cb0"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/localization",component:p("/docs/4.x/localization","72e"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/material-bottom-tab-navigator",component:p("/docs/4.x/material-bottom-tab-navigator","b8b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/material-top-tab-navigator",component:p("/docs/4.x/material-top-tab-navigator","689"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/modal",component:p("/docs/4.x/modal","b88"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/more-resources",component:p("/docs/4.x/more-resources","369"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/MST-integration",component:p("/docs/4.x/MST-integration","b94"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigating",component:p("/docs/4.x/navigating","c99"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigating-without-navigation-prop",component:p("/docs/4.x/navigating-without-navigation-prop","a6e"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-actions",component:p("/docs/4.x/navigation-actions","97b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-context",component:p("/docs/4.x/navigation-context","6e3"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-events",component:p("/docs/4.x/navigation-events","15d"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-key",component:p("/docs/4.x/navigation-key","9a4"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-lifecycle",component:p("/docs/4.x/navigation-lifecycle","6de"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-options-resolution",component:p("/docs/4.x/navigation-options-resolution","066"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-prop",component:p("/docs/4.x/navigation-prop","8c6"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-views",component:p("/docs/4.x/navigation-views","cf3"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/next-steps",component:p("/docs/4.x/next-steps","80e"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/params",component:p("/docs/4.x/params","824"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/pitch",component:p("/docs/4.x/pitch","bee"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/react-native-screens",component:p("/docs/4.x/react-native-screens","506"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/redux-integration",component:p("/docs/4.x/redux-integration","3ed"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/routers",component:p("/docs/4.x/routers","b65"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/screen-tracking",component:p("/docs/4.x/screen-tracking","184"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/scrollables",component:p("/docs/4.x/scrollables","fc4"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/stack-actions",component:p("/docs/4.x/stack-actions","93f"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/stack-navigator",component:p("/docs/4.x/stack-navigator","869"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/stack-navigator-1.0",component:p("/docs/4.x/stack-navigator-1.0","7c3"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/state-persistence",component:p("/docs/4.x/state-persistence","aa2"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/status-bar",component:p("/docs/4.x/status-bar","342"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/supported-react-native-versions",component:p("/docs/4.x/supported-react-native-versions","69c"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/switch-actions",component:p("/docs/4.x/switch-actions","7a3"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/switch-navigator",component:p("/docs/4.x/switch-navigator","40b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/tab-based-navigation",component:p("/docs/4.x/tab-based-navigation","9ce"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/themes",component:p("/docs/4.x/themes","372"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/troubleshooting",component:p("/docs/4.x/troubleshooting","ff1"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/typescript",component:p("/docs/4.x/typescript","63a"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/upgrading-from-3.x",component:p("/docs/4.x/upgrading-from-3.x","8b8"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/web-support",component:p("/docs/4.x/web-support","1ce"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/with-navigation",component:p("/docs/4.x/with-navigation","020"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/with-navigation-focus",component:p("/docs/4.x/with-navigation-focus","025"),exact:!0,sidebar:"version-4.x-docs"}]},{path:"/docs/5.x",component:p("/docs/5.x","f40"),routes:[{path:"/docs/5.x/alternatives",component:p("/docs/5.x/alternatives","f6a"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/auth-flow",component:p("/docs/5.x/auth-flow","0de"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/bottom-tab-navigator",component:p("/docs/5.x/bottom-tab-navigator","6a8"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/community-libraries-and-navigators",component:p("/docs/5.x/community-libraries-and-navigators","6a1"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/compatibility",component:p("/docs/5.x/compatibility","7c9"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/configuring-links",component:p("/docs/5.x/configuring-links","6e0"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/connecting-navigation-prop",component:p("/docs/5.x/connecting-navigation-prop","bdf"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/contributing",component:p("/docs/5.x/contributing","ccc"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/custom-android-back-button-handling",component:p("/docs/5.x/custom-android-back-button-handling","5ea"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/custom-navigators",component:p("/docs/5.x/custom-navigators","370"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/custom-routers",component:p("/docs/5.x/custom-routers","99f"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/deep-linking",component:p("/docs/5.x/deep-linking","07f"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/devtools",component:p("/docs/5.x/devtools","d6f"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/drawer-actions",component:p("/docs/5.x/drawer-actions","6ac"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/drawer-based-navigation",component:p("/docs/5.x/drawer-based-navigation","7de"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/drawer-navigator",component:p("/docs/5.x/drawer-navigator","bf7"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/function-after-focusing-screen",component:p("/docs/5.x/function-after-focusing-screen","34c"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/getting-started",component:p("/docs/5.x/getting-started","9be"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/glossary-of-terms",component:p("/docs/5.x/glossary-of-terms","ed0"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/handling-safe-area",component:p("/docs/5.x/handling-safe-area","9ec"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/header-buttons",component:p("/docs/5.x/header-buttons","287"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/headers",component:p("/docs/5.x/headers","32b"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/hello-react-navigation",component:p("/docs/5.x/hello-react-navigation","f24"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/hiding-tabbar-in-screens",component:p("/docs/5.x/hiding-tabbar-in-screens","843"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/limitations",component:p("/docs/5.x/limitations","4b9"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/link",component:p("/docs/5.x/link","4c8"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/material-bottom-tab-navigator",component:p("/docs/5.x/material-bottom-tab-navigator","beb"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/material-top-tab-navigator",component:p("/docs/5.x/material-top-tab-navigator","9e8"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/modal",component:p("/docs/5.x/modal","bbc"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/more-resources",component:p("/docs/5.x/more-resources","094"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/MST-integration",component:p("/docs/5.x/MST-integration","4ad"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/native-stack-navigator",component:p("/docs/5.x/native-stack-navigator","a8b"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigating",component:p("/docs/5.x/navigating","867"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigating-without-navigation-prop",component:p("/docs/5.x/navigating-without-navigation-prop","eef"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigation-actions",component:p("/docs/5.x/navigation-actions","4b8"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigation-container",component:p("/docs/5.x/navigation-container","547"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigation-context",component:p("/docs/5.x/navigation-context","5ec"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigation-events",component:p("/docs/5.x/navigation-events","a4a"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigation-lifecycle",component:p("/docs/5.x/navigation-lifecycle","59d"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigation-prop",component:p("/docs/5.x/navigation-prop","c63"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/navigation-state",component:p("/docs/5.x/navigation-state","c47"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/nesting-navigators",component:p("/docs/5.x/nesting-navigators","62a"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/next-steps",component:p("/docs/5.x/next-steps","138"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/params",component:p("/docs/5.x/params","2d1"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/pitch",component:p("/docs/5.x/pitch","9c3"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/preventing-going-back",component:p("/docs/5.x/preventing-going-back","94d"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/react-native-screens",component:p("/docs/5.x/react-native-screens","f96"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/redux-integration",component:p("/docs/5.x/redux-integration","0ba"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/route-prop",component:p("/docs/5.x/route-prop","2b8"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/screen",component:p("/docs/5.x/screen","cda"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/screen-options",component:p("/docs/5.x/screen-options","71d"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/screen-options-resolution",component:p("/docs/5.x/screen-options-resolution","254"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/screen-tracking",component:p("/docs/5.x/screen-tracking","d93"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/server-container",component:p("/docs/5.x/server-container","753"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/server-rendering",component:p("/docs/5.x/server-rendering","ebe"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/stack-actions",component:p("/docs/5.x/stack-actions","fbd"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/stack-navigator",component:p("/docs/5.x/stack-navigator","821"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/state-persistence",component:p("/docs/5.x/state-persistence","640"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/status-bar",component:p("/docs/5.x/status-bar","503"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/supported-react-native-versions",component:p("/docs/5.x/supported-react-native-versions","227"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/tab-actions",component:p("/docs/5.x/tab-actions","552"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/tab-based-navigation",component:p("/docs/5.x/tab-based-navigation","f24"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/testing",component:p("/docs/5.x/testing","64c"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/themes",component:p("/docs/5.x/themes","c1d"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/troubleshooting",component:p("/docs/5.x/troubleshooting","3c8"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/typescript",component:p("/docs/5.x/typescript","c16"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/upgrading-from-4.x",component:p("/docs/5.x/upgrading-from-4.x","b0d"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-focus-effect",component:p("/docs/5.x/use-focus-effect","ceb"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-is-focused",component:p("/docs/5.x/use-is-focused","674"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-link-builder",component:p("/docs/5.x/use-link-builder","fce"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-link-props",component:p("/docs/5.x/use-link-props","26f"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-link-to",component:p("/docs/5.x/use-link-to","882"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-linking",component:p("/docs/5.x/use-linking","ac4"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-navigation",component:p("/docs/5.x/use-navigation","ce0"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-navigation-state",component:p("/docs/5.x/use-navigation-state","84c"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-route",component:p("/docs/5.x/use-route","343"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-scroll-to-top",component:p("/docs/5.x/use-scroll-to-top","a7e"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/use-theme",component:p("/docs/5.x/use-theme","58b"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/used-by",component:p("/docs/5.x/used-by","32f"),exact:!0,sidebar:"version-5.x/docs"},{path:"/docs/5.x/web-support",component:p("/docs/5.x/web-support","363"),exact:!0,sidebar:"version-5.x/docs"}]},{path:"/docs/7.x",component:p("/docs/7.x","ad2"),routes:[{path:"/docs/7.x/auth-flow",component:p("/docs/7.x/auth-flow","14b"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/bottom-tab-navigator",component:p("/docs/7.x/bottom-tab-navigator","b8f"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/configuring-links",component:p("/docs/7.x/configuring-links","bfe"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/connecting-navigation-prop",component:p("/docs/7.x/connecting-navigation-prop","f03"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/contributing",component:p("/docs/7.x/contributing","874"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/custom-android-back-button-handling",component:p("/docs/7.x/custom-android-back-button-handling","664"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/custom-navigators",component:p("/docs/7.x/custom-navigators","d0c"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/custom-routers",component:p("/docs/7.x/custom-routers","2de"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/deep-linking",component:p("/docs/7.x/deep-linking","6e3"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/devtools",component:p("/docs/7.x/devtools","148"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/drawer-actions",component:p("/docs/7.x/drawer-actions","c3a"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/drawer-based-navigation",component:p("/docs/7.x/drawer-based-navigation","251"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/drawer-layout",component:p("/docs/7.x/drawer-layout","d00"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/drawer-navigator",component:p("/docs/7.x/drawer-navigator","9c3"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/elements",component:p("/docs/7.x/elements","6ab"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/function-after-focusing-screen",component:p("/docs/7.x/function-after-focusing-screen","9aa"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/getting-started",component:p("/docs/7.x/getting-started","641"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/glossary-of-terms",component:p("/docs/7.x/glossary-of-terms","4fc"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/group",component:p("/docs/7.x/group","12d"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/handling-safe-area",component:p("/docs/7.x/handling-safe-area","47f"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/header-buttons",component:p("/docs/7.x/header-buttons","aae"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/headers",component:p("/docs/7.x/headers","94d"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/hello-react-navigation",component:p("/docs/7.x/hello-react-navigation","89e"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/hiding-tabbar-in-screens",component:p("/docs/7.x/hiding-tabbar-in-screens","b62"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/limitations",component:p("/docs/7.x/limitations","107"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/link",component:p("/docs/7.x/link","a22"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/material-top-tab-navigator",component:p("/docs/7.x/material-top-tab-navigator","f4d"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/migration-guides",component:p("/docs/7.x/migration-guides","833"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/modal",component:p("/docs/7.x/modal","6a2"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/more-resources",component:p("/docs/7.x/more-resources","72d"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/MST-integration",component:p("/docs/7.x/MST-integration","c7f"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/multiple-drawers",component:p("/docs/7.x/multiple-drawers","58c"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/native-stack-navigator",component:p("/docs/7.x/native-stack-navigator","c48"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigating",component:p("/docs/7.x/navigating","7b0"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigating-without-navigation-prop",component:p("/docs/7.x/navigating-without-navigation-prop","21e"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-actions",component:p("/docs/7.x/navigation-actions","bb8"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-container",component:p("/docs/7.x/navigation-container","424"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-context",component:p("/docs/7.x/navigation-context","8f8"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-events",component:p("/docs/7.x/navigation-events","ae2"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-lifecycle",component:p("/docs/7.x/navigation-lifecycle","c08"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-prop",component:p("/docs/7.x/navigation-prop","5f2"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-solutions-and-community-libraries",component:p("/docs/7.x/navigation-solutions-and-community-libraries","80b"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/navigation-state",component:p("/docs/7.x/navigation-state","d21"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/nesting-navigators",component:p("/docs/7.x/nesting-navigators","1c7"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/next-steps",component:p("/docs/7.x/next-steps","822"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/params",component:p("/docs/7.x/params","a56"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/pitch",component:p("/docs/7.x/pitch","a06"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/preventing-going-back",component:p("/docs/7.x/preventing-going-back","6bc"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/redux-integration",component:p("/docs/7.x/redux-integration","c8a"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/route-prop",component:p("/docs/7.x/route-prop","ed0"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/screen",component:p("/docs/7.x/screen","d97"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/screen-options",component:p("/docs/7.x/screen-options","1a0"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/screen-options-resolution",component:p("/docs/7.x/screen-options-resolution","0bc"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/screen-tracking",component:p("/docs/7.x/screen-tracking","947"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/server-container",component:p("/docs/7.x/server-container","879"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/server-rendering",component:p("/docs/7.x/server-rendering","a93"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/shared-element-transitions",component:p("/docs/7.x/shared-element-transitions","de9"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/stack-actions",component:p("/docs/7.x/stack-actions","1a1"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/stack-navigator",component:p("/docs/7.x/stack-navigator","3f8"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/state-persistence",component:p("/docs/7.x/state-persistence","4db"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/static-api-reference",component:p("/docs/7.x/static-api-reference","9b0"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/static-authentication",component:p("/docs/7.x/static-authentication","d45"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/static-combine-with-dynamic",component:p("/docs/7.x/static-combine-with-dynamic","bb0"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/static-configuration",component:p("/docs/7.x/static-configuration","8de"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/static-typescript",component:p("/docs/7.x/static-typescript","c35"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/status-bar",component:p("/docs/7.x/status-bar","4d1"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/tab-actions",component:p("/docs/7.x/tab-actions","33e"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/tab-based-navigation",component:p("/docs/7.x/tab-based-navigation","154"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/tab-view",component:p("/docs/7.x/tab-view","49a"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/testing",component:p("/docs/7.x/testing","a97"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/themes",component:p("/docs/7.x/themes","2ee"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/troubleshooting",component:p("/docs/7.x/troubleshooting","60c"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/typescript",component:p("/docs/7.x/typescript","3ed"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/upgrading-from-6.x",component:p("/docs/7.x/upgrading-from-6.x","7ce"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-focus-effect",component:p("/docs/7.x/use-focus-effect","add"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-is-focused",component:p("/docs/7.x/use-is-focused","b34"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-link-builder",component:p("/docs/7.x/use-link-builder","5e8"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-link-props",component:p("/docs/7.x/use-link-props","5b0"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-link-to",component:p("/docs/7.x/use-link-to","c87"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-navigation",component:p("/docs/7.x/use-navigation","0d4"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-navigation-state",component:p("/docs/7.x/use-navigation-state","1af"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-route",component:p("/docs/7.x/use-route","62c"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-scroll-to-top",component:p("/docs/7.x/use-scroll-to-top","553"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/use-theme",component:p("/docs/7.x/use-theme","4f2"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/used-by",component:p("/docs/7.x/used-by","f88"),exact:!0,sidebar:"version-7.x/docs"},{path:"/docs/7.x/web-support",component:p("/docs/7.x/web-support","065"),exact:!0,sidebar:"version-7.x/docs"}]},{path:"/docs",component:p("/docs","c9a"),routes:[{path:"/docs/auth-flow",component:p("/docs/auth-flow","bf1"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/bottom-tab-navigator",component:p("/docs/bottom-tab-navigator","edf"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/configuring-links",component:p("/docs/configuring-links","c2e"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/connecting-navigation-prop",component:p("/docs/connecting-navigation-prop","62a"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/contributing",component:p("/docs/contributing","ea9"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/custom-android-back-button-handling",component:p("/docs/custom-android-back-button-handling","77a"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/custom-navigators",component:p("/docs/custom-navigators","6a5"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/custom-routers",component:p("/docs/custom-routers","275"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/deep-linking",component:p("/docs/deep-linking","2bb"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/devtools",component:p("/docs/devtools","bf5"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/drawer-actions",component:p("/docs/drawer-actions","e5a"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/drawer-based-navigation",component:p("/docs/drawer-based-navigation","abd"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/drawer-layout",component:p("/docs/drawer-layout","a0c"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/drawer-navigator",component:p("/docs/drawer-navigator","327"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/elements",component:p("/docs/elements","dc9"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/function-after-focusing-screen",component:p("/docs/function-after-focusing-screen","e05"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/getting-started",component:p("/docs/getting-started","139"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/glossary-of-terms",component:p("/docs/glossary-of-terms","ad9"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/group",component:p("/docs/group","264"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/handling-safe-area",component:p("/docs/handling-safe-area","618"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/header-buttons",component:p("/docs/header-buttons","f3a"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/headers",component:p("/docs/headers","d3a"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/hello-react-navigation",component:p("/docs/hello-react-navigation","ea5"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/hiding-tabbar-in-screens",component:p("/docs/hiding-tabbar-in-screens","c82"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/limitations",component:p("/docs/limitations","ad0"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/link",component:p("/docs/link","17d"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/material-bottom-tab-navigator",component:p("/docs/material-bottom-tab-navigator","a84"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/material-top-tab-navigator",component:p("/docs/material-top-tab-navigator","707"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/migration-guides",component:p("/docs/migration-guides","387"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/modal",component:p("/docs/modal","7d2"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/more-resources",component:p("/docs/more-resources","562"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/MST-integration",component:p("/docs/MST-integration","5fa"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/multiple-drawers",component:p("/docs/multiple-drawers","c58"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/native-stack-navigator",component:p("/docs/native-stack-navigator","494"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigating",component:p("/docs/navigating","e0b"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigating-without-navigation-prop",component:p("/docs/navigating-without-navigation-prop","43f"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-actions",component:p("/docs/navigation-actions","028"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-container",component:p("/docs/navigation-container","1cb"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-context",component:p("/docs/navigation-context","27d"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-events",component:p("/docs/navigation-events","7b6"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-lifecycle",component:p("/docs/navigation-lifecycle","e12"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-prop",component:p("/docs/navigation-prop","7a4"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-solutions-and-community-libraries",component:p("/docs/navigation-solutions-and-community-libraries","678"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/navigation-state",component:p("/docs/navigation-state","096"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/nesting-navigators",component:p("/docs/nesting-navigators","da8"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/next-steps",component:p("/docs/next-steps","2f4"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/params",component:p("/docs/params","f9a"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/pitch",component:p("/docs/pitch","081"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/preventing-going-back",component:p("/docs/preventing-going-back","553"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/redux-integration",component:p("/docs/redux-integration","c1b"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/route-prop",component:p("/docs/route-prop","450"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/screen",component:p("/docs/screen","ada"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/screen-options",component:p("/docs/screen-options","1bb"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/screen-options-resolution",component:p("/docs/screen-options-resolution","dae"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/screen-tracking",component:p("/docs/screen-tracking","da4"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/server-container",component:p("/docs/server-container","b28"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/server-rendering",component:p("/docs/server-rendering","7e4"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/shared-element-transitions",component:p("/docs/shared-element-transitions","ea1"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/stack-actions",component:p("/docs/stack-actions","a48"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/stack-navigator",component:p("/docs/stack-navigator","b6e"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/state-persistence",component:p("/docs/state-persistence","cf7"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/status-bar",component:p("/docs/status-bar","095"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/tab-actions",component:p("/docs/tab-actions","8af"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/tab-based-navigation",component:p("/docs/tab-based-navigation","72c"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/tab-view",component:p("/docs/tab-view","252"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/testing",component:p("/docs/testing","a53"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/themes",component:p("/docs/themes","f3b"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/troubleshooting",component:p("/docs/troubleshooting","fd4"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/typescript",component:p("/docs/typescript","8a1"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/upgrading-from-5.x",component:p("/docs/upgrading-from-5.x","e7c"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-focus-effect",component:p("/docs/use-focus-effect","cba"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-is-focused",component:p("/docs/use-is-focused","345"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-link-builder",component:p("/docs/use-link-builder","a77"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-link-props",component:p("/docs/use-link-props","098"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-link-to",component:p("/docs/use-link-to","871"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-navigation",component:p("/docs/use-navigation","ab2"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-navigation-state",component:p("/docs/use-navigation-state","755"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-route",component:p("/docs/use-route","cdb"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-scroll-to-top",component:p("/docs/use-scroll-to-top","c34"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/use-theme",component:p("/docs/use-theme","eba"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/used-by",component:p("/docs/used-by","b8c"),exact:!0,sidebar:"version-6.x/docs"},{path:"/docs/web-support",component:p("/docs/web-support","84e"),exact:!0,sidebar:"version-6.x/docs"}]},{path:"/",component:p("/","305"),exact:!0},{path:"*",component:p("*")}]},98934:function(e,t,n){"use strict";n.d(t,{_:function(){return r},t:function(){return i}});var o=n(67294),r=o.createContext(!1);function i(e){var t=e.children,n=(0,o.useState)(!1),i=n[0],a=n[1];return(0,o.useEffect)((function(){a(!0)}),[]),o.createElement(r.Provider,{value:i},t)}},49383:function(e,t,n){"use strict";var o=n(67294),r=n(73935),i=n(73727),a=n(70405),s=n(10412),c=[n(74367),n(32497),n(3310),n(18320),n(52295)],d=n(723),l=n(16550),u=n(18790);function p(e){var t=e.children;return o.createElement(o.Fragment,null,t)}var f=n(83117),m=n(35742),v=n(52263),h=n(44996),g=n(86668),b=n(10833),x=n(94711),y=n(19727),_=n(43320),w=n(90197);function k(){var e=(0,v.Z)().i18n,t=e.defaultLocale,n=e.localeConfigs,r=(0,x.l)();return o.createElement(m.Z,null,Object.entries(n).map((function(e){var t=e[0],n=e[1].htmlLang;return o.createElement("link",{key:t,rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:n})})),o.createElement("link",{rel:"alternate",href:r.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}))}function E(e){var t=e.permalink,n=(0,v.Z)().siteConfig.url,r=function(){var e=(0,v.Z)().siteConfig.url,t=(0,l.TH)().pathname;return e+(0,h.Z)(t)}(),i=t?""+n+t:r;return o.createElement(m.Z,null,o.createElement("meta",{property:"og:url",content:i}),o.createElement("link",{rel:"canonical",href:i}))}function S(){var e=(0,v.Z)().i18n.currentLocale,t=(0,g.L)(),n=t.metadata,r=t.image;return o.createElement(o.Fragment,null,o.createElement(m.Z,null,o.createElement("meta",{name:"twitter:card",content:"summary_large_image"}),o.createElement("body",{className:y.h})),r&&o.createElement(b.d,{image:r}),o.createElement(E,null),o.createElement(k,null),o.createElement(w.Z,{tag:_.HX,locale:e}),o.createElement(m.Z,null,n.map((function(e,t){return o.createElement("meta",(0,f.Z)({key:t},e))}))))}var P=new Map;function T(e){if(P.has(e.pathname))return Object.assign({},e,{pathname:P.get(e.pathname)});if((0,u.f)(d.Z,e.pathname).some((function(e){return!0===e.route.exact})))return P.set(e.pathname,e.pathname),e;var t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return P.set(e.pathname,t),Object.assign({},e,{pathname:t})}var C=n(98934),A=n(58940),L=n(21073);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = '+e+" "+("/"===e?" (default value)":"")+'

\n

We suggest trying baseUrl =

\n\n'}(e)).replace(/0)&&(F.current.unobserve(e),F.current.disconnect(),null!=D&&window.docusaurus.prefetch(D))}))})),F.current.observe(e))},to:D},h&&{isActive:y,activeClassName:x}))}var g=i.forwardRef(h)},95999:function(e,t,n){"use strict";n.d(t,{Z:function(){return c},I:function(){return s}});var o=n(67294);function r(e,t){var n=e.split(/(\{\w+\})/).map((function(e,n){if(n%2==1){var o=null==t?void 0:t[e.slice(1,-1)];if(void 0!==o)return o}return e}));return n.some((function(e){return(0,o.isValidElement)(e)}))?n.map((function(e,t){return(0,o.isValidElement)(e)?o.cloneElement(e,{key:t}):e})).filter((function(e){return""!==e})):n.join("")}var i=n(57529);function a(e){var t,n,o=e.id,r=e.message;if(void 0===o&&void 0===r)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return null!=(t=null!=(n=i[null!=o?o:r])?n:r)?t:o}function s(e,t){return r(a({message:e.message,id:e.id}),t)}function c(e){var t=e.children,n=e.id,i=e.values;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");var s=a({message:t,id:n});return o.createElement(o.Fragment,null,r(s,i))}},29935:function(e,t,n){"use strict";n.d(t,{m:function(){return o}});var o="default"},13919:function(e,t,n){"use strict";function o(e){return/^(?:\w*:|\/\/)/.test(e)}function r(e){return void 0!==e&&!o(e)}n.d(t,{Z:function(){return r},b:function(){return o}})},44996:function(e,t,n){"use strict";n.d(t,{C:function(){return a},Z:function(){return s}});var o=n(67294),r=n(52263),i=n(13919);function a(){var e=(0,r.Z)().siteConfig,t=e.baseUrl,n=e.url,a=(0,o.useCallback)((function(e,o){return function(e,t,n,o){var r=void 0===o?{}:o,a=r.forcePrependBaseUrl,s=void 0!==a&&a,c=r.absolute,d=void 0!==c&&c;if(!n||n.startsWith("#")||(0,i.b)(n))return n;if(s)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;var l=n.startsWith(t)?n:t+n.replace(/^\//,"");return d?e+l:l}(n,t,e,o)}),[n,t]);return{withBaseUrl:a}}function s(e,t){return void 0===t&&(t={}),(0,a().withBaseUrl)(e,t)}},52263:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var o=n(67294),r=n(58940);function i(){return(0,o.useContext)(r._)}},72389:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var o=n(67294),r=n(98934);function i(){return(0,o.useContext)(r._)}},99670:function(e,t,n){"use strict";n.d(t,{Z:function(){return r}});var o=function(e){return"object"==typeof e&&!!e&&Object.keys(e).length>0};function r(e){var t=".",n={};return function e(r,i){Object.entries(r).forEach((function(r){var a=r[0],s=r[1],c=i?""+i+t+a:a;o(s)?e(s,c):n[c]=s}))}(e),n}},30226:function(e,t,n){"use strict";n.d(t,{_:function(){return r},z:function(){return i}});var o=n(67294),r=o.createContext(null);function i(e){var t=e.children,n=e.value,i=o.useContext(r),a=(0,o.useMemo)((function(){return function(e){var t=e.parent,n=e.value;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}var o=Object.assign({},t.data,null==n?void 0:n.data);return{plugin:t.plugin,data:o}}({parent:i,value:n})}),[i,n]);return o.createElement(r.Provider,{value:a},t)}},80143:function(e,t,n){"use strict";n.d(t,{Iw:function(){return g},gA:function(){return f},WS:function(){return m},_r:function(){return u},Jo:function(){return b},zh:function(){return p},yW:function(){return h},gB:function(){return v}});var o=n(16550),r=n(52263),i=n(29935);function a(e,t){void 0===t&&(t={});var n=(0,r.Z)().globalData[e];if(!n&&t.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin.');return n}var s=function(e){return e.versions.find((function(e){return e.isLast}))};function c(e,t){var n=s(e);return[].concat(e.versions.filter((function(e){return e!==n})),[n]).find((function(e){return!!(0,o.LX)(t,{path:e.path,exact:!1,strict:!1})}))}function d(e,t){var n,r,i=c(e,t),a=null==i?void 0:i.docs.find((function(e){return!!(0,o.LX)(t,{path:e.path,exact:!0,strict:!1})}));return{activeVersion:i,activeDoc:a,alternateDocVersions:a?(n=a.id,r={},e.versions.forEach((function(e){e.docs.forEach((function(t){t.id===n&&(r[e.name]=t)}))})),r):{}}}var l={},u=function(){var e;return null!=(e=a("docusaurus-plugin-content-docs"))?e:l},p=function(e){return function(e,t,n){void 0===t&&(t=i.m),void 0===n&&(n={});var o=a(e),r=null==o?void 0:o[t];if(!r&&n.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin with id "'+t+'".');return r}("docusaurus-plugin-content-docs",e,{failfast:!0})};function f(e){return void 0===e&&(e={}),function(e,t,n){void 0===n&&(n={});var r=Object.entries(e).sort((function(e,t){return t[1].path.localeCompare(e[1].path)})).find((function(e){var n=e[1];return!!(0,o.LX)(t,{path:n.path,exact:!1,strict:!1})})),i=r?{pluginId:r[0],pluginData:r[1]}:void 0;if(!i&&n.failfast)throw new Error("Can't find active docs plugin for \""+t+'" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: '+Object.values(e).map((function(e){return e.path})).join(", "));return i}(u(),(0,o.TH)().pathname,e)}function m(e){void 0===e&&(e={});var t=f(e),n=(0,o.TH)().pathname;if(t)return{activePlugin:t,activeVersion:c(t.pluginData,n)}}function v(e){return p(e).versions}function h(e){var t=p(e);return s(t)}function g(e){return d(p(e),(0,o.TH)().pathname)}function b(e){return function(e,t){var n=s(e);return{latestDocSuggestion:d(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(p(e),(0,o.TH)().pathname)}},74367:function(e,t,n){"use strict";n.r(t);var o={onRouteDidUpdate:function(e){var t=e.location,n=e.previousLocation;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||(window.ga("set","page",t.pathname+t.search+t.hash),window.ga("send","pageview"))}};t.default=o},18320:function(e,t,n){"use strict";n.r(t);var o=n(74865),r=n.n(o);r().configure({showSpinner:!1});var i={onRouteUpdate:function(e){var t=e.location,n=e.previousLocation;if(n&&t.pathname!==n.pathname){var o=window.setTimeout((function(){r().start()}),200);return function(){return window.clearTimeout(o)}}},onRouteDidUpdate:function(){r().done()}};t.default=i},3310:function(e,t,n){"use strict";n.r(t);var o,r,i=n(87410),a=n(36809);o=i.Z,r=a.default.themeConfig.prism.additionalLanguages,globalThis.Prism=o,r.forEach((function(e){n(6726)("./prism-"+e)})),delete globalThis.Prism},39471:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var o=n(67294),r={iconExternalLink:"iconExternalLink_nPIU"};function i(e){var t=e.width,n=void 0===t?13.5:t,i=e.height,a=void 0===i?13.5:i;return o.createElement("svg",{width:n,height:a,"aria-hidden":"true",viewBox:"0 0 24 24",className:r.iconExternalLink},o.createElement("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"}))}},54774:function(e,t,n){"use strict";n.d(t,{Z:function(){return $t}});var o=n(67294),r=n(86010),i=n(44763),a=n(10833),s=n(83117),c=n(16550),d=n(95999),l=n(85936),u="docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){var e=(0,o.useRef)(null),t=(0,c.k6)().action,n=(0,o.useCallback)((function(e){e.preventDefault();var t,n=null!=(t=document.querySelector("main:first-of-type"))?t:document.getElementById(u);n&&p(n)}),[]);return(0,l.S)((function(n){var o=n.location;e.current&&!o.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}var m=(0,d.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function v(e){var t,n=null!=(t=e.children)?t:m,r=f(),i=r.containerRef,a=r.onClick;return o.createElement("div",{ref:i,role:"region","aria-label":m},o.createElement("a",(0,s.Z)({},e,{href:"#"+u,onClick:a}),n))}var h=n(35281),g=n(19727),b={skipToContent:"skipToContent_fXgn"};function x(){return o.createElement(v,{className:b.skipToContent})}var y=n(86668),_=n(59689),w=n(80102),k=["width","height","color","strokeWidth","className"];function E(e){var t=e.width,n=void 0===t?21:t,r=e.height,i=void 0===r?21:r,a=e.color,c=void 0===a?"currentColor":a,d=e.strokeWidth,l=void 0===d?1.2:d,u=(e.className,(0,w.Z)(e,k));return o.createElement("svg",(0,s.Z)({viewBox:"0 0 15 15",width:n,height:i},u),o.createElement("g",{stroke:c,strokeWidth:l},o.createElement("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})))}var S={closeButton:"closeButton_CVFx"};function P(e){return o.createElement("button",(0,s.Z)({type:"button","aria-label":(0,d.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"})},e,{className:(0,r.Z)("clean-btn close",S.closeButton,e.className)}),o.createElement(E,{width:14,height:14,strokeWidth:3.1}))}var T={content:"content_knG7"};function C(e){var t=(0,y.L)().announcementBar.content;return o.createElement("div",(0,s.Z)({},e,{className:(0,r.Z)(T.content,e.className),dangerouslySetInnerHTML:{__html:t}}))}var A={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function L(){var e=(0,y.L)().announcementBar,t=(0,_.nT)(),n=t.isActive,r=t.close;if(!n)return null;var i=e.backgroundColor,a=e.textColor,s=e.isCloseable;return o.createElement("div",{className:A.announcementBar,style:{backgroundColor:i,color:a},role:"banner"},s&&o.createElement("div",{className:A.announcementBarPlaceholder}),o.createElement(C,{className:A.announcementBarContent}),s&&o.createElement(P,{onClick:r,className:A.announcementBarClose}))}var R=n(93163),O=n(12466);var N=n(44700),I=n(13102),D=o.createContext(null);function M(e){var t,n,r,i,a,s,c,d=e.children,l=(t=(0,R.e)(),n=(0,I.HY)(),r=(0,o.useState)(!1),i=r[0],a=r[1],s=null!==n.component,c=(0,N.D9)(s),(0,o.useEffect)((function(){s&&!c&&a(!0)}),[s,c]),(0,o.useEffect)((function(){s?t.shown||a(!0):a(!1)}),[t.shown,s]),(0,o.useMemo)((function(){return[i,a]}),[i]));return o.createElement(D.Provider,{value:l},d)}function j(e){if(e.component){var t=e.component;return o.createElement(t,e.props)}}function B(){var e=(0,o.useContext)(D);if(!e)throw new N.i6("NavbarSecondaryMenuDisplayProvider");var t=e[0],n=e[1],r=(0,o.useCallback)((function(){return n(!1)}),[n]),i=(0,I.HY)();return(0,o.useMemo)((function(){return{shown:t,hide:r,content:j(i)}}),[r,i,t])}function F(e){var t=e.header,n=e.primaryMenu,i=e.secondaryMenu,a=B().shown;return o.createElement("div",{className:"navbar-sidebar"},t,o.createElement("div",{className:(0,r.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":a})},o.createElement("div",{className:"navbar-sidebar__item menu"},n),o.createElement("div",{className:"navbar-sidebar__item menu"},i)))}var z=n(92949),U=n(72389);function Z(e){return o.createElement("svg",(0,s.Z)({viewBox:"0 0 24 24",width:24,height:24},e),o.createElement("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"}))}function q(e){return o.createElement("svg",(0,s.Z)({viewBox:"0 0 24 24",width:24,height:24},e),o.createElement("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"}))}var $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function H(e){var t=e.className,n=e.value,i=e.onChange,a=(0,U.Z)(),s=(0,d.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===n?(0,d.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,d.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return o.createElement("div",{className:(0,r.Z)($.toggle,t)},o.createElement("button",{className:(0,r.Z)("clean-btn",$.toggleButton,!a&&$.toggleButtonDisabled),type:"button",onClick:function(){return i("dark"===n?"light":"dark")},disabled:!a,title:s,"aria-label":s,"aria-live":"polite"},o.createElement(Z,{className:(0,r.Z)($.toggleIcon,$.lightToggleIcon)}),o.createElement(q,{className:(0,r.Z)($.toggleIcon,$.darkToggleIcon)})))}var G=o.memo(H);function V(e){var t=e.className,n=(0,y.L)().colorMode.disableSwitch,r=(0,z.I)(),i=r.colorMode,a=r.setColorMode;return n?null:o.createElement(G,{className:t,value:i,onChange:a})}var W=n(21327);function K(){return o.createElement(W.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Y(){var e=(0,R.e)();return o.createElement("button",{type:"button","aria-label":(0,d.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:function(){return e.toggle()}},o.createElement(E,{color:"var(--ifm-color-emphasis-600)"}))}function Q(){return o.createElement("div",{className:"navbar-sidebar__brand"},o.createElement(K,null),o.createElement(V,{className:"margin-right--md"}),o.createElement(Y,null))}var X=n(39960),J=n(44996),ee=n(13919),te=n(98022),ne=n(39471),oe=["activeBasePath","activeBaseRegex","to","href","label","html","isDropdownLink","prependBaseUrlToHref"];function re(e){var t=e.activeBasePath,n=e.activeBaseRegex,r=e.to,i=e.href,a=e.label,c=e.html,d=e.isDropdownLink,l=e.prependBaseUrlToHref,u=(0,w.Z)(e,oe),p=(0,J.Z)(r),f=(0,J.Z)(t),m=(0,J.Z)(i,{forcePrependBaseUrl:!0}),v=a&&i&&!(0,ee.Z)(i),h=c?{dangerouslySetInnerHTML:{__html:c}}:{children:o.createElement(o.Fragment,null,a,v&&o.createElement(ne.Z,d&&{width:12,height:12}))};return i?o.createElement(X.Z,(0,s.Z)({href:l?m:i},u,h)):o.createElement(X.Z,(0,s.Z)({to:p,isNavLink:!0},(t||n)&&{isActive:function(e,t){return n?(0,te.F)(n,t.pathname):t.pathname.startsWith(f)}},u,h))}var ie=["className","isDropdownItem"],ae=["className","isDropdownItem"],se=["mobile","position"];function ce(e){var t=e.className,n=e.isDropdownItem,i=void 0!==n&&n,a=(0,w.Z)(e,ie),c=o.createElement(re,(0,s.Z)({className:(0,r.Z)(i?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:i},a));return i?o.createElement("li",null,c):c}function de(e){var t=e.className,n=(e.isDropdownItem,(0,w.Z)(e,ae));return o.createElement("li",{className:"menu__list-item"},o.createElement(re,(0,s.Z)({className:(0,r.Z)("menu__link",t)},n)))}function le(e){var t,n=e.mobile,r=void 0!==n&&n,i=(e.position,(0,w.Z)(e,se)),a=r?de:ce;return o.createElement(a,(0,s.Z)({},i,{activeClassName:null!=(t=i.activeClassName)?t:r?"menu__link--active":"navbar__link--active"}))}var ue=n(86043),pe=n(48596),fe=n(52263);var me=["items","position","className","onClick"],ve=["items","className","position","onClick"],he=["mobile"];function ge(e,t){return e.some((function(e){return function(e,t){return!!(0,pe.Mg)(e.to,t)||!!(0,te.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)}))}function be(e){var t,n=e.items,i=e.position,a=e.className,c=(e.onClick,(0,w.Z)(e,me)),d=(0,o.useRef)(null),l=(0,o.useState)(!1),u=l[0],p=l[1];return(0,o.useEffect)((function(){var e=function(e){d.current&&!d.current.contains(e.target)&&p(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),function(){document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[d]),o.createElement("div",{ref:d,className:(0,r.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===i,"dropdown--show":u})},o.createElement(re,(0,s.Z)({"aria-haspopup":"true","aria-expanded":u,role:"button",href:c.to?void 0:"#",className:(0,r.Z)("navbar__link",a)},c,{onClick:c.to?void 0:function(e){return e.preventDefault()},onKeyDown:function(e){"Enter"===e.key&&(e.preventDefault(),p(!u))}}),null!=(t=c.children)?t:c.label),o.createElement("ul",{className:"dropdown__menu"},n.map((function(e,t){return o.createElement(at,(0,s.Z)({isDropdownItem:!0,onKeyDown:function(e){if(t===n.length-1&&"Tab"===e.key){e.preventDefault(),p(!1);var o=d.current.nextElementSibling;if(o)(o instanceof HTMLAnchorElement?o:o.querySelector("a")).focus()}},activeClassName:"dropdown__link--active"},e,{key:t}))}))))}function xe(e){var t,n,i=e.items,a=e.className,d=(e.position,e.onClick),l=(0,w.Z)(e,ve),u=(n=(0,fe.Z)().siteConfig.baseUrl,(0,c.TH)().pathname.replace(n,"/")),p=ge(i,u),f=(0,ue.u)({initialState:function(){return!p}}),m=f.collapsed,v=f.toggleCollapsed,h=f.setCollapsed;return(0,o.useEffect)((function(){p&&h(!p)}),[u,p,h]),o.createElement("li",{className:(0,r.Z)("menu__list-item",{"menu__list-item--collapsed":m})},o.createElement(re,(0,s.Z)({role:"button",className:(0,r.Z)("menu__link menu__link--sublist menu__link--sublist-caret",a)},l,{onClick:function(e){e.preventDefault(),v()}}),null!=(t=l.children)?t:l.label),o.createElement(ue.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:m},i.map((function(e,t){return o.createElement(at,(0,s.Z)({mobile:!0,isDropdownItem:!0,onClick:d,activeClassName:"menu__link--active"},e,{key:t}))}))))}function ye(e){var t=e.mobile,n=void 0!==t&&t,r=(0,w.Z)(e,he),i=n?xe:be;return o.createElement(i,r)}var _e=n(94711),we=["width","height"];function ke(e){var t=e.width,n=void 0===t?20:t,r=e.height,i=void 0===r?20:r,a=(0,w.Z)(e,we);return o.createElement("svg",(0,s.Z)({viewBox:"0 0 24 24",width:n,height:i,"aria-hidden":!0},a),o.createElement("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"}))}var Ee={iconLanguage:"iconLanguage_nlXk"},Se=["mobile","dropdownItemsBefore","dropdownItemsAfter"];function Pe(){return o.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},o.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var Te=n(20830),Ce=["translations"];function Ae(){return Ae=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,o=new Array(t);n=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var Ne="Ctrl";var Ie=o.forwardRef((function(e,t){var n=e.translations,r=void 0===n?{}:n,i=Oe(e,Ce),a=r.buttonText,s=void 0===a?"Search":a,c=r.buttonAriaLabel,d=void 0===c?"Search":c,l=Le((0,o.useState)(null),2),u=l[0],p=l[1];return(0,o.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(Ne))}),[]),o.createElement("button",Ae({type:"button",className:"DocSearch DocSearch-Button","aria-label":d},i,{ref:t}),o.createElement("span",{className:"DocSearch-Button-Container"},o.createElement(Te.W,null),o.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),o.createElement("span",{className:"DocSearch-Button-Keys"},null!==u&&o.createElement(o.Fragment,null,o.createElement("kbd",{className:"DocSearch-Button-Key"},u===Ne?o.createElement(Pe,null):u),o.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),De=n(35742),Me=n(66177),je=n(239),Be=n(43320);var Fe=n(73935),ze={button:{buttonText:(0,d.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,d.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,d.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,d.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,d.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,d.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,d.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,d.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,d.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,d.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,d.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,d.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,d.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,d.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,d.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,d.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,d.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,d.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,d.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,d.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,d.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,d.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,d.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,d.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,d.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,d.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,d.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})},Ue=["contextualSearch","externalUrlRegex"],Ze=null;function qe(e){var t=e.hit,n=e.children;return o.createElement(X.Z,{to:t.url},n)}function $e(e){var t=e.state,n=e.onClose,r=(0,Me.O)().generateSearchPageLink;return o.createElement(X.Z,{to:r(t.query),onClick:n},o.createElement(d.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits}},"See all {count} results"))}function He(e){var t,r,i,a,d,l=e.contextualSearch,u=e.externalUrlRegex,p=(0,w.Z)(e,Ue),f=(0,fe.Z)().siteMetadata,m=(0,je.l)(),v=["language:"+(i=(0,Be._q)()).locale,i.tags.map((function(e){return"docusaurus_tag:"+e}))],h=null!=(t=null==(r=p.searchParameters)?void 0:r.facetFilters)?t:[],g=l?(a=h,[].concat((d=function(e){return"string"==typeof e?[e]:e})(v),d(a))):h,b=Object.assign({},p.searchParameters,{facetFilters:g}),x=(0,c.k6)(),y=(0,o.useRef)(null),_=(0,o.useRef)(null),k=(0,o.useState)(!1),E=k[0],S=k[1],P=(0,o.useState)(void 0),T=P[0],C=P[1],A=(0,o.useCallback)((function(){return Ze?Promise.resolve():Promise.all([n.e(76780).then(n.bind(n,76780)),Promise.all([n.e(40532),n.e(46945)]).then(n.bind(n,46945)),Promise.all([n.e(40532),n.e(18894)]).then(n.bind(n,18894))]).then((function(e){var t=e[0].DocSearchModal;Ze=t}))}),[]),L=(0,o.useCallback)((function(){A().then((function(){y.current=document.createElement("div"),document.body.insertBefore(y.current,document.body.firstChild),S(!0)}))}),[A,S]),R=(0,o.useCallback)((function(){var e;S(!1),null==(e=y.current)||e.remove()}),[S]),O=(0,o.useCallback)((function(e){A().then((function(){S(!0),C(e.key)}))}),[A,S,C]),N=(0,o.useRef)({navigate:function(e){var t=e.itemUrl;(0,te.F)(u,t)?window.location.href=t:x.push(t)}}).current,I=(0,o.useRef)((function(e){return p.transformItems?p.transformItems(e):e.map((function(e){return Object.assign({},e,{url:m(e.url)})}))})).current,D=(0,o.useMemo)((function(){return function(e){return o.createElement($e,(0,s.Z)({},e,{onClose:R}))}}),[R]),M=(0,o.useCallback)((function(e){return e.addAlgoliaAgent("docusaurus",f.docusaurusVersion),e}),[f.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,r=e.onClose,i=e.onInput,a=e.searchButtonRef;o.useEffect((function(){function e(e){(27===e.keyCode&&t||"k"===e.key.toLowerCase()&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?r():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),a&&a.current===document.activeElement&&i&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&i(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,r,i,a])}({isOpen:E,onOpen:L,onClose:R,onInput:O,searchButtonRef:_}),o.createElement(o.Fragment,null,o.createElement(De.Z,null,o.createElement("link",{rel:"preconnect",href:"https://"+p.appId+"-dsn.algolia.net",crossOrigin:"anonymous"})),o.createElement(Ie,{onTouchStart:A,onFocus:A,onMouseOver:A,onClick:L,ref:_,translations:ze.button}),E&&Ze&&y.current&&(0,Fe.createPortal)(o.createElement(Ze,(0,s.Z)({onClose:R,initialScrollY:window.scrollY,initialQuery:T,navigator:N,transformItems:I,hitComponent:qe,transformSearchClient:M},p.searchPagePath&&{resultsFooterComponent:D},p,{searchParameters:b,placeholder:ze.placeholder,translations:ze.modal})),y.current))}function Ge(){var e=(0,fe.Z)().siteConfig;return o.createElement(He,e.themeConfig.algolia)}var Ve={searchBox:"searchBox_ZlJk"};function We(e){var t=e.children,n=e.className;return o.createElement("div",{className:(0,r.Z)(n,Ve.searchBox)},t)}var Ke=n(80143),Ye=n(24575),Qe=["docId","label","docsPluginId"];var Xe=["sidebarId","label","docsPluginId"];var Je=["label","to","docsPluginId"],et=function(e){return e.docs.find((function(t){return t.id===e.mainDocId}))};var tt=n(60373),nt=["mobile","docsPluginId","dropdownActiveClassDisabled","dropdownItemsBefore","dropdownItemsAfter"],ot=function(e){return e.docs.find((function(t){return t.id===e.mainDocId}))};var rt={default:le,localeDropdown:function(e){var t=e.mobile,n=e.dropdownItemsBefore,r=e.dropdownItemsAfter,i=(0,w.Z)(e,Se),a=(0,fe.Z)().i18n,l=a.currentLocale,u=a.locales,p=a.localeConfigs,f=(0,_e.l)(),m=(0,c.TH)(),v=m.search,h=m.hash,g=u.map((function(e){var n=""+("pathname://"+f.createUrl({locale:e,fullyQualified:!1}))+v+h;return{label:p[e].label,lang:p[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===l?t?"menu__link--active":"dropdown__link--active":""}})),b=[].concat(n,g,r),x=t?(0,d.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):p[l].label;return o.createElement(ye,(0,s.Z)({},i,{mobile:t,label:o.createElement(o.Fragment,null,o.createElement(ke,{className:Ee.iconLanguage}),x),items:b}))},search:function(e){var t=e.mobile,n=e.className;return t?null:o.createElement(We,{className:n},o.createElement(Ge,null))},dropdown:ye,html:function(e){var t=e.value,n=e.className,i=e.mobile,a=void 0!==i&&i,s=e.isDropdownItem,c=void 0!==s&&s,d=c?"li":"div";return o.createElement(d,{className:(0,r.Z)({navbar__item:!a&&!c,"menu__list-item":a},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){var t=e.docId,n=e.label,r=e.docsPluginId,i=(0,w.Z)(e,Qe),a=(0,Ke.Iw)(r).activeDoc,c=(0,Ye.vY)(t,r);return null===c?null:o.createElement(le,(0,s.Z)({exact:!0},i,{isActive:function(){return(null==a?void 0:a.path)===c.path||!(null==a||!a.sidebar)&&a.sidebar===c.sidebar},label:null!=n?n:c.id,to:c.path}))},docSidebar:function(e){var t=e.sidebarId,n=e.label,r=e.docsPluginId,i=(0,w.Z)(e,Xe),a=(0,Ke.Iw)(r).activeDoc,c=(0,Ye.oz)(t,r).link;if(!c)throw new Error('DocSidebarNavbarItem: Sidebar with ID "'+t+"\" doesn't have anything to be linked to.");return o.createElement(le,(0,s.Z)({exact:!0},i,{isActive:function(){return(null==a?void 0:a.sidebar)===t},label:null!=n?n:c.label,to:c.path}))},docsVersion:function(e){var t=e.label,n=e.to,r=e.docsPluginId,i=(0,w.Z)(e,Je),a=(0,Ye.lO)(r)[0],c=null!=t?t:a.label,d=null!=n?n:et(a).path;return o.createElement(le,(0,s.Z)({},i,{label:c,to:d}))},docsVersionDropdown:function(e){var t=e.mobile,n=e.docsPluginId,r=e.dropdownActiveClassDisabled,i=e.dropdownItemsBefore,a=e.dropdownItemsAfter,l=(0,w.Z)(e,nt),u=(0,c.TH)(),p=u.search,f=u.hash,m=(0,Ke.Iw)(n),v=(0,Ke.gB)(n),h=(0,tt.J)(n).savePreferredVersionName,g=v.map((function(e){var t,n=null!=(t=m.alternateDocVersions[e.name])?t:ot(e);return{label:e.label,to:""+n.path+p+f,isActive:function(){return e===m.activeVersion},onClick:function(){return h(e.name)}}})),b=[].concat(i,g,a),x=(0,Ye.lO)(n)[0],y=t&&b.length>1?(0,d.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):x.label,_=t&&b.length>1?void 0:ot(x).path;return b.length<=1?o.createElement(le,(0,s.Z)({},l,{mobile:t,label:y,to:_,isActive:r?function(){return!1}:void 0})):o.createElement(ye,(0,s.Z)({},l,{mobile:t,label:y,to:_,items:b,isActive:r?function(){return!1}:void 0}))}},it=["type"];function at(e){var t=e.type,n=(0,w.Z)(e,it),r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),i=rt[r];if(!i)throw new Error('No NavbarItem component found for type "'+t+'".');return o.createElement(i,n)}function st(){var e=(0,R.e)(),t=(0,y.L)().navbar.items;return o.createElement("ul",{className:"menu__list"},t.map((function(t,n){return o.createElement(at,(0,s.Z)({mobile:!0},t,{onClick:function(){return e.toggle()},key:n}))})))}function ct(e){return o.createElement("button",(0,s.Z)({},e,{type:"button",className:"clean-btn navbar-sidebar__back"}),o.createElement(d.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"},"\u2190 Back to main menu"))}function dt(){var e=0===(0,y.L)().navbar.items.length,t=B();return o.createElement(o.Fragment,null,!e&&o.createElement(ct,{onClick:function(){return t.hide()}}),t.content)}function lt(){var e,t=(0,R.e)();return void 0===(e=t.shown)&&(e=!0),(0,o.useEffect)((function(){return document.body.style.overflow=e?"hidden":"visible",function(){document.body.style.overflow="visible"}}),[e]),t.shouldRender?o.createElement(F,{header:o.createElement(Q,null),primaryMenu:o.createElement(st,null),secondaryMenu:o.createElement(dt,null)}):null}var ut={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function pt(e){return o.createElement("div",(0,s.Z)({role:"presentation"},e,{className:(0,r.Z)("navbar-sidebar__backdrop",e.className)}))}function ft(e){var t=e.children,n=(0,y.L)().navbar,i=n.hideOnScroll,a=n.style,s=(0,R.e)(),c=function(e){var t=(0,o.useState)(e),n=t[0],r=t[1],i=(0,o.useRef)(!1),a=(0,o.useRef)(0),s=(0,o.useCallback)((function(e){null!==e&&(a.current=e.getBoundingClientRect().height)}),[]);return(0,O.RF)((function(t,n){var o=t.scrollY;if(e)if(o=s?r(!1):o+d0&&o.createElement(Rt,{links:n}),logo:r&&o.createElement(Dt,{logo:r}),copyright:t&&o.createElement(Mt,{copyright:t})})}var Ft=o.memo(Bt),zt=(0,N.Qc)([z.S,_.pl,O.OC,tt.L5,a.VC,function(e){var t=e.children;return o.createElement(I.n2,null,o.createElement(R.M,null,o.createElement(M,null,t)))}]);function Ut(e){var t=e.children;return o.createElement(zt,null,t)}function Zt(e){var t=e.error,n=e.tryAgain;return o.createElement("main",{className:"container margin-vert--xl"},o.createElement("div",{className:"row"},o.createElement("div",{className:"col col--6 col--offset-3"},o.createElement("h1",{className:"hero__title"},o.createElement(d.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed"},"This page crashed.")),o.createElement("p",null,t.message),o.createElement("div",null,o.createElement("button",{type:"button",onClick:n},o.createElement(d.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again when the page crashed"},"Try again"))))))}var qt={mainWrapper:"mainWrapper_z2l0"};function $t(e){var t=e.children,n=e.noFooter,s=e.wrapperClassName,c=e.title,d=e.description;return(0,g.t)(),o.createElement(Ut,null,o.createElement(a.d,{title:c,description:d}),o.createElement(x,null),o.createElement(L,null),o.createElement(wt,null),o.createElement("div",{id:u,className:(0,r.Z)(h.k.wrapper.main,qt.mainWrapper,s)},o.createElement(i.Z,{fallback:function(e){return o.createElement(Zt,e)}},t)),!n&&o.createElement(Ft,null))}},21327:function(e,t,n){"use strict";n.d(t,{Z:function(){return f}});var o=n(83117),r=n(80102),i=n(67294),a=n(39960),s=n(44996),c=n(52263),d=n(86668),l=n(50941),u=["imageClassName","titleClassName"];function p(e){var t=e.logo,n=e.alt,o=e.imageClassName,r={light:(0,s.Z)(t.src),dark:(0,s.Z)(t.srcDark||t.src)},a=i.createElement(l.Z,{className:t.className,sources:r,height:t.height,width:t.width,alt:n,style:t.style});return o?i.createElement("div",{className:o},a):a}function f(e){var t,n=(0,c.Z)().siteConfig.title,l=(0,d.L)().navbar,f=l.title,m=l.logo,v=e.imageClassName,h=e.titleClassName,g=(0,r.Z)(e,u),b=(0,s.Z)((null==m?void 0:m.href)||"/"),x=f?"":n,y=null!=(t=null==m?void 0:m.alt)?t:x;return i.createElement(a.Z,(0,o.Z)({to:b},g,(null==m?void 0:m.target)&&{target:m.target}),m&&i.createElement(p,{logo:m,alt:y,imageClassName:v}),null!=f&&i.createElement("b",{className:h},f))}},90197:function(e,t,n){"use strict";n.d(t,{Z:function(){return i}});var o=n(67294),r=n(35742);function i(e){var t=e.locale,n=e.version,i=e.tag,a=t;return o.createElement(r.Z,null,t&&o.createElement("meta",{name:"docusaurus_locale",content:t}),n&&o.createElement("meta",{name:"docusaurus_version",content:n}),i&&o.createElement("meta",{name:"docusaurus_tag",content:i}),a&&o.createElement("meta",{name:"docsearch:language",content:a}),n&&o.createElement("meta",{name:"docsearch:version",content:n}),i&&o.createElement("meta",{name:"docsearch:docusaurus_tag",content:i}))}},50941:function(e,t,n){"use strict";n.d(t,{Z:function(){return u}});var o=n(83117),r=n(80102),i=n(67294),a=n(86010),s=n(72389),c=n(92949),d={themedImage:"themedImage_ToTc","themedImage--light":"themedImage--light_HNdA","themedImage--dark":"themedImage--dark_i4oU"},l=["sources","className","alt"];function u(e){var t=(0,s.Z)(),n=(0,c.I)().colorMode,u=e.sources,p=e.className,f=e.alt,m=(0,r.Z)(e,l),v=t?"dark"===n?["dark"]:["light"]:["light","dark"];return i.createElement(i.Fragment,null,v.map((function(e){return i.createElement("img",(0,o.Z)({key:e,src:u[e],alt:f,className:(0,a.Z)(d.themedImage,d["themedImage--"+e],p)},m))})))}},86043:function(e,t,n){"use strict";n.d(t,{u:function(){return l},z:function(){return b}});var o=n(83117),r=n(80102),i=n(67294),a=n(10412),s=["collapsed"],c=["lazy"],d="ease-in-out";function l(e){var t=e.initialState,n=(0,i.useState)(null!=t&&t),o=n[0],r=n[1],a=(0,i.useCallback)((function(){r((function(e){return!e}))}),[]);return{collapsed:o,setCollapsed:r,toggleCollapsed:a}}var u={display:"none",overflow:"hidden",height:"0px"},p={display:"block",overflow:"visible",height:"auto"};function f(e,t){var n=t?u:p;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function m(e){var t=e.collapsibleRef,n=e.collapsed,o=e.animation,r=(0,i.useRef)(!1);(0,i.useEffect)((function(){var e,i=t.current;function a(){var e,t,n=i.scrollHeight,r=null!=(e=null==o?void 0:o.duration)?e:function(e){var t=e/36;return Math.round(10*(4+15*Math.pow(t,.25)+t/5))}(n);return{transition:"height "+r+"ms "+(null!=(t=null==o?void 0:o.easing)?t:d),height:n+"px"}}function s(){var e=a();i.style.transition=e.transition,i.style.height=e.height}if(!r.current)return f(i,n),void(r.current=!0);return i.style.willChange="height",e=requestAnimationFrame((function(){n?(s(),requestAnimationFrame((function(){i.style.height=u.height,i.style.overflow=u.overflow}))):(i.style.display="block",requestAnimationFrame((function(){s()})))})),function(){return cancelAnimationFrame(e)}}),[t,n,o])}function v(e){if(!a.Z.canUseDOM)return e?u:p}function h(e){var t=e.as,n=void 0===t?"div":t,o=e.collapsed,r=e.children,a=e.animation,s=e.onCollapseTransitionEnd,c=e.className,d=e.disableSSRStyle,l=(0,i.useRef)(null);return m({collapsibleRef:l,collapsed:o,animation:a}),i.createElement(n,{ref:l,style:d?void 0:v(o),onTransitionEnd:function(e){"height"===e.propertyName&&(f(l.current,o),null==s||s(o))},className:c},r)}function g(e){var t=e.collapsed,n=(0,r.Z)(e,s),a=(0,i.useState)(!t),c=a[0],d=a[1],l=(0,i.useState)(t),u=l[0],p=l[1];return(0,i.useLayoutEffect)((function(){t||d(!0)}),[t]),(0,i.useLayoutEffect)((function(){c&&p(t)}),[c,t]),c?i.createElement(h,(0,o.Z)({},n,{collapsed:u})):null}function b(e){var t=e.lazy,n=(0,r.Z)(e,c),o=t?g:h;return i.createElement(o,n)}},59689:function(e,t,n){"use strict";n.d(t,{nT:function(){return m},pl:function(){return f}});var o=n(67294),r=n(72389),i=n(50012),a=n(44700),s=n(86668),c=(0,i.WA)("docusaurus.announcement.dismiss"),d=(0,i.WA)("docusaurus.announcement.id"),l=function(){return"true"===c.get()},u=function(e){return c.set(String(e))},p=o.createContext(null);function f(e){var t=e.children,n=function(){var e=(0,s.L)().announcementBar,t=(0,r.Z)(),n=(0,o.useState)((function(){return!!t&&l()})),i=n[0],a=n[1];(0,o.useEffect)((function(){a(l())}),[]);var c=(0,o.useCallback)((function(){u(!0),a(!0)}),[]);return(0,o.useEffect)((function(){if(e){var t=e.id,n=d.get();"annoucement-bar"===n&&(n="announcement-bar");var o=t!==n;d.set(t),o&&u(!1),!o&&l()||a(!1)}}),[e]),(0,o.useMemo)((function(){return{isActive:!!e&&!i,close:c}}),[e,i,c])}();return o.createElement(p.Provider,{value:n},t)}function m(){var e=(0,o.useContext)(p);if(!e)throw new a.i6("AnnouncementBarProvider");return e}},92949:function(e,t,n){"use strict";n.d(t,{I:function(){return h},S:function(){return v}});var o=n(67294),r=n(10412),i=n(44700),a=n(50012),s=n(86668),c=o.createContext(void 0),d="theme",l=(0,a.WA)(d),u={light:"light",dark:"dark"},p=function(e){return e===u.dark?u.dark:u.light},f=function(e){return r.Z.canUseDOM?p(document.documentElement.getAttribute("data-theme")):p(e)},m=function(e){l.set(p(e))};function v(e){var t=e.children,n=function(){var e=(0,s.L)().colorMode,t=e.defaultMode,n=e.disableSwitch,r=e.respectPrefersColorScheme,i=(0,o.useState)(f(t)),a=i[0],c=i[1];(0,o.useEffect)((function(){n&&l.del()}),[n]);var v=(0,o.useCallback)((function(e,n){void 0===n&&(n={});var o=n.persist,i=void 0===o||o;e?(c(e),i&&m(e)):(c(r?window.matchMedia("(prefers-color-scheme: dark)").matches?u.dark:u.light:t),l.del())}),[r,t]);(0,o.useEffect)((function(){document.documentElement.setAttribute("data-theme",p(a))}),[a]),(0,o.useEffect)((function(){if(!n){var e=function(e){if(e.key===d){var t=l.get();null!==t&&v(p(t))}};return window.addEventListener("storage",e),function(){return window.removeEventListener("storage",e)}}}),[n,v]);var h=(0,o.useRef)(!1);return(0,o.useEffect)((function(){if(!n||r){var e=window.matchMedia("(prefers-color-scheme: dark)"),t=function(){window.matchMedia("print").matches||h.current?h.current=window.matchMedia("print").matches:v(null)};return e.addListener(t),function(){return e.removeListener(t)}}}),[v,n,r]),(0,o.useMemo)((function(){return{colorMode:a,setColorMode:v,get isDarkTheme(){return a===u.dark},setLightTheme:function(){v(u.light)},setDarkTheme:function(){v(u.dark)}}}),[a,v])}();return o.createElement(c.Provider,{value:n},t)}function h(){var e=(0,o.useContext)(c);if(null==e)throw new i.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},60373:function(e,t,n){"use strict";n.d(t,{J:function(){return b},L5:function(){return h},Oh:function(){return x}});var o=n(67294),r=n(80143),i=n(29935),a=n(86668),s=n(24575),c=n(44700),d=n(50012),l=function(e){return"docs-preferred-version-"+e},u={save:function(e,t,n){(0,d.WA)(l(e),{persistence:t}).set(n)},read:function(e,t){return(0,d.WA)(l(e),{persistence:t}).get()},clear:function(e,t){(0,d.WA)(l(e),{persistence:t}).del()}},p=function(e){return Object.fromEntries(e.map((function(e){return[e,{preferredVersionName:null}]})))};var f=o.createContext(null);function m(){var e=(0,r._r)(),t=(0,a.L)().docs.versionPersistence,n=(0,o.useMemo)((function(){return Object.keys(e)}),[e]),i=(0,o.useState)((function(){return p(n)})),s=i[0],c=i[1];return(0,o.useEffect)((function(){c(function(e){var t=e.pluginIds,n=e.versionPersistence,o=e.allDocsData;return Object.fromEntries(t.map((function(e){return[e,(t=e,r=u.read(t,n),o[t].versions.some((function(e){return e.name===r}))?{preferredVersionName:r}:(u.clear(t,n),{preferredVersionName:null}))];var t,r})))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]),[s,(0,o.useMemo)((function(){return{savePreferredVersion:function(e,n){u.save(e,t,n),c((function(t){var o;return Object.assign({},t,((o={})[e]={preferredVersionName:n},o))}))}}}),[t])]}function v(e){var t=e.children,n=m();return o.createElement(f.Provider,{value:n},t)}function h(e){var t=e.children;return s.cE?o.createElement(v,null,t):o.createElement(o.Fragment,null,t)}function g(){var e=(0,o.useContext)(f);if(!e)throw new c.i6("DocsPreferredVersionContextProvider");return e}function b(e){var t;void 0===e&&(e=i.m);var n=(0,r.zh)(e),a=g(),s=a[0],c=a[1],d=s[e].preferredVersionName;return{preferredVersion:null!=(t=n.versions.find((function(e){return e.name===d})))?t:null,savePreferredVersionName:(0,o.useCallback)((function(t){c.savePreferredVersion(e,t)}),[c,e])}}function x(){var e=(0,r._r)(),t=g()[0];var n=Object.keys(e);return Object.fromEntries(n.map((function(n){return[n,(o=n,i=e[o],a=t[o].preferredVersionName,null!=(r=i.versions.find((function(e){return e.name===a})))?r:null)];var o,r,i,a})))}},1116:function(e,t,n){"use strict";n.d(t,{V:function(){return c},b:function(){return s}});var o=n(67294),r=n(44700),i=Symbol("EmptyContext"),a=o.createContext(i);function s(e){var t=e.children,n=e.name,r=e.items,i=(0,o.useMemo)((function(){return n&&r?{name:n,items:r}:null}),[n,r]);return o.createElement(a.Provider,{value:i},t)}function c(){var e=(0,o.useContext)(a);if(e===i)throw new r.i6("DocsSidebarProvider");return e}},93163:function(e,t,n){"use strict";n.d(t,{M:function(){return u},e:function(){return p}});var o=n(67294),r=n(13102),i=n(87524),a=n(91980),s=n(86668),c=n(44700),d=o.createContext(void 0);function l(){var e,t=(e=(0,r.HY)(),0===(0,s.L)().navbar.items.length&&!e.component),n=(0,i.i)(),c=!t&&"mobile"===n,d=(0,o.useState)(!1),l=d[0],u=d[1];(0,a.Rb)((function(){if(l)return u(!1),!1}));var p=(0,o.useCallback)((function(){u((function(e){return!e}))}),[]);return(0,o.useEffect)((function(){"desktop"===n&&u(!1)}),[n]),(0,o.useMemo)((function(){return{disabled:t,shouldRender:c,toggle:p,shown:l}}),[t,c,p,l])}function u(e){var t=e.children,n=l();return o.createElement(d.Provider,{value:n},t)}function p(){var e=o.useContext(d);if(void 0===e)throw new c.i6("NavbarMobileSidebarProvider");return e}},13102:function(e,t,n){"use strict";n.d(t,{HY:function(){return s},Zo:function(){return c},n2:function(){return a}});var o=n(67294),r=n(44700),i=o.createContext(null);function a(e){var t=e.children,n=(0,o.useState)({component:null,props:null});return o.createElement(i.Provider,{value:n},t)}function s(){var e=(0,o.useContext)(i);if(!e)throw new r.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){var t=e.component,n=e.props,a=(0,o.useContext)(i);if(!a)throw new r.i6("NavbarSecondaryMenuContentProvider");var s=a[1],c=(0,r.Ql)(n);return(0,o.useEffect)((function(){s({component:t,props:c})}),[s,t,c]),(0,o.useEffect)((function(){return function(){return s({component:null,props:null})}}),[s]),null}},19727:function(e,t,n){"use strict";n.d(t,{h:function(){return r},t:function(){return i}});var o=n(67294),r="navigation-with-keyboard";function i(){(0,o.useEffect)((function(){function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(r),"mousedown"===e.type&&document.body.classList.remove(r)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),function(){document.body.classList.remove(r),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},66177:function(e,t,n){"use strict";n.d(t,{O:function(){return s}});var o=n(67294),r=n(16550),i=n(52263),a="q";function s(){var e=(0,r.k6)(),t=(0,i.Z)().siteConfig,n=t.baseUrl,s=t.themeConfig.algolia.searchPagePath,c=(0,o.useState)(""),d=c[0],l=c[1];return(0,o.useEffect)((function(){var e,t=null!=(e=new URLSearchParams(window.location.search).get(a))?e:"";l(t)}),[]),{searchQuery:d,setSearchQuery:(0,o.useCallback)((function(t){var n=new URLSearchParams(window.location.search);t?n.set(a,t):n.delete(a),e.replace({search:n.toString()}),l(t)}),[e]),generateSearchPageLink:(0,o.useCallback)((function(e){return""+n+s+"?"+a+"="+encodeURIComponent(e)}),[n,s])}}},87524:function(e,t,n){"use strict";n.d(t,{i:function(){return d}});var o=n(67294),r=n(10412),i={desktop:"desktop",mobile:"mobile",ssr:"ssr"},a=996;function s(){return r.Z.canUseDOM?window.innerWidth>a?i.desktop:i.mobile:i.ssr}var c=!1;function d(){var e=(0,o.useState)((function(){return c?"ssr":s()})),t=e[0],n=e[1];return(0,o.useEffect)((function(){function e(){n(s())}var t=c?window.setTimeout(e,1e3):void 0;return window.addEventListener("resize",e),function(){window.removeEventListener("resize",e),clearTimeout(t)}}),[]),t}},35281:function(e,t,n){"use strict";n.d(t,{k:function(){return o}});var o={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",admonitionType:function(e){return"theme-admonition-"+e}},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:function(e){return"theme-doc-sidebar-item-category-level-"+e},docSidebarItemLinkLevel:function(e){return"theme-doc-sidebar-item-link-level-"+e}},blog:{}}},24575:function(e,t,n){"use strict";function o(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}n.d(t,{Wl:function(){return m},_F:function(){return g},cE:function(){return f},hI:function(){return k},lO:function(){return y},vY:function(){return w},oz:function(){return _},s1:function(){return x}});var i=n(67294),a=n(16550),s=n(18790),c=n(80143),d=n(60373),l=n(1116),u=n(67392),p=n(48596),f=!!c._r;function m(e){if(e.href)return e.href;for(var t,n=r(e.items);!(t=n()).done;){var o=t.value;if("link"===o.type)return o.href;if("category"===o.type){var i=m(o);if(i)return i}}}var v=function(e,t){return void 0!==e&&(0,p.Mg)(e,t)},h=function(e,t){return e.some((function(e){return g(e,t)}))};function g(e,t){return"link"===e.type?v(e.href,t):"category"===e.type&&(v(e.href,t)||h(e.items,t))}function b(e){var t=e.sidebarItems,n=e.pathname,o=e.onlyCategories,i=void 0!==o&&o,a=[];return function e(t){for(var o,s=r(t);!(o=s()).done;){var c=o.value;if("category"===c.type&&((0,p.Mg)(c.href,n)||e(c.items))||"link"===c.type&&(0,p.Mg)(c.href,n))return i&&"category"!==c.type||a.unshift(c),!0}return!1}(t),a}function x(){var e,t=(0,l.V)(),n=(0,a.TH)().pathname;return!1!==(null==(e=(0,c.gA)())?void 0:e.pluginData.breadcrumbs)&&t?b({sidebarItems:t.items,pathname:n}):null}function y(e){var t=(0,c.Iw)(e).activeVersion,n=(0,d.J)(e).preferredVersion,o=(0,c.yW)(e);return(0,i.useMemo)((function(){return(0,u.j)([t,n,o].filter(Boolean))}),[t,n,o])}function _(e,t){var n=y(t);return(0,i.useMemo)((function(){var t=n.flatMap((function(e){return e.sidebars?Object.entries(e.sidebars):[]})),o=t.find((function(t){return t[0]===e}));if(!o)throw new Error("Can't find any sidebar with id \""+e+'" in version'+(n.length>1?"s":"")+" "+n.map((function(e){return e.name})).join(", ")+'".\n Available sidebar ids are:\n - '+Object.keys(t).join("\n- "));return o[1]}),[e,n])}function w(e,t){var n=y(t);return(0,i.useMemo)((function(){var t=n.flatMap((function(e){return e.docs})),o=t.find((function(t){return t.id===e}));if(!o){if(n.flatMap((function(e){return e.draftIds})).includes(e))return null;throw new Error("DocNavbarItem: couldn't find any doc with id \""+e+'" in version'+(n.length>1?"s":"")+" "+n.map((function(e){return e.name})).join(", ")+'".\nAvailable doc ids are:\n- '+(0,u.j)(t.map((function(e){return e.id}))).join("\n- "))}return o}),[e,n])}function k(e){var t=e.route,n=e.versionMetadata,o=(0,a.TH)(),r=t.routes,i=r.find((function(e){return(0,a.LX)(o.pathname,e)}));if(!i)return null;var c=i.sidebar,d=c?n.docsSidebars[c]:void 0;return{docElement:(0,s.H)(r),sidebarName:c,sidebarItems:d}}},82128:function(e,t,n){"use strict";n.d(t,{p:function(){return r}});var o=n(52263);function r(e){var t=(0,o.Z)().siteConfig,n=t.title,r=t.titleDelimiter;return null!=e&&e.trim().length?e.trim()+" "+r+" "+n:n}},91980:function(e,t,n){"use strict";n.d(t,{Rb:function(){return s},_X:function(){return c}});var o=n(67294),r=n(16550),i=n(61688),a=n(44700);function s(e){!function(e){var t=(0,r.k6)(),n=(0,a.zX)(e);(0,o.useEffect)((function(){return t.block((function(e,t){return n(e,t)}))}),[t,n])}((function(t,n){if("POP"===n)return e(t,n)}))}function c(e){return t=function(t){return null===e?null:new URLSearchParams(t.location.search).get(e)},n=(0,r.k6)(),(0,i.useSyncExternalStore)(n.listen,(function(){return t(n)}),(function(){return t(n)}));var t,n}},67392:function(e,t,n){"use strict";function o(e,t){return void 0===t&&(t=function(e,t){return e===t}),e.filter((function(n,o){return e.findIndex((function(e){return t(e,n)}))!==o}))}function r(e){return Array.from(new Set(e))}n.d(t,{j:function(){return r},l:function(){return o}})},10833:function(e,t,n){"use strict";n.d(t,{FG:function(){return p},d:function(){return l},VC:function(){return f}});var o=n(67294),r=n(86010),i=n(35742),a=n(30226);function s(){var e=o.useContext(a._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var c=n(44996),d=n(82128);function l(e){var t=e.title,n=e.description,r=e.keywords,a=e.image,s=e.children,l=(0,d.p)(t),u=(0,c.C)().withBaseUrl,p=a?u(a,{absolute:!0}):void 0;return o.createElement(i.Z,null,t&&o.createElement("title",null,l),t&&o.createElement("meta",{property:"og:title",content:l}),n&&o.createElement("meta",{name:"description",content:n}),n&&o.createElement("meta",{property:"og:description",content:n}),r&&o.createElement("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&o.createElement("meta",{property:"og:image",content:p}),p&&o.createElement("meta",{name:"twitter:image",content:p}),s)}var u=o.createContext(void 0);function p(e){var t=e.className,n=e.children,a=o.useContext(u),s=(0,r.Z)(a,t);return o.createElement(u.Provider,{value:s},o.createElement(i.Z,null,o.createElement("html",{className:s})),n)}function f(e){var t=e.children,n=s(),i="plugin-"+n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,""),a="plugin-id-"+n.plugin.id;return o.createElement(p,{className:(0,r.Z)(i,a)},t)}},44700:function(e,t,n){"use strict";n.d(t,{i6:function(){return f},Qc:function(){return v},zX:function(){return u},D9:function(){return p},Ql:function(){return m}});var o=n(28900),r=n(21073);function i(e){return i=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},i(e)}var a=n(79817);function s(e,t,n){return s=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}()?Reflect.construct.bind():function(e,t,n){var o=[null];o.push.apply(o,t);var r=new(Function.bind.apply(e,o));return n&&(0,a.Z)(r,n.prototype),r},s.apply(null,arguments)}function c(e){var t="function"==typeof Map?new Map:void 0;return c=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,o)}function o(){return s(e,arguments,i(this).constructor)}return o.prototype=Object.create(e.prototype,{constructor:{value:o,enumerable:!1,writable:!0,configurable:!0}}),(0,a.Z)(o,e)},c(e)}var d=n(67294),l=n(10412).Z.canUseDOM?d.useLayoutEffect:d.useEffect;function u(e){var t=(0,d.useRef)(e);return l((function(){t.current=e}),[e]),(0,d.useCallback)((function(){return t.current.apply(t,arguments)}),[])}function p(e){var t=(0,d.useRef)();return l((function(){t.current=e})),t.current}var f=function(e){function t(t,n){var r,i,a,s,c;return(c=e.call(this)||this).name="ReactContextError",c.message="Hook "+(null!=(r=null==(i=c.stack)||null==(a=i.split("\n")[1])||null==(s=a.match((0,o.Z)(/at (?:\w+\.)?(\w+)/,{name:1})))?void 0:s.groups.name)?r:"")+" is called outside the <"+t+">. "+(null!=n?n:""),c}return(0,r.Z)(t,e),t}(c(Error));function m(e){var t=Object.entries(e);return t.sort((function(e,t){return e[0].localeCompare(t[0])})),(0,d.useMemo)((function(){return e}),t.flat())}function v(e){return function(t){var n=t.children;return d.createElement(d.Fragment,null,e.reduceRight((function(e,t){return d.createElement(t,null,e)}),n))}}},98022:function(e,t,n){"use strict";function o(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:function(){return o}})},48596:function(e,t,n){"use strict";n.d(t,{Mg:function(){return a},Ns:function(){return s}});var o=n(67294),r=n(723),i=n(52263);function a(e,t){var n=function(e){var t;return null==(t=!e||e.endsWith("/")?e:e+"/")?void 0:t.toLowerCase()};return n(e)===n(t)}function s(){var e=(0,i.Z)().siteConfig.baseUrl;return(0,o.useMemo)((function(){return function(e){var t=e.baseUrl;function n(e){return e.path===t&&!0===e.exact}function o(e){return e.path===t&&!e.exact}return function e(t){if(0!==t.length)return t.find(n)||e(t.filter(o).flatMap((function(e){var t;return null!=(t=e.routes)?t:[]})))}(e.routes)}({routes:r.Z,baseUrl:e})}),[e])}},12466:function(e,t,n){"use strict";n.d(t,{Ct:function(){return f},OC:function(){return c},RF:function(){return u},o5:function(){return p}});var o=n(67294),r=n(10412),i=n(72389),a=n(44700);var s=o.createContext(void 0);function c(e){var t,n=e.children,r=(t=(0,o.useRef)(!0),(0,o.useMemo)((function(){return{scrollEventsEnabledRef:t,enableScrollEvents:function(){t.current=!0},disableScrollEvents:function(){t.current=!1}}}),[]));return o.createElement(s.Provider,{value:r},n)}function d(){var e=(0,o.useContext)(s);if(null==e)throw new a.i6("ScrollControllerProvider");return e}var l=function(){return r.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null};function u(e,t){void 0===t&&(t=[]);var n=d().scrollEventsEnabledRef,r=(0,o.useRef)(l()),i=(0,a.zX)(e);(0,o.useEffect)((function(){var e=function(){if(n.current){var e=l();i(e,r.current),r.current=e}},t={passive:!0};return e(),window.addEventListener("scroll",e,t),function(){return window.removeEventListener("scroll",e,t)}}),[i,n].concat(t))}function p(){var e,t,n,r=d(),i=(e=(0,o.useRef)({elem:null,top:0}),t=(0,o.useCallback)((function(t){e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,o.useCallback)((function(){var t=e.current,n=t.elem,o=t.top;if(!n)return{restored:!1};var r=n.getBoundingClientRect().top-o;return r&&window.scrollBy({left:0,top:r}),e.current={elem:null,top:0},{restored:0!==r}}),[]),(0,o.useMemo)((function(){return{save:t,restore:n}}),[n,t])),a=(0,o.useRef)(void 0),s=(0,o.useCallback)((function(e){i.save(e),r.disableScrollEvents(),a.current=function(){var e=i.restore().restored;if(a.current=void 0,e){window.addEventListener("scroll",(function e(){r.enableScrollEvents(),window.removeEventListener("scroll",e)}))}else r.enableScrollEvents()}}),[r,i]);return(0,o.useLayoutEffect)((function(){queueMicrotask((function(){return null==a.current?void 0:a.current()}))})),{blockElementScrollPositionUntilNextRender:s}}function f(){var e=(0,o.useRef)(null),t=(0,i.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:function(n){e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),function(){}}(n):function(e){var t=null,n=document.documentElement.scrollTop>e;return function o(){var r=document.documentElement.scrollTop;(n&&r>e||!n&&r=0;p--){var f=a[p];"."===f?i(a,p):".."===f?(i(a,p),u++):u&&(i(a,p),u--)}if(!d)for(;u--;u)a.unshift("..");!d||""===a[0]||a[0]&&r(a[0])||a.unshift("");var m=a.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m},s=n(2177);function c(e){return"/"===e.charAt(0)?e:"/"+e}function d(e){return"/"===e.charAt(0)?e.substr(1):e}function l(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function u(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,o=e.hash,r=t||"/";return n&&"?"!==n&&(r+="?"===n.charAt(0)?n:"?"+n),o&&"#"!==o&&(r+="#"===o.charAt(0)?o:"#"+o),r}function f(e,t,n,r){var i;"string"==typeof e?(i=function(e){var t=e||"/",n="",o="",r=t.indexOf("#");-1!==r&&(o=t.substr(r),t=t.substr(0,r));var i=t.indexOf("?");return-1!==i&&(n=t.substr(i),t=t.substr(0,i)),{pathname:t,search:"?"===n?"":n,hash:"#"===o?"":o}}(e),i.state=t):(void 0===(i=(0,o.Z)({},e)).pathname&&(i.pathname=""),i.search?"?"!==i.search.charAt(0)&&(i.search="?"+i.search):i.search="",i.hash?"#"!==i.hash.charAt(0)&&(i.hash="#"+i.hash):i.hash="",void 0!==t&&void 0===i.state&&(i.state=t));try{i.pathname=decodeURI(i.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+i.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(i.key=n),r?i.pathname?"/"!==i.pathname.charAt(0)&&(i.pathname=a(i.pathname,r.pathname)):i.pathname=r.pathname:i.pathname||(i.pathname="/"),i}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,o,r){if(null!=e){var i="function"==typeof e?e(t,n):e;"string"==typeof i?"function"==typeof o?o(i,r):r(!0):r(!1!==i)}else r(!0)},appendListener:function(e){var n=!0;function o(){n&&e.apply(void 0,arguments)}return t.push(o),function(){n=!1,t=t.filter((function(e){return e!==o}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),o=0;ot?n.splice(t,n.length-t,r):n.push(r),u({action:o,location:r,index:t,entries:n})}}))},replace:function(e,t){var o="REPLACE",r=f(e,t,v(),y.location);l.confirmTransitionTo(r,o,n,(function(e){e&&(y.entries[y.index]=r,u({action:o,location:r}))}))},go:x,goBack:function(){x(-1)},goForward:function(){x(1)},canGo:function(e){var t=y.index+e;return t>=0&&t
'};function r(e,t,n){return en?n:e}function i(e){return 100*(-1+e)}function a(e,t,n){var r;return(r="translate3d"===o.positionUsing?{transform:"translate3d("+i(e)+"%,0,0)"}:"translate"===o.positionUsing?{transform:"translate("+i(e)+"%,0)"}:{"margin-left":i(e)+"%"}).transition="all "+t+"ms "+n,r}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(o[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=r(e,o.minimum,1),n.status=1===e?null:e;var i=n.render(!t),d=i.querySelector(o.barSelector),l=o.speed,u=o.easing;return i.offsetWidth,s((function(t){""===o.positionUsing&&(o.positionUsing=n.getPositioningCSS()),c(d,a(e,l,u)),1===e?(c(i,{transition:"none",opacity:1}),i.offsetWidth,setTimeout((function(){c(i,{transition:"all "+l+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),l)}),l)):setTimeout(t,l)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),o.trickleSpeed)};return o.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*r(Math.random()*t,.1,.95)),t=r(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*o.trickleRate)},e=0,t=0,n.promise=function(o){return o&&"resolved"!==o.state()?(0===t&&n.start(),e++,t++,o.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");l(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=o.template;var r,a=t.querySelector(o.barSelector),s=e?"-100":i(n.status||0),d=document.querySelector(o.parent);return c(a,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),o.showSpinner||(r=t.querySelector(o.spinnerSelector))&&f(r),d!=document.body&&l(d,"nprogress-custom-parent"),d.appendChild(t),t},n.remove=function(){u(document.documentElement,"nprogress-busy"),u(document.querySelector(o.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),c=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function o(t){var n=document.body.style;if(t in n)return t;for(var o,r=e.length,i=t.charAt(0).toUpperCase()+t.slice(1);r--;)if((o=e[r]+i)in n)return o;return t}function r(e){return e=n(e),t[e]||(t[e]=o(e))}function i(e,t,n){t=r(t),e.style[t]=n}return function(e,t){var n,o,r=arguments;if(2==r.length)for(n in t)void 0!==(o=t[n])&&t.hasOwnProperty(n)&&i(e,n,o);else i(e,r[1],r[2])}}();function d(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function l(e,t){var n=p(e),o=n+t;d(n,t)||(e.className=o.substring(1))}function u(e,t){var n,o=p(e);d(e,t)&&(n=o.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(r="function"==typeof o?o.call(t,n,t,e):o)||(e.exports=r)},27418:function(e){"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach((function(e){o[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(r){return!1}}()?Object.assign:function(e,r){for(var i,a,s=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),c=1;c=u.reach);k+=w.value.length,w=w.next){var E=w.value;if(t.length>e.length)return;if(!(E instanceof r)){var S,P=1;if(b){if(!(S=i(_,k,e,g))||S.index>=e.length)break;var T=S.index,C=S.index+S[0].length,A=k;for(A+=w.value.length;T>=A;)A+=(w=w.next).value.length;if(k=A-=w.value.length,w.value instanceof r)continue;for(var L=w;L!==t.tail&&(Au.reach&&(u.reach=I);var D=w.prev;if(O&&(D=c(t,D,O),k+=O.length),d(t,D,P),w=c(t,D,new r(p,h?o.tokenize(R,h):R,x,R)),N&&c(t,w,N),P>1){var M={cause:p+","+m,reach:I};a(e,t,n,w.prev,k,M),u&&M.reach>u.reach&&(u.reach=M.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function c(e,t,n){var o=t.next,r={value:n,prev:t,next:o};return t.next=r,o.prev=r,e.length++,r}function d(e,t,n){for(var o=t.next,r=0;r"+i.content+""},o}(),o=n;n.default=n,o.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},o.languages.markup.tag.inside["attr-value"].inside.entity=o.languages.markup.entity,o.languages.markup.doctype.inside["internal-subset"].inside=o.languages.markup,o.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(o.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:o.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:o.languages[t]};var i={};i[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},o.languages.insertBefore("markup","cdata",i)}}),Object.defineProperty(o.languages.markup.tag,"addAttribute",{value:function(e,t){o.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:o.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),o.languages.html=o.languages.markup,o.languages.mathml=o.languages.markup,o.languages.svg=o.languages.markup,o.languages.xml=o.languages.extend("markup",{}),o.languages.ssml=o.languages.xml,o.languages.atom=o.languages.xml,o.languages.rss=o.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},o={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:o},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:o},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:o.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:o.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var r=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],i=o.variable[1].inside,a=0;a]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},o.languages.c=o.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),o.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),o.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},o.languages.c.string],char:o.languages.c.char,comment:o.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:o.languages.c}}}}),o.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete o.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(o),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(o),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var o={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},r={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:o,number:r,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:o,number:r})}(o),o.languages.javascript=o.languages.extend("clike",{"class-name":[o.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),o.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,o.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:o.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:o.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:o.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:o.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:o.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),o.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:o.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),o.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),o.languages.markup&&(o.languages.markup.tag.addInlined("script","javascript"),o.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),o.languages.js=o.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(o),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,o="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",r=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),i=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function a(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return o})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return o}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return o})).replace(/<>/g,(function(){return"(?:"+r+"|"+i+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:a(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:a(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:a(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:a(i),lookbehind:!0,greedy:!0},number:{pattern:a(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(o),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var o=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,r=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return o})),i=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+r+i+"(?:"+r+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+r+i+")(?:"+r+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(o),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+r+")"+i+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+r+"$"),inside:{"table-header":{pattern:RegExp(o),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,o=t.length;n",quot:'"'},c=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(o),o.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:o.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},o.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var s=p(/^\{$/,/^\}$/);if(-1===s)continue;for(var c=n;c=0&&f(d,"variable-input")}}}}function l(e){return t[n+e]}function u(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,o=t.inside.interpolation,r=o.inside["interpolation-punctuation"],i=o.pattern.source;function a(t,o){if(e.languages[t])return{pattern:RegExp("((?:"+o+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function s(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function c(t,n,o){var r={code:t,grammar:n,language:o};return e.hooks.run("before-tokenize",r),r.tokens=e.tokenize(r.code,r.grammar),e.hooks.run("after-tokenize",r),r.tokens}function d(t){var n={};n["interpolation-punctuation"]=r;var i=e.tokenize(t,n);if(3===i.length){var a=[1,1];a.push.apply(a,c(i[1],e.languages.javascript,"javascript")),i.splice.apply(i,a)}return new e.Token("interpolation",i,o.alias,t)}function l(t,n,o){var r=e.tokenize(t,{interpolation:{pattern:RegExp(i),lookbehind:!0}}),a=0,l={},u=c(r.map((function(e){if("string"==typeof e)return e;for(var n,r=e.content;-1!==t.indexOf(n=s(a++,o)););return l[n]=r,n})).join(""),n,o),p=Object.keys(l);return a=0,function e(t){for(var n=0;n=p.length)return;var o=t[n];if("string"==typeof o||"string"==typeof o.content){var r=p[a],i="string"==typeof o?o:o.content,s=i.indexOf(r);if(-1!==s){++a;var c=i.substring(0,s),u=d(l[r]),f=i.substring(s+r.length),m=[];if(c&&m.push(c),m.push(u),f){var v=[f];e(v),m.push.apply(m,v)}"string"==typeof o?(t.splice.apply(t,[n,1].concat(m)),n+=m.length-1):o.content=m}}else{var h=o.content;Array.isArray(h)?e(h):e([h])}}}(u),new e.Token(o,u,"language-"+o,t)}e.languages.javascript["template-string"]=[a("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),a("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),a("svg",/\bsvg/.source),a("markdown",/\b(?:markdown|md)/.source),a("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),a("sql",/\bsql/.source),t].filter(Boolean);var u={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function p(e){return"string"==typeof e?e:Array.isArray(e)?e.map(p).join(""):p(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in u&&function t(n){for(var o=0,r=n.length;o]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(o),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],o=0;o*\.{3}(?:[^{}]|)*\})/.source;function i(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return o})).replace(//g,(function(){return r})),RegExp(e,t)}r=i(r).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=i(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:i(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:i(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var a=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(a).join(""):""},s=function(t){for(var n=[],o=0;o0&&n[n.length-1].tagName===a(r.content[0].content[1])&&n.pop():"/>"===r.content[r.content.length-1].content||n.push({tagName:a(r.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===r.type&&"{"===r.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===r.type&&"}"===r.content?n[n.length-1].openedBraces--:i=!0),(i||"string"==typeof r)&&n.length>0&&0===n[n.length-1].openedBraces){var c=a(r);o0&&("string"==typeof t[o-1]||"plain-text"===t[o-1].type)&&(c=a(t[o-1])+c,t.splice(o-1,1),o--),t[o]=new e.Token("plain-text",c,null,c)}r.content&&"string"!=typeof r.content&&s(r.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||s(e.tokens)}))}(o),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var o=t[n],r=[];/^\w+$/.test(n)||r.push(/\w+/.exec(n)[0]),"diff"===n&&r.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+o+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:r,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(o),o.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},o.languages.go=o.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),o.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete o.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,o,r,i){if(n.language===o){var a=n.tokenStack=[];n.code=n.code.replace(r,(function(e){if("function"==typeof i&&!i(e))return e;for(var r,s=a.length;-1!==n.code.indexOf(r=t(o,s));)++s;return a[s]=e,r})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,o){if(n.language===o&&n.tokenStack){n.grammar=e.languages[o];var r=0,i=Object.keys(n.tokenStack);!function a(s){for(var c=0;c=i.length);c++){var d=s[c];if("string"==typeof d||d.content&&"string"==typeof d.content){var l=i[r],u=n.tokenStack[l],p="string"==typeof d?d:d.content,f=t(o,l),m=p.indexOf(f);if(m>-1){++r;var v=p.substring(0,m),h=new e.Token(o,e.tokenize(u,n.grammar),"language-"+o,u),g=p.substring(m+f.length),b=[];v&&b.push.apply(b,a([v])),b.push(h),g&&b.push.apply(b,a([g])),"string"==typeof d?s.splice.apply(s,[c,1].concat(b)):d.content=b}}else d.content&&a(d.content)}return s}(n.tokens)}}}})}(o),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(o),o.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},o.languages.webmanifest=o.languages.json,o.languages.less=o.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),o.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),o.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},o.languages.objectivec=o.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete o.languages.objectivec["class-name"],o.languages.objc=o.languages.objectivec,o.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},o.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},o.languages.python["string-interpolation"].inside.interpolation.inside.rest=o.languages.python,o.languages.py=o.languages.python,o.languages.reason=o.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),o.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete o.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(o),o.languages.scss=o.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),o.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),o.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),o.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),o.languages.scss.atrule.inside.rest=o.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},o={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};o.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:o}},o.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:o}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:o}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:o}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:o}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:o.interpolation}},rest:o}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:o.interpolation,comment:o.comment,punctuation:/[{},]/}},func:o.func,string:o.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:o.interpolation,punctuation:/[{}()\[\];:.]/}}(o),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(o),o.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/},t.Z=o},29901:function(e){e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:function(e,t,n){const o=n(29901),r=n(39642),i=new Set;function a(e){void 0===e?e=Object.keys(o.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...i,...Object.keys(Prism.languages)];r(o,e,t).load((e=>{if(!(e in o.languages))return void(a.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(16500).resolve(t)],delete Prism.languages[e],n(16500)(t),i.add(e)}))}a.silent=!1,e.exports=a},6726:function(e,t,n){var o={"./":2885};function r(e){var t=i(e);return n(t)}function i(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}r.keys=function(){return Object.keys(o)},r.resolve=i,e.exports=r,r.id=6726},16500:function(e,t,n){var o={"./":2885};function r(e){var t=i(e);return n(t)}function i(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}r.keys=function(){return Object.keys(o)},r.resolve=i,e.exports=r,r.id=16500},39642:function(e){"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,o=e.length;n "));var s={},c=e[o];if(c){function d(t){if(!(t in e))throw new Error(o+" depends on an unknown component "+t);if(!(t in s))for(var a in r(t,i),s[t]=!0,n[t])s[a]=!0}t(c.require,d),t(c.optional,d),t(c.modify,d)}n[o]=s,i.pop()}}return function(e){var t=n[e];return t||(r(e,o),t=n[e]),t}}function r(e){for(var t in e)return!0;return!1}return function(i,a,s){var c=function(e){var t={};for(var n in e){var o=e[n];for(var r in o)if("meta"!=r){var i=o[r];t[r]="string"==typeof i?{title:i}:i}}return t}(i),d=function(e){var n;return function(o){if(o in e)return o;if(!n)for(var r in n={},e){var i=e[r];t(i&&i.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+r+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+r+" because it is a component.");n[t]=r}))}return n[o]||o}}(c);a=a.map(d),s=(s||[]).map(d);var l=n(a),u=n(s);a.forEach((function e(n){var o=c[n];t(o&&o.require,(function(t){t in u||(l[t]=!0,e(t))}))}));for(var p,f=o(c),m=l;r(m);){for(var v in p={},m){var h=c[v];t(h&&h.modify,(function(e){e in u&&(p[e]=!0)}))}for(var g in u)if(!(g in l))for(var b in f(g))if(b in l){p[g]=!0;break}for(var x in m=p)l[x]=!0}var y={getIds:function(){var e=[];return y.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,o,r){var i=r?r.series:void 0,a=r?r.parallel:e,s={},c={};function d(e){if(e in s)return s[e];c[e]=!0;var r,l=[];for(var u in t(e))u in n&&l.push(u);if(0===l.length)r=o(e);else{var p=a(l.map((function(e){var t=d(e);return delete c[e],t})));i?r=i(p,(function(){return o(e)})):o(e)}return s[e]=r}for(var l in n)d(l);var u=[];for(var p in c)u.push(s[p]);return a(u)}(f,l,t,n)}};return y}}();e.exports=t},92703:function(e,t,n){"use strict";var o=n(50414);function r(){}function i(){}i.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,i,a){if(a!==o){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:r};return n.PropTypes=n,n}},45697:function(e,t,n){e.exports=n(92703)()},50414:function(e){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},64448:function(e,t,n){"use strict";var o=n(67294),r=n(27418),i=n(63840);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n