From 3e06b48fb3c9ec3f4c695865b9156d133b6795b0 Mon Sep 17 00:00:00 2001 From: satya164 Date: Thu, 28 Mar 2024 13:57:26 +0000 Subject: [PATCH] Deploy website - based on 487d3792494f17e495cdf2af24eae7c479584c4a --- 404.html | 2 +- assets/js/17b59e25.95179dac.js | 1 + assets/js/17b59e25.e87892bb.js | 1 - assets/js/74cdd3dc.d39246e3.js | 1 + assets/js/74cdd3dc.d800d1d6.js | 1 - assets/js/f171b4fe.18d22b44.js | 1 - assets/js/f171b4fe.81dea77d.js | 1 + assets/js/f82f4518.81c95046.js | 1 + assets/js/f82f4518.acb0277f.js | 1 - ...n.f9817f17.js => runtime~main.bb62961a.js} | 2 +- .../02/06/react-navigation-1.0/index.html | 2 +- .../04/06/react-navigation-2.0-rc/index.html | 2 +- .../05/07/react-navigation-2.0/index.html | 2 +- .../11/01/react-navigation-3.0-rc/index.html | 2 +- .../11/17/react-navigation-3.0/index.html | 2 +- .../09/16/react-navigation-4.0/index.html | 2 +- .../10/17/react-navigation-native/index.html | 2 +- .../index.html | 2 +- .../index.html | 2 +- .../02/06/react-navigation-5.0/index.html | 2 +- blog/2020/05/16/web-support/index.html | 2 +- .../05/19/joining-github-sponsors/index.html | 2 +- .../12/react-navigation-6.0-next/index.html | 2 +- .../08/14/react-navigation-6.0/index.html | 2 +- .../03/25/introducing-static-api/index.html | 2 +- blog/archive/index.html | 2 +- blog/index.html | 2 +- blog/page/2/index.html | 2 +- blog/tags/announcement/index.html | 2 +- blog/tags/announcement/page/2/index.html | 2 +- blog/tags/index.html | 2 +- blog/tags/react-native-paper/index.html | 2 +- blog/tags/release/index.html | 2 +- blog/tags/tutorial/index.html | 2 +- blog/tags/ui-kitten/index.html | 2 +- blog/tags/web/index.html | 2 +- docs/1.x/alternatives/index.html | 2 +- docs/1.x/api-reference/index.html | 2 +- docs/1.x/auth-flow/index.html | 2 +- .../1.x/connecting-navigation-prop/index.html | 2 +- docs/1.x/contributing/index.html | 2 +- .../index.html | 2 +- docs/1.x/custom-navigator-overview/index.html | 2 +- docs/1.x/custom-navigators/index.html | 2 +- docs/1.x/custom-routers/index.html | 2 +- docs/1.x/customize-styles/index.html | 2 +- docs/1.x/deep-linking/index.html | 2 +- docs/1.x/drawer-based-navigation/index.html | 2 +- docs/1.x/drawer-navigator/index.html | 2 +- docs/1.x/getting-started/index.html | 2 +- docs/1.x/glossary-of-terms/index.html | 2 +- docs/1.x/handling-iphonex/index.html | 2 +- docs/1.x/header-buttons/index.html | 2 +- docs/1.x/headers/index.html | 2 +- docs/1.x/hello-react-navigation/index.html | 2 +- docs/1.x/listen-lifecycle-events/index.html | 2 +- docs/1.x/modal/index.html | 2 +- .../index.html | 2 +- docs/1.x/navigating/index.html | 2 +- docs/1.x/navigation-actions/index.html | 2 +- docs/1.x/navigation-options/index.html | 2 +- docs/1.x/navigation-prop/index.html | 2 +- docs/1.x/navigation-views/index.html | 2 +- docs/1.x/next-steps/index.html | 2 +- docs/1.x/params/index.html | 2 +- docs/1.x/partial-overlay/index.html | 2 +- docs/1.x/pitch/index.html | 2 +- docs/1.x/redux-integration/index.html | 2 +- docs/1.x/routers/index.html | 2 +- docs/1.x/screen-tracking/index.html | 2 +- docs/1.x/set-params-on-back/index.html | 2 +- docs/1.x/stack-navigator/index.html | 2 +- docs/1.x/status-bar/index.html | 2 +- .../index.html | 2 +- docs/1.x/switch-navigator/index.html | 2 +- docs/1.x/tab-based-navigation/index.html | 2 +- docs/1.x/tab-navigator/index.html | 2 +- docs/1.x/transitioner/index.html | 2 +- docs/1.x/with-navigation-focus/index.html | 2 +- docs/1.x/with-navigation/index.html | 2 +- docs/2.x/alternatives/index.html | 2 +- docs/2.x/api-reference/index.html | 2 +- docs/2.x/app-containers/index.html | 2 +- docs/2.x/auth-flow/index.html | 2 +- docs/2.x/bottom-tab-navigator/index.html | 2 +- docs/2.x/common-mistakes/index.html | 2 +- .../index.html | 2 +- .../2.x/connecting-navigation-prop/index.html | 2 +- docs/2.x/contributing/index.html | 2 +- .../index.html | 2 +- docs/2.x/custom-navigator-overview/index.html | 2 +- docs/2.x/custom-navigators/index.html | 2 +- docs/2.x/custom-routers/index.html | 2 +- docs/2.x/deep-linking/index.html | 2 +- docs/2.x/drawer-actions/index.html | 2 +- docs/2.x/drawer-based-navigation/index.html | 2 +- docs/2.x/drawer-navigator/index.html | 2 +- docs/2.x/getting-started/index.html | 2 +- docs/2.x/glossary-of-terms/index.html | 2 +- docs/2.x/handling-iphonex/index.html | 2 +- docs/2.x/header-buttons/index.html | 2 +- docs/2.x/headers/index.html | 2 +- docs/2.x/hello-react-navigation/index.html | 2 +- docs/2.x/limitations/index.html | 2 +- .../material-bottom-tab-navigator/index.html | 2 +- .../2.x/material-top-tab-navigator/index.html | 2 +- docs/2.x/modal/index.html | 2 +- docs/2.x/more-resources/index.html | 2 +- .../index.html | 2 +- docs/2.x/navigating/index.html | 2 +- docs/2.x/navigation-actions/index.html | 2 +- docs/2.x/navigation-context/index.html | 2 +- docs/2.x/navigation-events/index.html | 2 +- docs/2.x/navigation-key/index.html | 2 +- docs/2.x/navigation-lifecycle/index.html | 2 +- .../navigation-options-resolution/index.html | 2 +- docs/2.x/navigation-prop/index.html | 2 +- docs/2.x/navigation-views/index.html | 2 +- docs/2.x/next-steps/index.html | 2 +- docs/2.x/params/index.html | 2 +- docs/2.x/pitch/index.html | 2 +- docs/2.x/react-native-screens/index.html | 2 +- docs/2.x/redux-integration/index.html | 2 +- docs/2.x/routers/index.html | 2 +- docs/2.x/screen-tracking/index.html | 2 +- docs/2.x/stack-actions/index.html | 2 +- docs/2.x/stack-navigator/index.html | 2 +- docs/2.x/state-persistence/index.html | 2 +- docs/2.x/status-bar/index.html | 2 +- .../index.html | 2 +- docs/2.x/switch-navigator/index.html | 2 +- docs/2.x/tab-based-navigation/index.html | 2 +- docs/2.x/tab-navigator/index.html | 2 +- docs/2.x/transitioner/index.html | 2 +- docs/2.x/with-navigation-focus/index.html | 2 +- docs/2.x/with-navigation/index.html | 2 +- docs/3.x/MST-integration/index.html | 2 +- docs/3.x/alternatives/index.html | 2 +- docs/3.x/animated-switch-navigator/index.html | 2 +- docs/3.x/app-containers/index.html | 2 +- docs/3.x/auth-flow/index.html | 2 +- docs/3.x/bottom-tab-navigator/index.html | 2 +- docs/3.x/common-mistakes/index.html | 2 +- .../index.html | 2 +- .../3.x/connecting-navigation-prop/index.html | 2 +- docs/3.x/contributing/index.html | 2 +- .../index.html | 2 +- docs/3.x/custom-navigator-overview/index.html | 2 +- docs/3.x/custom-navigators/index.html | 2 +- docs/3.x/custom-routers/index.html | 2 +- docs/3.x/deep-linking/index.html | 2 +- docs/3.x/drawer-actions/index.html | 2 +- docs/3.x/drawer-based-navigation/index.html | 2 +- docs/3.x/drawer-navigator/index.html | 2 +- .../function-after-focusing-screen/index.html | 2 +- docs/3.x/getting-started/index.html | 2 +- docs/3.x/glossary-of-terms/index.html | 2 +- docs/3.x/handling-iphonex/index.html | 2 +- docs/3.x/header-buttons/index.html | 2 +- docs/3.x/headers/index.html | 2 +- docs/3.x/hello-react-navigation/index.html | 2 +- docs/3.x/limitations/index.html | 2 +- docs/3.x/localization/index.html | 2 +- .../material-bottom-tab-navigator/index.html | 2 +- .../3.x/material-top-tab-navigator/index.html | 2 +- docs/3.x/modal/index.html | 2 +- docs/3.x/more-resources/index.html | 2 +- .../index.html | 2 +- docs/3.x/navigating/index.html | 2 +- docs/3.x/navigation-actions/index.html | 2 +- docs/3.x/navigation-context/index.html | 2 +- docs/3.x/navigation-events/index.html | 2 +- docs/3.x/navigation-key/index.html | 2 +- docs/3.x/navigation-lifecycle/index.html | 2 +- .../navigation-options-resolution/index.html | 2 +- docs/3.x/navigation-prop/index.html | 2 +- docs/3.x/navigation-views/index.html | 2 +- docs/3.x/next-steps/index.html | 2 +- docs/3.x/params/index.html | 2 +- docs/3.x/pitch/index.html | 2 +- docs/3.x/react-native-screens/index.html | 2 +- docs/3.x/redux-integration/index.html | 2 +- docs/3.x/routers/index.html | 2 +- docs/3.x/screen-tracking/index.html | 2 +- docs/3.x/scrollables/index.html | 2 +- docs/3.x/stack-actions/index.html | 2 +- docs/3.x/stack-navigator/index.html | 2 +- docs/3.x/state-persistence/index.html | 2 +- docs/3.x/status-bar/index.html | 2 +- .../index.html | 2 +- docs/3.x/switch-actions/index.html | 2 +- docs/3.x/switch-navigator/index.html | 2 +- docs/3.x/tab-based-navigation/index.html | 2 +- docs/3.x/tab-navigator/index.html | 2 +- docs/3.x/themes/index.html | 2 +- docs/3.x/transitioner/index.html | 2 +- docs/3.x/web-support/index.html | 2 +- docs/3.x/with-navigation-focus/index.html | 2 +- docs/3.x/with-navigation/index.html | 2 +- docs/4.x/MST-integration/index.html | 2 +- docs/4.x/alternatives/index.html | 2 +- docs/4.x/animated-switch-navigator/index.html | 2 +- docs/4.x/app-containers/index.html | 2 +- docs/4.x/auth-flow/index.html | 2 +- docs/4.x/bottom-tab-navigator/index.html | 2 +- docs/4.x/common-mistakes/index.html | 2 +- .../index.html | 2 +- .../4.x/connecting-navigation-prop/index.html | 2 +- docs/4.x/contributing/index.html | 2 +- .../index.html | 2 +- docs/4.x/custom-navigator-overview/index.html | 2 +- docs/4.x/custom-navigators/index.html | 2 +- docs/4.x/custom-routers/index.html | 2 +- docs/4.x/deep-linking/index.html | 2 +- docs/4.x/drawer-actions/index.html | 2 +- docs/4.x/drawer-based-navigation/index.html | 2 +- docs/4.x/drawer-navigator/index.html | 2 +- .../function-after-focusing-screen/index.html | 2 +- docs/4.x/getting-started/index.html | 2 +- docs/4.x/glossary-of-terms/index.html | 2 +- docs/4.x/handling-iphonex/index.html | 2 +- docs/4.x/header-buttons/index.html | 2 +- docs/4.x/headers/index.html | 2 +- docs/4.x/hello-react-navigation/index.html | 2 +- docs/4.x/limitations/index.html | 2 +- docs/4.x/localization/index.html | 2 +- .../material-bottom-tab-navigator/index.html | 2 +- .../4.x/material-top-tab-navigator/index.html | 2 +- docs/4.x/modal/index.html | 2 +- docs/4.x/more-resources/index.html | 2 +- .../index.html | 2 +- docs/4.x/navigating/index.html | 2 +- docs/4.x/navigation-actions/index.html | 2 +- docs/4.x/navigation-context/index.html | 2 +- docs/4.x/navigation-events/index.html | 2 +- docs/4.x/navigation-key/index.html | 2 +- docs/4.x/navigation-lifecycle/index.html | 2 +- .../navigation-options-resolution/index.html | 2 +- docs/4.x/navigation-prop/index.html | 2 +- docs/4.x/navigation-views/index.html | 2 +- docs/4.x/next-steps/index.html | 2 +- docs/4.x/params/index.html | 2 +- docs/4.x/pitch/index.html | 2 +- docs/4.x/react-native-screens/index.html | 2 +- docs/4.x/redux-integration/index.html | 2 +- docs/4.x/routers/index.html | 2 +- docs/4.x/screen-tracking/index.html | 2 +- docs/4.x/scrollables/index.html | 2 +- docs/4.x/stack-actions/index.html | 2 +- docs/4.x/stack-navigator-1.0/index.html | 2 +- docs/4.x/stack-navigator/index.html | 2 +- docs/4.x/state-persistence/index.html | 2 +- docs/4.x/status-bar/index.html | 2 +- .../index.html | 2 +- docs/4.x/switch-actions/index.html | 2 +- docs/4.x/switch-navigator/index.html | 2 +- docs/4.x/tab-based-navigation/index.html | 2 +- docs/4.x/themes/index.html | 2 +- docs/4.x/troubleshooting/index.html | 2 +- docs/4.x/typescript/index.html | 2 +- docs/4.x/upgrading-from-3.x/index.html | 2 +- docs/4.x/web-support/index.html | 2 +- docs/4.x/with-navigation-focus/index.html | 2 +- docs/4.x/with-navigation/index.html | 2 +- docs/5.x/MST-integration/index.html | 2 +- docs/5.x/alternatives/index.html | 2 +- docs/5.x/auth-flow/index.html | 2 +- docs/5.x/bottom-tab-navigator/index.html | 2 +- .../index.html | 2 +- docs/5.x/compatibility/index.html | 2 +- docs/5.x/configuring-links/index.html | 2 +- .../5.x/connecting-navigation-prop/index.html | 2 +- docs/5.x/contributing/index.html | 2 +- .../index.html | 2 +- docs/5.x/custom-navigators/index.html | 2 +- docs/5.x/custom-routers/index.html | 2 +- docs/5.x/deep-linking/index.html | 2 +- docs/5.x/devtools/index.html | 2 +- docs/5.x/drawer-actions/index.html | 2 +- docs/5.x/drawer-based-navigation/index.html | 2 +- docs/5.x/drawer-navigator/index.html | 2 +- .../function-after-focusing-screen/index.html | 2 +- docs/5.x/getting-started/index.html | 2 +- docs/5.x/glossary-of-terms/index.html | 2 +- docs/5.x/handling-safe-area/index.html | 2 +- docs/5.x/header-buttons/index.html | 2 +- docs/5.x/headers/index.html | 2 +- docs/5.x/hello-react-navigation/index.html | 2 +- docs/5.x/hiding-tabbar-in-screens/index.html | 2 +- docs/5.x/limitations/index.html | 2 +- docs/5.x/link/index.html | 2 +- .../material-bottom-tab-navigator/index.html | 2 +- .../5.x/material-top-tab-navigator/index.html | 2 +- docs/5.x/modal/index.html | 2 +- docs/5.x/more-resources/index.html | 2 +- docs/5.x/native-stack-navigator/index.html | 2 +- .../index.html | 2 +- docs/5.x/navigating/index.html | 2 +- docs/5.x/navigation-actions/index.html | 2 +- docs/5.x/navigation-container/index.html | 2 +- docs/5.x/navigation-context/index.html | 2 +- docs/5.x/navigation-events/index.html | 2 +- docs/5.x/navigation-lifecycle/index.html | 2 +- docs/5.x/navigation-prop/index.html | 2 +- docs/5.x/navigation-state/index.html | 2 +- docs/5.x/nesting-navigators/index.html | 2 +- docs/5.x/next-steps/index.html | 2 +- docs/5.x/params/index.html | 2 +- docs/5.x/pitch/index.html | 2 +- docs/5.x/preventing-going-back/index.html | 2 +- docs/5.x/react-native-screens/index.html | 2 +- docs/5.x/redux-integration/index.html | 2 +- docs/5.x/route-prop/index.html | 2 +- docs/5.x/screen-options-resolution/index.html | 2 +- docs/5.x/screen-options/index.html | 2 +- docs/5.x/screen-tracking/index.html | 2 +- docs/5.x/screen/index.html | 2 +- docs/5.x/server-container/index.html | 2 +- docs/5.x/server-rendering/index.html | 2 +- docs/5.x/stack-actions/index.html | 2 +- docs/5.x/stack-navigator/index.html | 2 +- docs/5.x/state-persistence/index.html | 2 +- docs/5.x/status-bar/index.html | 2 +- .../index.html | 2 +- docs/5.x/tab-actions/index.html | 2 +- docs/5.x/tab-based-navigation/index.html | 2 +- docs/5.x/testing/index.html | 2 +- docs/5.x/themes/index.html | 2 +- docs/5.x/troubleshooting/index.html | 2 +- docs/5.x/typescript/index.html | 2 +- docs/5.x/upgrading-from-4.x/index.html | 2 +- docs/5.x/use-focus-effect/index.html | 2 +- docs/5.x/use-is-focused/index.html | 2 +- docs/5.x/use-link-builder/index.html | 2 +- docs/5.x/use-link-props/index.html | 2 +- docs/5.x/use-link-to/index.html | 2 +- docs/5.x/use-linking/index.html | 2 +- docs/5.x/use-navigation-state/index.html | 2 +- docs/5.x/use-navigation/index.html | 2 +- docs/5.x/use-route/index.html | 2 +- docs/5.x/use-scroll-to-top/index.html | 2 +- docs/5.x/use-theme/index.html | 2 +- docs/5.x/used-by/index.html | 2 +- docs/5.x/web-support/index.html | 2 +- docs/7.x/MST-integration/index.html | 2 +- docs/7.x/auth-flow/index.html | 2 +- docs/7.x/bottom-tab-navigator/index.html | 20 ++++++----- .../combine-static-with-dynamic/index.html | 2 +- docs/7.x/configuring-links/index.html | 2 +- docs/7.x/contributing/index.html | 2 +- .../index.html | 2 +- docs/7.x/custom-navigators/index.html | 2 +- docs/7.x/custom-routers/index.html | 2 +- docs/7.x/deep-linking/index.html | 2 +- docs/7.x/devtools/index.html | 2 +- docs/7.x/drawer-actions/index.html | 2 +- docs/7.x/drawer-based-navigation/index.html | 2 +- docs/7.x/drawer-layout/index.html | 2 +- docs/7.x/drawer-navigator/index.html | 2 +- docs/7.x/elements/index.html | 2 +- .../function-after-focusing-screen/index.html | 2 +- docs/7.x/getting-started/index.html | 2 +- docs/7.x/glossary-of-terms/index.html | 2 +- docs/7.x/group/index.html | 2 +- docs/7.x/handling-safe-area/index.html | 2 +- docs/7.x/header-buttons/index.html | 2 +- docs/7.x/headers/index.html | 2 +- docs/7.x/hello-react-navigation/index.html | 2 +- docs/7.x/hiding-tabbar-in-screens/index.html | 2 +- docs/7.x/limitations/index.html | 2 +- docs/7.x/link/index.html | 2 +- .../7.x/material-top-tab-navigator/index.html | 9 +++-- docs/7.x/migration-guides/index.html | 2 +- docs/7.x/modal/index.html | 2 +- docs/7.x/more-resources/index.html | 2 +- docs/7.x/multiple-drawers/index.html | 2 +- docs/7.x/native-stack-navigator/index.html | 10 ++++-- .../index.html | 2 +- docs/7.x/navigating/index.html | 2 +- docs/7.x/navigation-actions/index.html | 2 +- docs/7.x/navigation-container/index.html | 2 +- docs/7.x/navigation-context/index.html | 2 +- docs/7.x/navigation-events/index.html | 2 +- docs/7.x/navigation-lifecycle/index.html | 2 +- docs/7.x/navigation-object/index.html | 2 +- .../index.html | 2 +- docs/7.x/navigation-state/index.html | 2 +- docs/7.x/nesting-navigators/index.html | 2 +- docs/7.x/next-steps/index.html | 2 +- docs/7.x/params/index.html | 2 +- docs/7.x/pitch/index.html | 2 +- docs/7.x/preventing-going-back/index.html | 2 +- docs/7.x/redux-integration/index.html | 2 +- docs/7.x/route-object/index.html | 2 +- docs/7.x/screen-options-resolution/index.html | 2 +- docs/7.x/screen-options/index.html | 2 +- docs/7.x/screen-tracking/index.html | 2 +- docs/7.x/screen/index.html | 2 +- docs/7.x/server-container/index.html | 2 +- docs/7.x/server-rendering/index.html | 2 +- .../7.x/shared-element-transitions/index.html | 2 +- docs/7.x/stack-actions/index.html | 2 +- docs/7.x/stack-navigator/index.html | 33 +++++++++++++++++-- docs/7.x/state-persistence/index.html | 2 +- docs/7.x/static-configuration/index.html | 2 +- docs/7.x/status-bar/index.html | 2 +- docs/7.x/tab-actions/index.html | 2 +- docs/7.x/tab-based-navigation/index.html | 2 +- docs/7.x/tab-view/index.html | 2 +- docs/7.x/testing/index.html | 2 +- docs/7.x/themes/index.html | 2 +- docs/7.x/troubleshooting/index.html | 2 +- docs/7.x/typescript/index.html | 2 +- docs/7.x/upgrading-from-6.x/index.html | 2 +- docs/7.x/use-focus-effect/index.html | 2 +- docs/7.x/use-is-focused/index.html | 2 +- docs/7.x/use-link-builder/index.html | 2 +- docs/7.x/use-link-props/index.html | 2 +- docs/7.x/use-link-to/index.html | 2 +- docs/7.x/use-navigation-state/index.html | 2 +- docs/7.x/use-navigation/index.html | 2 +- docs/7.x/use-prevent-remove/index.html | 2 +- docs/7.x/use-route/index.html | 2 +- docs/7.x/use-scroll-to-top/index.html | 2 +- docs/7.x/use-theme/index.html | 2 +- docs/7.x/used-by/index.html | 2 +- docs/7.x/web-support/index.html | 2 +- docs/MST-integration/index.html | 2 +- docs/auth-flow/index.html | 2 +- docs/bottom-tab-navigator/index.html | 2 +- docs/configuring-links/index.html | 2 +- docs/connecting-navigation-prop/index.html | 2 +- docs/contributing/index.html | 2 +- .../index.html | 2 +- docs/custom-navigators/index.html | 2 +- docs/custom-routers/index.html | 2 +- docs/deep-linking/index.html | 2 +- docs/devtools/index.html | 2 +- docs/drawer-actions/index.html | 2 +- docs/drawer-based-navigation/index.html | 2 +- docs/drawer-layout/index.html | 2 +- docs/drawer-navigator/index.html | 2 +- docs/elements/index.html | 2 +- .../function-after-focusing-screen/index.html | 2 +- docs/getting-started/index.html | 2 +- docs/glossary-of-terms/index.html | 2 +- docs/group/index.html | 2 +- docs/handling-safe-area/index.html | 2 +- docs/header-buttons/index.html | 2 +- docs/headers/index.html | 2 +- docs/hello-react-navigation/index.html | 2 +- docs/hiding-tabbar-in-screens/index.html | 2 +- docs/limitations/index.html | 2 +- docs/link/index.html | 2 +- docs/material-bottom-tab-navigator/index.html | 2 +- docs/material-top-tab-navigator/index.html | 2 +- docs/migration-guides/index.html | 2 +- docs/modal/index.html | 2 +- docs/more-resources/index.html | 2 +- docs/multiple-drawers/index.html | 2 +- docs/native-stack-navigator/index.html | 2 +- .../index.html | 2 +- docs/navigating/index.html | 2 +- docs/navigation-actions/index.html | 2 +- docs/navigation-container/index.html | 2 +- docs/navigation-context/index.html | 2 +- docs/navigation-events/index.html | 2 +- docs/navigation-lifecycle/index.html | 2 +- docs/navigation-prop/index.html | 2 +- .../index.html | 2 +- docs/navigation-state/index.html | 2 +- docs/nesting-navigators/index.html | 2 +- docs/next-steps/index.html | 2 +- docs/params/index.html | 2 +- docs/pitch/index.html | 2 +- docs/preventing-going-back/index.html | 2 +- docs/redux-integration/index.html | 2 +- docs/route-prop/index.html | 2 +- docs/screen-options-resolution/index.html | 2 +- docs/screen-options/index.html | 2 +- docs/screen-tracking/index.html | 2 +- docs/screen/index.html | 2 +- docs/server-container/index.html | 2 +- docs/server-rendering/index.html | 2 +- docs/shared-element-transitions/index.html | 2 +- docs/stack-actions/index.html | 2 +- docs/stack-navigator/index.html | 2 +- docs/state-persistence/index.html | 2 +- docs/status-bar/index.html | 2 +- docs/tab-actions/index.html | 2 +- docs/tab-based-navigation/index.html | 2 +- docs/tab-view/index.html | 2 +- docs/testing/index.html | 2 +- docs/themes/index.html | 2 +- docs/troubleshooting/index.html | 2 +- docs/typescript/index.html | 2 +- docs/upgrading-from-5.x/index.html | 2 +- docs/use-focus-effect/index.html | 2 +- docs/use-is-focused/index.html | 2 +- docs/use-link-builder/index.html | 2 +- docs/use-link-props/index.html | 2 +- docs/use-link-to/index.html | 2 +- docs/use-navigation-state/index.html | 2 +- docs/use-navigation/index.html | 2 +- docs/use-route/index.html | 2 +- docs/use-scroll-to-top/index.html | 2 +- docs/use-theme/index.html | 2 +- docs/used-by/index.html | 2 +- docs/web-support/index.html | 2 +- help/index.html | 2 +- home/Features/index.html | 2 +- home/Splash/SplashLeftIllustration/index.html | 2 +- .../Splash/SplashRightIllustration/index.html | 2 +- home/Splash/index.html | 2 +- home/Sponsors/index.html | 2 +- index.html | 2 +- search/index.html | 2 +- 517 files changed, 566 insertions(+), 524 deletions(-) create mode 100644 assets/js/17b59e25.95179dac.js delete mode 100644 assets/js/17b59e25.e87892bb.js create mode 100644 assets/js/74cdd3dc.d39246e3.js delete mode 100644 assets/js/74cdd3dc.d800d1d6.js delete mode 100644 assets/js/f171b4fe.18d22b44.js create mode 100644 assets/js/f171b4fe.81dea77d.js create mode 100644 assets/js/f82f4518.81c95046.js delete mode 100644 assets/js/f82f4518.acb0277f.js rename assets/js/{runtime~main.f9817f17.js => runtime~main.bb62961a.js} (99%) diff --git a/404.html b/404.html index 50289ee1d0..715b0d2078 100644 --- a/404.html +++ b/404.html @@ -14,7 +14,7 @@ - + diff --git a/assets/js/17b59e25.95179dac.js b/assets/js/17b59e25.95179dac.js new file mode 100644 index 0000000000..9218632fb9 --- /dev/null +++ b/assets/js/17b59e25.95179dac.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[89551],{22128:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>x,frontMatter:()=>o,metadata:()=>d,toc:()=>h});var t=i(85893),r=i(11151),s=i(74866),a=i(85162);const o={id:"native-stack-navigator",title:"Native Stack Navigator",sidebar_label:"Native Stack"},l=void 0,d={id:"native-stack-navigator",title:"Native Stack Navigator",description:"Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.",source:"@site/versioned_docs/version-7.x/native-stack-navigator.md",sourceDirName:".",slug:"/native-stack-navigator",permalink:"/docs/7.x/native-stack-navigator",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/native-stack-navigator.md",tags:[],version:"7.x",frontMatter:{id:"native-stack-navigator",title:"Native Stack Navigator",sidebar_label:"Native Stack"},sidebar:"docs",previous:{title:"Stack",permalink:"/docs/7.x/stack-navigator"},next:{title:"Bottom Tabs",permalink:"/docs/7.x/bottom-tab-navigator"}},c={},h=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",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:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"headerBackButtonMenuEnabled",id:"headerbackbuttonmenuenabled",level:4},{value:"headerBackVisible",id:"headerbackvisible",level:4},{value:"headerBackTitle",id:"headerbacktitle",level:4},{value:"headerBackTitleVisible",id:"headerbacktitlevisible",level:4},{value:"headerBackTitleStyle",id:"headerbacktitlestyle",level:4},{value:"headerBackImageSource",id:"headerbackimagesource",level:4},{value:"headerLargeStyle",id:"headerlargestyle",level:4},{value:"headerLargeTitle",id:"headerlargetitle",level:4},{value:"headerLargeTitleShadowVisible",id:"headerlargetitleshadowvisible",level:4},{value:"headerLargeTitleStyle",id:"headerlargetitlestyle",level:4},{value:"headerShown",id:"headershown",level:4},{value:"headerStyle",id:"headerstyle",level:4},{value:"headerShadowVisible",id:"headershadowvisible",level:4},{value:"headerTransparent",id:"headertransparent",level:4},{value:"headerBlurEffect",id:"headerblureffect",level:4},{value:"headerBackground",id:"headerbackground",level:4},{value:"headerTintColor",id:"headertintcolor",level:4},{value:"headerLeft",id:"headerleft",level:4},{value:"headerRight",id:"headerright",level:4},{value:"headerTitle",id:"headertitle",level:4},{value:"headerTitleAlign",id:"headertitlealign",level:4},{value:"headerTitleStyle",id:"headertitlestyle",level:4},{value:"headerSearchBarOptions",id:"headersearchbaroptions",level:4},{value:"autoCapitalize",id:"autocapitalize",level:5},{value:"autoFocus",id:"autofocus",level:5},{value:"barTintColor",id:"bartintcolor",level:5},{value:"tintColor",id:"tintcolor",level:5},{value:"cancelButtonText",id:"cancelbuttontext",level:5},{value:"disableBackButtonOverride",id:"disablebackbuttonoverride",level:5},{value:"hideNavigationBar",id:"hidenavigationbar",level:5},{value:"hideWhenScrolling",id:"hidewhenscrolling",level:5},{value:"inputType",id:"inputtype",level:5},{value:"obscureBackground",id:"obscurebackground",level:5},{value:"placeholder",id:"placeholder",level:5},{value:"textColor",id:"textcolor",level:5},{value:"hintTextColor",id:"hinttextcolor",level:5},{value:"headerIconColor",id:"headericoncolor",level:5},{value:"shouldShowHintSearchIcon",id:"shouldshowhintsearchicon",level:5},{value:"onBlur",id:"onblur",level:5},{value:"onCancelButtonPress",id:"oncancelbuttonpress",level:5},{value:"onChangeText",id:"onchangetext",level:5},{value:"header",id:"header",level:4},{value:"statusBarAnimation",id:"statusbaranimation",level:4},{value:"statusBarHidden",id:"statusbarhidden",level:4},{value:"statusBarStyle",id:"statusbarstyle",level:4},{value:"statusBarColor",id:"statusbarcolor",level:4},{value:"statusBarTranslucent",id:"statusbartranslucent",level:4},{value:"contentStyle",id:"contentstyle",level:4},{value:"animationMatchesGesture",id:"animationmatchesgesture",level:4},{value:"fullScreenGestureEnabled",id:"fullscreengestureenabled",level:4},{value:"gestureEnabled",id:"gestureenabled",level:4},{value:"animationTypeForReplace",id:"animationtypeforreplace",level:4},{value:"animation",id:"animation",level:4},{value:"presentation",id:"presentation",level:4},{value:"orientation",id:"orientation",level:4},{value:"autoHideHomeIndicator",id:"autohidehomeindicator",level:4},{value:"gestureDirection",id:"gesturedirection",level:4},{value:"animationDuration",id:"animationduration",level:4},{value:"navigationBarColor",id:"navigationbarcolor",level:4},{value:"navigationBarHidden",id:"navigationbarhidden",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"Events",id:"events",level:3},{value:"transitionStart",id:"transitionstart",level:4},{value:"transitionEnd",id:"transitionend",level:4},{value:"Helpers",id:"helpers",level:3},{value:"replace",id:"replace",level:4},{value:"push",id:"push",level:4},{value:"pop",id:"pop",level:4},{value:"popTo",id:"popto",level:4},{value:"popToTop",id:"poptotop",level:4},{value:"Hooks",id:"hooks",level:3},{value:"useAnimatedHeaderHeight",id:"useanimatedheaderheight",level:4}];function u(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack."}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/native-stack-android.mp4"})}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/native-stack-ios.mp4"})}),"\n",(0,t.jsxs)(n.p,{children:["This navigator uses the native APIs ",(0,t.jsx)(n.code,{children:"UINavigationController"})," on iOS and ",(0,t.jsx)(n.code,{children:"Fragment"})," on Android so that navigation built with ",(0,t.jsx)(n.code,{children:"createNativeStackNavigator"})," will behave exactly the same and have the same performance characteristics as apps built natively on top of those APIs. It also offers basic Web support using ",(0,t.jsx)(n.a,{href:"https://github.com/necolas/react-native-web",children:(0,t.jsx)(n.code,{children:"react-native-web"})}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["One thing to keep in mind is that while ",(0,t.jsx)(n.code,{children:"@react-navigation/native-stack"})," offers native performance and exposes native features such as large title on iOS etc., it may not be as customizable as ",(0,t.jsx)(n.a,{href:"/docs/7.x/stack-navigator",children:(0,t.jsx)(n.code,{children:"@react-navigation/stack"})})," depending on your needs. So if you need more customization than what's possible in this navigator, consider using ",(0,t.jsx)(n.code,{children:"@react-navigation/stack"})," instead - which is a more customizable JavaScript based implementation."]}),"\n",(0,t.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,t.jsxs)(n.p,{children:["To use this navigator, ensure that you have ",(0,t.jsxs)(n.a,{href:"/docs/7.x/getting-started",children:[(0,t.jsx)(n.code,{children:"@react-navigation/native"})," and its dependencies (follow this guide)"]}),", then install ",(0,t.jsx)(n.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack",children:(0,t.jsx)(n.code,{children:"@react-navigation/native-stack"})}),":"]}),"\n",(0,t.jsxs)(s.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(a.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/native-stack@next\n"})})}),(0,t.jsx)(a.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn add @react-navigation/native-stack@next\n"})})}),(0,t.jsx)(a.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm add @react-navigation/native-stack@next\n"})})})]}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsxs)(n.p,{children:["To use this navigator, import it from ",(0,t.jsx)(n.code,{children:"@react-navigation/native-stack"}),":"]}),"\n",(0,t.jsxs)(s.Z,{groupId:"config",queryString:"config",children:[(0,t.jsx)(a.Z,{value:"static",label:"Static",default:!0,children:(0,t.jsx)(n.pre,{"data-name":"Native Stack Navigator","data-snack":"true","data-version":"7",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Native Stack Navigator" snack version=7',children:"import * as React from 'react';\nimport { Text, View, Button } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\n// codeblock-focus-start\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n navigation.navigate('Profile')}\n />\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile Screen\n \n );\n}\n\n// codeblock-focus-start\nconst MyStack = createNativeStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(MyStack);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,t.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,t.jsx)(n.pre,{"data-name":"Native Stack Navigator","data-snack":"true","data-version":"7",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Native Stack Navigator" snack version=7',children:"import * as React from 'react';\nimport { Text, View, Button } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\n// codeblock-focus-start\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nconst Stack = createNativeStackNavigator();\n\nfunction MyStack() {\n return (\n \n \n \n \n );\n}\n// codeblock-focus-end\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n navigation.navigate('Profile')}\n />\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile Screen\n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,t.jsx)(n.admonition,{type:"info",children:(0,t.jsxs)(n.p,{children:["If you encounter any bugs while using ",(0,t.jsx)(n.code,{children:"createNativeStackNavigator"}),", please open issues on ",(0,t.jsx)(n.a,{href:"https://github.com/software-mansion/react-native-screens",children:(0,t.jsx)(n.code,{children:"react-native-screens"})})," rather than the ",(0,t.jsx)(n.code,{children:"react-navigation"})," repository!"]})}),"\n",(0,t.jsx)(n.h2,{id:"api-definition",children:"API Definition"}),"\n",(0,t.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"Stack.Navigator"})," component accepts following props:"]}),"\n",(0,t.jsx)(n.h4,{id:"id",children:(0,t.jsx)(n.code,{children:"id"})}),"\n",(0,t.jsxs)(n.p,{children:["Optional unique ID for the navigator. This can be used with ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigation-object#getparent",children:(0,t.jsx)(n.code,{children:"navigation.getParent"})})," to refer to this navigator in a child navigator."]}),"\n",(0,t.jsx)(n.h4,{id:"initialroutename",children:(0,t.jsx)(n.code,{children:"initialRouteName"})}),"\n",(0,t.jsx)(n.p,{children:"The name of the route to render on first load of the navigator."}),"\n",(0,t.jsx)(n.h4,{id:"screenoptions",children:(0,t.jsx)(n.code,{children:"screenOptions"})}),"\n",(0,t.jsx)(n.p,{children:"Default options to use for the screens in the navigator."}),"\n",(0,t.jsx)(n.h3,{id:"options",children:"Options"}),"\n",(0,t.jsxs)(n.p,{children:["The following ",(0,t.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be used to configure the screens in the navigator:"]}),"\n",(0,t.jsx)(n.h4,{id:"title",children:(0,t.jsx)(n.code,{children:"title"})}),"\n",(0,t.jsxs)(n.p,{children:["String that can be used as a fallback for ",(0,t.jsx)(n.code,{children:"headerTitle"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"headerbackbuttonmenuenabled",children:(0,t.jsx)(n.code,{children:"headerBackButtonMenuEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Requires ",(0,t.jsx)(n.code,{children:"react-native-screens"})," version >=3.3.0."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbackvisible",children:(0,t.jsx)(n.code,{children:"headerBackVisible"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the back button is visible in the header. You can use it to show a back button alongside ",(0,t.jsx)(n.code,{children:"headerLeft"})," if you have specified it."]}),"\n",(0,t.jsx)(n.p,{children:"This will have no effect on the first screen in the stack."}),"\n",(0,t.jsx)(n.h4,{id:"headerbacktitle",children:(0,t.jsx)(n.code,{children:"headerBackTitle"})}),"\n",(0,t.jsxs)(n.p,{children:["Title string used by the back button on iOS. Defaults to the previous scene's title, or \"Back\" if there's not enough space. Use ",(0,t.jsx)(n.code,{children:"headerBackTitleVisible: false"})," to hide it."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbacktitlevisible",children:(0,t.jsx)(n.code,{children:"headerBackTitleVisible"})}),"\n",(0,t.jsx)(n.p,{children:"Whether the back button title should be visible or not."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbacktitlestyle",children:(0,t.jsx)(n.code,{children:"headerBackTitleStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for header back title. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontFamily"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontSize"})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbackimagesource",children:(0,t.jsx)(n.code,{children:"headerBackImageSource"})}),"\n",(0,t.jsx)(n.p,{children:"Image to display in the header as the icon in the back button. Defaults to back icon image for the platform"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"A chevron on iOS"}),"\n",(0,t.jsx)(n.li,{children:"An arrow on Android"}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"headerlargestyle",children:(0,t.jsx)(n.code,{children:"headerLargeStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Style of the header when a large title is shown. The large title is shown if ",(0,t.jsx)(n.code,{children:"headerLargeTitle"})," is ",(0,t.jsx)(n.code,{children:"true"})," and the edge of any scrollable content reaches the matching edge of the header."]}),"\n",(0,t.jsx)(n.p,{children:"Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"backgroundColor"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerlargetitle",children:(0,t.jsx)(n.code,{children:"headerLargeTitle"})}),"\n",(0,t.jsx)(n.p,{children:"Whether to enable header with large title which collapses to regular header on scroll."}),"\n",(0,t.jsxs)(n.p,{children:["For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ",(0,t.jsx)(n.code,{children:"ScrollView"})," or ",(0,t.jsx)(n.code,{children:"FlatList"}),". If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify ",(0,t.jsx)(n.code,{children:'contentInsetAdjustmentBehavior="automatic"'})," in your ",(0,t.jsx)(n.code,{children:"ScrollView"}),", ",(0,t.jsx)(n.code,{children:"FlatList"})," etc."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerlargetitleshadowvisible",children:(0,t.jsx)(n.code,{children:"headerLargeTitleShadowVisible"})}),"\n",(0,t.jsx)(n.p,{children:"Whether drop shadow of header is visible when a large title is shown."}),"\n",(0,t.jsx)(n.h4,{id:"headerlargetitlestyle",children:(0,t.jsx)(n.code,{children:"headerLargeTitleStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for large title in header. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontFamily"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontSize"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontWeight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"color"})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headershown",children:(0,t.jsx)(n.code,{children:"headerShown"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether to show the header. The header is shown by default. Setting this to ",(0,t.jsx)(n.code,{children:"false"})," hides the header."]}),"\n",(0,t.jsx)(n.h4,{id:"headerstyle",children:(0,t.jsx)(n.code,{children:"headerStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for header. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"backgroundColor"})}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"headershadowvisible",children:(0,t.jsx)(n.code,{children:"headerShadowVisible"})}),"\n",(0,t.jsx)(n.p,{children:"Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header."}),"\n",(0,t.jsx)(n.h4,{id:"headertransparent",children:(0,t.jsx)(n.code,{children:"headerTransparent"})}),"\n",(0,t.jsx)(n.p,{children:"Boolean indicating whether the navigation bar is translucent."}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"false"}),". Setting this to ",(0,t.jsx)(n.code,{children:"true"})," makes the header absolutely positioned - so that the header floats over the screen so that it overlaps the content underneath, and changes the background color to ",(0,t.jsx)(n.code,{children:"transparent"})," unless specified in ",(0,t.jsx)(n.code,{children:"headerStyle"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"This is useful if you want to render a semi-transparent header or a blurred background."}),"\n",(0,t.jsx)(n.p,{children:"Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically."}),"\n",(0,t.jsxs)(n.p,{children:["To get the height of the header, you can use ",(0,t.jsx)(n.a,{href:"/docs/7.x/elements#headerheightcontext",children:(0,t.jsx)(n.code,{children:"HeaderHeightContext"})})," with ",(0,t.jsx)(n.a,{href:"https://reactjs.org/docs/context.html#contextconsumer",children:"React's Context API"})," or ",(0,t.jsx)(n.a,{href:"/docs/7.x/elements#useheaderheight",children:(0,t.jsx)(n.code,{children:"useHeaderHeight"})}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"headerblureffect",children:(0,t.jsx)(n.code,{children:"headerBlurEffect"})}),"\n",(0,t.jsxs)(n.p,{children:["Blur effect for the translucent header. The ",(0,t.jsx)(n.code,{children:"headerTransparent"})," option needs to be set to ",(0,t.jsx)(n.code,{children:"true"})," for this to work."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"extraLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"light"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"dark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"regular"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"prominent"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemUltraThinMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThinMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThickMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemChromeMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemUltraThinMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThinMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThickMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemChromeMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemUltraThinMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThinMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThickMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemChromeMaterialDark"})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbackground",children:(0,t.jsx)(n.code,{children:"headerBackground"})}),"\n",(0,t.jsx)(n.p,{children:"Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient."}),"\n",(0,t.jsx)(n.h4,{id:"headertintcolor",children:(0,t.jsx)(n.code,{children:"headerTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"Tint color for the header. Changes the color of back button and title."}),"\n",(0,t.jsx)(n.h4,{id:"headerleft",children:(0,t.jsx)(n.code,{children:"headerLeft"})}),"\n",(0,t.jsxs)(n.p,{children:["Function which returns a React Element to display on the left side of the header. This replaces the back button. See ",(0,t.jsx)(n.code,{children:"headerBackVisible"})," to show the back button along side left element."]}),"\n",(0,t.jsx)(n.h4,{id:"headerright",children:(0,t.jsx)(n.code,{children:"headerRight"})}),"\n",(0,t.jsx)(n.p,{children:"Function which returns a React Element to display on the right side of the header."}),"\n",(0,t.jsx)(n.h4,{id:"headertitle",children:(0,t.jsx)(n.code,{children:"headerTitle"})}),"\n",(0,t.jsxs)(n.p,{children:["String or a function that returns a React Element to be used by the header. Defaults to ",(0,t.jsx)(n.code,{children:"title"})," or name of the screen."]}),"\n",(0,t.jsxs)(n.p,{children:["When a function is passed, it receives ",(0,t.jsx)(n.code,{children:"tintColor"})," and",(0,t.jsx)(n.code,{children:"children"})," in the options object as an argument. The title string is passed in ",(0,t.jsx)(n.code,{children:"children"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Note that if you render a custom element by passing a function, animations for the title won't work."}),"\n",(0,t.jsx)(n.h4,{id:"headertitlealign",children:(0,t.jsx)(n.code,{children:"headerTitleAlign"})}),"\n",(0,t.jsx)(n.p,{children:"How to align the header title. Possible values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"left"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"center"})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"left"})," on platforms other than iOS."]}),"\n",(0,t.jsxs)(n.p,{children:["Not supported on iOS. It's always ",(0,t.jsx)(n.code,{children:"center"})," on iOS and cannot be changed."]}),"\n",(0,t.jsx)(n.h4,{id:"headertitlestyle",children:(0,t.jsx)(n.code,{children:"headerTitleStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for header title. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontFamily"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontSize"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontWeight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"color"})}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"headersearchbaroptions",children:(0,t.jsx)(n.code,{children:"headerSearchBarOptions"})}),"\n",(0,t.jsxs)(n.p,{children:["Options to render a native search bar on iOS. Search bars are rarely static so normally it is controlled by passing an object to ",(0,t.jsx)(n.code,{children:"headerSearchBarOptions"})," navigation option in the component's body. You also need to specify ",(0,t.jsx)(n.code,{children:'contentInsetAdjustmentBehavior="automatic"'})," in your ",(0,t.jsx)(n.code,{children:"ScrollView"}),", ",(0,t.jsx)(n.code,{children:"FlatList"})," etc. If you don't have a ",(0,t.jsx)(n.code,{children:"ScrollView"}),", specify ",(0,t.jsx)(n.code,{children:"headerTransparent: false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS and Android."}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useLayoutEffect(() => {\n navigation.setOptions({\n headerSearchBarOptions: {\n // search bar options\n },\n });\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.p,{children:"Supported properties are described below."}),"\n",(0,t.jsx)(n.h5,{id:"autocapitalize",children:(0,t.jsx)(n.code,{children:"autoCapitalize"})}),"\n",(0,t.jsx)(n.p,{children:"Controls whether the text is automatically auto-capitalized as it is entered by the user.\nPossible values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"none"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"words"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"sentences"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"characters"})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"sentences"}),"."]}),"\n",(0,t.jsx)(n.h5,{id:"autofocus",children:(0,t.jsx)(n.code,{children:"autoFocus"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether to automatically focus search bar when it's shown. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"bartintcolor",children:(0,t.jsx)(n.code,{children:"barTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"The search field background color. By default bar tint color is translucent."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"tintcolor",children:(0,t.jsx)(n.code,{children:"tintColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color for the cursor caret and cancel button text."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"cancelbuttontext",children:(0,t.jsx)(n.code,{children:"cancelButtonText"})}),"\n",(0,t.jsxs)(n.p,{children:["The text to be used instead of default ",(0,t.jsx)(n.code,{children:"Cancel"})," button text."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"disablebackbuttonoverride",children:(0,t.jsx)(n.code,{children:"disableBackButtonOverride"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the back button should close search bar's text input or not. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"hidenavigationbar",children:(0,t.jsx)(n.code,{children:"hideNavigationBar"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to hide the navigation bar during searching. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"hidewhenscrolling",children:(0,t.jsx)(n.code,{children:"hideWhenScrolling"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to hide the search bar when scrolling. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"inputtype",children:(0,t.jsx)(n.code,{children:"inputType"})}),"\n",(0,t.jsxs)(n.p,{children:["The type of the input. Defaults to ",(0,t.jsx)(n.code,{children:'"text"'}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"text"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"phone"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"number"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"email"'})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"obscurebackground",children:(0,t.jsx)(n.code,{children:"obscureBackground"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to obscure the underlying content with semi-transparent overlay. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.h5,{id:"placeholder",children:(0,t.jsx)(n.code,{children:"placeholder"})}),"\n",(0,t.jsx)(n.p,{children:"Text displayed when search field is empty."}),"\n",(0,t.jsx)(n.h5,{id:"textcolor",children:(0,t.jsx)(n.code,{children:"textColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color of the text in the search field."}),"\n",(0,t.jsx)(n.h5,{id:"hinttextcolor",children:(0,t.jsx)(n.code,{children:"hintTextColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color of the hint text in the search field."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"headericoncolor",children:(0,t.jsx)(n.code,{children:"headerIconColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color of the search and close icons shown in the header"}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"shouldshowhintsearchicon",children:(0,t.jsx)(n.code,{children:"shouldShowHintSearchIcon"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether to show the search hint icon when search bar is focused. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"onblur",children:(0,t.jsx)(n.code,{children:"onBlur"})}),"\n",(0,t.jsx)(n.p,{children:"A callback that gets called when search bar has lost focus."}),"\n",(0,t.jsx)(n.h5,{id:"oncancelbuttonpress",children:(0,t.jsx)(n.code,{children:"onCancelButtonPress"})}),"\n",(0,t.jsx)(n.p,{children:"A callback that gets called when the cancel button is pressed."}),"\n",(0,t.jsx)(n.h5,{id:"onchangetext",children:(0,t.jsx)(n.code,{children:"onChangeText"})}),"\n",(0,t.jsx)(n.p,{children:"A callback that gets called when the text changes. It receives the current text value of the search bar."}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"const [search, setSearch] = React.useState('');\n\nReact.useLayoutEffect(() => {\n navigation.setOptions({\n headerSearchBarOptions: {\n onChangeText: (event) => setSearch(event.nativeEvent.text),\n },\n });\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.h4,{id:"header",children:(0,t.jsx)(n.code,{children:"header"})}),"\n",(0,t.jsx)(n.p,{children:"Custom header to use instead of the default header."}),"\n",(0,t.jsx)(n.p,{children:"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:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"navigation"})," - The navigation object for the current screen."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"route"})," - The route object for the current screen."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"options"})," - The options for the current screen"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"back"})," - Options for the back button, contains an object with a ",(0,t.jsx)(n.code,{children:"title"})," property to use for back button label."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { getHeaderTitle } from '@react-navigation/elements';\n\n// ..\n\nheader: ({ navigation, route, options, back }) => {\n const title = getHeaderTitle(options, route.name);\n\n return (\n : undefined\n }\n style={options.headerStyle}\n />\n );\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To set a custom header for all the screens in the navigator, you can specify this option in the ",(0,t.jsx)(n.code,{children:"screenOptions"})," prop of the navigator."]}),"\n",(0,t.jsx)(n.p,{children:"Note that if you specify a custom header, the native functionality such as large title, search bar etc. won't work."}),"\n",(0,t.jsx)(n.h4,{id:"statusbaranimation",children:(0,t.jsx)(n.code,{children:"statusBarAnimation"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the status bar animation (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to ",(0,t.jsx)(n.code,{children:"fade"})," on iOS and ",(0,t.jsx)(n.code,{children:"none"})," on Android."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"fade"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"none"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"slide"'})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["On Android, setting either ",(0,t.jsx)(n.code,{children:"fade"})," or ",(0,t.jsx)(n.code,{children:"slide"})," will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar."]}),"\n",(0,t.jsxs)(n.p,{children:["Requires setting ",(0,t.jsx)(n.code,{children:"View controller-based status bar appearance -> YES"})," (or removing the config) in your ",(0,t.jsx)(n.code,{children:"Info.plist"})," file."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"statusbarhidden",children:(0,t.jsx)(n.code,{children:"statusBarHidden"})}),"\n",(0,t.jsx)(n.p,{children:"Whether the status bar should be hidden on this screen."}),"\n",(0,t.jsxs)(n.p,{children:["Requires setting ",(0,t.jsx)(n.code,{children:"View controller-based status bar appearance -> YES"})," (or removing the config) in your ",(0,t.jsx)(n.code,{children:"Info.plist"})," file."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"statusbarstyle",children:(0,t.jsx)(n.code,{children:"statusBarStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the status bar color (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to ",(0,t.jsx)(n.code,{children:"auto"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"auto"'})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"inverted"'})," (iOS only)"]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"dark"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"light"'})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Requires setting ",(0,t.jsx)(n.code,{children:"View controller-based status bar appearance -> YES"})," (or removing the config) in your ",(0,t.jsx)(n.code,{children:"Info.plist"})," file."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"statusbarcolor",children:(0,t.jsx)(n.code,{children:"statusBarColor"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the status bar color (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to initial status bar color."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"statusbartranslucent",children:(0,t.jsx)(n.code,{children:"statusBarTranslucent"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the translucency of the status bar (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"contentstyle",children:(0,t.jsx)(n.code,{children:"contentStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the scene content."}),"\n",(0,t.jsx)(n.h4,{id:"animationmatchesgesture",children:(0,t.jsx)(n.code,{children:"animationMatchesGesture"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the gesture to dismiss should use animation provided to ",(0,t.jsx)(n.code,{children:"animation"})," prop. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Doesn't affect the behavior of screens presented modally."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"fullscreengestureenabled",children:(0,t.jsx)(n.code,{children:"fullScreenGestureEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the gesture to dismiss should work on the whole screen. Using gesture to dismiss with this option results in the same transition animation as ",(0,t.jsx)(n.code,{children:"simple_push"}),". This behavior can be changed by setting ",(0,t.jsx)(n.code,{children:"customAnimationOnGesture"})," prop. Achieving the default iOS animation isn't possible due to platform limitations. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Doesn't affect the behavior of screens presented modally."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"gestureenabled",children:(0,t.jsx)(n.code,{children:"gestureEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether you can use gestures to dismiss this screen. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),". Only supported on iOS."]}),"\n",(0,t.jsx)(n.h4,{id:"animationtypeforreplace",children:(0,t.jsx)(n.code,{children:"animationTypeForReplace"})}),"\n",(0,t.jsxs)(n.p,{children:["The type of animation to use when this screen replaces another screen. Defaults to ",(0,t.jsx)(n.code,{children:"pop"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"push"}),": the new screen will perform push animation."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"pop"}),": the new screen will perform pop animation."]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"animation",children:(0,t.jsx)(n.code,{children:"animation"})}),"\n",(0,t.jsx)(n.p,{children:"How the screen should animate when pushed or popped."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"default"}),": use the platform default animation"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"fade"}),": fade screen in or out"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"fade_from_bottom"}),": fade the new screen from bottom"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"flip"}),": flip the screen, requires ",(0,t.jsx)(n.code,{children:'presentation: "modal"'})," (iOS only)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"simple_push"}),": default animation, but without shadow and native header transition (iOS only, uses default animation on Android)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide_from_bottom"}),": slide in the new screen from bottom"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide_from_right"}),": slide in the new screen from right (Android only, uses default animation on iOS)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide_from_left"}),": slide in the new screen from left (Android only, uses default animation on iOS)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"none"}),": don't animate the screen"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"presentation",children:(0,t.jsx)(n.code,{children:"presentation"})}),"\n",(0,t.jsx)(n.p,{children:"How should the screen be presented."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"card"}),": the new screen will be pushed onto a stack, which means the default animation will be slide from the side on iOS, the animation on Android will vary depending on the OS version and theme."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"modal"}),": the new screen will be presented modally. this also allows for a nested stack to be rendered inside the screen."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transparentModal"}),": the new screen will be presented modally, but in addition, the previous screen will stay so that the content below can still be seen if the screen has translucent background."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"containedModal"}),': will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"containedTransparentModal"}),': will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"fullScreenModal"}),': will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android. A screen using this presentation style can\'t be dismissed by gesture.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"formSheet"}),': will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.']}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"orientation",children:(0,t.jsx)(n.code,{children:"orientation"})}),"\n",(0,t.jsx)(n.p,{children:"The display orientation to use for the screen."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"default"}),' - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"all"}),": all orientations are permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"portrait"}),": portrait orientations are permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"portrait_up"}),": right-side portrait orientation is permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"portrait_down"}),": upside-down portrait orientation is permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"landscape"}),": landscape orientations are permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"landscape_left"}),": landscape-left orientation is permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"landscape_right"}),": landscape-right orientation is permitted."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"autohidehomeindicator",children:(0,t.jsx)(n.code,{children:"autoHideHomeIndicator"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether the home indicator should prefer to stay hidden. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"gesturedirection",children:(0,t.jsx)(n.code,{children:"gestureDirection"})}),"\n",(0,t.jsx)(n.p,{children:"Sets the direction in which you should swipe to dismiss the screen."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical"})," \u2013 dismiss screen vertically"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal"})," \u2013 dismiss screen horizontally (default)"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["When using ",(0,t.jsx)(n.code,{children:"vertical"})," option, options ",(0,t.jsx)(n.code,{children:"fullScreenGestureEnabled: true"}),", ",(0,t.jsx)(n.code,{children:"customAnimationOnGesture: true"})," and ",(0,t.jsx)(n.code,{children:"animation: 'slide_from_bottom'"})," are set by default."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"animationduration",children:(0,t.jsx)(n.code,{children:"animationDuration"})}),"\n",(0,t.jsxs)(n.p,{children:["Changes the duration (in milliseconds) of ",(0,t.jsx)(n.code,{children:"slide_from_bottom"}),", ",(0,t.jsx)(n.code,{children:"fade_from_bottom"}),", ",(0,t.jsx)(n.code,{children:"fade"})," and ",(0,t.jsx)(n.code,{children:"simple_push"})," transitions on iOS. Defaults to ",(0,t.jsx)(n.code,{children:"350"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The duration of ",(0,t.jsx)(n.code,{children:"default"})," and ",(0,t.jsx)(n.code,{children:"flip"})," transitions isn't customizable."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"navigationbarcolor",children:(0,t.jsx)(n.code,{children:"navigationBarColor"})}),"\n",(0,t.jsx)(n.p,{children:"Sets the navigation bar color. Defaults to initial status bar color."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"navigationbarhidden",children:(0,t.jsx)(n.code,{children:"navigationBarHidden"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether the navigation bar should be hidden. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"freezeonblur",children:(0,t.jsx)(n.code,{children:"freezeOnBlur"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),".\nDefaults to ",(0,t.jsx)(n.code,{children:"true"})," when ",(0,t.jsx)(n.code,{children:"enableFreeze()"})," from ",(0,t.jsx)(n.code,{children:"react-native-screens"})," package is run at the top of the application."]}),"\n",(0,t.jsxs)(n.p,{children:["Requires ",(0,t.jsx)(n.code,{children:"react-native-screens"})," version >=3.16.0."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS and Android."}),"\n",(0,t.jsx)(n.h3,{id:"events",children:"Events"}),"\n",(0,t.jsxs)(n.p,{children:["The navigator can ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigation-events",children:"emit events"})," on certain actions. Supported events are:"]}),"\n",(0,t.jsx)(n.h4,{id:"transitionstart",children:(0,t.jsx)(n.code,{children:"transitionStart"})}),"\n",(0,t.jsx)(n.p,{children:"This event is fired when the transition animation starts for the current screen."}),"\n",(0,t.jsx)(n.p,{children:"Event data:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"e.data.closing"})," - Boolean indicating whether the screen is being opened or closed."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('transitionStart', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.h4,{id:"transitionend",children:(0,t.jsx)(n.code,{children:"transitionEnd"})}),"\n",(0,t.jsx)(n.p,{children:"This event is fired when the transition animation ends for the current screen."}),"\n",(0,t.jsx)(n.p,{children:"Event data:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"e.data.closing"})," - Boolean indicating whether the screen was opened or closed."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('transitionEnd', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.h3,{id:"helpers",children:"Helpers"}),"\n",(0,t.jsx)(n.p,{children:"The nativestack navigator adds the following methods to the navigation object:"}),"\n",(0,t.jsx)(n.h4,{id:"replace",children:(0,t.jsx)(n.code,{children:"replace"})}),"\n",(0,t.jsx)(n.p,{children:"Replaces the current screen with a new screen in the stack. The method accepts the following arguments:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"name"})," - ",(0,t.jsx)(n.em,{children:"string"})," - Name of the route to push onto the stack."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"params"})," - ",(0,t.jsx)(n.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.replace('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,t.jsx)(n.h4,{id:"push",children:(0,t.jsx)(n.code,{children:"push"})}),"\n",(0,t.jsx)(n.p,{children:"Pushes a new screen to the top of the stack and navigate to it. The method accepts the following arguments:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"name"})," - ",(0,t.jsx)(n.em,{children:"string"})," - Name of the route to push onto the stack."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"params"})," - ",(0,t.jsx)(n.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.push('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,t.jsx)(n.h4,{id:"pop",children:(0,t.jsx)(n.code,{children:"pop"})}),"\n",(0,t.jsxs)(n.p,{children:["Pops the current screen from the stack and navigates back to the previous screen. It takes one optional argument (",(0,t.jsx)(n.code,{children:"count"}),"), which allows you to specify how many screens to pop back by."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.pop();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"popto",children:(0,t.jsx)(n.code,{children:"popTo"})}),"\n",(0,t.jsx)(n.p,{children:"Navigates back to a previous screen in the stack by popping screens after it. The method accepts the following arguments:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"name"})," - ",(0,t.jsx)(n.em,{children:"string"})," - Name of the route to navigate to."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"params"})," - ",(0,t.jsx)(n.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If a matching screen is not found in the stack, this will pop the current screen and add a new screen with the specified name and params."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.popTo('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,t.jsx)(n.h4,{id:"poptotop",children:(0,t.jsx)(n.code,{children:"popToTop"})}),"\n",(0,t.jsx)(n.p,{children:"Pops all of the screens in the stack except the first one and navigates to it."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.popToTop();\n"})}),"\n",(0,t.jsx)(n.h3,{id:"hooks",children:"Hooks"}),"\n",(0,t.jsx)(n.p,{children:"The native stack navigator exports the following hooks:"}),"\n",(0,t.jsx)(n.h4,{id:"useanimatedheaderheight",children:(0,t.jsx)(n.code,{children:"useAnimatedHeaderHeight"})}),"\n",(0,t.jsxs)(n.p,{children:["The hook returns an animated value representing the height of the header. This is similar to ",(0,t.jsx)(n.a,{href:"/docs/7.x/elements#useheaderheight",children:(0,t.jsx)(n.code,{children:"useHeaderHeight"})})," but returns an animated value that changed as the header height changes, e.g. when expanding or collapsing large title or search bar on iOS."]}),"\n",(0,t.jsx)(n.p,{children:"It can be used to animated content along with header height changes."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { Animated } from 'react-native';\nimport { useAnimatedHeaderHeight } from '@react-navigation/native-stack';\n\nconst MyView = () => {\n const headerHeight = useAnimatedHeaderHeight();\n\n return (\n \n );\n};\n"})})]})}function x(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}},85162:(e,n,i)=>{i.d(n,{Z:()=>a});i(67294);var t=i(86010);const r={tabItem:"tabItem_Ymn6"};var s=i(85893);function a(e){let{children:n,hidden:i,className:a}=e;return(0,s.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,a),hidden:i,children:n})}},74866:(e,n,i)=>{i.d(n,{Z:()=>S});var t=i(67294),r=i(86010),s=i(12466),a=i(16550),o=i(20469),l=i(91980),d=i(67392),c=i(50012);function h(e){var n,i;return null!=(n=null==(i=t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error("Docusaurus error: Bad 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.')})))?void 0:i.filter(Boolean))?n:[]}function u(e){const{values:n,children:i}=e;return(0,t.useMemo)((()=>{const e=null!=n?n:function(e){return h(e).map((e=>{let{props:{value:n,label:i,attributes:t,default:r}}=e;return{value:n,label:i,attributes:t,default:r}}))}(i);return function(e){const n=(0,d.l)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error('Docusaurus error: Duplicate values "'+n.map((e=>e.value)).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[n,i])}function x(e){let{value:n,tabValues:i}=e;return i.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:i}=e;const r=(0,a.k6)(),s=function(e){let{queryString:n=!1,groupId:i}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!i)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!=i?i:null}({queryString:n,groupId:i});return[(0,l._X)(s),(0,t.useCallback)((e=>{if(!s)return;const n=new URLSearchParams(r.location.search);n.set(s,e),r.replace({...r.location,search:n.toString()})}),[s,r])]}function j(e){const{defaultValue:n,queryString:i=!1,groupId:r}=e,s=u(e),[a,l]=(0,t.useState)((()=>function(e){var n;let{defaultValue:i,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(i){if(!x({value:i,tabValues:t}))throw new Error('Docusaurus error: The has a defaultValue "'+i+'" but none of its children has the corresponding value. Available values are: '+t.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return i}const r=null!=(n=t.find((e=>e.default)))?n:t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:s}))),[d,h]=p({queryString:i,groupId:r}),[j,v]=function(e){let{groupId:n}=e;const i=function(e){return e?"docusaurus.tab."+e:null}(n),[r,s]=(0,c.Nk)(i);return[r,(0,t.useCallback)((e=>{i&&s.set(e)}),[i,s])]}({groupId:r}),g=(()=>{const e=null!=d?d:j;return x({value:e,tabValues:s})?e:null})();(0,o.Z)((()=>{g&&l(g)}),[g]);return{selectedValue:a,selectValue:(0,t.useCallback)((e=>{if(!x({value:e,tabValues:s}))throw new Error("Can't select invalid tab value="+e);l(e),h(e),v(e)}),[h,v,s]),tabValues:s}}var v=i(72389);const g={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=i(85893);function m(e){let{className:n,block:i,selectedValue:t,selectValue:a,tabValues:o}=e;const l=[],{blockElementScrollPositionUntilNextRender:d}=(0,s.o5)(),c=e=>{const n=e.currentTarget,i=l.indexOf(n),r=o[i].value;r!==t&&(d(n),a(r))},h=e=>{var n;let i=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{var t;const n=l.indexOf(e.currentTarget)+1;i=null!=(t=l[n])?t:l[0];break}case"ArrowLeft":{var r;const n=l.indexOf(e.currentTarget)-1;i=null!=(r=l[n])?r:l[l.length-1];break}}null==(n=i)||n.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":i},n),children:o.map((e=>{let{value:n,label:i,attributes:s}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>l.push(e),onKeyDown:h,onClick:c,...s,className:(0,r.Z)("tabs__item",g.tabItem,null==s?void 0:s.className,{"tabs__item--active":t===n}),children:null!=i?i:n},n)}))})}function b(e){let{lazy:n,children:i,selectedValue:r}=e;const s=(Array.isArray(i)?i:[i]).filter(Boolean);if(n){const e=s.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:s.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function y(e){const n=j(e);return(0,f.jsxs)("div",{className:(0,r.Z)("tabs-container",g.tabList),children:[(0,f.jsx)(m,{...e,...n}),(0,f.jsx)(b,{...e,...n})]})}function S(e){const n=(0,v.Z)();return(0,f.jsx)(y,{...e,children:h(e.children)},String(n))}},11151:(e,n,i)=>{i.d(n,{Z:()=>o,a:()=>a});var t=i(67294);const r={},s=t.createContext(r);function a(e){const n=t.useContext(s);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function o(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:a(e.components),t.createElement(s.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/17b59e25.e87892bb.js b/assets/js/17b59e25.e87892bb.js deleted file mode 100644 index abf3572b53..0000000000 --- a/assets/js/17b59e25.e87892bb.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[89551],{22128:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>x,frontMatter:()=>a,metadata:()=>d,toc:()=>h});var t=i(85893),r=i(11151),o=i(74866),s=i(85162);const a={id:"native-stack-navigator",title:"Native Stack Navigator",sidebar_label:"Native Stack"},l=void 0,d={id:"native-stack-navigator",title:"Native Stack Navigator",description:"Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.",source:"@site/versioned_docs/version-7.x/native-stack-navigator.md",sourceDirName:".",slug:"/native-stack-navigator",permalink:"/docs/7.x/native-stack-navigator",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/native-stack-navigator.md",tags:[],version:"7.x",frontMatter:{id:"native-stack-navigator",title:"Native Stack Navigator",sidebar_label:"Native Stack"},sidebar:"docs",previous:{title:"Stack",permalink:"/docs/7.x/stack-navigator"},next:{title:"Bottom Tabs",permalink:"/docs/7.x/bottom-tab-navigator"}},c={},h=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",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:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"headerBackButtonMenuEnabled",id:"headerbackbuttonmenuenabled",level:4},{value:"headerBackVisible",id:"headerbackvisible",level:4},{value:"headerBackTitle",id:"headerbacktitle",level:4},{value:"headerBackTitleVisible",id:"headerbacktitlevisible",level:4},{value:"headerBackTitleStyle",id:"headerbacktitlestyle",level:4},{value:"headerBackImageSource",id:"headerbackimagesource",level:4},{value:"headerLargeStyle",id:"headerlargestyle",level:4},{value:"headerLargeTitle",id:"headerlargetitle",level:4},{value:"headerLargeTitleShadowVisible",id:"headerlargetitleshadowvisible",level:4},{value:"headerLargeTitleStyle",id:"headerlargetitlestyle",level:4},{value:"headerShown",id:"headershown",level:4},{value:"headerStyle",id:"headerstyle",level:4},{value:"headerShadowVisible",id:"headershadowvisible",level:4},{value:"headerTransparent",id:"headertransparent",level:4},{value:"headerBlurEffect",id:"headerblureffect",level:4},{value:"headerBackground",id:"headerbackground",level:4},{value:"headerTintColor",id:"headertintcolor",level:4},{value:"headerLeft",id:"headerleft",level:4},{value:"headerRight",id:"headerright",level:4},{value:"headerTitle",id:"headertitle",level:4},{value:"headerTitleAlign",id:"headertitlealign",level:4},{value:"headerTitleStyle",id:"headertitlestyle",level:4},{value:"headerSearchBarOptions",id:"headersearchbaroptions",level:4},{value:"autoCapitalize",id:"autocapitalize",level:5},{value:"autoFocus",id:"autofocus",level:5},{value:"barTintColor",id:"bartintcolor",level:5},{value:"tintColor",id:"tintcolor",level:5},{value:"cancelButtonText",id:"cancelbuttontext",level:5},{value:"disableBackButtonOverride",id:"disablebackbuttonoverride",level:5},{value:"hideNavigationBar",id:"hidenavigationbar",level:5},{value:"hideWhenScrolling",id:"hidewhenscrolling",level:5},{value:"inputType",id:"inputtype",level:5},{value:"obscureBackground",id:"obscurebackground",level:5},{value:"placeholder",id:"placeholder",level:5},{value:"textColor",id:"textcolor",level:5},{value:"hintTextColor",id:"hinttextcolor",level:5},{value:"headerIconColor",id:"headericoncolor",level:5},{value:"shouldShowHintSearchIcon",id:"shouldshowhintsearchicon",level:5},{value:"onBlur",id:"onblur",level:5},{value:"onCancelButtonPress",id:"oncancelbuttonpress",level:5},{value:"onChangeText",id:"onchangetext",level:5},{value:"header",id:"header",level:4},{value:"statusBarAnimation",id:"statusbaranimation",level:4},{value:"statusBarHidden",id:"statusbarhidden",level:4},{value:"statusBarStyle",id:"statusbarstyle",level:4},{value:"statusBarColor",id:"statusbarcolor",level:4},{value:"statusBarTranslucent",id:"statusbartranslucent",level:4},{value:"contentStyle",id:"contentstyle",level:4},{value:"animationMatchesGesture",id:"animationmatchesgesture",level:4},{value:"fullScreenGestureEnabled",id:"fullscreengestureenabled",level:4},{value:"gestureEnabled",id:"gestureenabled",level:4},{value:"animationTypeForReplace",id:"animationtypeforreplace",level:4},{value:"animation",id:"animation",level:4},{value:"presentation",id:"presentation",level:4},{value:"orientation",id:"orientation",level:4},{value:"autoHideHomeIndicator",id:"autohidehomeindicator",level:4},{value:"gestureDirection",id:"gesturedirection",level:4},{value:"animationDuration",id:"animationduration",level:4},{value:"navigationBarColor",id:"navigationbarcolor",level:4},{value:"navigationBarHidden",id:"navigationbarhidden",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"Events",id:"events",level:3},{value:"transitionStart",id:"transitionstart",level:4},{value:"transitionEnd",id:"transitionend",level:4},{value:"Helpers",id:"helpers",level:3},{value:"replace",id:"replace",level:4},{value:"push",id:"push",level:4},{value:"pop",id:"pop",level:4},{value:"popTo",id:"popto",level:4},{value:"popToTop",id:"poptotop",level:4}];function u(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",p:"p",pre:"pre",ul:"ul",...(0,r.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Native Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack."}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/native-stack-android.mp4"})}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/native-stack-ios.mp4"})}),"\n",(0,t.jsxs)(n.p,{children:["This navigator uses the native APIs ",(0,t.jsx)(n.code,{children:"UINavigationController"})," on iOS and ",(0,t.jsx)(n.code,{children:"Fragment"})," on Android so that navigation built with ",(0,t.jsx)(n.code,{children:"createNativeStackNavigator"})," will behave exactly the same and have the same performance characteristics as apps built natively on top of those APIs. It also offers basic Web support using ",(0,t.jsx)(n.a,{href:"https://github.com/necolas/react-native-web",children:(0,t.jsx)(n.code,{children:"react-native-web"})}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["One thing to keep in mind is that while ",(0,t.jsx)(n.code,{children:"@react-navigation/native-stack"})," offers native performance and exposes native features such as large title on iOS etc., it may not be as customizable as ",(0,t.jsx)(n.a,{href:"/docs/7.x/stack-navigator",children:(0,t.jsx)(n.code,{children:"@react-navigation/stack"})})," depending on your needs. So if you need more customization than what's possible in this navigator, consider using ",(0,t.jsx)(n.code,{children:"@react-navigation/stack"})," instead - which is a more customizable JavaScript based implementation."]}),"\n",(0,t.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,t.jsxs)(n.p,{children:["To use this navigator, ensure that you have ",(0,t.jsxs)(n.a,{href:"/docs/7.x/getting-started",children:[(0,t.jsx)(n.code,{children:"@react-navigation/native"})," and its dependencies (follow this guide)"]}),", then install ",(0,t.jsx)(n.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/native-stack",children:(0,t.jsx)(n.code,{children:"@react-navigation/native-stack"})}),":"]}),"\n",(0,t.jsxs)(o.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(s.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/native-stack@next\n"})})}),(0,t.jsx)(s.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn add @react-navigation/native-stack@next\n"})})}),(0,t.jsx)(s.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm add @react-navigation/native-stack@next\n"})})})]}),"\n",(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,t.jsxs)(n.p,{children:["To use this navigator, import it from ",(0,t.jsx)(n.code,{children:"@react-navigation/native-stack"}),":"]}),"\n",(0,t.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,t.jsx)(s.Z,{value:"static",label:"Static",default:!0,children:(0,t.jsx)(n.pre,{"data-name":"Native Stack Navigator","data-snack":"true","data-version":"7",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Native Stack Navigator" snack version=7',children:"import * as React from 'react';\nimport { Text, View, Button } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\n// codeblock-focus-start\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n navigation.navigate('Profile')}\n />\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile Screen\n \n );\n}\n\n// codeblock-focus-start\nconst MyStack = createNativeStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(MyStack);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,t.jsx)(s.Z,{value:"dynamic",label:"Dynamic",children:(0,t.jsx)(n.pre,{"data-name":"Native Stack Navigator","data-snack":"true","data-version":"7",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Native Stack Navigator" snack version=7',children:"import * as React from 'react';\nimport { Text, View, Button } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\n// codeblock-focus-start\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nconst Stack = createNativeStackNavigator();\n\nfunction MyStack() {\n return (\n \n \n \n \n );\n}\n// codeblock-focus-end\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n navigation.navigate('Profile')}\n />\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile Screen\n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,t.jsx)(n.admonition,{type:"info",children:(0,t.jsxs)(n.p,{children:["If you encounter any bugs while using ",(0,t.jsx)(n.code,{children:"createNativeStackNavigator"}),", please open issues on ",(0,t.jsx)(n.a,{href:"https://github.com/software-mansion/react-native-screens",children:(0,t.jsx)(n.code,{children:"react-native-screens"})})," rather than the ",(0,t.jsx)(n.code,{children:"react-navigation"})," repository!"]})}),"\n",(0,t.jsx)(n.h2,{id:"api-definition",children:"API Definition"}),"\n",(0,t.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"Stack.Navigator"})," component accepts following props:"]}),"\n",(0,t.jsx)(n.h4,{id:"id",children:(0,t.jsx)(n.code,{children:"id"})}),"\n",(0,t.jsxs)(n.p,{children:["Optional unique ID for the navigator. This can be used with ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigation-object#getparent",children:(0,t.jsx)(n.code,{children:"navigation.getParent"})})," to refer to this navigator in a child navigator."]}),"\n",(0,t.jsx)(n.h4,{id:"initialroutename",children:(0,t.jsx)(n.code,{children:"initialRouteName"})}),"\n",(0,t.jsx)(n.p,{children:"The name of the route to render on first load of the navigator."}),"\n",(0,t.jsx)(n.h4,{id:"screenoptions",children:(0,t.jsx)(n.code,{children:"screenOptions"})}),"\n",(0,t.jsx)(n.p,{children:"Default options to use for the screens in the navigator."}),"\n",(0,t.jsx)(n.h3,{id:"options",children:"Options"}),"\n",(0,t.jsxs)(n.p,{children:["The following ",(0,t.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be used to configure the screens in the navigator:"]}),"\n",(0,t.jsx)(n.h4,{id:"title",children:(0,t.jsx)(n.code,{children:"title"})}),"\n",(0,t.jsxs)(n.p,{children:["String that can be used as a fallback for ",(0,t.jsx)(n.code,{children:"headerTitle"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"headerbackbuttonmenuenabled",children:(0,t.jsx)(n.code,{children:"headerBackButtonMenuEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to show the menu on longPress of iOS >= 14 back button. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["Requires ",(0,t.jsx)(n.code,{children:"react-native-screens"})," version >=3.3.0."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbackvisible",children:(0,t.jsx)(n.code,{children:"headerBackVisible"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the back button is visible in the header. You can use it to show a back button alongside ",(0,t.jsx)(n.code,{children:"headerLeft"})," if you have specified it."]}),"\n",(0,t.jsx)(n.p,{children:"This will have no effect on the first screen in the stack."}),"\n",(0,t.jsx)(n.h4,{id:"headerbacktitle",children:(0,t.jsx)(n.code,{children:"headerBackTitle"})}),"\n",(0,t.jsxs)(n.p,{children:["Title string used by the back button on iOS. Defaults to the previous scene's title, or \"Back\" if there's not enough space. Use ",(0,t.jsx)(n.code,{children:"headerBackTitleVisible: false"})," to hide it."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbacktitlevisible",children:(0,t.jsx)(n.code,{children:"headerBackTitleVisible"})}),"\n",(0,t.jsx)(n.p,{children:"Whether the back button title should be visible or not."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbacktitlestyle",children:(0,t.jsx)(n.code,{children:"headerBackTitleStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for header back title. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontFamily"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontSize"})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbackimagesource",children:(0,t.jsx)(n.code,{children:"headerBackImageSource"})}),"\n",(0,t.jsx)(n.p,{children:"Image to display in the header as the icon in the back button. Defaults to back icon image for the platform"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"A chevron on iOS"}),"\n",(0,t.jsx)(n.li,{children:"An arrow on Android"}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"headerlargestyle",children:(0,t.jsx)(n.code,{children:"headerLargeStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Style of the header when a large title is shown. The large title is shown if ",(0,t.jsx)(n.code,{children:"headerLargeTitle"})," is ",(0,t.jsx)(n.code,{children:"true"})," and the edge of any scrollable content reaches the matching edge of the header."]}),"\n",(0,t.jsx)(n.p,{children:"Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"backgroundColor"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerlargetitle",children:(0,t.jsx)(n.code,{children:"headerLargeTitle"})}),"\n",(0,t.jsx)(n.p,{children:"Whether to enable header with large title which collapses to regular header on scroll."}),"\n",(0,t.jsxs)(n.p,{children:["For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ",(0,t.jsx)(n.code,{children:"ScrollView"})," or ",(0,t.jsx)(n.code,{children:"FlatList"}),". If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify ",(0,t.jsx)(n.code,{children:'contentInsetAdjustmentBehavior="automatic"'})," in your ",(0,t.jsx)(n.code,{children:"ScrollView"}),", ",(0,t.jsx)(n.code,{children:"FlatList"})," etc."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerlargetitleshadowvisible",children:(0,t.jsx)(n.code,{children:"headerLargeTitleShadowVisible"})}),"\n",(0,t.jsx)(n.p,{children:"Whether drop shadow of header is visible when a large title is shown."}),"\n",(0,t.jsx)(n.h4,{id:"headerlargetitlestyle",children:(0,t.jsx)(n.code,{children:"headerLargeTitleStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for large title in header. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontFamily"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontSize"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontWeight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"color"})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headershown",children:(0,t.jsx)(n.code,{children:"headerShown"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether to show the header. The header is shown by default. Setting this to ",(0,t.jsx)(n.code,{children:"false"})," hides the header."]}),"\n",(0,t.jsx)(n.h4,{id:"headerstyle",children:(0,t.jsx)(n.code,{children:"headerStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for header. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"backgroundColor"})}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"headershadowvisible",children:(0,t.jsx)(n.code,{children:"headerShadowVisible"})}),"\n",(0,t.jsx)(n.p,{children:"Whether to hide the elevation shadow (Android) or the bottom border (iOS) on the header."}),"\n",(0,t.jsx)(n.h4,{id:"headertransparent",children:(0,t.jsx)(n.code,{children:"headerTransparent"})}),"\n",(0,t.jsx)(n.p,{children:"Boolean indicating whether the navigation bar is translucent."}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"false"}),". Setting this to ",(0,t.jsx)(n.code,{children:"true"})," makes the header absolutely positioned - so that the header floats over the screen so that it overlaps the content underneath, and changes the background color to ",(0,t.jsx)(n.code,{children:"transparent"})," unless specified in ",(0,t.jsx)(n.code,{children:"headerStyle"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"This is useful if you want to render a semi-transparent header or a blurred background."}),"\n",(0,t.jsx)(n.p,{children:"Note that if you don't want your content to appear under the header, you need to manually add a top margin to your content. React Navigation won't do it automatically."}),"\n",(0,t.jsxs)(n.p,{children:["To get the height of the header, you can use ",(0,t.jsx)(n.a,{href:"/docs/7.x/elements#headerheightcontext",children:(0,t.jsx)(n.code,{children:"HeaderHeightContext"})})," with ",(0,t.jsx)(n.a,{href:"https://reactjs.org/docs/context.html#contextconsumer",children:"React's Context API"})," or ",(0,t.jsx)(n.a,{href:"/docs/7.x/elements#useheaderheight",children:(0,t.jsx)(n.code,{children:"useHeaderHeight"})}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"headerblureffect",children:(0,t.jsx)(n.code,{children:"headerBlurEffect"})}),"\n",(0,t.jsxs)(n.p,{children:["Blur effect for the translucent header. The ",(0,t.jsx)(n.code,{children:"headerTransparent"})," option needs to be set to ",(0,t.jsx)(n.code,{children:"true"})," for this to work."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"extraLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"light"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"dark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"regular"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"prominent"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemUltraThinMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThinMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThickMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemChromeMaterial"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemUltraThinMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThinMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThickMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemChromeMaterialLight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemUltraThinMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThinMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemThickMaterialDark"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"systemChromeMaterialDark"})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"headerbackground",children:(0,t.jsx)(n.code,{children:"headerBackground"})}),"\n",(0,t.jsx)(n.p,{children:"Function which returns a React Element to render as the background of the header. This is useful for using backgrounds such as an image or a gradient."}),"\n",(0,t.jsx)(n.h4,{id:"headertintcolor",children:(0,t.jsx)(n.code,{children:"headerTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"Tint color for the header. Changes the color of back button and title."}),"\n",(0,t.jsx)(n.h4,{id:"headerleft",children:(0,t.jsx)(n.code,{children:"headerLeft"})}),"\n",(0,t.jsxs)(n.p,{children:["Function which returns a React Element to display on the left side of the header. This replaces the back button. See ",(0,t.jsx)(n.code,{children:"headerBackVisible"})," to show the back button along side left element."]}),"\n",(0,t.jsx)(n.h4,{id:"headerright",children:(0,t.jsx)(n.code,{children:"headerRight"})}),"\n",(0,t.jsx)(n.p,{children:"Function which returns a React Element to display on the right side of the header."}),"\n",(0,t.jsx)(n.h4,{id:"headertitle",children:(0,t.jsx)(n.code,{children:"headerTitle"})}),"\n",(0,t.jsxs)(n.p,{children:["String or a function that returns a React Element to be used by the header. Defaults to ",(0,t.jsx)(n.code,{children:"title"})," or name of the screen."]}),"\n",(0,t.jsxs)(n.p,{children:["When a function is passed, it receives ",(0,t.jsx)(n.code,{children:"tintColor"})," and",(0,t.jsx)(n.code,{children:"children"})," in the options object as an argument. The title string is passed in ",(0,t.jsx)(n.code,{children:"children"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Note that if you render a custom element by passing a function, animations for the title won't work."}),"\n",(0,t.jsx)(n.h4,{id:"headertitlealign",children:(0,t.jsx)(n.code,{children:"headerTitleAlign"})}),"\n",(0,t.jsx)(n.p,{children:"How to align the header title. Possible values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"left"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"center"})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"left"})," on platforms other than iOS."]}),"\n",(0,t.jsxs)(n.p,{children:["Not supported on iOS. It's always ",(0,t.jsx)(n.code,{children:"center"})," on iOS and cannot be changed."]}),"\n",(0,t.jsx)(n.h4,{id:"headertitlestyle",children:(0,t.jsx)(n.code,{children:"headerTitleStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for header title. Supported properties:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontFamily"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontSize"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"fontWeight"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"color"})}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"headersearchbaroptions",children:(0,t.jsx)(n.code,{children:"headerSearchBarOptions"})}),"\n",(0,t.jsxs)(n.p,{children:["Options to render a native search bar on iOS. Search bars are rarely static so normally it is controlled by passing an object to ",(0,t.jsx)(n.code,{children:"headerSearchBarOptions"})," navigation option in the component's body. You also need to specify ",(0,t.jsx)(n.code,{children:'contentInsetAdjustmentBehavior="automatic"'})," in your ",(0,t.jsx)(n.code,{children:"ScrollView"}),", ",(0,t.jsx)(n.code,{children:"FlatList"})," etc. If you don't have a ",(0,t.jsx)(n.code,{children:"ScrollView"}),", specify ",(0,t.jsx)(n.code,{children:"headerTransparent: false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS and Android."}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useLayoutEffect(() => {\n navigation.setOptions({\n headerSearchBarOptions: {\n // search bar options\n },\n });\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.p,{children:"Supported properties are described below."}),"\n",(0,t.jsx)(n.h5,{id:"autocapitalize",children:(0,t.jsx)(n.code,{children:"autoCapitalize"})}),"\n",(0,t.jsx)(n.p,{children:"Controls whether the text is automatically auto-capitalized as it is entered by the user.\nPossible values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"none"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"words"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"sentences"})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:"characters"})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"sentences"}),"."]}),"\n",(0,t.jsx)(n.h5,{id:"autofocus",children:(0,t.jsx)(n.code,{children:"autoFocus"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether to automatically focus search bar when it's shown. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"bartintcolor",children:(0,t.jsx)(n.code,{children:"barTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"The search field background color. By default bar tint color is translucent."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"tintcolor",children:(0,t.jsx)(n.code,{children:"tintColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color for the cursor caret and cancel button text."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"cancelbuttontext",children:(0,t.jsx)(n.code,{children:"cancelButtonText"})}),"\n",(0,t.jsxs)(n.p,{children:["The text to be used instead of default ",(0,t.jsx)(n.code,{children:"Cancel"})," button text."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"disablebackbuttonoverride",children:(0,t.jsx)(n.code,{children:"disableBackButtonOverride"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the back button should close search bar's text input or not. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"hidenavigationbar",children:(0,t.jsx)(n.code,{children:"hideNavigationBar"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to hide the navigation bar during searching. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"hidewhenscrolling",children:(0,t.jsx)(n.code,{children:"hideWhenScrolling"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to hide the search bar when scrolling. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h5,{id:"inputtype",children:(0,t.jsx)(n.code,{children:"inputType"})}),"\n",(0,t.jsxs)(n.p,{children:["The type of the input. Defaults to ",(0,t.jsx)(n.code,{children:'"text"'}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"text"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"phone"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"number"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"email"'})}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"obscurebackground",children:(0,t.jsx)(n.code,{children:"obscureBackground"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to obscure the underlying content with semi-transparent overlay. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.h5,{id:"placeholder",children:(0,t.jsx)(n.code,{children:"placeholder"})}),"\n",(0,t.jsx)(n.p,{children:"Text displayed when search field is empty."}),"\n",(0,t.jsx)(n.h5,{id:"textcolor",children:(0,t.jsx)(n.code,{children:"textColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color of the text in the search field."}),"\n",(0,t.jsx)(n.h5,{id:"hinttextcolor",children:(0,t.jsx)(n.code,{children:"hintTextColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color of the hint text in the search field."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"headericoncolor",children:(0,t.jsx)(n.code,{children:"headerIconColor"})}),"\n",(0,t.jsx)(n.p,{children:"The color of the search and close icons shown in the header"}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"shouldshowhintsearchicon",children:(0,t.jsx)(n.code,{children:"shouldShowHintSearchIcon"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether to show the search hint icon when search bar is focused. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h5,{id:"onblur",children:(0,t.jsx)(n.code,{children:"onBlur"})}),"\n",(0,t.jsx)(n.p,{children:"A callback that gets called when search bar has lost focus."}),"\n",(0,t.jsx)(n.h5,{id:"oncancelbuttonpress",children:(0,t.jsx)(n.code,{children:"onCancelButtonPress"})}),"\n",(0,t.jsx)(n.p,{children:"A callback that gets called when the cancel button is pressed."}),"\n",(0,t.jsx)(n.h5,{id:"onchangetext",children:(0,t.jsx)(n.code,{children:"onChangeText"})}),"\n",(0,t.jsx)(n.p,{children:"A callback that gets called when the text changes. It receives the current text value of the search bar."}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"const [search, setSearch] = React.useState('');\n\nReact.useLayoutEffect(() => {\n navigation.setOptions({\n headerSearchBarOptions: {\n onChangeText: (event) => setSearch(event.nativeEvent.text),\n },\n });\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.h4,{id:"header",children:(0,t.jsx)(n.code,{children:"header"})}),"\n",(0,t.jsx)(n.p,{children:"Custom header to use instead of the default header."}),"\n",(0,t.jsx)(n.p,{children:"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:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"navigation"})," - The navigation object for the current screen."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"route"})," - The route object for the current screen."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"options"})," - The options for the current screen"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"back"})," - Options for the back button, contains an object with a ",(0,t.jsx)(n.code,{children:"title"})," property to use for back button label."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { getHeaderTitle } from '@react-navigation/elements';\n\n// ..\n\nheader: ({ navigation, route, options, back }) => {\n const title = getHeaderTitle(options, route.name);\n\n return (\n : undefined\n }\n style={options.headerStyle}\n />\n );\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To set a custom header for all the screens in the navigator, you can specify this option in the ",(0,t.jsx)(n.code,{children:"screenOptions"})," prop of the navigator."]}),"\n",(0,t.jsx)(n.p,{children:"Note that if you specify a custom header, the native functionality such as large title, search bar etc. won't work."}),"\n",(0,t.jsx)(n.h4,{id:"statusbaranimation",children:(0,t.jsx)(n.code,{children:"statusBarAnimation"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the status bar animation (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to ",(0,t.jsx)(n.code,{children:"fade"})," on iOS and ",(0,t.jsx)(n.code,{children:"none"})," on Android."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"fade"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"none"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"slide"'})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["On Android, setting either ",(0,t.jsx)(n.code,{children:"fade"})," or ",(0,t.jsx)(n.code,{children:"slide"})," will set the transition of status bar color. On iOS, this option applies to appereance animation of the status bar."]}),"\n",(0,t.jsxs)(n.p,{children:["Requires setting ",(0,t.jsx)(n.code,{children:"View controller-based status bar appearance -> YES"})," (or removing the config) in your ",(0,t.jsx)(n.code,{children:"Info.plist"})," file."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"statusbarhidden",children:(0,t.jsx)(n.code,{children:"statusBarHidden"})}),"\n",(0,t.jsx)(n.p,{children:"Whether the status bar should be hidden on this screen."}),"\n",(0,t.jsxs)(n.p,{children:["Requires setting ",(0,t.jsx)(n.code,{children:"View controller-based status bar appearance -> YES"})," (or removing the config) in your ",(0,t.jsx)(n.code,{children:"Info.plist"})," file."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"statusbarstyle",children:(0,t.jsx)(n.code,{children:"statusBarStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the status bar color (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to ",(0,t.jsx)(n.code,{children:"auto"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"auto"'})}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:'"inverted"'})," (iOS only)"]}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"dark"'})}),"\n",(0,t.jsx)(n.li,{children:(0,t.jsx)(n.code,{children:'"light"'})}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Requires setting ",(0,t.jsx)(n.code,{children:"View controller-based status bar appearance -> YES"})," (or removing the config) in your ",(0,t.jsx)(n.code,{children:"Info.plist"})," file."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"statusbarcolor",children:(0,t.jsx)(n.code,{children:"statusBarColor"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the status bar color (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to initial status bar color."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"statusbartranslucent",children:(0,t.jsx)(n.code,{children:"statusBarTranslucent"})}),"\n",(0,t.jsxs)(n.p,{children:["Sets the translucency of the status bar (similar to the ",(0,t.jsx)(n.code,{children:"StatusBar"})," component). Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"contentstyle",children:(0,t.jsx)(n.code,{children:"contentStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the scene content."}),"\n",(0,t.jsx)(n.h4,{id:"animationmatchesgesture",children:(0,t.jsx)(n.code,{children:"animationMatchesGesture"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the gesture to dismiss should use animation provided to ",(0,t.jsx)(n.code,{children:"animation"})," prop. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Doesn't affect the behavior of screens presented modally."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"fullscreengestureenabled",children:(0,t.jsx)(n.code,{children:"fullScreenGestureEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the gesture to dismiss should work on the whole screen. Using gesture to dismiss with this option results in the same transition animation as ",(0,t.jsx)(n.code,{children:"simple_push"}),". This behavior can be changed by setting ",(0,t.jsx)(n.code,{children:"customAnimationOnGesture"})," prop. Achieving the default iOS animation isn't possible due to platform limitations. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Doesn't affect the behavior of screens presented modally."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"gestureenabled",children:(0,t.jsx)(n.code,{children:"gestureEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether you can use gestures to dismiss this screen. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),". Only supported on iOS."]}),"\n",(0,t.jsx)(n.h4,{id:"animationtypeforreplace",children:(0,t.jsx)(n.code,{children:"animationTypeForReplace"})}),"\n",(0,t.jsxs)(n.p,{children:["The type of animation to use when this screen replaces another screen. Defaults to ",(0,t.jsx)(n.code,{children:"pop"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"push"}),": the new screen will perform push animation."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"pop"}),": the new screen will perform pop animation."]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"animation",children:(0,t.jsx)(n.code,{children:"animation"})}),"\n",(0,t.jsx)(n.p,{children:"How the screen should animate when pushed or popped."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"default"}),": use the platform default animation"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"fade"}),": fade screen in or out"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"fade_from_bottom"}),": fade the new screen from bottom"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"flip"}),": flip the screen, requires ",(0,t.jsx)(n.code,{children:'presentation: "modal"'})," (iOS only)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"simple_push"}),": default animation, but without shadow and native header transition (iOS only, uses default animation on Android)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide_from_bottom"}),": slide in the new screen from bottom"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide_from_right"}),": slide in the new screen from right (Android only, uses default animation on iOS)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"slide_from_left"}),": slide in the new screen from left (Android only, uses default animation on iOS)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"none"}),": don't animate the screen"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"presentation",children:(0,t.jsx)(n.code,{children:"presentation"})}),"\n",(0,t.jsx)(n.p,{children:"How should the screen be presented."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"card"}),": the new screen will be pushed onto a stack, which means the default animation will be slide from the side on iOS, the animation on Android will vary depending on the OS version and theme."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"modal"}),": the new screen will be presented modally. this also allows for a nested stack to be rendered inside the screen."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"transparentModal"}),": the new screen will be presented modally, but in addition, the previous screen will stay so that the content below can still be seen if the screen has translucent background."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"containedModal"}),': will use "UIModalPresentationCurrentContext" modal style on iOS and will fallback to "modal" on Android.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"containedTransparentModal"}),': will use "UIModalPresentationOverCurrentContext" modal style on iOS and will fallback to "transparentModal" on Android.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"fullScreenModal"}),': will use "UIModalPresentationFullScreen" modal style on iOS and will fallback to "modal" on Android. A screen using this presentation style can\'t be dismissed by gesture.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"formSheet"}),': will use "UIModalPresentationFormSheet" modal style on iOS and will fallback to "modal" on Android.']}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"orientation",children:(0,t.jsx)(n.code,{children:"orientation"})}),"\n",(0,t.jsx)(n.p,{children:"The display orientation to use for the screen."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"default"}),' - resolves to "all" without "portrait_down" on iOS. On Android, this lets the system decide the best orientation.']}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"all"}),": all orientations are permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"portrait"}),": portrait orientations are permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"portrait_up"}),": right-side portrait orientation is permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"portrait_down"}),": upside-down portrait orientation is permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"landscape"}),": landscape orientations are permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"landscape_left"}),": landscape-left orientation is permitted."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"landscape_right"}),": landscape-right orientation is permitted."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android and iOS."}),"\n",(0,t.jsx)(n.h4,{id:"autohidehomeindicator",children:(0,t.jsx)(n.code,{children:"autoHideHomeIndicator"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether the home indicator should prefer to stay hidden. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"gesturedirection",children:(0,t.jsx)(n.code,{children:"gestureDirection"})}),"\n",(0,t.jsx)(n.p,{children:"Sets the direction in which you should swipe to dismiss the screen."}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"vertical"})," \u2013 dismiss screen vertically"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"horizontal"})," \u2013 dismiss screen horizontally (default)"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["When using ",(0,t.jsx)(n.code,{children:"vertical"})," option, options ",(0,t.jsx)(n.code,{children:"fullScreenGestureEnabled: true"}),", ",(0,t.jsx)(n.code,{children:"customAnimationOnGesture: true"})," and ",(0,t.jsx)(n.code,{children:"animation: 'slide_from_bottom'"})," are set by default."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"animationduration",children:(0,t.jsx)(n.code,{children:"animationDuration"})}),"\n",(0,t.jsxs)(n.p,{children:["Changes the duration (in milliseconds) of ",(0,t.jsx)(n.code,{children:"slide_from_bottom"}),", ",(0,t.jsx)(n.code,{children:"fade_from_bottom"}),", ",(0,t.jsx)(n.code,{children:"fade"})," and ",(0,t.jsx)(n.code,{children:"simple_push"})," transitions on iOS. Defaults to ",(0,t.jsx)(n.code,{children:"350"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The duration of ",(0,t.jsx)(n.code,{children:"default"})," and ",(0,t.jsx)(n.code,{children:"flip"})," transitions isn't customizable."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS."}),"\n",(0,t.jsx)(n.h4,{id:"navigationbarcolor",children:(0,t.jsx)(n.code,{children:"navigationBarColor"})}),"\n",(0,t.jsx)(n.p,{children:"Sets the navigation bar color. Defaults to initial status bar color."}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"navigationbarhidden",children:(0,t.jsx)(n.code,{children:"navigationBarHidden"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether the navigation bar should be hidden. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on Android."}),"\n",(0,t.jsx)(n.h4,{id:"freezeonblur",children:(0,t.jsx)(n.code,{children:"freezeOnBlur"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),".\nDefaults to ",(0,t.jsx)(n.code,{children:"true"})," when ",(0,t.jsx)(n.code,{children:"enableFreeze()"})," from ",(0,t.jsx)(n.code,{children:"react-native-screens"})," package is run at the top of the application."]}),"\n",(0,t.jsxs)(n.p,{children:["Requires ",(0,t.jsx)(n.code,{children:"react-native-screens"})," version >=3.16.0."]}),"\n",(0,t.jsx)(n.p,{children:"Only supported on iOS and Android."}),"\n",(0,t.jsx)(n.h3,{id:"events",children:"Events"}),"\n",(0,t.jsxs)(n.p,{children:["The navigator can ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigation-events",children:"emit events"})," on certain actions. Supported events are:"]}),"\n",(0,t.jsx)(n.h4,{id:"transitionstart",children:(0,t.jsx)(n.code,{children:"transitionStart"})}),"\n",(0,t.jsx)(n.p,{children:"This event is fired when the transition animation starts for the current screen."}),"\n",(0,t.jsx)(n.p,{children:"Event data:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"e.data.closing"})," - Boolean indicating whether the screen is being opened or closed."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('transitionStart', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.h4,{id:"transitionend",children:(0,t.jsx)(n.code,{children:"transitionEnd"})}),"\n",(0,t.jsx)(n.p,{children:"This event is fired when the transition animation ends for the current screen."}),"\n",(0,t.jsx)(n.p,{children:"Event data:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"e.data.closing"})," - Boolean indicating whether the screen was opened or closed."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('transitionEnd', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.h3,{id:"helpers",children:"Helpers"}),"\n",(0,t.jsx)(n.p,{children:"The nativestack navigator adds the following methods to the navigation object:"}),"\n",(0,t.jsx)(n.h4,{id:"replace",children:(0,t.jsx)(n.code,{children:"replace"})}),"\n",(0,t.jsx)(n.p,{children:"Replaces the current screen with a new screen in the stack. The method accepts the following arguments:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"name"})," - ",(0,t.jsx)(n.em,{children:"string"})," - Name of the route to push onto the stack."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"params"})," - ",(0,t.jsx)(n.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.replace('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,t.jsx)(n.h4,{id:"push",children:(0,t.jsx)(n.code,{children:"push"})}),"\n",(0,t.jsx)(n.p,{children:"Pushes a new screen to the top of the stack and navigate to it. The method accepts the following arguments:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"name"})," - ",(0,t.jsx)(n.em,{children:"string"})," - Name of the route to push onto the stack."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"params"})," - ",(0,t.jsx)(n.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.push('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,t.jsx)(n.h4,{id:"pop",children:(0,t.jsx)(n.code,{children:"pop"})}),"\n",(0,t.jsxs)(n.p,{children:["Pops the current screen from the stack and navigates back to the previous screen. It takes one optional argument (",(0,t.jsx)(n.code,{children:"count"}),"), which allows you to specify how many screens to pop back by."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.pop();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"popto",children:(0,t.jsx)(n.code,{children:"popTo"})}),"\n",(0,t.jsx)(n.p,{children:"Navigates back to a previous screen in the stack by popping screens after it. The method accepts the following arguments:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"name"})," - ",(0,t.jsx)(n.em,{children:"string"})," - Name of the route to navigate to."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"params"})," - ",(0,t.jsx)(n.em,{children:"object"})," - Screen params to pass to the destination route."]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"If a matching screen is not found in the stack, this will pop the current screen and add a new screen with the specified name and params."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.popTo('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,t.jsx)(n.h4,{id:"poptotop",children:(0,t.jsx)(n.code,{children:"popToTop"})}),"\n",(0,t.jsx)(n.p,{children:"Pops all of the screens in the stack except the first one and navigates to it."}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.popToTop();\n"})})]})}function x(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}},85162:(e,n,i)=>{i.d(n,{Z:()=>s});i(67294);var t=i(86010);const r={tabItem:"tabItem_Ymn6"};var o=i(85893);function s(e){let{children:n,hidden:i,className:s}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,t.Z)(r.tabItem,s),hidden:i,children:n})}},74866:(e,n,i)=>{i.d(n,{Z:()=>S});var t=i(67294),r=i(86010),o=i(12466),s=i(16550),a=i(20469),l=i(91980),d=i(67392),c=i(50012);function h(e){var n,i;return null!=(n=null==(i=t.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,t.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return e;throw new Error("Docusaurus error: Bad 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.')})))?void 0:i.filter(Boolean))?n:[]}function u(e){const{values:n,children:i}=e;return(0,t.useMemo)((()=>{const e=null!=n?n:function(e){return h(e).map((e=>{let{props:{value:n,label:i,attributes:t,default:r}}=e;return{value:n,label:i,attributes:t,default:r}}))}(i);return function(e){const n=(0,d.l)(e,((e,n)=>e.value===n.value));if(n.length>0)throw new Error('Docusaurus error: Duplicate values "'+n.map((e=>e.value)).join(", ")+'" found in . Every value needs to be unique.')}(e),e}),[n,i])}function x(e){let{value:n,tabValues:i}=e;return i.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:i}=e;const r=(0,s.k6)(),o=function(e){let{queryString:n=!1,groupId:i}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!i)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!=i?i:null}({queryString:n,groupId:i});return[(0,l._X)(o),(0,t.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(r.location.search);n.set(o,e),r.replace({...r.location,search:n.toString()})}),[o,r])]}function j(e){const{defaultValue:n,queryString:i=!1,groupId:r}=e,o=u(e),[s,l]=(0,t.useState)((()=>function(e){var n;let{defaultValue:i,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(i){if(!x({value:i,tabValues:t}))throw new Error('Docusaurus error: The has a defaultValue "'+i+'" but none of its children has the corresponding value. Available values are: '+t.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return i}const r=null!=(n=t.find((e=>e.default)))?n:t[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:o}))),[d,h]=p({queryString:i,groupId:r}),[j,v]=function(e){let{groupId:n}=e;const i=function(e){return e?"docusaurus.tab."+e:null}(n),[r,o]=(0,c.Nk)(i);return[r,(0,t.useCallback)((e=>{i&&o.set(e)}),[i,o])]}({groupId:r}),f=(()=>{const e=null!=d?d:j;return x({value:e,tabValues:o})?e:null})();(0,a.Z)((()=>{f&&l(f)}),[f]);return{selectedValue:s,selectValue:(0,t.useCallback)((e=>{if(!x({value:e,tabValues:o}))throw new Error("Can't select invalid tab value="+e);l(e),h(e),v(e)}),[h,v,o]),tabValues:o}}var v=i(72389);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var g=i(85893);function m(e){let{className:n,block:i,selectedValue:t,selectValue:s,tabValues:a}=e;const l=[],{blockElementScrollPositionUntilNextRender:d}=(0,o.o5)(),c=e=>{const n=e.currentTarget,i=l.indexOf(n),r=a[i].value;r!==t&&(d(n),s(r))},h=e=>{var n;let i=null;switch(e.key){case"Enter":c(e);break;case"ArrowRight":{var t;const n=l.indexOf(e.currentTarget)+1;i=null!=(t=l[n])?t:l[0];break}case"ArrowLeft":{var r;const n=l.indexOf(e.currentTarget)-1;i=null!=(r=l[n])?r:l[l.length-1];break}}null==(n=i)||n.focus()};return(0,g.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":i},n),children:a.map((e=>{let{value:n,label:i,attributes:o}=e;return(0,g.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>l.push(e),onKeyDown:h,onClick:c,...o,className:(0,r.Z)("tabs__item",f.tabItem,null==o?void 0:o.className,{"tabs__item--active":t===n}),children:null!=i?i:n},n)}))})}function b(e){let{lazy:n,children:i,selectedValue:r}=e;const o=(Array.isArray(i)?i:[i]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===r));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,g.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function y(e){const n=j(e);return(0,g.jsxs)("div",{className:(0,r.Z)("tabs-container",f.tabList),children:[(0,g.jsx)(m,{...e,...n}),(0,g.jsx)(b,{...e,...n})]})}function S(e){const n=(0,v.Z)();return(0,g.jsx)(y,{...e,children:h(e.children)},String(n))}},11151:(e,n,i)=>{i.d(n,{Z:()=>a,a:()=>s});var t=i(67294);const r={},o=t.createContext(r);function s(e){const n=t.useContext(o);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:s(e.components),t.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/74cdd3dc.d39246e3.js b/assets/js/74cdd3dc.d39246e3.js new file mode 100644 index 0000000000..97b34dace8 --- /dev/null +++ b/assets/js/74cdd3dc.d39246e3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[36054],{6849:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>l,default:()=>b,frontMatter:()=>s,metadata:()=>c,toc:()=>h});var a=t(85893),i=t(11151),r=t(74866),o=t(85162);const s={id:"material-top-tab-navigator",title:"Material Top Tabs Navigator",sidebar_label:"Material Top Tabs"},l=void 0,c={id:"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-7.x/material-top-tab-navigator.md",sourceDirName:".",slug:"/material-top-tab-navigator",permalink:"/docs/7.x/material-top-tab-navigator",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/material-top-tab-navigator.md",tags:[],version:"7.x",frontMatter:{id:"material-top-tab-navigator",title:"Material Top Tabs Navigator",sidebar_label:"Material Top Tabs"},sidebar:"docs",previous:{title:"Drawer",permalink:"/docs/7.x/drawer-navigator"},next:{title:"Developer tools",permalink:"/docs/7.x/devtools"}},d={},h=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",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:"tabBarButtonTestID",id:"tabbarbuttontestid",level:4},{value:"tabBarActiveTintColor",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor",id:"tabbarinactivetintcolor",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:"Hooks",id:"hooks",level:3},{value:"useTabAnimation",id:"usetabanimation",level:4}];function u(e){const n={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"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."}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/7.x/material-top-tabs.mp4"})}),"\n",(0,a.jsxs)(n.p,{children:["This wraps ",(0,a.jsx)(n.a,{href:"/docs/7.x/tab-view",children:(0,a.jsx)(n.code,{children:"react-native-tab-view"})}),". If you want to use the tab view without React Navigation integration, use the library directly instead."]}),"\n",(0,a.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsxs)(n.p,{children:["To use this navigator, ensure that you have ",(0,a.jsxs)(n.a,{href:"/docs/7.x/getting-started",children:[(0,a.jsx)(n.code,{children:"@react-navigation/native"})," and its dependencies (follow this guide)"]}),", then install ",(0,a.jsx)(n.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/material-top-tabs",children:(0,a.jsx)(n.code,{children:"@react-navigation/material-top-tabs"})}),":"]}),"\n",(0,a.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(o.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/material-top-tabs@next\n"})})}),(0,a.jsx)(o.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add @react-navigation/material-top-tabs@next\n"})})}),(0,a.jsx)(o.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add @react-navigation/material-top-tabs@next\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["Then, you need to install ",(0,a.jsx)(n.a,{href:"https://github.com/callstack/react-native-pager-view",children:(0,a.jsx)(n.code,{children:"react-native-pager-view"})})," which is required by the navigator."]}),"\n",(0,a.jsx)(n.p,{children:"If you have a Expo managed project, in your project directory, run:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npx expo install react-native-pager-view\n"})}),"\n",(0,a.jsx)(n.p,{children:"If you have a bare React Native project, in your project directory, run:"}),"\n",(0,a.jsxs)(r.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(o.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install react-native-pager-view\n"})})}),(0,a.jsx)(o.Z,{value:"yarn",label:"Yarn",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add react-native-pager-view\n"})})}),(0,a.jsx)(o.Z,{value:"pnpm",label:"pnpm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add react-native-pager-view\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["If you're on a Mac and developing for iOS, you also need to install the pods (via ",(0,a.jsx)(n.a,{href:"https://cocoapods.org/",children:"Cocoapods"}),") to complete the linking."]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npx pod-install ios\n"})}),"\n",(0,a.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsxs)(n.p,{children:["To use this navigator, import it from ",(0,a.jsx)(n.code,{children:"@react-navigation/material-top-tabs"}),":"]}),"\n",(0,a.jsxs)(r.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Material Top Tab Navigator","data-snack":"true","data-version":"7",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Material Top Tab Navigator" snack version=7',children:"import * as React from 'react';\nimport { Text, View, Button } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\n// codeblock-focus-start\nimport { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n navigation.navigate('Profile')}\n />\n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n -

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.

-

To get the height of the bottom tab bar, you can use BottomTabBarHeightContext with React's Context API or useBottomTabBarHeight:

-
import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';

// ...

<BottomTabBarHeightContext.Consumer>
  {tabBarHeight => (
    /* render something */
  )}
</BottomTabBarHeightContext.Consumer>
-

or

-
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';

// ...

const tabBarHeight = useBottomTabBarHeight();
+

You also might need to add a bottom margin to your content if you have an absolutely positioned tab bar. React Navigation won't do it automatically. See useBottomTabBarHeight for more details.

tabBarBackground​

Function which returns a React Element to use as background for the tab bar. You could render an image, a gradient, blur view etc.:

import { BlurView } from 'expo-blur';

// ...

<Tab.Navigator
  screenOptions={{
    tabBarStyle: { position: 'absolute' },
    tabBarBackground: () => (
      <BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
    ),
  }}
>
-

When using BlurView, make sure to set position: 'absolute' in tabBarStyle as well. You'd also need to use useBottomTabBarHeight() to add a bottom padding to your content.

+

When using BlurView, make sure to set position: 'absolute' in tabBarStyle as well. You'd also need to use useBottomTabBarHeight to add a bottom padding to your content.

tabBarPosition​

Position of the tab bar. Available values are:

    @@ -190,6 +186,14 @@

    jumpTo 
    navigation.jumpTo('Profile', { owner: 'Michaś' });
    +

    Hooks​

    +

    The bottom tab navigator exports the following hooks:

    +

    useBottomTabBarHeight​

    +

    This hook returns the height of the bottom tab bar. By default, the screen content doesn't go under the tab bar. However, if you want to make the tab bar absolutely positioned and have the content go under it (e.g. to show a blur effect), it's necessary to adjust the content to take the tab bar height into account.

    +

    Example:

    +
    import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';

    function MyComponent() {
      const tabBarHeight = useBottomTabBarHeight();

      return (
        <ScrollView contentStyle={{ paddingBottom: tabBarHeight }}>
          {/* Content */}
        </ScrollView>
      );
    }
    +

    Alternatively, you can use the BottomTabBarHeightContext directly if you are using a class component or need it in a reusable component that can be used outside the bottom tab navigator:

    +
    import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';

    // ...

    <BottomTabBarHeightContext.Consumer>
      {tabBarHeight => (
        /* render something */
      )}
    </BottomTabBarHeightContext.Consumer>

    Animations​

    By default, switching between tabs doesn't have any animation. You can specify the animation option to customize the transition animation.

    Supported values for animation are:

    @@ -273,6 +277,6 @@

    Tran

You can spread these presets in options to customize the animation for a screen:

Example:

-
import { TransitionPresets } from '@react-navigation/bottom-tabs';

// ...

{
  Profile: {
    screen: Profile,
    options: {
      ...TransitionPresets.FadeTransition,
    },
  },
}
+
import { TransitionPresets } from '@react-navigation/bottom-tabs';

// ...

{
  Profile: {
    screen: Profile,
    options: {
      ...TransitionPresets.FadeTransition,
    },
  },
}
\ No newline at end of file diff --git a/docs/7.x/combine-static-with-dynamic/index.html b/docs/7.x/combine-static-with-dynamic/index.html index 0bc2382a21..62c289a6d2 100644 --- a/docs/7.x/combine-static-with-dynamic/index.html +++ b/docs/7.x/combine-static-with-dynamic/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/configuring-links/index.html b/docs/7.x/configuring-links/index.html index ddc00a7d9a..a43e7ae904 100644 --- a/docs/7.x/configuring-links/index.html +++ b/docs/7.x/configuring-links/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/contributing/index.html b/docs/7.x/contributing/index.html index 5a4be8836e..d4b74a41cd 100644 --- a/docs/7.x/contributing/index.html +++ b/docs/7.x/contributing/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/custom-android-back-button-handling/index.html b/docs/7.x/custom-android-back-button-handling/index.html index 5516d04348..ff85d3294f 100644 --- a/docs/7.x/custom-android-back-button-handling/index.html +++ b/docs/7.x/custom-android-back-button-handling/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/custom-navigators/index.html b/docs/7.x/custom-navigators/index.html index e11a50da07..d4dd084e54 100644 --- a/docs/7.x/custom-navigators/index.html +++ b/docs/7.x/custom-navigators/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/custom-routers/index.html b/docs/7.x/custom-routers/index.html index 0bb003a540..33f88a440b 100644 --- a/docs/7.x/custom-routers/index.html +++ b/docs/7.x/custom-routers/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/deep-linking/index.html b/docs/7.x/deep-linking/index.html index aa5a60e9bb..631405f8a5 100644 --- a/docs/7.x/deep-linking/index.html +++ b/docs/7.x/deep-linking/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/devtools/index.html b/docs/7.x/devtools/index.html index 395ffef329..96e6aa9fa0 100644 --- a/docs/7.x/devtools/index.html +++ b/docs/7.x/devtools/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/drawer-actions/index.html b/docs/7.x/drawer-actions/index.html index fcd9e02cf9..a33e7612b2 100644 --- a/docs/7.x/drawer-actions/index.html +++ b/docs/7.x/drawer-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/drawer-based-navigation/index.html b/docs/7.x/drawer-based-navigation/index.html index dec7e306f4..8e15f9d677 100644 --- a/docs/7.x/drawer-based-navigation/index.html +++ b/docs/7.x/drawer-based-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/drawer-layout/index.html b/docs/7.x/drawer-layout/index.html index 18c7cb06de..8567b22b35 100644 --- a/docs/7.x/drawer-layout/index.html +++ b/docs/7.x/drawer-layout/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/drawer-navigator/index.html b/docs/7.x/drawer-navigator/index.html index 2759bf182b..5301cf3f80 100644 --- a/docs/7.x/drawer-navigator/index.html +++ b/docs/7.x/drawer-navigator/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/elements/index.html b/docs/7.x/elements/index.html index 47fc02e554..0ea117219e 100644 --- a/docs/7.x/elements/index.html +++ b/docs/7.x/elements/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/function-after-focusing-screen/index.html b/docs/7.x/function-after-focusing-screen/index.html index a9ad8280af..a0366bb263 100644 --- a/docs/7.x/function-after-focusing-screen/index.html +++ b/docs/7.x/function-after-focusing-screen/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/getting-started/index.html b/docs/7.x/getting-started/index.html index 1b26af7d1d..74e23250b7 100644 --- a/docs/7.x/getting-started/index.html +++ b/docs/7.x/getting-started/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/glossary-of-terms/index.html b/docs/7.x/glossary-of-terms/index.html index 6e60370ee7..77b928e7d4 100644 --- a/docs/7.x/glossary-of-terms/index.html +++ b/docs/7.x/glossary-of-terms/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/group/index.html b/docs/7.x/group/index.html index 1eda181cca..a52ee882b9 100644 --- a/docs/7.x/group/index.html +++ b/docs/7.x/group/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/handling-safe-area/index.html b/docs/7.x/handling-safe-area/index.html index f4fb045ead..6f8fc34414 100644 --- a/docs/7.x/handling-safe-area/index.html +++ b/docs/7.x/handling-safe-area/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/header-buttons/index.html b/docs/7.x/header-buttons/index.html index 509032b047..fe4a134262 100644 --- a/docs/7.x/header-buttons/index.html +++ b/docs/7.x/header-buttons/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/headers/index.html b/docs/7.x/headers/index.html index 5e82ae19cf..700d434d86 100644 --- a/docs/7.x/headers/index.html +++ b/docs/7.x/headers/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/hello-react-navigation/index.html b/docs/7.x/hello-react-navigation/index.html index cc4520256a..e6fef3d311 100644 --- a/docs/7.x/hello-react-navigation/index.html +++ b/docs/7.x/hello-react-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/hiding-tabbar-in-screens/index.html b/docs/7.x/hiding-tabbar-in-screens/index.html index 487e9cb0cc..cbb56919f7 100644 --- a/docs/7.x/hiding-tabbar-in-screens/index.html +++ b/docs/7.x/hiding-tabbar-in-screens/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/limitations/index.html b/docs/7.x/limitations/index.html index c66de26a13..2d63533735 100644 --- a/docs/7.x/limitations/index.html +++ b/docs/7.x/limitations/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/link/index.html b/docs/7.x/link/index.html index 0e67218f4c..a059baefb7 100644 --- a/docs/7.x/link/index.html +++ b/docs/7.x/link/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/material-top-tab-navigator/index.html b/docs/7.x/material-top-tab-navigator/index.html index 32cf2f44d0..d6af6dd84f 100644 --- a/docs/7.x/material-top-tab-navigator/index.html +++ b/docs/7.x/material-top-tab-navigator/index.html @@ -14,7 +14,7 @@ - + @@ -169,6 +169,11 @@

jumpToparams - object - Screen params to pass to the destination route. -
navigation.jumpTo('Profile', { name: 'Michaś' });
+
navigation.jumpTo('Profile', { name: 'Michaś' });
+

Hooks​

+

The material top tab navigator exports the following hooks:

+

useTabAnimation​

+

This hook returns an object containing an animated value that represents the current position of the tabs. This can be used to animate elements based on the swipe position of the tabs, such as the tab indicator:

+
import { Animated } from 'react-native';
import { useTabAnimation } from '@react-navigation/material-top-tabs';

function MyView() {
  const { position } = useTabAnimation();

  return (
    <Animated.View
      style={{
        width: '50%',
        height: 2,
        backgroundColor: 'tomato',
        transform: [{ translateX: position }],
      }}
    />
  );
}
\ No newline at end of file diff --git a/docs/7.x/migration-guides/index.html b/docs/7.x/migration-guides/index.html index 163e80b3e1..391632559f 100644 --- a/docs/7.x/migration-guides/index.html +++ b/docs/7.x/migration-guides/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/modal/index.html b/docs/7.x/modal/index.html index 5229034217..552810f011 100644 --- a/docs/7.x/modal/index.html +++ b/docs/7.x/modal/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/more-resources/index.html b/docs/7.x/more-resources/index.html index 876cf6db4f..2be4cac531 100644 --- a/docs/7.x/more-resources/index.html +++ b/docs/7.x/more-resources/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/multiple-drawers/index.html b/docs/7.x/multiple-drawers/index.html index ae61f3a53e..62f79f0677 100644 --- a/docs/7.x/multiple-drawers/index.html +++ b/docs/7.x/multiple-drawers/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/native-stack-navigator/index.html b/docs/7.x/native-stack-navigator/index.html index 7c0ae0bc43..7de23274ea 100644 --- a/docs/7.x/native-stack-navigator/index.html +++ b/docs/7.x/native-stack-navigator/index.html @@ -14,7 +14,7 @@ - + @@ -410,6 +410,12 @@

popTo
navigation.popTo('Profile', { owner: 'Michaś' });

popToTop​

Pops all of the screens in the stack except the first one and navigates to it.

-
navigation.popToTop();
+
navigation.popToTop();
+

Hooks​

+

The native stack navigator exports the following hooks:

+

useAnimatedHeaderHeight​

+

The hook returns an animated value representing the height of the header. This is similar to useHeaderHeight but returns an animated value that changed as the header height changes, e.g. when expanding or collapsing large title or search bar on iOS.

+

It can be used to animated content along with header height changes.

+
import { Animated } from 'react-native';
import { useAnimatedHeaderHeight } from '@react-navigation/native-stack';

const MyView = () => {
  const headerHeight = useAnimatedHeaderHeight();

  return (
    <Animated.View
      style={{
        height: 100,
        aspectRatio: 1,
        backgroundColor: 'tomato',
        transform: [{ translateY: headerHeight }],
      }}
    />
  );
};
\ No newline at end of file diff --git a/docs/7.x/navigating-without-navigation-prop/index.html b/docs/7.x/navigating-without-navigation-prop/index.html index 8b700cc5ac..0cc68bc351 100644 --- a/docs/7.x/navigating-without-navigation-prop/index.html +++ b/docs/7.x/navigating-without-navigation-prop/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigating/index.html b/docs/7.x/navigating/index.html index 4b63c0d74e..151ac51586 100644 --- a/docs/7.x/navigating/index.html +++ b/docs/7.x/navigating/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-actions/index.html b/docs/7.x/navigation-actions/index.html index bc0e9ae211..b17bcd7da3 100644 --- a/docs/7.x/navigation-actions/index.html +++ b/docs/7.x/navigation-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-container/index.html b/docs/7.x/navigation-container/index.html index 6bce31cb63..a51243736c 100644 --- a/docs/7.x/navigation-container/index.html +++ b/docs/7.x/navigation-container/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-context/index.html b/docs/7.x/navigation-context/index.html index 86a8252b87..29ff3d94b8 100644 --- a/docs/7.x/navigation-context/index.html +++ b/docs/7.x/navigation-context/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-events/index.html b/docs/7.x/navigation-events/index.html index 110fe1099a..e80640e999 100644 --- a/docs/7.x/navigation-events/index.html +++ b/docs/7.x/navigation-events/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-lifecycle/index.html b/docs/7.x/navigation-lifecycle/index.html index ef44f75d8d..38ae7bb68f 100644 --- a/docs/7.x/navigation-lifecycle/index.html +++ b/docs/7.x/navigation-lifecycle/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-object/index.html b/docs/7.x/navigation-object/index.html index 15a5165a3f..74a1337b31 100644 --- a/docs/7.x/navigation-object/index.html +++ b/docs/7.x/navigation-object/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-solutions-and-community-libraries/index.html b/docs/7.x/navigation-solutions-and-community-libraries/index.html index 367e5718ee..c693ab8723 100644 --- a/docs/7.x/navigation-solutions-and-community-libraries/index.html +++ b/docs/7.x/navigation-solutions-and-community-libraries/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/navigation-state/index.html b/docs/7.x/navigation-state/index.html index b0f98553cb..789b11e7ac 100644 --- a/docs/7.x/navigation-state/index.html +++ b/docs/7.x/navigation-state/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/nesting-navigators/index.html b/docs/7.x/nesting-navigators/index.html index 65b20a0536..018fca8200 100644 --- a/docs/7.x/nesting-navigators/index.html +++ b/docs/7.x/nesting-navigators/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/next-steps/index.html b/docs/7.x/next-steps/index.html index 655cb8a3eb..038ff22e93 100644 --- a/docs/7.x/next-steps/index.html +++ b/docs/7.x/next-steps/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/params/index.html b/docs/7.x/params/index.html index eef9e90ff3..63e197ca75 100644 --- a/docs/7.x/params/index.html +++ b/docs/7.x/params/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/pitch/index.html b/docs/7.x/pitch/index.html index 3918531168..85aa6f7dc5 100644 --- a/docs/7.x/pitch/index.html +++ b/docs/7.x/pitch/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/preventing-going-back/index.html b/docs/7.x/preventing-going-back/index.html index 913d1b2623..9fcdef3657 100644 --- a/docs/7.x/preventing-going-back/index.html +++ b/docs/7.x/preventing-going-back/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/redux-integration/index.html b/docs/7.x/redux-integration/index.html index 6fd7e5b88f..7e2bc519fb 100644 --- a/docs/7.x/redux-integration/index.html +++ b/docs/7.x/redux-integration/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/route-object/index.html b/docs/7.x/route-object/index.html index 5fb4eff478..f1e4910dfc 100644 --- a/docs/7.x/route-object/index.html +++ b/docs/7.x/route-object/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/screen-options-resolution/index.html b/docs/7.x/screen-options-resolution/index.html index 9c22434dcf..cd6f361cc2 100644 --- a/docs/7.x/screen-options-resolution/index.html +++ b/docs/7.x/screen-options-resolution/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/screen-options/index.html b/docs/7.x/screen-options/index.html index 70f0d1d6f5..2f5686e9ea 100644 --- a/docs/7.x/screen-options/index.html +++ b/docs/7.x/screen-options/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/screen-tracking/index.html b/docs/7.x/screen-tracking/index.html index b23b7cb897..f4f0bab226 100644 --- a/docs/7.x/screen-tracking/index.html +++ b/docs/7.x/screen-tracking/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/screen/index.html b/docs/7.x/screen/index.html index d6c5206b56..c8c04d39a6 100644 --- a/docs/7.x/screen/index.html +++ b/docs/7.x/screen/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/server-container/index.html b/docs/7.x/server-container/index.html index 4f5e1a2e9e..d58b316418 100644 --- a/docs/7.x/server-container/index.html +++ b/docs/7.x/server-container/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/server-rendering/index.html b/docs/7.x/server-rendering/index.html index 5ba5e34b7e..78b85e7f4d 100644 --- a/docs/7.x/server-rendering/index.html +++ b/docs/7.x/server-rendering/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/shared-element-transitions/index.html b/docs/7.x/shared-element-transitions/index.html index eeb9c10129..3c4a5fc2b1 100644 --- a/docs/7.x/shared-element-transitions/index.html +++ b/docs/7.x/shared-element-transitions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/stack-actions/index.html b/docs/7.x/stack-actions/index.html index c26d937070..d1a011bbc8 100644 --- a/docs/7.x/stack-actions/index.html +++ b/docs/7.x/stack-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/stack-navigator/index.html b/docs/7.x/stack-navigator/index.html index 4f8521e584..ba78bbbc62 100644 --- a/docs/7.x/stack-navigator/index.html +++ b/docs/7.x/stack-navigator/index.html @@ -14,7 +14,7 @@ - + @@ -256,6 +256,33 @@

popTopopToTop​

Pops all of the screens in the stack except the first one and navigates to it.

navigation.popToTop();
+

Hooks​

+

The stack navigator exports the following hooks:

+

useCardAnimation​

+

This hook returns values related to the screen's animation. It contains the following properties:

+
    +
  • current - Values for the current screen: +
      +
    • progress - Animated node representing the progress value of the current screen.
      • +
    +
    • +
  • next - Values for the screen after this one in the stack. This can be undefined in case the screen animating is the last one. +
      +
    • progress - Animated node representing the progress value of the next screen.
      • +
    +
    • +
  • closing - Animated node representing whether the card is closing. 1 when closing, 0 if not.
    • +
  • swiping - Animated node representing whether the card is being swiped. 1 when swiping, 0 if not.
    • +
  • inverted - Animated node representing whether the card is inverted. -1 when inverted, 1 if not.
    • +
  • index - The index of the card in the stack.
    • +
  • layouts - Layout measurements for various items we use for animation. +
      +
    • screen - Layout of the whole screen. Contains height and width properties.
      • +
    +
    • +
  • insets - Layout of the safe area insets. Contains top, right, bottom and left properties.
    • +
+

See Transparent modals for an example of how to use this hook.

Animations​

You can specify the animation option to customize the transition animation for screens being pushed or popped.

Supported values for animation are:

@@ -380,7 +407,7 @@

Transpare

If you want to further customize how the dialog animates, or want to close the screen when tapping the overlay etc., you can use the useCardAnimation hook to customize elements inside your screen.

Example:

import {
  Animated,
  View,
  Text,
  Pressable,
  Button,
  StyleSheet,
} from 'react-native';
import { useTheme, useNavigation } from '@react-navigation/native';
import { useCardAnimation } from '@react-navigation/stack';

function ModalScreen() {
  const navigation = useNavigation();
  const { colors } = useTheme();
  const { current } = useCardAnimation();

  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Pressable
        style={[
          StyleSheet.absoluteFill,
          { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
        ]}
        onPress={navigation.goBack}
      />
      <Animated.View
        style={{
          padding: 16,
          width: '90%',
          maxWidth: 400,
          borderRadius: 3,
          backgroundColor: colors.card,
          transform: [
            {
              scale: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0.9, 1],
                extrapolate: 'clamp',
              }),
            },
          ],
        }}
      >
        <Text>
          Mise en place is a French term that literally means “put in place.” It
          also refers to a way cooks in professional kitchens and restaurants
          set up their work stations—first by gathering all ingredients for a
          recipes, partially preparing them (like measuring out and chopping),
          and setting them all near each other. Setting up mise en place before
          cooking is another top tip for home cooks, as it seriously helps with
          organization. It’ll pretty much guarantee you never forget to add an
          ingredient and save you time from running back and forth from the
          pantry ten times.
        </Text>
        <Button
          title="Okay"
          color={colors.primary}
          style={{ alignSelf: 'flex-end' }}
          onPress={navigation.goBack}
        />
      </Animated.View>
    </View>
  );
}
-

Here we animate the scale of the dialog, and also add an overlay to close the dialog.

+

Here we animate the scale of the dialog, and also add an overlay to close the dialog.

\ No newline at end of file diff --git a/docs/7.x/state-persistence/index.html b/docs/7.x/state-persistence/index.html index 19c1e29360..a72752e25c 100644 --- a/docs/7.x/state-persistence/index.html +++ b/docs/7.x/state-persistence/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/static-configuration/index.html b/docs/7.x/static-configuration/index.html index 5dd69e6a18..d65f8059d6 100644 --- a/docs/7.x/static-configuration/index.html +++ b/docs/7.x/static-configuration/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/status-bar/index.html b/docs/7.x/status-bar/index.html index 4aaafbd679..4ef65cd4fe 100644 --- a/docs/7.x/status-bar/index.html +++ b/docs/7.x/status-bar/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/tab-actions/index.html b/docs/7.x/tab-actions/index.html index ee9a844a20..0b0e98633b 100644 --- a/docs/7.x/tab-actions/index.html +++ b/docs/7.x/tab-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/tab-based-navigation/index.html b/docs/7.x/tab-based-navigation/index.html index a911ec05d1..82bb261e86 100644 --- a/docs/7.x/tab-based-navigation/index.html +++ b/docs/7.x/tab-based-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/tab-view/index.html b/docs/7.x/tab-view/index.html index 5716fdf424..e6db5000a0 100644 --- a/docs/7.x/tab-view/index.html +++ b/docs/7.x/tab-view/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/testing/index.html b/docs/7.x/testing/index.html index cc6c63af66..3062454361 100644 --- a/docs/7.x/testing/index.html +++ b/docs/7.x/testing/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/themes/index.html b/docs/7.x/themes/index.html index 9b67973cb4..31a92bc4a0 100644 --- a/docs/7.x/themes/index.html +++ b/docs/7.x/themes/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/troubleshooting/index.html b/docs/7.x/troubleshooting/index.html index 821b4f5f53..4ee53141ca 100644 --- a/docs/7.x/troubleshooting/index.html +++ b/docs/7.x/troubleshooting/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/typescript/index.html b/docs/7.x/typescript/index.html index 1bca5df44b..36ddea2a4d 100644 --- a/docs/7.x/typescript/index.html +++ b/docs/7.x/typescript/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/upgrading-from-6.x/index.html b/docs/7.x/upgrading-from-6.x/index.html index c0fb4c235f..42077cb3a1 100644 --- a/docs/7.x/upgrading-from-6.x/index.html +++ b/docs/7.x/upgrading-from-6.x/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-focus-effect/index.html b/docs/7.x/use-focus-effect/index.html index 347a8b8b94..2d9399e67f 100644 --- a/docs/7.x/use-focus-effect/index.html +++ b/docs/7.x/use-focus-effect/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-is-focused/index.html b/docs/7.x/use-is-focused/index.html index e67e171a8d..e650025ee7 100644 --- a/docs/7.x/use-is-focused/index.html +++ b/docs/7.x/use-is-focused/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-link-builder/index.html b/docs/7.x/use-link-builder/index.html index 06b77aa529..9ed61b4c89 100644 --- a/docs/7.x/use-link-builder/index.html +++ b/docs/7.x/use-link-builder/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-link-props/index.html b/docs/7.x/use-link-props/index.html index 931a29f40a..5827f09d6e 100644 --- a/docs/7.x/use-link-props/index.html +++ b/docs/7.x/use-link-props/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-link-to/index.html b/docs/7.x/use-link-to/index.html index bda99d0914..429eca108e 100644 --- a/docs/7.x/use-link-to/index.html +++ b/docs/7.x/use-link-to/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-navigation-state/index.html b/docs/7.x/use-navigation-state/index.html index ff7de56b75..b802463169 100644 --- a/docs/7.x/use-navigation-state/index.html +++ b/docs/7.x/use-navigation-state/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-navigation/index.html b/docs/7.x/use-navigation/index.html index 16da0add88..3af8bfa199 100644 --- a/docs/7.x/use-navigation/index.html +++ b/docs/7.x/use-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-prevent-remove/index.html b/docs/7.x/use-prevent-remove/index.html index b04a55b040..6b1240e5c3 100644 --- a/docs/7.x/use-prevent-remove/index.html +++ b/docs/7.x/use-prevent-remove/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-route/index.html b/docs/7.x/use-route/index.html index 2628e8d192..95d63a4d95 100644 --- a/docs/7.x/use-route/index.html +++ b/docs/7.x/use-route/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-scroll-to-top/index.html b/docs/7.x/use-scroll-to-top/index.html index e472b0661b..e77a2b5c72 100644 --- a/docs/7.x/use-scroll-to-top/index.html +++ b/docs/7.x/use-scroll-to-top/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/use-theme/index.html b/docs/7.x/use-theme/index.html index 943265518e..3fbac72b03 100644 --- a/docs/7.x/use-theme/index.html +++ b/docs/7.x/use-theme/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/used-by/index.html b/docs/7.x/used-by/index.html index ae486d20a3..f991d74c20 100644 --- a/docs/7.x/used-by/index.html +++ b/docs/7.x/used-by/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/7.x/web-support/index.html b/docs/7.x/web-support/index.html index b284e5369c..b47c42cb87 100644 --- a/docs/7.x/web-support/index.html +++ b/docs/7.x/web-support/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/MST-integration/index.html b/docs/MST-integration/index.html index 3ba6ca29d3..ac3fd80157 100644 --- a/docs/MST-integration/index.html +++ b/docs/MST-integration/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/auth-flow/index.html b/docs/auth-flow/index.html index e88e9be0f5..4af3bf9746 100644 --- a/docs/auth-flow/index.html +++ b/docs/auth-flow/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/bottom-tab-navigator/index.html b/docs/bottom-tab-navigator/index.html index ae8cca3ec4..491ee1a212 100644 --- a/docs/bottom-tab-navigator/index.html +++ b/docs/bottom-tab-navigator/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/configuring-links/index.html b/docs/configuring-links/index.html index 1219f09a0b..63cc2d9654 100644 --- a/docs/configuring-links/index.html +++ b/docs/configuring-links/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/connecting-navigation-prop/index.html b/docs/connecting-navigation-prop/index.html index c8aee84acf..728fbf308a 100644 --- a/docs/connecting-navigation-prop/index.html +++ b/docs/connecting-navigation-prop/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/contributing/index.html b/docs/contributing/index.html index df56d712ae..57cf52ae0b 100644 --- a/docs/contributing/index.html +++ b/docs/contributing/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/custom-android-back-button-handling/index.html b/docs/custom-android-back-button-handling/index.html index 9579b5f8b2..9a35f7ef7e 100644 --- a/docs/custom-android-back-button-handling/index.html +++ b/docs/custom-android-back-button-handling/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/custom-navigators/index.html b/docs/custom-navigators/index.html index e4accb36a4..99d9a12494 100644 --- a/docs/custom-navigators/index.html +++ b/docs/custom-navigators/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/custom-routers/index.html b/docs/custom-routers/index.html index b1d5a33750..2fe4dc29d4 100644 --- a/docs/custom-routers/index.html +++ b/docs/custom-routers/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/deep-linking/index.html b/docs/deep-linking/index.html index 056fc90cb5..5393a9847b 100644 --- a/docs/deep-linking/index.html +++ b/docs/deep-linking/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/devtools/index.html b/docs/devtools/index.html index a444241632..d2bb10eaf8 100644 --- a/docs/devtools/index.html +++ b/docs/devtools/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/drawer-actions/index.html b/docs/drawer-actions/index.html index dbf34984d5..905ec0e222 100644 --- a/docs/drawer-actions/index.html +++ b/docs/drawer-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/drawer-based-navigation/index.html b/docs/drawer-based-navigation/index.html index 53bdccbe9a..ee223c5b6e 100644 --- a/docs/drawer-based-navigation/index.html +++ b/docs/drawer-based-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/drawer-layout/index.html b/docs/drawer-layout/index.html index 0e1bd65c79..f20f743d4c 100644 --- a/docs/drawer-layout/index.html +++ b/docs/drawer-layout/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/drawer-navigator/index.html b/docs/drawer-navigator/index.html index 6e058929f7..c8e29932df 100644 --- a/docs/drawer-navigator/index.html +++ b/docs/drawer-navigator/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/elements/index.html b/docs/elements/index.html index aa25770f19..aaac9855fa 100644 --- a/docs/elements/index.html +++ b/docs/elements/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/function-after-focusing-screen/index.html b/docs/function-after-focusing-screen/index.html index 301b01099f..fccd728d24 100644 --- a/docs/function-after-focusing-screen/index.html +++ b/docs/function-after-focusing-screen/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/getting-started/index.html b/docs/getting-started/index.html index cf6ee94749..1220dde0a1 100644 --- a/docs/getting-started/index.html +++ b/docs/getting-started/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/glossary-of-terms/index.html b/docs/glossary-of-terms/index.html index 29df0677da..e0d7e9b217 100644 --- a/docs/glossary-of-terms/index.html +++ b/docs/glossary-of-terms/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/group/index.html b/docs/group/index.html index b1adfa11b8..347e1044ba 100644 --- a/docs/group/index.html +++ b/docs/group/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/handling-safe-area/index.html b/docs/handling-safe-area/index.html index 2ae5f7003c..cf62b9ca1f 100644 --- a/docs/handling-safe-area/index.html +++ b/docs/handling-safe-area/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/header-buttons/index.html b/docs/header-buttons/index.html index b2111312e2..fc630db2b8 100644 --- a/docs/header-buttons/index.html +++ b/docs/header-buttons/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/headers/index.html b/docs/headers/index.html index 9c64847f68..cccd1774b8 100644 --- a/docs/headers/index.html +++ b/docs/headers/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/hello-react-navigation/index.html b/docs/hello-react-navigation/index.html index 837c53fc35..0178e26fcd 100644 --- a/docs/hello-react-navigation/index.html +++ b/docs/hello-react-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/hiding-tabbar-in-screens/index.html b/docs/hiding-tabbar-in-screens/index.html index c4c762c805..e6ab0e50e3 100644 --- a/docs/hiding-tabbar-in-screens/index.html +++ b/docs/hiding-tabbar-in-screens/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/limitations/index.html b/docs/limitations/index.html index fc9bc07c71..46a80a9ac0 100644 --- a/docs/limitations/index.html +++ b/docs/limitations/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/link/index.html b/docs/link/index.html index 34a2a2d800..5e56bc50a2 100644 --- a/docs/link/index.html +++ b/docs/link/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/material-bottom-tab-navigator/index.html b/docs/material-bottom-tab-navigator/index.html index 6de9a5b48b..e403f8a7b3 100644 --- a/docs/material-bottom-tab-navigator/index.html +++ b/docs/material-bottom-tab-navigator/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/material-top-tab-navigator/index.html b/docs/material-top-tab-navigator/index.html index 3c2fdaff9f..5f8a5a4610 100644 --- a/docs/material-top-tab-navigator/index.html +++ b/docs/material-top-tab-navigator/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/migration-guides/index.html b/docs/migration-guides/index.html index ab7a954529..6c763f1109 100644 --- a/docs/migration-guides/index.html +++ b/docs/migration-guides/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/modal/index.html b/docs/modal/index.html index 0f2b36db04..ee91120d55 100644 --- a/docs/modal/index.html +++ b/docs/modal/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/more-resources/index.html b/docs/more-resources/index.html index 3cfcde8d4e..2d289b36a6 100644 --- a/docs/more-resources/index.html +++ b/docs/more-resources/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/multiple-drawers/index.html b/docs/multiple-drawers/index.html index b7dcf6246d..b75ed66ab3 100644 --- a/docs/multiple-drawers/index.html +++ b/docs/multiple-drawers/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/native-stack-navigator/index.html b/docs/native-stack-navigator/index.html index e6a05f57bb..60df0725d2 100644 --- a/docs/native-stack-navigator/index.html +++ b/docs/native-stack-navigator/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigating-without-navigation-prop/index.html b/docs/navigating-without-navigation-prop/index.html index 88cc09d620..ef3fca54b6 100644 --- a/docs/navigating-without-navigation-prop/index.html +++ b/docs/navigating-without-navigation-prop/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigating/index.html b/docs/navigating/index.html index 148b25f4d7..23229d1776 100644 --- a/docs/navigating/index.html +++ b/docs/navigating/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-actions/index.html b/docs/navigation-actions/index.html index 944f557975..dcaa20333d 100644 --- a/docs/navigation-actions/index.html +++ b/docs/navigation-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-container/index.html b/docs/navigation-container/index.html index 64823fe0de..e2d636188c 100644 --- a/docs/navigation-container/index.html +++ b/docs/navigation-container/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-context/index.html b/docs/navigation-context/index.html index b43405c89b..047765c42b 100644 --- a/docs/navigation-context/index.html +++ b/docs/navigation-context/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-events/index.html b/docs/navigation-events/index.html index e91024bc8d..d6ebec0bc4 100644 --- a/docs/navigation-events/index.html +++ b/docs/navigation-events/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-lifecycle/index.html b/docs/navigation-lifecycle/index.html index 4ab6c47f93..29d79f3030 100644 --- a/docs/navigation-lifecycle/index.html +++ b/docs/navigation-lifecycle/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-prop/index.html b/docs/navigation-prop/index.html index 7e811bb5c3..77a4ac8941 100644 --- a/docs/navigation-prop/index.html +++ b/docs/navigation-prop/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-solutions-and-community-libraries/index.html b/docs/navigation-solutions-and-community-libraries/index.html index 8c38838a4d..234b722f13 100644 --- a/docs/navigation-solutions-and-community-libraries/index.html +++ b/docs/navigation-solutions-and-community-libraries/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/navigation-state/index.html b/docs/navigation-state/index.html index d1385d71b5..80266e98a2 100644 --- a/docs/navigation-state/index.html +++ b/docs/navigation-state/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/nesting-navigators/index.html b/docs/nesting-navigators/index.html index ed43ec8ef9..e9327d786f 100644 --- a/docs/nesting-navigators/index.html +++ b/docs/nesting-navigators/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/next-steps/index.html b/docs/next-steps/index.html index e4a50d7c0d..7a9357dfb4 100644 --- a/docs/next-steps/index.html +++ b/docs/next-steps/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/params/index.html b/docs/params/index.html index 971739ef83..3207e4b85f 100644 --- a/docs/params/index.html +++ b/docs/params/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/pitch/index.html b/docs/pitch/index.html index 82bdf8262b..a85d069f13 100644 --- a/docs/pitch/index.html +++ b/docs/pitch/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/preventing-going-back/index.html b/docs/preventing-going-back/index.html index 9accda075c..81c1483729 100644 --- a/docs/preventing-going-back/index.html +++ b/docs/preventing-going-back/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/redux-integration/index.html b/docs/redux-integration/index.html index f2111067f0..13b2dd3c4f 100644 --- a/docs/redux-integration/index.html +++ b/docs/redux-integration/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/route-prop/index.html b/docs/route-prop/index.html index fb6e8c8c09..3f1e687cf4 100644 --- a/docs/route-prop/index.html +++ b/docs/route-prop/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/screen-options-resolution/index.html b/docs/screen-options-resolution/index.html index 2326bb0faf..996494c37a 100644 --- a/docs/screen-options-resolution/index.html +++ b/docs/screen-options-resolution/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/screen-options/index.html b/docs/screen-options/index.html index 68baa32a26..bf3d342983 100644 --- a/docs/screen-options/index.html +++ b/docs/screen-options/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/screen-tracking/index.html b/docs/screen-tracking/index.html index 842c11c0b2..a94fd8a5ef 100644 --- a/docs/screen-tracking/index.html +++ b/docs/screen-tracking/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/screen/index.html b/docs/screen/index.html index 0a3da06512..e9d3d3e8ee 100644 --- a/docs/screen/index.html +++ b/docs/screen/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/server-container/index.html b/docs/server-container/index.html index 0c90116d03..cb1a638620 100644 --- a/docs/server-container/index.html +++ b/docs/server-container/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/server-rendering/index.html b/docs/server-rendering/index.html index 9965a4cd8c..cd7b6364e6 100644 --- a/docs/server-rendering/index.html +++ b/docs/server-rendering/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/shared-element-transitions/index.html b/docs/shared-element-transitions/index.html index fc6bdef39f..c7698d92f8 100644 --- a/docs/shared-element-transitions/index.html +++ b/docs/shared-element-transitions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/stack-actions/index.html b/docs/stack-actions/index.html index ebf342fb87..26c3ca5f5b 100644 --- a/docs/stack-actions/index.html +++ b/docs/stack-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/stack-navigator/index.html b/docs/stack-navigator/index.html index e075006a10..497616ceed 100644 --- a/docs/stack-navigator/index.html +++ b/docs/stack-navigator/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/state-persistence/index.html b/docs/state-persistence/index.html index 2fcda8c963..4fa25c59f4 100644 --- a/docs/state-persistence/index.html +++ b/docs/state-persistence/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/status-bar/index.html b/docs/status-bar/index.html index 295b7ba02a..2169f9074c 100644 --- a/docs/status-bar/index.html +++ b/docs/status-bar/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/tab-actions/index.html b/docs/tab-actions/index.html index 24b74955cf..c18913bfa9 100644 --- a/docs/tab-actions/index.html +++ b/docs/tab-actions/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/tab-based-navigation/index.html b/docs/tab-based-navigation/index.html index 4c92e53933..5cf3b135c4 100644 --- a/docs/tab-based-navigation/index.html +++ b/docs/tab-based-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/tab-view/index.html b/docs/tab-view/index.html index 3f52356beb..8c594e23d6 100644 --- a/docs/tab-view/index.html +++ b/docs/tab-view/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/testing/index.html b/docs/testing/index.html index 1fbbc694dd..de44de5480 100644 --- a/docs/testing/index.html +++ b/docs/testing/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/themes/index.html b/docs/themes/index.html index 2e398e7876..4ffc95e837 100644 --- a/docs/themes/index.html +++ b/docs/themes/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/troubleshooting/index.html b/docs/troubleshooting/index.html index f3a3c5d78a..5474b941f1 100644 --- a/docs/troubleshooting/index.html +++ b/docs/troubleshooting/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/typescript/index.html b/docs/typescript/index.html index 59512e817b..7a9af0596c 100644 --- a/docs/typescript/index.html +++ b/docs/typescript/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/upgrading-from-5.x/index.html b/docs/upgrading-from-5.x/index.html index 8fdb0dbca3..09b6e9db73 100644 --- a/docs/upgrading-from-5.x/index.html +++ b/docs/upgrading-from-5.x/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-focus-effect/index.html b/docs/use-focus-effect/index.html index af6e324fc6..7f3edffc82 100644 --- a/docs/use-focus-effect/index.html +++ b/docs/use-focus-effect/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-is-focused/index.html b/docs/use-is-focused/index.html index 8a2d365804..76685f25d8 100644 --- a/docs/use-is-focused/index.html +++ b/docs/use-is-focused/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-link-builder/index.html b/docs/use-link-builder/index.html index 6ec7dd0a02..f2799b3d93 100644 --- a/docs/use-link-builder/index.html +++ b/docs/use-link-builder/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-link-props/index.html b/docs/use-link-props/index.html index bacb5d2696..458172166b 100644 --- a/docs/use-link-props/index.html +++ b/docs/use-link-props/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-link-to/index.html b/docs/use-link-to/index.html index 87f743c859..55fa7eebb8 100644 --- a/docs/use-link-to/index.html +++ b/docs/use-link-to/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-navigation-state/index.html b/docs/use-navigation-state/index.html index b1eb47e5cd..f43ed431ea 100644 --- a/docs/use-navigation-state/index.html +++ b/docs/use-navigation-state/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-navigation/index.html b/docs/use-navigation/index.html index aa88d69005..26bb781b47 100644 --- a/docs/use-navigation/index.html +++ b/docs/use-navigation/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-route/index.html b/docs/use-route/index.html index e8e4868ce7..7345be266b 100644 --- a/docs/use-route/index.html +++ b/docs/use-route/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-scroll-to-top/index.html b/docs/use-scroll-to-top/index.html index 1a99422feb..8e99de6fdc 100644 --- a/docs/use-scroll-to-top/index.html +++ b/docs/use-scroll-to-top/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/use-theme/index.html b/docs/use-theme/index.html index 4c9931d5c5..1557b5e6ee 100644 --- a/docs/use-theme/index.html +++ b/docs/use-theme/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/used-by/index.html b/docs/used-by/index.html index 7854abbffb..e172b44350 100644 --- a/docs/used-by/index.html +++ b/docs/used-by/index.html @@ -14,7 +14,7 @@ - + diff --git a/docs/web-support/index.html b/docs/web-support/index.html index c25468498b..1c6a51f007 100644 --- a/docs/web-support/index.html +++ b/docs/web-support/index.html @@ -14,7 +14,7 @@ - + diff --git a/help/index.html b/help/index.html index e68bfa7134..7b2cafcf98 100644 --- a/help/index.html +++ b/help/index.html @@ -14,7 +14,7 @@ - + diff --git a/home/Features/index.html b/home/Features/index.html index 55b74e0a0f..a1b973c39d 100644 --- a/home/Features/index.html +++ b/home/Features/index.html @@ -14,7 +14,7 @@ - + diff --git a/home/Splash/SplashLeftIllustration/index.html b/home/Splash/SplashLeftIllustration/index.html index 9b99ead7d9..872867306a 100644 --- a/home/Splash/SplashLeftIllustration/index.html +++ b/home/Splash/SplashLeftIllustration/index.html @@ -14,7 +14,7 @@ - + diff --git a/home/Splash/SplashRightIllustration/index.html b/home/Splash/SplashRightIllustration/index.html index a79d6d5c20..525194c303 100644 --- a/home/Splash/SplashRightIllustration/index.html +++ b/home/Splash/SplashRightIllustration/index.html @@ -14,7 +14,7 @@ - + diff --git a/home/Splash/index.html b/home/Splash/index.html index a43e6e85ba..cde4197845 100644 --- a/home/Splash/index.html +++ b/home/Splash/index.html @@ -14,7 +14,7 @@ - + diff --git a/home/Sponsors/index.html b/home/Sponsors/index.html index 938aed5db4..ce98256131 100644 --- a/home/Sponsors/index.html +++ b/home/Sponsors/index.html @@ -14,7 +14,7 @@ - + diff --git a/index.html b/index.html index 60d4593ab3..b78d7b06ab 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@ - + diff --git a/search/index.html b/search/index.html index 030f4cc757..bef4b5b9ac 100644 --- a/search/index.html +++ b/search/index.html @@ -14,7 +14,7 @@ - +