diff --git a/404.html b/404.html index f7011446fce..1c93644df71 100644 --- a/404.html +++ b/404.html @@ -16,8 +16,8 @@ - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

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

diff --git a/assets/js/2895d14d.5a7dea77.js b/assets/js/2895d14d.5a7dea77.js deleted file mode 100644 index 45cf4cc47f7..00000000000 --- a/assets/js/2895d14d.5a7dea77.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[67373],{77674:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>l});var o=n(85893),a=n(11151);const s={id:"next-steps",title:"Next steps",sidebar_label:"Next steps"},i=void 0,r={id:"next-steps",title:"Next steps",description:"You are now familiar with how to create a stack navigator, configure it on your screen components, navigate between routes, and display modals. Stack navigators and their related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don't solve. For example, you can't build tab-based navigation using a stack navigator — for that, you need to use a Bottom Tabs Navigator.",source:"@site/versioned_docs/version-7.x/next-steps.md",sourceDirName:".",slug:"/next-steps",permalink:"/docs/7.x/next-steps",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/next-steps.md",tags:[],version:"7.x",frontMatter:{id:"next-steps",title:"Next steps",sidebar_label:"Next steps"},sidebar:"docs",previous:{title:"Navigation lifecycle",permalink:"/docs/7.x/navigation-lifecycle"},next:{title:"Tab navigation",permalink:"/docs/7.x/tab-based-navigation"}},c={},l=[];function d(e){const t={a:"a",li:"li",p:"p",ul:"ul",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["You are now familiar with how to create a stack navigator, configure it on your screen components, navigate between routes, and display modals. Stack navigators and their related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don't solve. For example, you can't build tab-based navigation using a stack navigator \u2014 for that, you need to use a ",(0,o.jsx)(t.a,{href:"/docs/7.x/bottom-tab-navigator",children:"Bottom Tabs Navigator"}),"."]}),"\n",(0,o.jsx)(t.p,{children:'The rest of the documentation is organized around specific use cases, so you can jump between the sections under "Guides" as the need arises (but it also wouldn\'t hurt you to familiarize yourself with them pre-emptively!).'}),"\n",(0,o.jsx)(t.p,{children:"Some of the guides you may want to check out are:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/tab-based-navigation",children:"Tab navigation"}),": How to show tabs at the bottom of the screen."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/drawer-based-navigation",children:"Drawer navigation"}),": How to show a drawer from the left or right side of the screen."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/auth-flow",children:"Authentication flows"}),": How to handle authentication flows in your app."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/handling-safe-area",children:"Supporting safe areas"}),": How to handle safe areas such as statusbar in your app."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/deep-linking",children:"Deep linking"}),": How to handle deep linking and universal links in your app."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/themes",children:"Themes"}),": How to customize the look and feel of various UI elements."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/testing",children:"Testing with Jest"}),": How to test your navigation components."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/typescript",children:"Configuring TypeScript"}),": How to configure TypeScript for React Navigation."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["While most users won't need to do this, if you are curious and want to learn more about how React Navigation works, it's recommended to work through the ",(0,o.jsx)(t.a,{href:"/docs/7.x/navigation-state",children:"Navigation State reference"})," and ",(0,o.jsx)(t.a,{href:"/docs/7.x/custom-navigators",children:"Build your own Navigator"})," sections."]}),"\n",(0,o.jsx)(t.p,{children:"Good luck!"})]})}function h(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},11151:(e,t,n)=>{n.d(t,{Z:()=>r,a:()=>i});var o=n(67294);const a={},s=o.createContext(a);function i(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/2895d14d.efe628e3.js b/assets/js/2895d14d.efe628e3.js new file mode 100644 index 00000000000..a13a97510f3 --- /dev/null +++ b/assets/js/2895d14d.efe628e3.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[67373],{77674:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>c,contentTitle:()=>i,default:()=>u,frontMatter:()=>s,metadata:()=>r,toc:()=>l});var o=n(85893),a=n(11151);const s={id:"next-steps",title:"Next steps",sidebar_label:"Next steps"},i=void 0,r={id:"next-steps",title:"Next steps",description:"You are now familiar with how to create a stack navigator, configure it on your screen components, navigate between routes, and display modals. Stack navigators and their related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don't solve. For example, you can't build tab-based navigation using a stack navigator — for that, you need to use a Bottom Tabs Navigator.",source:"@site/versioned_docs/version-7.x/next-steps.md",sourceDirName:".",slug:"/next-steps",permalink:"/docs/7.x/next-steps",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/next-steps.md",tags:[],version:"7.x",frontMatter:{id:"next-steps",title:"Next steps",sidebar_label:"Next steps"},sidebar:"docs",previous:{title:"Navigation lifecycle",permalink:"/docs/7.x/navigation-lifecycle"},next:{title:"Authentication flows",permalink:"/docs/7.x/auth-flow"}},c={},l=[];function d(e){const t={a:"a",li:"li",p:"p",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(t.p,{children:["You are now familiar with how to create a stack navigator, configure it on your screen components, navigate between routes, and display ",(0,o.jsx)(t.a,{href:"/docs/7.x/modal",children:"modals"}),". Stack navigators and their related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don't solve. For example, you can't build tab-based navigation using a stack navigator \u2014 for that, you need to use a ",(0,o.jsx)(t.a,{href:"/docs/7.x/bottom-tab-navigator",children:"Bottom Tabs Navigator"}),"."]}),"\n",(0,o.jsxs)(t.p,{children:["You can check out the ",(0,o.jsx)(t.strong,{children:'"Navigators"'})," section in the sidebar to learn more about the different navigators available in React Navigation."]}),"\n",(0,o.jsxs)(t.p,{children:["The rest of the documentation is organized around specific use cases, so you can jump between the sections under ",(0,o.jsx)(t.strong,{children:'"Guides"'})," as the need arises (but it also wouldn't hurt you to familiarize yourself with them pre-emptively!)."]}),"\n",(0,o.jsx)(t.p,{children:"Some of the guides you may want to check out are:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/auth-flow",children:"Authentication flows"}),": How to handle authentication flows in your app."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/handling-safe-area",children:"Supporting safe areas"}),": How to handle safe areas such as statusbar in your app."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/deep-linking",children:"Deep linking"}),": How to handle deep linking and universal links in your app."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/themes",children:"Themes"}),": How to customize the look and feel of various UI elements."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/testing",children:"Testing with Jest"}),": How to test your navigation components."]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.a,{href:"/docs/7.x/typescript",children:"Configuring TypeScript"}),": How to configure TypeScript for React Navigation."]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["While most users won't need to do this, if you are curious and want to learn more about how React Navigation works, it's recommended to work through the ",(0,o.jsx)(t.a,{href:"/docs/7.x/navigation-state",children:"Navigation State reference"})," and ",(0,o.jsx)(t.a,{href:"/docs/7.x/custom-navigators",children:"Build your own Navigator"})," sections."]}),"\n",(0,o.jsx)(t.p,{children:"Good luck!"})]})}function u(e={}){const{wrapper:t}={...(0,a.a)(),...e.components};return t?(0,o.jsx)(t,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},11151:(e,t,n)=>{n.d(t,{Z:()=>r,a:()=>i});var o=n(67294);const a={},s=o.createContext(a);function i(e){const t=o.useContext(s);return o.useMemo((function(){return"function"==typeof e?e(t):{...t,...e}}),[t,e])}function r(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),o.createElement(s.Provider,{value:t},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/34750482.30dedba6.js b/assets/js/34750482.30dedba6.js new file mode 100644 index 00000000000..d9b14a9522c --- /dev/null +++ b/assets/js/34750482.30dedba6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[92715],{51246:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var r=t(85893),a=t(11151),o=t(74866),i=t(85162);const s={id:"drawer-based-navigation",title:"Drawer navigation",sidebar_label:"Drawer navigation"},c=void 0,l={id:"drawer-based-navigation",title:"Drawer navigation",description:"Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens.",source:"@site/versioned_docs/version-7.x/drawer-based-navigation.md",sourceDirName:".",slug:"/drawer-based-navigation",permalink:"/docs/7.x/drawer-based-navigation",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/drawer-based-navigation.md",tags:[],version:"7.x",frontMatter:{id:"drawer-based-navigation",title:"Drawer navigation",sidebar_label:"Drawer navigation"}},u={},d=[{value:"Minimal example of drawer-based navigation",id:"minimal-example-of-drawer-based-navigation",level:2},{value:"Opening and closing drawer",id:"opening-and-closing-drawer",level:2}];function g(n){const e={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:"Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens."}),"\n",(0,r.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,r.jsx)("source",{src:"/assets/navigators/drawer/drawer.mp4"})}),"\n",(0,r.jsxs)(e.p,{children:["Before continuing, first install and configure ",(0,r.jsx)(e.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/drawer",children:(0,r.jsx)(e.code,{children:"@react-navigation/drawer"})})," and its dependencies following the ",(0,r.jsx)(e.a,{href:"/docs/7.x/drawer-navigator#installation",children:"installation instructions"}),"."]}),"\n",(0,r.jsx)(e.h2,{id:"minimal-example-of-drawer-based-navigation",children:"Minimal example of drawer-based navigation"}),"\n",(0,r.jsxs)(e.p,{children:["To use this drawer navigator, import it from ",(0,r.jsx)(e.code,{children:"@react-navigation/drawer"}),":\n(swipe right to open)"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Drawer navigation","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer navigation" snack',children:"import * as React from 'react';\nimport { View } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nfunction NotificationsScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n screens: {\n Home: HomeScreen,\n Notifications: NotificationsScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Drawer navigation","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer navigation" snack',children:"import * as React from 'react';\nimport { View } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nfunction NotificationsScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.h2,{id:"opening-and-closing-drawer",children:"Opening and closing drawer"}),"\n",(0,r.jsx)(e.p,{children:"To open and close drawer, use the following helpers:"}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Drawer open and close","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer open and close" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n useNavigation,\n createStaticNavigation,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.closeDrawer()}\n />\n // codeblock-focus-end\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n drawerContent: (props) => ,\n screens: {\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Drawer open and close","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer open and close" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.closeDrawer()}\n />\n // codeblock-focus-end\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n }\n >\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.p,{children:"If you would like to toggle the drawer you call the following:"}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Drawer toggle","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer toggle" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n useNavigation,\n createStaticNavigation,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n \n // codeblock-focus-start\n \n // codeblock-focus-end\n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n props.navigation.closeDrawer()}\n />\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n drawerContent: (props) => ,\n screens: {\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Drawer toggle","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer toggle" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n \n // codeblock-focus-start\n \n // codeblock-focus-end\n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n props.navigation.closeDrawer()}\n />\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n }\n >\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.p,{children:"Each of these functions, behind the scenes, are simply dispatching actions:"}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Navigation dispatcher","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Navigation dispatcher" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n DrawerActions,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.dispatch(DrawerActions.closeDrawer())}\n />\n props.navigation.dispatch(DrawerActions.toggleDrawer())}\n />\n // codeblock-focus-end\n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n drawerContent: (props) => ,\n screens: {\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Navigation dispatcher","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Navigation dispatcher" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n NavigationContainer,\n useNavigation,\n DrawerActions,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.dispatch(DrawerActions.closeDrawer())}\n />\n props.navigation.dispatch(DrawerActions.toggleDrawer())}\n />\n // codeblock-focus-end\n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n }\n >\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.p,{children:"If you would like to determine if drawer is open or closed, you can do the following:"}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer hook"',children:"import { useDrawerStatus } from '@react-navigation/drawer';\n\n// ...\n\nconst isDrawerOpen = useDrawerStatus() === 'open';\n"})})]})}function w(n={}){const{wrapper:e}={...(0,a.a)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(g,{...n})}):g(n)}},85162:(n,e,t)=>{t.d(e,{Z:()=>i});t(67294);var r=t(86010);const a={tabItem:"tabItem_Ymn6"};var o=t(85893);function i(n){let{children:e,hidden:t,className:i}=n;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(a.tabItem,i),hidden:t,children:e})}},74866:(n,e,t)=>{t.d(e,{Z:()=>N});var r=t(67294),a=t(86010),o=t(12466),i=t(16550),s=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(n){var e,t;return null!=(e=null==(t=r.Children.toArray(n).filter((n=>"\n"!==n)).map((n=>{if(!n||(0,r.isValidElement)(n)&&function(n){const{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return n;throw new Error("Docusaurus error: Bad child <"+("string"==typeof n.type?n.type:n.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:t.filter(Boolean))?e:[]}function g(n){const{values:e,children:t}=n;return(0,r.useMemo)((()=>{const n=null!=e?e:function(n){return d(n).map((n=>{let{props:{value:e,label:t,attributes:r,default:a}}=n;return{value:e,label:t,attributes:r,default:a}}))}(t);return function(n){const e=(0,l.l)(n,((n,e)=>n.value===e.value));if(e.length>0)throw new Error('Docusaurus error: Duplicate values "'+e.map((n=>n.value)).join(", ")+'" found in . Every value needs to be unique.')}(n),n}),[e,t])}function w(n){let{value:e,tabValues:t}=n;return t.some((n=>n.value===e))}function m(n){let{queryString:e=!1,groupId:t}=n;const a=(0,i.k6)(),o=function(n){let{queryString:e=!1,groupId:t}=n;if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)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!=t?t:null}({queryString:e,groupId:t});return[(0,c._X)(o),(0,r.useCallback)((n=>{if(!o)return;const e=new URLSearchParams(a.location.search);e.set(o,n),a.replace({...a.location,search:e.toString()})}),[o,a])]}function p(n){const{defaultValue:e,queryString:t=!1,groupId:a}=n,o=g(n),[i,c]=(0,r.useState)((()=>function(n){var e;let{defaultValue:t,tabValues:r}=n;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!w({value:t,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+r.map((n=>n.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const a=null!=(e=r.find((n=>n.default)))?e:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:e,tabValues:o}))),[l,d]=m({queryString:t,groupId:a}),[p,f]=function(n){let{groupId:e}=n;const t=function(n){return n?"docusaurus.tab."+n:null}(e),[a,o]=(0,u.Nk)(t);return[a,(0,r.useCallback)((n=>{t&&o.set(n)}),[t,o])]}({groupId:a}),v=(()=>{const n=null!=l?l:p;return w({value:n,tabValues:o})?n:null})();(0,s.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:i,selectValue:(0,r.useCallback)((n=>{if(!w({value:n,tabValues:o}))throw new Error("Can't select invalid tab value="+n);c(n),d(n),f(n)}),[d,f,o]),tabValues:o}}var f=t(72389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var D=t(85893);function h(n){let{className:e,block:t,selectedValue:r,selectValue:i,tabValues:s}=n;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.o5)(),u=n=>{const e=n.currentTarget,t=c.indexOf(e),a=s[t].value;a!==r&&(l(e),i(a))},d=n=>{var e;let t=null;switch(n.key){case"Enter":u(n);break;case"ArrowRight":{var r;const e=c.indexOf(n.currentTarget)+1;t=null!=(r=c[e])?r:c[0];break}case"ArrowLeft":{var a;const e=c.indexOf(n.currentTarget)-1;t=null!=(a=c[e])?a:c[c.length-1];break}}null==(e=t)||e.focus()};return(0,D.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},e),children:s.map((n=>{let{value:e,label:t,attributes:o}=n;return(0,D.jsx)("li",{role:"tab",tabIndex:r===e?0:-1,"aria-selected":r===e,ref:n=>c.push(n),onKeyDown:d,onClick:u,...o,className:(0,a.Z)("tabs__item",v.tabItem,null==o?void 0:o.className,{"tabs__item--active":r===e}),children:null!=t?t:e},e)}))})}function b(n){let{lazy:e,children:t,selectedValue:a}=n;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const n=o.find((n=>n.props.value===a));return n?(0,r.cloneElement)(n,{className:"margin-top--md"}):null}return(0,D.jsx)("div",{className:"margin-top--md",children:o.map(((n,e)=>(0,r.cloneElement)(n,{key:e,hidden:n.props.value!==a})))})}function x(n){const e=p(n);return(0,D.jsxs)("div",{className:(0,a.Z)("tabs-container",v.tabList),children:[(0,D.jsx)(h,{...n,...e}),(0,D.jsx)(b,{...n,...e})]})}function N(n){const e=(0,f.Z)();return(0,D.jsx)(x,{...n,children:d(n.children)},String(e))}},11151:(n,e,t)=>{t.d(e,{Z:()=>s,a:()=>i});var r=t(67294);const a={},o=r.createContext(a);function i(n){const e=r.useContext(o);return r.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function s(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(a):n.components||a:i(n.components),r.createElement(o.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/34750482.eb025efa.js b/assets/js/34750482.eb025efa.js deleted file mode 100644 index c34a210945c..00000000000 --- a/assets/js/34750482.eb025efa.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[92715],{51246:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>u,contentTitle:()=>c,default:()=>w,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var r=t(85893),a=t(11151),o=t(74866),i=t(85162);const s={id:"drawer-based-navigation",title:"Drawer navigation",sidebar_label:"Drawer navigation"},c=void 0,l={id:"drawer-based-navigation",title:"Drawer navigation",description:"Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens.",source:"@site/versioned_docs/version-7.x/drawer-based-navigation.md",sourceDirName:".",slug:"/drawer-based-navigation",permalink:"/docs/7.x/drawer-based-navigation",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/drawer-based-navigation.md",tags:[],version:"7.x",frontMatter:{id:"drawer-based-navigation",title:"Drawer navigation",sidebar_label:"Drawer navigation"},sidebar:"docs",previous:{title:"Tab navigation",permalink:"/docs/7.x/tab-based-navigation"},next:{title:"Authentication flows",permalink:"/docs/7.x/auth-flow"}},u={},d=[{value:"Minimal example of drawer-based navigation",id:"minimal-example-of-drawer-based-navigation",level:2},{value:"Opening and closing drawer",id:"opening-and-closing-drawer",level:2}];function g(n){const e={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,a.a)(),...n.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.p,{children:"Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens."}),"\n",(0,r.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,r.jsx)("source",{src:"/assets/navigators/drawer/drawer.mp4"})}),"\n",(0,r.jsxs)(e.p,{children:["Before continuing, first install and configure ",(0,r.jsx)(e.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/drawer",children:(0,r.jsx)(e.code,{children:"@react-navigation/drawer"})})," and its dependencies following the ",(0,r.jsx)(e.a,{href:"/docs/7.x/drawer-navigator#installation",children:"installation instructions"}),"."]}),"\n",(0,r.jsx)(e.h2,{id:"minimal-example-of-drawer-based-navigation",children:"Minimal example of drawer-based navigation"}),"\n",(0,r.jsxs)(e.p,{children:["To use this drawer navigator, import it from ",(0,r.jsx)(e.code,{children:"@react-navigation/drawer"}),":\n(swipe right to open)"]}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Drawer navigation","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer navigation" snack',children:"import * as React from 'react';\nimport { View } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nfunction NotificationsScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n screens: {\n Home: HomeScreen,\n Notifications: NotificationsScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Drawer navigation","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer navigation" snack',children:"import * as React from 'react';\nimport { View } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nfunction NotificationsScreen() {\n const navigation = useNavigation();\n\n return (\n \n \n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.h2,{id:"opening-and-closing-drawer",children:"Opening and closing drawer"}),"\n",(0,r.jsx)(e.p,{children:"To open and close drawer, use the following helpers:"}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Drawer open and close","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer open and close" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n useNavigation,\n createStaticNavigation,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.closeDrawer()}\n />\n // codeblock-focus-end\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n drawerContent: (props) => ,\n screens: {\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Drawer open and close","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer open and close" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.closeDrawer()}\n />\n // codeblock-focus-end\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n }\n >\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.p,{children:"If you would like to toggle the drawer you call the following:"}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Drawer toggle","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer toggle" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n useNavigation,\n createStaticNavigation,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n \n // codeblock-focus-start\n \n // codeblock-focus-end\n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n props.navigation.closeDrawer()}\n />\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n drawerContent: (props) => ,\n screens: {\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Drawer toggle","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer toggle" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n \n // codeblock-focus-start\n \n // codeblock-focus-end\n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n props.navigation.closeDrawer()}\n />\n props.navigation.toggleDrawer()}\n />\n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n }\n >\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.p,{children:"Each of these functions, behind the scenes, are simply dispatching actions:"}),"\n",(0,r.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,r.jsx)(i.Z,{value:"static",label:"Static",default:!0,children:(0,r.jsx)(e.pre,{"data-name":"Navigation dispatcher","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Navigation dispatcher" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n DrawerActions,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.dispatch(DrawerActions.closeDrawer())}\n />\n props.navigation.dispatch(DrawerActions.toggleDrawer())}\n />\n // codeblock-focus-end\n \n );\n}\n\nconst Drawer = createDrawerNavigator({\n drawerContent: (props) => ,\n screens: {\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(Drawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,r.jsx)(i.Z,{value:"dynamic",label:"Dynamic",children:(0,r.jsx)(e.pre,{"data-name":"Navigation dispatcher","data-snack":"true",children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Navigation dispatcher" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport {\n NavigationContainer,\n useNavigation,\n DrawerActions,\n} from '@react-navigation/native';\nimport {\n createDrawerNavigator,\n DrawerContentScrollView,\n DrawerItemList,\n DrawerItem,\n} from '@react-navigation/drawer';\nimport { Button } from '@react-navigation/elements';\n\nfunction Feed() {\n const navigation = useNavigation();\n\n return (\n \n Feed Screen\n // codeblock-focus-start\n \n // codeblock-focus-end\n \n \n );\n}\n\nfunction Notifications() {\n return (\n \n Notifications Screen\n \n );\n}\n// codeblock-focus-start\n\n/* content */\n\n// codeblock-focus-end\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n // codeblock-focus-start\n props.navigation.dispatch(DrawerActions.closeDrawer())}\n />\n props.navigation.dispatch(DrawerActions.toggleDrawer())}\n />\n // codeblock-focus-end\n \n );\n}\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n }\n >\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,r.jsx)(e.p,{children:"If you would like to determine if drawer is open or closed, you can do the following:"}),"\n",(0,r.jsx)(e.pre,{children:(0,r.jsx)(e.code,{className:"language-js",metastring:'name="Drawer hook"',children:"import { useDrawerStatus } from '@react-navigation/drawer';\n\n// ...\n\nconst isDrawerOpen = useDrawerStatus() === 'open';\n"})})]})}function w(n={}){const{wrapper:e}={...(0,a.a)(),...n.components};return e?(0,r.jsx)(e,{...n,children:(0,r.jsx)(g,{...n})}):g(n)}},85162:(n,e,t)=>{t.d(e,{Z:()=>i});t(67294);var r=t(86010);const a={tabItem:"tabItem_Ymn6"};var o=t(85893);function i(n){let{children:e,hidden:t,className:i}=n;return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.Z)(a.tabItem,i),hidden:t,children:e})}},74866:(n,e,t)=>{t.d(e,{Z:()=>N});var r=t(67294),a=t(86010),o=t(12466),i=t(16550),s=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(n){var e,t;return null!=(e=null==(t=r.Children.toArray(n).filter((n=>"\n"!==n)).map((n=>{if(!n||(0,r.isValidElement)(n)&&function(n){const{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return n;throw new Error("Docusaurus error: Bad child <"+("string"==typeof n.type?n.type:n.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:t.filter(Boolean))?e:[]}function g(n){const{values:e,children:t}=n;return(0,r.useMemo)((()=>{const n=null!=e?e:function(n){return d(n).map((n=>{let{props:{value:e,label:t,attributes:r,default:a}}=n;return{value:e,label:t,attributes:r,default:a}}))}(t);return function(n){const e=(0,l.l)(n,((n,e)=>n.value===e.value));if(e.length>0)throw new Error('Docusaurus error: Duplicate values "'+e.map((n=>n.value)).join(", ")+'" found in . Every value needs to be unique.')}(n),n}),[e,t])}function w(n){let{value:e,tabValues:t}=n;return t.some((n=>n.value===e))}function m(n){let{queryString:e=!1,groupId:t}=n;const a=(0,i.k6)(),o=function(n){let{queryString:e=!1,groupId:t}=n;if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)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!=t?t:null}({queryString:e,groupId:t});return[(0,c._X)(o),(0,r.useCallback)((n=>{if(!o)return;const e=new URLSearchParams(a.location.search);e.set(o,n),a.replace({...a.location,search:e.toString()})}),[o,a])]}function p(n){const{defaultValue:e,queryString:t=!1,groupId:a}=n,o=g(n),[i,c]=(0,r.useState)((()=>function(n){var e;let{defaultValue:t,tabValues:r}=n;if(0===r.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!w({value:t,tabValues:r}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+r.map((n=>n.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const a=null!=(e=r.find((n=>n.default)))?e:r[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:e,tabValues:o}))),[l,d]=m({queryString:t,groupId:a}),[p,f]=function(n){let{groupId:e}=n;const t=function(n){return n?"docusaurus.tab."+n:null}(e),[a,o]=(0,u.Nk)(t);return[a,(0,r.useCallback)((n=>{t&&o.set(n)}),[t,o])]}({groupId:a}),v=(()=>{const n=null!=l?l:p;return w({value:n,tabValues:o})?n:null})();(0,s.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:i,selectValue:(0,r.useCallback)((n=>{if(!w({value:n,tabValues:o}))throw new Error("Can't select invalid tab value="+n);c(n),d(n),f(n)}),[d,f,o]),tabValues:o}}var f=t(72389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var D=t(85893);function h(n){let{className:e,block:t,selectedValue:r,selectValue:i,tabValues:s}=n;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.o5)(),u=n=>{const e=n.currentTarget,t=c.indexOf(e),a=s[t].value;a!==r&&(l(e),i(a))},d=n=>{var e;let t=null;switch(n.key){case"Enter":u(n);break;case"ArrowRight":{var r;const e=c.indexOf(n.currentTarget)+1;t=null!=(r=c[e])?r:c[0];break}case"ArrowLeft":{var a;const e=c.indexOf(n.currentTarget)-1;t=null!=(a=c[e])?a:c[c.length-1];break}}null==(e=t)||e.focus()};return(0,D.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},e),children:s.map((n=>{let{value:e,label:t,attributes:o}=n;return(0,D.jsx)("li",{role:"tab",tabIndex:r===e?0:-1,"aria-selected":r===e,ref:n=>c.push(n),onKeyDown:d,onClick:u,...o,className:(0,a.Z)("tabs__item",v.tabItem,null==o?void 0:o.className,{"tabs__item--active":r===e}),children:null!=t?t:e},e)}))})}function b(n){let{lazy:e,children:t,selectedValue:a}=n;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const n=o.find((n=>n.props.value===a));return n?(0,r.cloneElement)(n,{className:"margin-top--md"}):null}return(0,D.jsx)("div",{className:"margin-top--md",children:o.map(((n,e)=>(0,r.cloneElement)(n,{key:e,hidden:n.props.value!==a})))})}function x(n){const e=p(n);return(0,D.jsxs)("div",{className:(0,a.Z)("tabs-container",v.tabList),children:[(0,D.jsx)(h,{...n,...e}),(0,D.jsx)(b,{...n,...e})]})}function N(n){const e=(0,f.Z)();return(0,D.jsx)(x,{...n,children:d(n.children)},String(e))}},11151:(n,e,t)=>{t.d(e,{Z:()=>s,a:()=>i});var r=t(67294);const a={},o=r.createContext(a);function i(n){const e=r.useContext(o);return r.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function s(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(a):n.components||a:i(n.components),r.createElement(o.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/7bde2dda.0c242a75.js b/assets/js/7bde2dda.0c242a75.js new file mode 100644 index 00000000000..1fb476d53ee --- /dev/null +++ b/assets/js/7bde2dda.0c242a75.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[80908],{75e3:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>b,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var o=t(85893),a=t(11151),i=t(74866),r=t(85162);const s={id:"customizing-tabbar",title:"Customizing bottom tab bar",sidebar_label:"Customizing tab bar"},c=void 0,l={id:"customizing-tabbar",title:"Customizing bottom tab bar",description:"This guide covers customizing the tab bar in createBottomTabNavigator. Make sure to install and configure the library according to the installation instructions first.",source:"@site/versioned_docs/version-7.x/customizing-bottom-tabs.md",sourceDirName:".",slug:"/customizing-tabbar",permalink:"/docs/7.x/customizing-tabbar",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/customizing-bottom-tabs.md",tags:[],version:"7.x",frontMatter:{id:"customizing-tabbar",title:"Customizing bottom tab bar",sidebar_label:"Customizing tab bar"},sidebar:"docs",previous:{title:"Supporting safe areas",permalink:"/docs/7.x/handling-safe-area"},next:{title:"Hiding tab bar in screens",permalink:"/docs/7.x/hiding-tabbar-in-screens"}},u={},d=[{value:"Add icons for each tab",id:"add-icons-for-each-tab",level:2},{value:"Add badges to icons",id:"add-badges-to-icons",level:2}];function m(e){const n={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsxs)(n.p,{children:["This guide covers customizing the tab bar in ",(0,o.jsx)(n.a,{href:"/docs/7.x/bottom-tab-navigator",children:(0,o.jsx)(n.code,{children:"createBottomTabNavigator"})}),". Make sure to install and configure the library according to the ",(0,o.jsx)(n.a,{href:"/docs/7.x/bottom-tab-navigator#installation",children:"installation instructions"})," first."]}),"\n",(0,o.jsx)(n.h2,{id:"add-icons-for-each-tab",children:"Add icons for each tab"}),"\n",(0,o.jsxs)(n.p,{children:["This is similar to how you would customize a stack navigator \u2014 there are some properties that are set when you initialize the tab navigator and others that can be customized per-screen in ",(0,o.jsx)(n.code,{children:"options"}),"."]}),"\n",(0,o.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,o.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,o.jsx)(n.pre,{"data-name":"Tab bar icons","data-snack":"true","data-dependencies":"@expo/vector-icons,@expo/vector-icons/Ionicons",children:(0,o.jsx)(n.code,{className:"language-js",metastring:'name="Tab bar icons" snack dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n// codeblock-focus-start\n// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or\n// react-native-vector-icons/Ionicons otherwise.\nimport Ionicons from 'react-native-vector-icons/Ionicons';\n\n// codeblock-focus-end\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screenOptions: ({ route }) => ({\n // highlight-start\n tabBarIcon: ({ focused, color, size }) => {\n let iconName;\n\n if (route.name === 'Home') {\n iconName = focused\n ? 'ios-information-circle'\n : 'ios-information-circle-outline';\n } else if (route.name === 'Settings') {\n iconName = focused ? 'ios-list' : 'ios-list-outline';\n }\n\n // You can return any component that you like here!\n return ;\n },\n // highlight-end\n tabBarActiveTintColor: 'tomato',\n tabBarInactiveTintColor: 'gray',\n }),\n screens: {\n Home: HomeScreen,\n Settings: SettingsScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,o.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,o.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true","data-dependencies":"@expo/vector-icons,@expo/vector-icons/Ionicons",children:(0,o.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n// codeblock-focus-start\n// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or\n// react-native-vector-icons/Ionicons otherwise.\nimport Ionicons from 'react-native-vector-icons/Ionicons';\n\n// codeblock-focus-end\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n ({\n // highlight-start\n tabBarIcon: ({ focused, color, size }) => {\n let iconName;\n\n if (route.name === 'Home') {\n iconName = focused\n ? 'ios-information-circle'\n : 'ios-information-circle-outline';\n } else if (route.name === 'Settings') {\n iconName = focused ? 'ios-list' : 'ios-list-outline';\n }\n\n // You can return any component that you like here!\n return ;\n },\n // highlight-end\n tabBarActiveTintColor: 'tomato',\n tabBarInactiveTintColor: 'gray',\n })}\n >\n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,o.jsx)(n.p,{children:"Let's dissect this:"}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"tabBarIcon"})," is a supported option in bottom tab navigator. So we know we can use it on our screen components in the ",(0,o.jsx)(n.code,{children:"options"})," prop, but in this case chose to put it in the ",(0,o.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,o.jsx)(n.code,{children:"Tab.Navigator"})," in order to centralize the icon configuration for convenience."]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"tabBarIcon"})," is a function that is given the ",(0,o.jsx)(n.code,{children:"focused"})," state, ",(0,o.jsx)(n.code,{children:"color"}),", and ",(0,o.jsx)(n.code,{children:"size"})," params. If you take a peek further down in the configuration you will see ",(0,o.jsx)(n.code,{children:"tabBarActiveTintColor"})," and ",(0,o.jsx)(n.code,{children:"tabBarInactiveTintColor"}),". These default to the iOS platform defaults, but you can change them here. The ",(0,o.jsx)(n.code,{children:"color"})," that is passed through to the ",(0,o.jsx)(n.code,{children:"tabBarIcon"})," is either the active or inactive one, depending on the ",(0,o.jsx)(n.code,{children:"focused"})," state (focused is active). The ",(0,o.jsx)(n.code,{children:"size"})," is the size of the icon expected by the tab bar."]}),"\n",(0,o.jsxs)(n.li,{children:["Read the ",(0,o.jsx)(n.a,{href:"/docs/7.x/bottom-tab-navigator",children:"full API reference"})," for further information on ",(0,o.jsx)(n.code,{children:"createBottomTabNavigator"})," configuration options."]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"add-badges-to-icons",children:"Add badges to icons"}),"\n",(0,o.jsxs)(n.p,{children:["Sometimes we want to add badges to some icons. You can use the ",(0,o.jsxs)(n.a,{href:"/docs/7.x/bottom-tab-navigator#tabbarbadge",children:[(0,o.jsx)(n.code,{children:"tabBarBadge"})," option"]})," to do it:"]}),"\n",(0,o.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,o.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,o.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true",children:(0,o.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screens: {\n Home: {\n screen: HomeScreen,\n options: {\n // highlight-start\n tabBarBadge: 3,\n // highlight-end\n },\n },\n Settings: SettingsScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,o.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,o.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true",children:(0,o.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n \n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,o.jsxs)(n.p,{children:["From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using ",(0,o.jsx)(n.a,{href:"https://reactjs.org/docs/context.html",children:"React Context"}),", ",(0,o.jsx)(n.a,{href:"https://redux.js.org/",children:"Redux"}),", ",(0,o.jsx)(n.a,{href:"https://mobx.js.org/",children:"MobX"})," or ",(0,o.jsx)(n.a,{href:"https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js",children:"event emitters"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["You can also update the badge from within the screen component by using the ",(0,o.jsx)(n.code,{children:"setOptions"})," method:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const navigation = useNavigation();\n\nReact.useEffect(() => {\n navigation.setOptions({\n tabBarBadge: unreadMessagesCount,\n });\n}, [navigation, unreadMessagesCount]);\n"})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Tabs with badges",src:t(73580).Z+"",width:"300",height:"649"})})]})}function b(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(m,{...e})}):m(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>r});t(67294);var o=t(86010);const a={tabItem:"tabItem_Ymn6"};var i=t(85893);function r(e){let{children:n,hidden:t,className:r}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,o.Z)(a.tabItem,r),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>y});var o=t(67294),a=t(86010),i=t(12466),r=t(16550),s=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(e){var n,t;return null!=(n=null==(t=o.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,o.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:t.filter(Boolean))?n:[]}function m(e){const{values:n,children:t}=e;return(0,o.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:o,default:a}}=e;return{value:n,label:t,attributes:o,default:a}}))}(t);return function(e){const n=(0,l.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,t])}function b(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:t}=e;const a=(0,r.k6)(),i=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(i),(0,o.useCallback)((e=>{if(!i)return;const n=new URLSearchParams(a.location.search);n.set(i,e),a.replace({...a.location,search:n.toString()})}),[i,a])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:a}=e,i=m(e),[r,c]=(0,o.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:o}=e;if(0===o.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:o}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+o.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const a=null!=(n=o.find((e=>e.default)))?n:o[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:i}))),[l,d]=h({queryString:t,groupId:a}),[g,f]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[a,i]=(0,u.Nk)(t);return[a,(0,o.useCallback)((e=>{t&&i.set(e)}),[t,i])]}({groupId:a}),p=(()=>{const e=null!=l?l:g;return b({value:e,tabValues:i})?e:null})();(0,s.Z)((()=>{p&&c(p)}),[p]);return{selectedValue:r,selectValue:(0,o.useCallback)((e=>{if(!b({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);c(e),d(e),f(e)}),[d,f,i]),tabValues:i}}var f=t(72389);const p={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=t(85893);function x(e){let{className:n,block:t,selectedValue:o,selectValue:r,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),u=e=>{const n=e.currentTarget,t=c.indexOf(n),a=s[t].value;a!==o&&(l(n),r(a))},d=e=>{var n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{var o;const n=c.indexOf(e.currentTarget)+1;t=null!=(o=c[n])?o:c[0];break}case"ArrowLeft":{var a;const n=c.indexOf(e.currentTarget)-1;t=null!=(a=c[n])?a:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:i}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:o===n?0:-1,"aria-selected":o===n,ref:e=>c.push(e),onKeyDown:d,onClick:u,...i,className:(0,a.Z)("tabs__item",p.tabItem,null==i?void 0:i.className,{"tabs__item--active":o===n}),children:null!=t?t:n},n)}))})}function j(e){let{lazy:n,children:t,selectedValue:a}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===a));return e?(0,o.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,o.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function T(e){const n=g(e);return(0,v.jsxs)("div",{className:(0,a.Z)("tabs-container",p.tabList),children:[(0,v.jsx)(x,{...e,...n}),(0,v.jsx)(j,{...e,...n})]})}function y(e){const n=(0,f.Z)();return(0,v.jsx)(T,{...e,children:d(e.children)},String(n))}},73580:(e,n,t)=>{t.d(n,{Z:()=>o});const o=t.p+"assets/images/tabs-badges-af2f1f6228840836ac05e2a7636ffbd9.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>r});var o=t(67294);const a={},i=o.createContext(a);function r(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:r(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/7be16658.80b45ac3.js b/assets/js/7be16658.80b45ac3.js deleted file mode 100644 index 553a8f9d161..00000000000 --- a/assets/js/7be16658.80b45ac3.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[20694],{38630:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>l,contentTitle:()=>c,default:()=>f,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var a=t(85893),r=t(11151),s=t(74866),o=t(85162);const i={id:"status-bar",title:"Different status bar configuration based on route",sidebar_label:"Status bar configuration"},c=void 0,u={id:"status-bar",title:"Different status bar configuration based on route",description:"If you don't have a navigation header, or your navigation header changes color based on the route, you'll want to ensure that the correct color is used for the content.",source:"@site/versioned_docs/version-7.x/status-bar.md",sourceDirName:".",slug:"/status-bar",permalink:"/docs/7.x/status-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/status-bar.md",tags:[],version:"7.x",frontMatter:{id:"status-bar",title:"Different status bar configuration based on route",sidebar_label:"Status bar configuration"},sidebar:"docs",previous:{title:"Hiding tab bar in screens",permalink:"/docs/7.x/hiding-tabbar-in-screens"},next:{title:"Opening a modal",permalink:"/docs/7.x/modal"}},l={},d=[{value:"Stack",id:"stack",level:2},{value:"Tabs and Drawer",id:"tabs-and-drawer",level:2}];function g(n){const e={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:"If you don't have a navigation header, or your navigation header changes color based on the route, you'll want to ensure that the correct color is used for the content."}),"\n",(0,a.jsx)(e.h2,{id:"stack",children:"Stack"}),"\n",(0,a.jsxs)(e.p,{children:["This is a simple task when using a stack. You can render the ",(0,a.jsx)(e.code,{children:"StatusBar"})," component, which is exposed by React Native, and set your config."]}),"\n",(0,a.jsxs)(s.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(e.pre,{"data-name":"Different status bar","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Dark Screen\n \n \n );\n}\n\nconst RootStack = createNativeStackNavigator({\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Screen1: Screen1,\n Screen2: Screen2,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nconst styles = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center', alignItems: 'center' },\n});\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(e.pre,{"data-name":"Different status bar","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Dark Screen\n \n \n );\n}\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n"})})})]}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-stack-ios.mp4"})}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-stack-android.mp4"})}),"\n",(0,a.jsx)(e.h2,{id:"tabs-and-drawer",children:"Tabs and Drawer"}),"\n",(0,a.jsxs)(e.p,{children:["If you're using a tab or drawer navigator, it's a bit more complex because all of the screens in the navigator might be rendered at once and kept rendered - that means that the last ",(0,a.jsx)(e.code,{children:"StatusBar"})," config you set will be used (likely on the final tab of your tab navigator, not what the user is seeing)."]}),"\n",(0,a.jsxs)(e.p,{children:["To fix this, we'll have to do make the status bar component aware of screen focus and render it only when the screen is focused. We can achieve this by using the ",(0,a.jsxs)(e.a,{href:"/docs/7.x/use-is-focused",children:[(0,a.jsx)(e.code,{children:"useIsFocused"})," hook"]})," and creating a wrapper component:"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",children:"import * as React from 'react';\nimport { StatusBar } from 'react-native';\nimport { useIsFocused } from '@react-navigation/native';\n\nfunction FocusAwareStatusBar(props) {\n const isFocused = useIsFocused();\n\n return isFocused ? : null;\n}\n"})}),"\n",(0,a.jsxs)(e.p,{children:["Now, our screens (both ",(0,a.jsx)(e.code,{children:"Screen1.js"})," and ",(0,a.jsx)(e.code,{children:"Screen2.js"}),") will use the ",(0,a.jsx)(e.code,{children:"FocusAwareStatusBar"})," component instead of the ",(0,a.jsx)(e.code,{children:"StatusBar"})," component from React Native:"]}),"\n",(0,a.jsx)("samp",{id:"focus-status-bar"}),"\n",(0,a.jsxs)(s.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(e.pre,{"data-name":"Different status bar based on tabs","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar based on tabs" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport { useIsFocused } from '@react-navigation/native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nfunction FocusAwareStatusBar(props) {\n const isFocused = useIsFocused();\n\n return isFocused ? : null;\n}\n\n// codeblock-focus-start\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Dark Screen\n \n \n );\n}\n// codeblock-focus-end\n\nconst RootStack = createNativeStackNavigator({\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Screen1: Screen1,\n Screen2: Screen2,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(e.pre,{"data-name":"Different status bar based on tabs","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar based on tabs" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport { useIsFocused } from '@react-navigation/native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction FocusAwareStatusBar(props) {\n const isFocused = useIsFocused();\n\n return isFocused ? : null;\n}\n\n// codeblock-focus-start\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Dark Screen\n \n \n );\n}\n// codeblock-focus-end\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n"})})})]}),"\n",(0,a.jsxs)(e.p,{children:["Although not necessary, you can use the ",(0,a.jsx)(e.code,{children:"FocusAwareStatusBar"})," component in the screens of the native stack navigator as well."]}),"\n",(0,a.jsxs)("div",{children:[(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-drawer-ios.mp4"})}),(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-drawer-android.mp4"})}),(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-tab-ios.mp4"})}),(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-tab-android.mp4"})})]})]})}function f(n={}){const{wrapper:e}={...(0,r.a)(),...n.components};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(g,{...n})}):g(n)}},85162:(n,e,t)=>{t.d(e,{Z:()=>o});t(67294);var a=t(86010);const r={tabItem:"tabItem_Ymn6"};var s=t(85893);function o(n){let{children:e,hidden:t,className:o}=n;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,o),hidden:t,children:e})}},74866:(n,e,t)=>{t.d(e,{Z:()=>k});var a=t(67294),r=t(86010),s=t(12466),o=t(16550),i=t(20469),c=t(91980),u=t(67392),l=t(50012);function d(n){var e,t;return null!=(e=null==(t=a.Children.toArray(n).filter((n=>"\n"!==n)).map((n=>{if(!n||(0,a.isValidElement)(n)&&function(n){const{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return n;throw new Error("Docusaurus error: Bad child <"+("string"==typeof n.type?n.type:n.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:t.filter(Boolean))?e:[]}function g(n){const{values:e,children:t}=n;return(0,a.useMemo)((()=>{const n=null!=e?e:function(n){return d(n).map((n=>{let{props:{value:e,label:t,attributes:a,default:r}}=n;return{value:e,label:t,attributes:a,default:r}}))}(t);return function(n){const e=(0,u.l)(n,((n,e)=>n.value===e.value));if(e.length>0)throw new Error('Docusaurus error: Duplicate values "'+e.map((n=>n.value)).join(", ")+'" found in . Every value needs to be unique.')}(n),n}),[e,t])}function f(n){let{value:e,tabValues:t}=n;return t.some((n=>n.value===e))}function p(n){let{queryString:e=!1,groupId:t}=n;const r=(0,o.k6)(),s=function(n){let{queryString:e=!1,groupId:t}=n;if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)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!=t?t:null}({queryString:e,groupId:t});return[(0,c._X)(s),(0,a.useCallback)((n=>{if(!s)return;const e=new URLSearchParams(r.location.search);e.set(s,n),r.replace({...r.location,search:e.toString()})}),[s,r])]}function h(n){const{defaultValue:e,queryString:t=!1,groupId:r}=n,s=g(n),[o,c]=(0,a.useState)((()=>function(n){var e;let{defaultValue:t,tabValues:a}=n;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!f({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((n=>n.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const r=null!=(e=a.find((n=>n.default)))?e:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:e,tabValues:s}))),[u,d]=p({queryString:t,groupId:r}),[h,m]=function(n){let{groupId:e}=n;const t=function(n){return n?"docusaurus.tab."+n:null}(e),[r,s]=(0,l.Nk)(t);return[r,(0,a.useCallback)((n=>{t&&s.set(n)}),[t,s])]}({groupId:r}),v=(()=>{const n=null!=u?u:h;return f({value:n,tabValues:s})?n:null})();(0,i.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:o,selectValue:(0,a.useCallback)((n=>{if(!f({value:n,tabValues:s}))throw new Error("Can't select invalid tab value="+n);c(n),d(n),m(n)}),[d,m,s]),tabValues:s}}var m=t(72389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(85893);function S(n){let{className:e,block:t,selectedValue:a,selectValue:o,tabValues:i}=n;const c=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.o5)(),l=n=>{const e=n.currentTarget,t=c.indexOf(e),r=i[t].value;r!==a&&(u(e),o(r))},d=n=>{var e;let t=null;switch(n.key){case"Enter":l(n);break;case"ArrowRight":{var a;const e=c.indexOf(n.currentTarget)+1;t=null!=(a=c[e])?a:c[0];break}case"ArrowLeft":{var r;const e=c.indexOf(n.currentTarget)-1;t=null!=(r=c[e])?r:c[c.length-1];break}}null==(e=t)||e.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},e),children:i.map((n=>{let{value:e,label:t,attributes:s}=n;return(0,b.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:n=>c.push(n),onKeyDown:d,onClick:l,...s,className:(0,r.Z)("tabs__item",v.tabItem,null==s?void 0:s.className,{"tabs__item--active":a===e}),children:null!=t?t:e},e)}))})}function x(n){let{lazy:e,children:t,selectedValue:r}=n;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const n=s.find((n=>n.props.value===r));return n?(0,a.cloneElement)(n,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:s.map(((n,e)=>(0,a.cloneElement)(n,{key:e,hidden:n.props.value!==r})))})}function y(n){const e=h(n);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",v.tabList),children:[(0,b.jsx)(S,{...n,...e}),(0,b.jsx)(x,{...n,...e})]})}function k(n){const e=(0,m.Z)();return(0,b.jsx)(y,{...n,children:d(n.children)},String(e))}},11151:(n,e,t)=>{t.d(e,{Z:()=>i,a:()=>o});var a=t(67294);const r={},s=a.createContext(r);function o(n){const e=a.useContext(s);return a.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function i(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(r):n.components||r:o(n.components),a.createElement(s.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/7be16658.d446eef9.js b/assets/js/7be16658.d446eef9.js new file mode 100644 index 00000000000..b4f18fc4983 --- /dev/null +++ b/assets/js/7be16658.d446eef9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[20694],{38630:(n,e,t)=>{t.r(e),t.d(e,{assets:()=>l,contentTitle:()=>c,default:()=>f,frontMatter:()=>i,metadata:()=>u,toc:()=>d});var a=t(85893),r=t(11151),s=t(74866),o=t(85162);const i={id:"status-bar",title:"Different status bar configuration based on route",sidebar_label:"Status bar configuration"},c=void 0,u={id:"status-bar",title:"Different status bar configuration based on route",description:"If you don't have a navigation header, or your navigation header changes color based on the route, you'll want to ensure that the correct color is used for the content.",source:"@site/versioned_docs/version-7.x/status-bar.md",sourceDirName:".",slug:"/status-bar",permalink:"/docs/7.x/status-bar",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/status-bar.md",tags:[],version:"7.x",frontMatter:{id:"status-bar",title:"Different status bar configuration based on route",sidebar_label:"Status bar configuration"},sidebar:"docs",previous:{title:"Hiding tab bar in screens",permalink:"/docs/7.x/hiding-tabbar-in-screens"},next:{title:"Opening a modal",permalink:"/docs/7.x/modal"}},l={},d=[{value:"Stack",id:"stack",level:2},{value:"Tabs and Drawer",id:"tabs-and-drawer",level:2}];function g(n){const e={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",...(0,r.a)(),...n.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(e.p,{children:"If you don't have a navigation header, or your navigation header changes color based on the route, you'll want to ensure that the correct color is used for the content."}),"\n",(0,a.jsx)(e.h2,{id:"stack",children:"Stack"}),"\n",(0,a.jsxs)(e.p,{children:["This is a simple task when using a stack. You can render the ",(0,a.jsx)(e.code,{children:"StatusBar"})," component, which is exposed by React Native, and set your config."]}),"\n",(0,a.jsxs)(s.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(e.pre,{"data-name":"Different status bar","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Dark Screen\n \n \n );\n}\n\nconst RootStack = createNativeStackNavigator({\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Screen1: Screen1,\n Screen2: Screen2,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nconst styles = StyleSheet.create({\n container: { flex: 1, justifyContent: 'center', alignItems: 'center' },\n});\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(e.pre,{"data-name":"Different status bar","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n // highlight-start\n \n // highlight-end\n Dark Screen\n \n \n );\n}\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n"})})})]}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-stack-ios.mp4"})}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-stack-android.mp4"})}),"\n",(0,a.jsx)(e.h2,{id:"tabs-and-drawer",children:"Tabs and Drawer"}),"\n",(0,a.jsxs)(e.p,{children:["If you're using a tab or drawer navigator, it's a bit more complex because all of the screens in the navigator might be rendered at once and kept rendered - that means that the last ",(0,a.jsx)(e.code,{children:"StatusBar"})," config you set will be used (likely on the final tab of your tab navigator, not what the user is seeing)."]}),"\n",(0,a.jsxs)(e.p,{children:["To fix this, we'll have to do make the status bar component aware of screen focus and render it only when the screen is focused. We can achieve this by using the ",(0,a.jsxs)(e.a,{href:"/docs/7.x/use-is-focused",children:[(0,a.jsx)(e.code,{children:"useIsFocused"})," hook"]})," and creating a wrapper component:"]}),"\n",(0,a.jsx)(e.pre,{children:(0,a.jsx)(e.code,{className:"language-js",children:"import * as React from 'react';\nimport { StatusBar } from 'react-native';\nimport { useIsFocused } from '@react-navigation/native';\n\nfunction FocusAwareStatusBar(props) {\n const isFocused = useIsFocused();\n\n return isFocused ? : null;\n}\n"})}),"\n",(0,a.jsxs)(e.p,{children:["Now, our screens (both ",(0,a.jsx)(e.code,{children:"Screen1.js"})," and ",(0,a.jsx)(e.code,{children:"Screen2.js"}),") will use the ",(0,a.jsx)(e.code,{children:"FocusAwareStatusBar"})," component instead of the ",(0,a.jsx)(e.code,{children:"StatusBar"})," component from React Native:"]}),"\n",(0,a.jsxs)(s.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(e.pre,{"data-name":"Different status bar based on tabs","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar based on tabs" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport { useIsFocused } from '@react-navigation/native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\nfunction FocusAwareStatusBar(props) {\n const isFocused = useIsFocused();\n\n return isFocused ? : null;\n}\n\n// codeblock-focus-start\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Dark Screen\n \n \n );\n}\n// codeblock-focus-end\n\nconst RootStack = createNativeStackNavigator({\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Screen1: Screen1,\n Screen2: Screen2,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(e.pre,{"data-name":"Different status bar based on tabs","data-snack":"true",children:(0,a.jsx)(e.code,{className:"language-js",metastring:'name="Different status bar based on tabs" snack',children:"import * as React from 'react';\nimport { View, Text, StatusBar, StyleSheet } from 'react-native';\nimport { useIsFocused } from '@react-navigation/native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction FocusAwareStatusBar(props) {\n const isFocused = useIsFocused();\n\n return isFocused ? : null;\n}\n\n// codeblock-focus-start\nfunction Screen1() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Light Screen\n \n \n );\n}\n\nfunction Screen2() {\n const navigation = useNavigation();\n const insets = useSafeAreaInsets();\n\n return (\n \n \n Dark Screen\n \n \n );\n}\n// codeblock-focus-end\n\nconst Stack = createNativeStackNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n justifyContent: 'center',\n alignItems: 'center',\n },\n});\n"})})})]}),"\n",(0,a.jsxs)(e.p,{children:["Although not necessary, you can use the ",(0,a.jsx)(e.code,{children:"FocusAwareStatusBar"})," component in the screens of the native stack navigator as well."]}),"\n",(0,a.jsxs)("div",{children:[(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-drawer-ios.mp4"})}),(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-drawer-android.mp4"})}),(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-tab-ios.mp4"})}),(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/statusbar/status-tab-android.mp4"})})]})]})}function f(n={}){const{wrapper:e}={...(0,r.a)(),...n.components};return e?(0,a.jsx)(e,{...n,children:(0,a.jsx)(g,{...n})}):g(n)}},85162:(n,e,t)=>{t.d(e,{Z:()=>o});t(67294);var a=t(86010);const r={tabItem:"tabItem_Ymn6"};var s=t(85893);function o(n){let{children:e,hidden:t,className:o}=n;return(0,s.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,o),hidden:t,children:e})}},74866:(n,e,t)=>{t.d(e,{Z:()=>k});var a=t(67294),r=t(86010),s=t(12466),o=t(16550),i=t(20469),c=t(91980),u=t(67392),l=t(50012);function d(n){var e,t;return null!=(e=null==(t=a.Children.toArray(n).filter((n=>"\n"!==n)).map((n=>{if(!n||(0,a.isValidElement)(n)&&function(n){const{props:e}=n;return!!e&&"object"==typeof e&&"value"in e}(n))return n;throw new Error("Docusaurus error: Bad child <"+("string"==typeof n.type?n.type:n.type.name)+'>: all children of the component should be , and every should have a unique "value" prop.')})))?void 0:t.filter(Boolean))?e:[]}function g(n){const{values:e,children:t}=n;return(0,a.useMemo)((()=>{const n=null!=e?e:function(n){return d(n).map((n=>{let{props:{value:e,label:t,attributes:a,default:r}}=n;return{value:e,label:t,attributes:a,default:r}}))}(t);return function(n){const e=(0,u.l)(n,((n,e)=>n.value===e.value));if(e.length>0)throw new Error('Docusaurus error: Duplicate values "'+e.map((n=>n.value)).join(", ")+'" found in . Every value needs to be unique.')}(n),n}),[e,t])}function f(n){let{value:e,tabValues:t}=n;return t.some((n=>n.value===e))}function p(n){let{queryString:e=!1,groupId:t}=n;const r=(0,o.k6)(),s=function(n){let{queryString:e=!1,groupId:t}=n;if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!t)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!=t?t:null}({queryString:e,groupId:t});return[(0,c._X)(s),(0,a.useCallback)((n=>{if(!s)return;const e=new URLSearchParams(r.location.search);e.set(s,n),r.replace({...r.location,search:e.toString()})}),[s,r])]}function h(n){const{defaultValue:e,queryString:t=!1,groupId:r}=n,s=g(n),[o,c]=(0,a.useState)((()=>function(n){var e;let{defaultValue:t,tabValues:a}=n;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!f({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((n=>n.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const r=null!=(e=a.find((n=>n.default)))?e:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:e,tabValues:s}))),[u,d]=p({queryString:t,groupId:r}),[h,v]=function(n){let{groupId:e}=n;const t=function(n){return n?"docusaurus.tab."+n:null}(e),[r,s]=(0,l.Nk)(t);return[r,(0,a.useCallback)((n=>{t&&s.set(n)}),[t,s])]}({groupId:r}),m=(()=>{const n=null!=u?u:h;return f({value:n,tabValues:s})?n:null})();(0,i.Z)((()=>{m&&c(m)}),[m]);return{selectedValue:o,selectValue:(0,a.useCallback)((n=>{if(!f({value:n,tabValues:s}))throw new Error("Can't select invalid tab value="+n);c(n),d(n),v(n)}),[d,v,s]),tabValues:s}}var v=t(72389);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(85893);function S(n){let{className:e,block:t,selectedValue:a,selectValue:o,tabValues:i}=n;const c=[],{blockElementScrollPositionUntilNextRender:u}=(0,s.o5)(),l=n=>{const e=n.currentTarget,t=c.indexOf(e),r=i[t].value;r!==a&&(u(e),o(r))},d=n=>{var e;let t=null;switch(n.key){case"Enter":l(n);break;case"ArrowRight":{var a;const e=c.indexOf(n.currentTarget)+1;t=null!=(a=c[e])?a:c[0];break}case"ArrowLeft":{var r;const e=c.indexOf(n.currentTarget)-1;t=null!=(r=c[e])?r:c[c.length-1];break}}null==(e=t)||e.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},e),children:i.map((n=>{let{value:e,label:t,attributes:s}=n;return(0,b.jsx)("li",{role:"tab",tabIndex:a===e?0:-1,"aria-selected":a===e,ref:n=>c.push(n),onKeyDown:d,onClick:l,...s,className:(0,r.Z)("tabs__item",m.tabItem,null==s?void 0:s.className,{"tabs__item--active":a===e}),children:null!=t?t:e},e)}))})}function x(n){let{lazy:e,children:t,selectedValue:r}=n;const s=(Array.isArray(t)?t:[t]).filter(Boolean);if(e){const n=s.find((n=>n.props.value===r));return n?(0,a.cloneElement)(n,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:s.map(((n,e)=>(0,a.cloneElement)(n,{key:e,hidden:n.props.value!==r})))})}function y(n){const e=h(n);return(0,b.jsxs)("div",{className:(0,r.Z)("tabs-container",m.tabList),children:[(0,b.jsx)(S,{...n,...e}),(0,b.jsx)(x,{...n,...e})]})}function k(n){const e=(0,v.Z)();return(0,b.jsx)(y,{...n,children:d(n.children)},String(e))}},11151:(n,e,t)=>{t.d(e,{Z:()=>i,a:()=>o});var a=t(67294);const r={},s=a.createContext(r);function o(n){const e=a.useContext(s);return a.useMemo((function(){return"function"==typeof n?n(e):{...e,...n}}),[e,n])}function i(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(r):n.components||r:o(n.components),a.createElement(s.Provider,{value:e},n.children)}}}]); \ No newline at end of file diff --git a/assets/js/a4bf4271.4d41a895.js b/assets/js/a4bf4271.4d41a895.js deleted file mode 100644 index 585d8758769..00000000000 --- a/assets/js/a4bf4271.4d41a895.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[67034],{84763:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var a=t(85893),o=t(11151),r=t(74866),s=t(85162);const i={id:"custom-android-back-button-handling",title:"Custom Android back button behavior",sidebar_label:"Android back button behavior"},c=void 0,l={id:"custom-android-back-button-handling",title:"Custom Android back button behavior",description:"By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling.",source:"@site/versioned_docs/version-7.x/custom-android-back-button-handling.md",sourceDirName:".",slug:"/custom-android-back-button-handling",permalink:"/docs/7.x/custom-android-back-button-handling",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/custom-android-back-button-handling.md",tags:[],version:"7.x",frontMatter:{id:"custom-android-back-button-handling",title:"Custom Android back button behavior",sidebar_label:"Android back button behavior"},sidebar:"docs",previous:{title:"Options with nested navigators",permalink:"/docs/7.x/screen-options-resolution"},next:{title:"Shared element transitions",permalink:"/docs/7.x/shared-element-transitions"}},u={},d=[{value:"Why not use component lifecycle methods",id:"why-not-use-component-lifecycle-methods",level:3}];function m(e){const n={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling."}),"\n",(0,a.jsxs)(n.p,{children:['As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of ',(0,a.jsx)(n.a,{href:"https://reactnative.dev/docs/backhandler.html",children:(0,a.jsx)(n.code,{children:"BackHandler"})})," which comes with react-native, along with the ",(0,a.jsx)(n.code,{children:"useFocusEffect"})," hook to add our custom ",(0,a.jsx)(n.code,{children:"hardwareBackPress"})," listener."]}),"\n",(0,a.jsxs)(n.p,{children:["Returning ",(0,a.jsx)(n.code,{children:"true"})," from ",(0,a.jsx)(n.code,{children:"onBackPress"})," denotes that we have handled the event, and react-navigation's listener will not get called, thus not popping the screen. Returning ",(0,a.jsx)(n.code,{children:"false"})," will cause the event to bubble up and react-navigation's listener will pop the screen."]}),"\n",(0,a.jsx)("samp",{id:"custom-android-back-button"}),"\n",(0,a.jsxs)(r.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(s.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Custom android back button","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Custom android back button" snack',children:"import * as React from 'react';\nimport { Text, View, BackHandler, StyleSheet } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { PlatformPressable, Button } from '@react-navigation/elements';\n\nconst listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];\n\n// codeblock-focus-start\nfunction ScreenWithCustomBackBehavior() {\n // codeblock-focus-end\n const [selected, setSelected] = React.useState(listData[0].key);\n const [isSelectionModeEnabled, setIsSelectionModeEnabled] =\n React.useState(false);\n\n // codeblock-focus-start\n // ...\n\n useFocusEffect(\n React.useCallback(() => {\n const onBackPress = () => {\n if (isSelectionModeEnabled) {\n setIsSelectionModeEnabled(false);\n return true;\n } else {\n return false;\n }\n };\n\n const subscription = BackHandler.addEventListener(\n 'hardwareBackPress',\n onBackPress\n );\n\n return () => subscription.remove();\n }, [isSelectionModeEnabled])\n );\n // codeblock-focus-end\n\n return (\n \n {listData.map((item) => (\n <>\n {isSelectionModeEnabled ? (\n {\n setSelected(item.key);\n }}\n style={{\n textDecorationLine: item.key === selected ? 'underline' : '',\n }}\n >\n \n {item.key}\n \n \n ) : (\n \n {item.key === selected ? 'Selected: ' : ''}\n {item.key}\n \n )}\n \n ))}\n setIsSelectionModeEnabled(!isSelectionModeEnabled)}\n >\n Toggle selection mode\n \n Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}\n \n );\n // codeblock-focus-start\n\n // ...\n}\n// codeblock-focus-end\n\nconst RootStack = createNativeStackNavigator({\n screens: {\n CustomScreen: ScreenWithCustomBackBehavior,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n text: {\n fontSize: 20,\n marginBottom: 20,\n },\n});\n"})})}),(0,a.jsx)(s.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Custom android back button","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Custom android back button" snack',children:"import * as React from 'react';\nimport { Text, View, BackHandler, StyleSheet } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { PlatformPressable, Button } from '@react-navigation/elements';\n\nconst Stack = createNativeStackNavigator();\n\nconst listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];\n\n// codeblock-focus-start\nfunction ScreenWithCustomBackBehavior() {\n // codeblock-focus-end\n\n const [selected, setSelected] = React.useState(listData[0].key);\n const [isSelectionModeEnabled, setIsSelectionModeEnabled] =\n React.useState(false);\n // codeblock-focus-start\n // ...\n\n useFocusEffect(\n React.useCallback(() => {\n const onBackPress = () => {\n if (isSelectionModeEnabled) {\n setIsSelectionModeEnabled(false);\n return true;\n } else {\n return false;\n }\n };\n\n const subscription = BackHandler.addEventListener(\n 'hardwareBackPress',\n onBackPress\n );\n\n return () => subscription.remove();\n }, [isSelectionModeEnabled])\n );\n // codeblock-focus-end\n\n return (\n \n {listData.map((item) => (\n <>\n {isSelectionModeEnabled ? (\n {\n setSelected(item.key);\n }}\n style={{\n textDecorationLine: item.key === selected ? 'underline' : '',\n }}\n >\n \n {item.key}\n \n \n ) : (\n \n {item.key === selected ? 'Selected: ' : ''}\n {item.key}\n \n )}\n \n ))}\n setIsSelectionModeEnabled(!isSelectionModeEnabled)}\n >\n Toggle selection mode\n \n Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}\n \n );\n // codeblock-focus-start\n\n // ...\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n text: {\n fontSize: 20,\n marginBottom: 20,\n },\n});\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["The presented approach will work well for screens that are shown in a ",(0,a.jsx)(n.code,{children:"StackNavigator"}),". Custom back button handling in other situations may not be supported at the moment (eg. A known case when this does not work is when you want to handle back button press in an open drawer. PRs for such use cases are welcome!)."]}),"\n",(0,a.jsxs)(n.p,{children:["If instead of overriding system back button, you'd like to prevent going back from the screen, see docs for ",(0,a.jsx)(n.a,{href:"/docs/7.x/preventing-going-back",children:"preventing going back"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"why-not-use-component-lifecycle-methods",children:"Why not use component lifecycle methods"}),"\n",(0,a.jsxs)(n.p,{children:["At first, you may be inclined to use ",(0,a.jsx)(n.code,{children:"componentDidMount"})," to subscribe for the back press event and ",(0,a.jsx)(n.code,{children:"componentWillUnmount"})," to unsubscribe, or use ",(0,a.jsx)(n.code,{children:"useEffect"})," to add the listener. This approach will not work - learn more about this in ",(0,a.jsx)(n.a,{href:"/docs/7.x/navigation-lifecycle",children:"navigation lifecycle"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>s});t(67294);var a=t(86010);const o={tabItem:"tabItem_Ymn6"};var r=t(85893);function s(e){let{children:n,hidden:t,className:s}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.Z)(o.tabItem,s),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>S});var a=t(67294),o=t(86010),r=t(12466),s=t(16550),i=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function m(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:o}}=e;return{value:n,label:t,attributes:a,default:o}}))}(t);return function(e){const n=(0,l.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,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function b(e){let{queryString:n=!1,groupId:t}=e;const o=(0,s.k6)(),r=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(r),(0,a.useCallback)((e=>{if(!r)return;const n=new URLSearchParams(o.location.search);n.set(r,e),o.replace({...o.location,search:n.toString()})}),[r,o])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:o}=e,r=m(e),[s,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const o=null!=(n=a.find((e=>e.default)))?n:a[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:n,tabValues:r}))),[l,d]=b({queryString:t,groupId:o}),[f,p]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[o,r]=(0,u.Nk)(t);return[o,(0,a.useCallback)((e=>{t&&r.set(e)}),[t,r])]}({groupId:o}),v=(()=>{const e=null!=l?l:f;return h({value:e,tabValues:r})?e:null})();(0,i.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:s,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:r}))throw new Error("Can't select invalid tab value="+e);c(e),d(e),p(e)}),[d,p,r]),tabValues:r}}var p=t(72389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var k=t(85893);function g(e){let{className:n,block:t,selectedValue:a,selectValue:s,tabValues:i}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,r.o5)(),u=e=>{const n=e.currentTarget,t=c.indexOf(n),o=i[t].value;o!==a&&(l(n),s(o))},d=e=>{var n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var o;const n=c.indexOf(e.currentTarget)-1;t=null!=(o=c[n])?o:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,k.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:r}=e;return(0,k.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:d,onClick:u,...r,className:(0,o.Z)("tabs__item",v.tabItem,null==r?void 0:r.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function y(e){let{lazy:n,children:t,selectedValue:o}=e;const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=r.find((e=>e.props.value===o));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,k.jsx)("div",{className:"margin-top--md",children:r.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function x(e){const n=f(e);return(0,k.jsxs)("div",{className:(0,o.Z)("tabs-container",v.tabList),children:[(0,k.jsx)(g,{...e,...n}),(0,k.jsx)(y,{...e,...n})]})}function S(e){const n=(0,p.Z)();return(0,k.jsx)(x,{...e,children:d(e.children)},String(n))}},11151:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>s});var a=t(67294);const o={},r=a.createContext(o);function s(e){const n=a.useContext(r);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/a4bf4271.63937d97.js b/assets/js/a4bf4271.63937d97.js new file mode 100644 index 00000000000..65c56ae1925 --- /dev/null +++ b/assets/js/a4bf4271.63937d97.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[67034],{84763:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>l,toc:()=>d});var a=t(85893),o=t(11151),r=t(74866),s=t(85162);const i={id:"custom-android-back-button-handling",title:"Custom Android back button behavior",sidebar_label:"Android back button behavior"},c=void 0,l={id:"custom-android-back-button-handling",title:"Custom Android back button behavior",description:"By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling.",source:"@site/versioned_docs/version-7.x/custom-android-back-button-handling.md",sourceDirName:".",slug:"/custom-android-back-button-handling",permalink:"/docs/7.x/custom-android-back-button-handling",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/custom-android-back-button-handling.md",tags:[],version:"7.x",frontMatter:{id:"custom-android-back-button-handling",title:"Custom Android back button behavior",sidebar_label:"Android back button behavior"},sidebar:"docs",previous:{title:"Options with nested navigators",permalink:"/docs/7.x/screen-options-resolution"},next:{title:"Shared element transitions",permalink:"/docs/7.x/shared-element-transitions"}},u={},d=[{value:"Why not use component lifecycle methods",id:"why-not-use-component-lifecycle-methods",level:3}];function m(e){const n={a:"a",code:"code",h3:"h3",p:"p",pre:"pre",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling."}),"\n",(0,a.jsxs)(n.p,{children:['As an example, consider a screen where user is selecting items in a list, and a "selection mode" is active. On a back button press, you would first want the "selection mode" to be deactivated, and the screen should be popped only on the second back button press. The following code snippet demonstrates the situation. We make use of ',(0,a.jsx)(n.a,{href:"https://reactnative.dev/docs/backhandler.html",children:(0,a.jsx)(n.code,{children:"BackHandler"})})," which comes with react-native, along with the ",(0,a.jsx)(n.code,{children:"useFocusEffect"})," hook to add our custom ",(0,a.jsx)(n.code,{children:"hardwareBackPress"})," listener."]}),"\n",(0,a.jsxs)(n.p,{children:["Returning ",(0,a.jsx)(n.code,{children:"true"})," from ",(0,a.jsx)(n.code,{children:"onBackPress"})," denotes that we have handled the event, and react-navigation's listener will not get called, thus not popping the screen. Returning ",(0,a.jsx)(n.code,{children:"false"})," will cause the event to bubble up and react-navigation's listener will pop the screen."]}),"\n",(0,a.jsxs)(r.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(s.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Custom android back button","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Custom android back button" snack',children:"import * as React from 'react';\nimport { Text, View, BackHandler, StyleSheet } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { PlatformPressable, Button } from '@react-navigation/elements';\n\nconst listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];\n\n// codeblock-focus-start\nfunction ScreenWithCustomBackBehavior() {\n // codeblock-focus-end\n const [selected, setSelected] = React.useState(listData[0].key);\n const [isSelectionModeEnabled, setIsSelectionModeEnabled] =\n React.useState(false);\n\n // codeblock-focus-start\n // ...\n\n useFocusEffect(\n React.useCallback(() => {\n const onBackPress = () => {\n if (isSelectionModeEnabled) {\n setIsSelectionModeEnabled(false);\n return true;\n } else {\n return false;\n }\n };\n\n const subscription = BackHandler.addEventListener(\n 'hardwareBackPress',\n onBackPress\n );\n\n return () => subscription.remove();\n }, [isSelectionModeEnabled])\n );\n // codeblock-focus-end\n\n return (\n \n {listData.map((item) => (\n <>\n {isSelectionModeEnabled ? (\n {\n setSelected(item.key);\n }}\n style={{\n textDecorationLine: item.key === selected ? 'underline' : '',\n }}\n >\n \n {item.key}\n \n \n ) : (\n \n {item.key === selected ? 'Selected: ' : ''}\n {item.key}\n \n )}\n \n ))}\n setIsSelectionModeEnabled(!isSelectionModeEnabled)}\n >\n Toggle selection mode\n \n Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}\n \n );\n // codeblock-focus-start\n\n // ...\n}\n// codeblock-focus-end\n\nconst RootStack = createNativeStackNavigator({\n screens: {\n CustomScreen: ScreenWithCustomBackBehavior,\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n text: {\n fontSize: 20,\n marginBottom: 20,\n },\n});\n"})})}),(0,a.jsx)(s.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Custom android back button","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Custom android back button" snack',children:"import * as React from 'react';\nimport { Text, View, BackHandler, StyleSheet } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { useFocusEffect } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { PlatformPressable, Button } from '@react-navigation/elements';\n\nconst Stack = createNativeStackNavigator();\n\nconst listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];\n\n// codeblock-focus-start\nfunction ScreenWithCustomBackBehavior() {\n // codeblock-focus-end\n\n const [selected, setSelected] = React.useState(listData[0].key);\n const [isSelectionModeEnabled, setIsSelectionModeEnabled] =\n React.useState(false);\n // codeblock-focus-start\n // ...\n\n useFocusEffect(\n React.useCallback(() => {\n const onBackPress = () => {\n if (isSelectionModeEnabled) {\n setIsSelectionModeEnabled(false);\n return true;\n } else {\n return false;\n }\n };\n\n const subscription = BackHandler.addEventListener(\n 'hardwareBackPress',\n onBackPress\n );\n\n return () => subscription.remove();\n }, [isSelectionModeEnabled])\n );\n // codeblock-focus-end\n\n return (\n \n {listData.map((item) => (\n <>\n {isSelectionModeEnabled ? (\n {\n setSelected(item.key);\n }}\n style={{\n textDecorationLine: item.key === selected ? 'underline' : '',\n }}\n >\n \n {item.key}\n \n \n ) : (\n \n {item.key === selected ? 'Selected: ' : ''}\n {item.key}\n \n )}\n \n ))}\n setIsSelectionModeEnabled(!isSelectionModeEnabled)}\n >\n Toggle selection mode\n \n Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}\n \n );\n // codeblock-focus-start\n\n // ...\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n \n \n );\n}\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n },\n text: {\n fontSize: 20,\n marginBottom: 20,\n },\n});\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["The presented approach will work well for screens that are shown in a ",(0,a.jsx)(n.code,{children:"StackNavigator"}),". Custom back button handling in other situations may not be supported at the moment (eg. A known case when this does not work is when you want to handle back button press in an open drawer. PRs for such use cases are welcome!)."]}),"\n",(0,a.jsxs)(n.p,{children:["If instead of overriding system back button, you'd like to prevent going back from the screen, see docs for ",(0,a.jsx)(n.a,{href:"/docs/7.x/preventing-going-back",children:"preventing going back"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"why-not-use-component-lifecycle-methods",children:"Why not use component lifecycle methods"}),"\n",(0,a.jsxs)(n.p,{children:["At first, you may be inclined to use ",(0,a.jsx)(n.code,{children:"componentDidMount"})," to subscribe for the back press event and ",(0,a.jsx)(n.code,{children:"componentWillUnmount"})," to unsubscribe, or use ",(0,a.jsx)(n.code,{children:"useEffect"})," to add the listener. This approach will not work - learn more about this in ",(0,a.jsx)(n.a,{href:"/docs/7.x/navigation-lifecycle",children:"navigation lifecycle"}),"."]})]})}function h(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>s});t(67294);var a=t(86010);const o={tabItem:"tabItem_Ymn6"};var r=t(85893);function s(e){let{children:n,hidden:t,className:s}=e;return(0,r.jsx)("div",{role:"tabpanel",className:(0,a.Z)(o.tabItem,s),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>S});var a=t(67294),o=t(86010),r=t(12466),s=t(16550),i=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function m(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:o}}=e;return{value:n,label:t,attributes:a,default:o}}))}(t);return function(e){const n=(0,l.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,t])}function h(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function b(e){let{queryString:n=!1,groupId:t}=e;const o=(0,s.k6)(),r=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(r),(0,a.useCallback)((e=>{if(!r)return;const n=new URLSearchParams(o.location.search);n.set(r,e),o.replace({...o.location,search:n.toString()})}),[r,o])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:o}=e,r=m(e),[s,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!h({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const o=null!=(n=a.find((e=>e.default)))?n:a[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:n,tabValues:r}))),[l,d]=b({queryString:t,groupId:o}),[f,p]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[o,r]=(0,u.Nk)(t);return[o,(0,a.useCallback)((e=>{t&&r.set(e)}),[t,r])]}({groupId:o}),v=(()=>{const e=null!=l?l:f;return h({value:e,tabValues:r})?e:null})();(0,i.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:s,selectValue:(0,a.useCallback)((e=>{if(!h({value:e,tabValues:r}))throw new Error("Can't select invalid tab value="+e);c(e),d(e),p(e)}),[d,p,r]),tabValues:r}}var p=t(72389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var k=t(85893);function g(e){let{className:n,block:t,selectedValue:a,selectValue:s,tabValues:i}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,r.o5)(),u=e=>{const n=e.currentTarget,t=c.indexOf(n),o=i[t].value;o!==a&&(l(n),s(o))},d=e=>{var n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var o;const n=c.indexOf(e.currentTarget)-1;t=null!=(o=c[n])?o:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,k.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":t},n),children:i.map((e=>{let{value:n,label:t,attributes:r}=e;return(0,k.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:d,onClick:u,...r,className:(0,o.Z)("tabs__item",v.tabItem,null==r?void 0:r.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function y(e){let{lazy:n,children:t,selectedValue:o}=e;const r=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=r.find((e=>e.props.value===o));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,k.jsx)("div",{className:"margin-top--md",children:r.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function x(e){const n=f(e);return(0,k.jsxs)("div",{className:(0,o.Z)("tabs-container",v.tabList),children:[(0,k.jsx)(g,{...e,...n}),(0,k.jsx)(y,{...e,...n})]})}function S(e){const n=(0,p.Z)();return(0,k.jsx)(x,{...e,children:d(e.children)},String(n))}},11151:(e,n,t)=>{t.d(n,{Z:()=>i,a:()=>s});var a=t(67294);const o={},r=a.createContext(o);function s(e){const n=a.useContext(r);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:s(e.components),a.createElement(r.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/adcb3b88.0dab2788.js b/assets/js/adcb3b88.0dab2788.js deleted file mode 100644 index 7164bd2584b..00000000000 --- a/assets/js/adcb3b88.0dab2788.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[24200],{84819:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"7.x","label":"7.x","banner":"unreleased","badge":true,"noIndex":false,"className":"docs-version-7.x","isLast":false,"docsSidebars":{"docs":[{"type":"category","label":"Fundamentals","items":[{"type":"link","label":"Getting started","href":"/docs/7.x/getting-started","docId":"getting-started","unlisted":false},{"type":"link","label":"Hello React Navigation","href":"/docs/7.x/hello-react-navigation","docId":"hello-react-navigation","unlisted":false},{"type":"link","label":"Moving between screens","href":"/docs/7.x/navigating","docId":"navigating","unlisted":false},{"type":"link","label":"Passing parameters to routes","href":"/docs/7.x/params","docId":"params","unlisted":false},{"type":"link","label":"Configuring the header bar","href":"/docs/7.x/headers","docId":"headers","unlisted":false},{"type":"link","label":"Header buttons","href":"/docs/7.x/header-buttons","docId":"header-buttons","unlisted":false},{"type":"link","label":"Nesting navigators","href":"/docs/7.x/nesting-navigators","docId":"nesting-navigators","unlisted":false},{"type":"link","label":"Navigation lifecycle","href":"/docs/7.x/navigation-lifecycle","docId":"navigation-lifecycle","unlisted":false},{"type":"link","label":"Next steps","href":"/docs/7.x/next-steps","docId":"next-steps","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Guides","items":[{"type":"link","label":"Tab navigation","href":"/docs/7.x/tab-based-navigation","docId":"tab-based-navigation","unlisted":false},{"type":"link","label":"Drawer navigation","href":"/docs/7.x/drawer-based-navigation","docId":"drawer-based-navigation","unlisted":false},{"type":"link","label":"Authentication flows","href":"/docs/7.x/auth-flow","docId":"auth-flow","unlisted":false},{"type":"link","label":"Supporting safe areas","href":"/docs/7.x/handling-safe-area","docId":"handling-safe-area","unlisted":false},{"type":"link","label":"Hiding tab bar in screens","href":"/docs/7.x/hiding-tabbar-in-screens","docId":"hiding-tabbar-in-screens","unlisted":false},{"type":"link","label":"Status bar configuration","href":"/docs/7.x/status-bar","docId":"status-bar","unlisted":false},{"type":"link","label":"Opening a modal","href":"/docs/7.x/modal","docId":"modal","unlisted":false},{"type":"link","label":"Multiple drawers","href":"/docs/7.x/multiple-drawers","docId":"multiple-drawers","unlisted":false},{"type":"link","label":"Options with nested navigators","href":"/docs/7.x/screen-options-resolution","docId":"screen-options-resolution","unlisted":false},{"type":"link","label":"Android back button behavior","href":"/docs/7.x/custom-android-back-button-handling","docId":"custom-android-back-button-handling","unlisted":false},{"type":"link","label":"Shared element transitions","href":"/docs/7.x/shared-element-transitions","docId":"shared-element-transitions","unlisted":false},{"type":"link","label":"Preventing going back","href":"/docs/7.x/preventing-going-back","docId":"preventing-going-back","unlisted":false},{"type":"link","label":"Call a function on focus","href":"/docs/7.x/function-after-focusing-screen","docId":"function-after-focusing-screen","unlisted":false},{"type":"link","label":"Navigation Ref","href":"/docs/7.x/navigating-without-navigation-prop","docId":"navigating-without-navigation-prop","unlisted":false},{"type":"link","label":"Deep linking","href":"/docs/7.x/deep-linking","docId":"deep-linking","unlisted":false},{"type":"link","label":"Configuring links","href":"/docs/7.x/configuring-links","docId":"configuring-links","unlisted":false},{"type":"link","label":"Web support","href":"/docs/7.x/web-support","docId":"web-support","unlisted":false},{"type":"link","label":"Server rendering","href":"/docs/7.x/server-rendering","docId":"server-rendering","unlisted":false},{"type":"link","label":"Screen tracking","href":"/docs/7.x/screen-tracking","docId":"screen-tracking","unlisted":false},{"type":"link","label":"Themes","href":"/docs/7.x/themes","docId":"themes","unlisted":false},{"type":"link","label":"State persistence","href":"/docs/7.x/state-persistence","docId":"state-persistence","unlisted":false},{"type":"link","label":"Static and dynamic APIs","href":"/docs/7.x/combine-static-with-dynamic","docId":"combine-static-with-dynamic","unlisted":false},{"type":"link","label":"Testing with Jest","href":"/docs/7.x/testing","docId":"testing","unlisted":false},{"type":"link","label":"Configuring TypeScript","href":"/docs/7.x/typescript","docId":"typescript","unlisted":false},{"type":"link","label":"Troubleshooting","href":"/docs/7.x/troubleshooting","docId":"troubleshooting","unlisted":false},{"type":"link","label":"Upgrading from 6.x","href":"/docs/7.x/upgrading-from-6.x","docId":"upgrading-from-6.x","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Navigators","items":[{"type":"link","label":"Stack","href":"/docs/7.x/stack-navigator","docId":"stack-navigator","unlisted":false},{"type":"link","label":"Native Stack","href":"/docs/7.x/native-stack-navigator","docId":"native-stack-navigator","unlisted":false},{"type":"link","label":"Bottom Tabs","href":"/docs/7.x/bottom-tab-navigator","docId":"bottom-tab-navigator","unlisted":false},{"type":"link","label":"Drawer","href":"/docs/7.x/drawer-navigator","docId":"drawer-navigator","unlisted":false},{"type":"link","label":"Material Top Tabs","href":"/docs/7.x/material-top-tab-navigator","docId":"material-top-tab-navigator","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Libraries","items":[{"type":"link","label":"Developer tools","href":"/docs/7.x/devtools","docId":"devtools","unlisted":false},{"type":"link","label":"Elements","href":"/docs/7.x/elements","docId":"elements","unlisted":false},{"type":"link","label":"Tab View","href":"/docs/7.x/tab-view","docId":"tab-view","unlisted":false},{"type":"link","label":"Drawer Layout","href":"/docs/7.x/drawer-layout","docId":"drawer-layout","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"API reference","items":[{"type":"link","label":"Static configuration","href":"/docs/7.x/static-configuration","docId":"static-configuration","unlisted":false},{"type":"link","label":"NavigationContainer","href":"/docs/7.x/navigation-container","docId":"navigation-container","unlisted":false},{"type":"link","label":"ServerContainer","href":"/docs/7.x/server-container","docId":"server-container","unlisted":false},{"type":"link","label":"Navigator","href":"/docs/7.x/navigator","docId":"navigator","unlisted":false},{"type":"link","label":"Group","href":"/docs/7.x/group","docId":"group","unlisted":false},{"type":"link","label":"Screen","href":"/docs/7.x/screen","docId":"screen","unlisted":false},{"type":"link","label":"Options for screens","href":"/docs/7.x/screen-options","docId":"screen-options","unlisted":false},{"type":"link","label":"Route object","href":"/docs/7.x/route-object","docId":"route-object","unlisted":false},{"type":"link","label":"Navigation object","href":"/docs/7.x/navigation-object","docId":"navigation-object","unlisted":false},{"type":"link","label":"NavigationContext","href":"/docs/7.x/navigation-context","docId":"navigation-context","unlisted":false},{"type":"link","label":"Navigation events","href":"/docs/7.x/navigation-events","docId":"navigation-events","unlisted":false},{"type":"link","label":"Navigation state","href":"/docs/7.x/navigation-state","docId":"navigation-state","unlisted":false},{"type":"link","label":"Link","href":"/docs/7.x/link","docId":"link","unlisted":false},{"type":"category","collapsible":true,"label":"Hooks","items":[{"type":"link","label":"useNavigation","href":"/docs/7.x/use-navigation","docId":"use-navigation","unlisted":false},{"type":"link","label":"useRoute","href":"/docs/7.x/use-route","docId":"use-route","unlisted":false},{"type":"link","label":"useNavigationState","href":"/docs/7.x/use-navigation-state","docId":"use-navigation-state","unlisted":false},{"type":"link","label":"useFocusEffect","href":"/docs/7.x/use-focus-effect","docId":"use-focus-effect","unlisted":false},{"type":"link","label":"useIsFocused","href":"/docs/7.x/use-is-focused","docId":"use-is-focused","unlisted":false},{"type":"link","label":"usePreventRemove","href":"/docs/7.x/use-prevent-remove","docId":"use-prevent-remove","unlisted":false},{"type":"link","label":"useLinkTo","href":"/docs/7.x/use-link-to","docId":"use-link-to","unlisted":false},{"type":"link","label":"useLinkProps","href":"/docs/7.x/use-link-props","docId":"use-link-props","unlisted":false},{"type":"link","label":"useLinkBuilder","href":"/docs/7.x/use-link-builder","docId":"use-link-builder","unlisted":false},{"type":"link","label":"useScrollToTop","href":"/docs/7.x/use-scroll-to-top","docId":"use-scroll-to-top","unlisted":false},{"type":"link","label":"useTheme","href":"/docs/7.x/use-theme","docId":"use-theme","unlisted":false}],"collapsed":false},{"type":"category","collapsible":true,"label":"Actions","items":[{"type":"link","label":"CommonActions","href":"/docs/7.x/navigation-actions","docId":"navigation-actions","unlisted":false},{"type":"link","label":"StackActions","href":"/docs/7.x/stack-actions","docId":"stack-actions","unlisted":false},{"type":"link","label":"DrawerActions","href":"/docs/7.x/drawer-actions","docId":"drawer-actions","unlisted":false},{"type":"link","label":"TabActions","href":"/docs/7.x/tab-actions","docId":"tab-actions","unlisted":false}],"collapsed":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Build your own Navigator","items":[{"type":"link","label":"Custom routers","href":"/docs/7.x/custom-routers","docId":"custom-routers","unlisted":false},{"type":"link","label":"Custom navigators","href":"/docs/7.x/custom-navigators","docId":"custom-navigators","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Additional resources","items":[{"type":"link","label":"Migration Guides","href":"/docs/7.x/migration-guides","docId":"migration-guides","unlisted":false},{"type":"link","label":"Community Libraries","href":"/docs/7.x/navigation-solutions-and-community-libraries","docId":"navigation-solutions-and-community-libraries","unlisted":false},{"type":"link","label":"More Resources","href":"/docs/7.x/more-resources","docId":"more-resources","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Meta","items":[{"type":"link","label":"Glossary of terms","href":"/docs/7.x/glossary-of-terms","docId":"glossary-of-terms","unlisted":false},{"type":"link","label":"Pitch & anti-pitch","href":"/docs/7.x/pitch","docId":"pitch","unlisted":false},{"type":"link","label":"Limitations","href":"/docs/7.x/limitations","docId":"limitations","unlisted":false},{"type":"link","label":"Apps using React Navigation","href":"/docs/7.x/used-by","docId":"used-by","unlisted":false},{"type":"link","label":"Contributing","href":"/docs/7.x/contributing","docId":"contributing","unlisted":false}],"collapsed":false,"collapsible":true}]},"docs":{"auth-flow":{"id":"auth-flow","title":"Authentication flows","description":"Most apps require that a user authenticates in some way to have access to data associated with a user or other private content. Typically the flow will look like this:","sidebar":"docs"},"bottom-tab-navigator":{"id":"bottom-tab-navigator","title":"Bottom Tabs Navigator","description":"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.","sidebar":"docs"},"combine-static-with-dynamic":{"id":"combine-static-with-dynamic","title":"Combining static and dynamic APIs","description":"While the static API has many advantages, it doesn\'t fit use cases where the navigation configuration needs to be dynamic. So React Navigation supports interop between the static and dynamic APIs.","sidebar":"docs"},"configuring-links":{"id":"configuring-links","title":"Configuring links","description":"In this guide, we will configure React Navigation to handle external links. This is necessary if you want to:","sidebar":"docs"},"contributing":{"id":"contributing","title":"React Navigation contributor guide","description":"Want to help improve React Navigation? Your help would be greatly appreciated!","sidebar":"docs"},"custom-android-back-button-handling":{"id":"custom-android-back-button-handling","title":"Custom Android back button behavior","description":"By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling.","sidebar":"docs"},"custom-navigators":{"id":"custom-navigators","title":"Custom navigators","description":"Navigators allow you to define your application\'s navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.","sidebar":"docs"},"custom-routers":{"id":"custom-routers","title":"Custom routers","description":"The router object provides various helper methods to deal with the state and actions, a reducer to update the state as well as some action creators.","sidebar":"docs"},"deep-linking":{"id":"deep-linking","title":"Deep linking","description":"This guide will describe how to configure your app to handle deep links on various platforms. To handle incoming links, you need to handle 2 scenarios:","sidebar":"docs"},"devtools":{"id":"devtools","title":"Developer tools","description":"Developer tools to make debugging easier when using React Navigation.","sidebar":"docs"},"drawer-actions":{"id":"drawer-actions","title":"DrawerActions reference","description":"DrawerActions is an object containing methods for generating actions specific to drawer-based navigators. Its methods expand upon the actions available in CommonActions.","sidebar":"docs"},"drawer-based-navigation":{"id":"drawer-based-navigation","title":"Drawer navigation","description":"Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens.","sidebar":"docs"},"drawer-layout":{"id":"drawer-layout","title":"React Native Drawer Layout","description":"A cross-platform Drawer component for React Native implemented using react-native-gesture-handler and react-native-reanimated on native platforms and CSS transitions on Web.","sidebar":"docs"},"drawer-navigator":{"id":"drawer-navigator","title":"Drawer Navigator","description":"Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.","sidebar":"docs"},"elements":{"id":"elements","title":"Elements Library","description":"A component library containing the UI elements and helpers used in React Navigation. It can be useful if you\'re building your own navigator, or want to reuse a default functionality in your app.","sidebar":"docs"},"function-after-focusing-screen":{"id":"function-after-focusing-screen","title":"Call a function when focused screen changes","description":"In this guide we will call a function or render something on screen focusing. This is useful for making additional API calls when a user revisits a particular screen in a Tab Navigator, or to track user events as they tap around our app.","sidebar":"docs"},"getting-started":{"id":"getting-started","title":"Getting started","description":"What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation.","sidebar":"docs"},"glossary-of-terms":{"id":"glossary-of-terms","title":"Glossary of terms","description":"This is a new section of the documentation and it\'s missing a lot of terms! Please submit a pull request or an issue with a term that you think should be explained here.","sidebar":"docs"},"group":{"id":"group","title":"Group","description":"A group contains several screens inside a navigator for organizational purposes. They can also be used to apply the same options such as header styles to a group of screens, or to define a common layout etc.","sidebar":"docs"},"handling-safe-area":{"id":"handling-safe-area","title":"Supporting safe areas","description":"By default, React Navigation tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:","sidebar":"docs"},"header-buttons":{"id":"header-buttons","title":"Header buttons","description":"Now that we know how to customize the look of our headers, let\'s make them sentient! Actually perhaps that\'s ambitious, let\'s just make them able to respond to our touches in very well-defined ways.","sidebar":"docs"},"headers":{"id":"headers","title":"Configuring the header bar","description":"We\'ve seen how to configure the header title already, but let\'s go over that again before moving on to some other options — repetition is key to learning!","sidebar":"docs"},"hello-react-navigation":{"id":"hello-react-navigation","title":"Hello React Navigation","description":"In a web browser, you can link to different pages using an anchor (``) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn\'t have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.","sidebar":"docs"},"hiding-tabbar-in-screens":{"id":"hiding-tabbar-in-screens","title":"Hiding tab bar in specific screens","description":"Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let\'s say we have 5 screens","sidebar":"docs"},"limitations":{"id":"limitations","title":"Limitations","description":"As a potential user of the library, it\'s important to know what you can and cannot do with it. Armed with this knowledge, you may choose to adopt a different library such as react-native-navigation instead. We discuss the high level design decisions in the pitch & anti-pitch section, and here we will cover some of the use cases that are either not supported or are so difficult to do that they may as well be impossible. If any of the following limitations are dealbreakers for your app, React Navigation might not be for you.","sidebar":"docs"},"link":{"id":"link","title":"Link","description":"The Link component renders a component that can navigate to a screen on press. This renders a ` tag when used on the Web and uses a Text component on other platforms. It preserves the default behavior of anchor tags in the browser such as Right click -> Open link in new tab\\", Ctrl+Click/\u2318+Click` etc. to provide a native experience.","sidebar":"docs"},"material-top-tab-navigator":{"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.","sidebar":"docs"},"migration-guides":{"id":"migration-guides","title":"Migration Guides","description":"This page contains links to pages that will guide you through the process of upgrading React Navigation:","sidebar":"docs"},"modal":{"id":"modal","title":"Opening a modal","description":"Modal shown on screen","sidebar":"docs"},"more-resources":{"id":"more-resources","title":"More Resources","description":"Talks","sidebar":"docs"},"multiple-drawers":{"id":"multiple-drawers","title":"Multiple drawers","description":"Sometimes we want to have multiple drawers on the same screen","sidebar":"docs"},"native-stack-navigator":{"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.","sidebar":"docs"},"navigating":{"id":"navigating","title":"Moving between screens","description":"In the previous section, we defined a stack navigator with two routes (Home and Details), but we didn\'t learn how to let a user navigate from Home to Details (although we did learn how to change the initial route in our code, but forcing our users to clone our repository and change the route in our code in order to see another screen is arguably among the worst user experiences one could imagine).","sidebar":"docs"},"navigating-without-navigation-prop":{"id":"navigating-without-navigation-prop","title":"Navigating without the navigation prop","description":"Sometimes you need to trigger a navigation action from places where you do not have access to the navigation object, such as a Redux middleware. For such cases, you can dispatch navigation actions use a ref on the navigation container.","sidebar":"docs"},"navigation-actions":{"id":"navigation-actions","title":"CommonActions reference","description":"A navigation action is an object containing at least a type property. Internally, the action can be handled by routers with the getStateForAction method to return a new state from an existing navigation state.","sidebar":"docs"},"navigation-container":{"id":"navigation-container","title":"NavigationContainer","description":"The NavigationContainer is responsible for managing your app\'s navigation state and linking your top-level navigator to the app environment.","sidebar":"docs"},"navigation-context":{"id":"navigation-context","title":"NavigationContext","description":"NavigationContext provides the navigation object (same object as the navigation prop). In fact, useNavigation uses this context to get the navigation prop.","sidebar":"docs"},"navigation-events":{"id":"navigation-events","title":"Navigation events","description":"You can listen to various events emitted by React Navigation to get notified of certain events, and in some cases, override the default action. There are few core events such as focus, blur etc. (documented below) that work for every navigator, as well as navigator specific events that work only for certain navigators.","sidebar":"docs"},"navigation-lifecycle":{"id":"navigation-lifecycle","title":"Navigation lifecycle","description":"In a previous section, we worked with a stack navigator that has two screens (Home and Profile) and learned how to use navigation.navigate(\'RouteName\') to navigate between the screens.","sidebar":"docs"},"navigation-object":{"id":"navigation-object","title":"Navigation object reference","description":"The navigation object contains various convenience functions that dispatch navigation actions. It looks like this:","sidebar":"docs"},"navigation-solutions-and-community-libraries":{"id":"navigation-solutions-and-community-libraries","title":"Navigation Solutions and Community Libraries","description":"Libraries listed in this guide may not have been updated to work with the latest version of React Navigation. Please refer to the library\'s documentation to see which version of React Navigation it supports.","sidebar":"docs"},"navigation-state":{"id":"navigation-state","title":"Navigation state reference","description":"The navigation state is the state where React Navigation stores the navigation structure and history of the app. It\'s useful to know about the structure of the navigation state if you need to do advanced operations such as resetting the state, providing a custom initial state etc.","sidebar":"docs"},"navigator":{"id":"navigator","title":"Navigator","description":"A navigator is responsible for managing and rendering a set of screens. It can be created using the createXNavigator functions, e.g. createStackNavigator, createNativeStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator, createDrawerNavigator etc.:","sidebar":"docs"},"nesting-navigators":{"id":"nesting-navigators","title":"Nesting navigators","description":"Nesting navigators means rendering a navigator inside a screen of another navigator, for example:","sidebar":"docs"},"next-steps":{"id":"next-steps","title":"Next steps","description":"You are now familiar with how to create a stack navigator, configure it on your screen components, navigate between routes, and display modals. Stack navigators and their related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don\'t solve. For example, you can\'t build tab-based navigation using a stack navigator — for that, you need to use a Bottom Tabs Navigator.","sidebar":"docs"},"params":{"id":"params","title":"Passing parameters to routes","description":"Remember when I said \\"more on that later when we talk about params!\\"? Well, the time has come.","sidebar":"docs"},"pitch":{"id":"pitch","title":"Pitch & anti-pitch","description":"It\'s useful when considering whether or not to use a project to understand the tradeoffs that the developers of the project made when building it. What problems does it explicitly try to solve for you, and which ones does it ignore? What are the current limitations of the project and common problems that people encounter? These are the kinds of questions that we believe you should have answers to when making an important technology decision for your project, and so we have documented answers to these questions as best we can here, in the form of a \\"pitch\\" (why you should use it) and \\"anti-pitch\\" (why you should not use it). Please submit a pull request if you believe we have omitted important information!","sidebar":"docs"},"preventing-going-back":{"id":"preventing-going-back","title":"Preventing going back","description":"Sometimes you may want to prevent the user from leaving a screen to avoid losing unsaved changes. There are a couple of things you may want to do in this case:","sidebar":"docs"},"route-object":{"id":"route-object","title":"Route object reference","description":"Each screen component in your app is provided with the route object as a prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives).","sidebar":"docs"},"screen":{"id":"screen","title":"Screen","description":"A screen represents routes in a navigator. A screen\'s configuration contains the component for the route, options, event listeners, etc.","sidebar":"docs"},"screen-options":{"id":"screen-options","title":"Options for screens","description":"Each screen can configure various aspects about how it gets presented in the navigator that renders it by specifying certain options, for example, the header title in stack navigator, tab bar icon in bottom tab navigator etc. Different navigators support different set of options.","sidebar":"docs"},"screen-options-resolution":{"id":"screen-options-resolution","title":"Screen options with nested navigators","description":"In this document we\'ll explain how screen options work when there are multiple navigators. It\'s important to understand this so that you put your options in the correct place and can properly configure your navigators. If you put them in the wrong place, at best nothing will happen and at worst something confusing and unexpected will happen.","sidebar":"docs"},"screen-tracking":{"id":"screen-tracking","title":"Screen tracking for analytics","description":"To track the currently active screen, we need to:","sidebar":"docs"},"server-container":{"id":"server-container","title":"ServerContainer","description":"The ServerContainer component provides utilities to render your app on server with the correct navigation state.","sidebar":"docs"},"server-rendering":{"id":"server-rendering","title":"Server rendering","description":"This guide will cover how to server render your React Native app using React Native for Web and React Navigation. We\'ll cover the following cases:","sidebar":"docs"},"shared-element-transitions":{"id":"shared-element-transitions","title":"Animating elements between screens","description":"This guide covers how to animate elements between screens. This feature is known as a Shared Element Transition and it\'s implemented in the @react-navigation/native-stack with React Native Reanimated.","sidebar":"docs"},"stack-actions":{"id":"stack-actions","title":"StackActions reference","description":"StackActions is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in CommonActions.","sidebar":"docs"},"stack-navigator":{"id":"stack-navigator","title":"Stack Navigator","description":"Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.","sidebar":"docs"},"state-persistence":{"id":"state-persistence","title":"State persistence","description":"You might want to save the user\'s location in the app, so that they are immediately returned to the same location after the app is restarted.","sidebar":"docs"},"static-configuration":{"id":"static-configuration","title":"Static configuration","description":"The bulk of the static configuration is done using the createXNavigator functions, e.g. createNativeStackNavigator, createBottomTabNavigator, createDrawerNavigator etc. We\'ll refer to these functions as createXNavigator in the rest of this guide.","sidebar":"docs"},"status-bar":{"id":"status-bar","title":"Different status bar configuration based on route","description":"If you don\'t have a navigation header, or your navigation header changes color based on the route, you\'ll want to ensure that the correct color is used for the content.","sidebar":"docs"},"tab-actions":{"id":"tab-actions","title":"TabActions reference","description":"TabActions is an object containing methods for generating actions specific to tab-based navigators. Its methods expand upon the actions available in CommonActions.","sidebar":"docs"},"tab-based-navigation":{"id":"tab-based-navigation","title":"Tab navigation","description":"Possibly the most common style of navigation in mobile apps is tab-based navigation. This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header).","sidebar":"docs"},"tab-view":{"id":"tab-view","title":"React Native Tab View","description":"React Native Tab View is a cross-platform Tab View component for React Native implemented using react-native-pager-view on Android & iOS, and PanResponder on Web, macOS, and Windows.","sidebar":"docs"},"testing":{"id":"testing","title":"Testing with Jest","description":"Testing code using React Navigation may require some setup since we need to mock native dependencies used in the navigators. We recommend using Jest to write unit tests.","sidebar":"docs"},"themes":{"id":"themes","title":"Themes","description":"Themes allow you to change the colors and fonts of various components provided by React Navigation. You can use themes to:","sidebar":"docs"},"troubleshooting":{"id":"troubleshooting","title":"Troubleshooting","description":"This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation. These issues may or may not be related to React Navigation itself.","sidebar":"docs"},"typescript":{"id":"typescript","title":"Type checking with TypeScript","description":"React Navigation can be configured to type-check screens and their params, as well as various other APIs using TypeScript. This provides better intelliSense and type safety when working with React Navigation.","sidebar":"docs"},"upgrading-from-6.x":{"id":"upgrading-from-6.x","title":"Upgrading from 6.x","description":"React Navigation 7 focuses on streamlining the API to avoid patterns that can cause bugs. This means deprecating some of the legacy behavior kept for backward compatibility reasons.","sidebar":"docs"},"use-focus-effect":{"id":"use-focus-effect","title":"useFocusEffect","description":"Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using focus and blur events, it\'s not very ergonomic.","sidebar":"docs"},"use-is-focused":{"id":"use-is-focused","title":"useIsFocused","description":"We might want to render different content based on the current focus state of the screen. The library exports a useIsFocused hook to make this easier:","sidebar":"docs"},"use-link-builder":{"id":"use-link-builder","title":"useLinkBuilder","description":"The useLinkBuilder hook returns helpers to build href or action based on the linking options. It returns an object with the following properties:","sidebar":"docs"},"use-link-props":{"id":"use-link-props","title":"useLinkProps","description":"The useLinkProps hook lets us build our custom link component. The link component can be used as a button to navigate to a screen. On the web, it will be rendered as an anchor tag (`) with the href attribute so that all the accessibility features of a link are preserved, e.g. - such as Right click -> Open link in new tab\\", Ctrl+Click/\u2318+Click` etc.","sidebar":"docs"},"use-link-to":{"id":"use-link-to","title":"useLinkTo","description":"The useLinkTo hook lets us navigate to a screen using a path instead of a screen name based on the linking options. It returns a function that receives the path to navigate to.","sidebar":"docs"},"use-navigation":{"id":"use-navigation","title":"useNavigation","description":"useNavigation is a hook that gives access to navigation object. It\'s useful when you cannot pass the navigation object as a prop to the component directly, or don\'t want to pass it in case of a deeply nested child.","sidebar":"docs"},"use-navigation-state":{"id":"use-navigation-state","title":"useNavigationState","description":"useNavigationState is a hook which gives access to the navigation state of the navigator which contains the screen. It\'s useful in rare cases where you want to render something based on the navigation state.","sidebar":"docs"},"use-prevent-remove":{"id":"use-prevent-remove","title":"usePreventRemove","description":"The usePreventRemove hook allows you to prevent the user from leaving a screen. For example, if there are unsaved changes, you might want to show a confirmation dialog before the user can navigate away.","sidebar":"docs"},"use-route":{"id":"use-route","title":"useRoute","description":"useRoute is a hook which gives access to route object. It\'s useful when you cannot pass down the route object from props to the component, or don\'t want to pass it in case of a deeply nested child.","sidebar":"docs"},"use-scroll-to-top":{"id":"use-scroll-to-top","title":"useScrollToTop","description":"The expected native behavior of scrollable components is to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.","sidebar":"docs"},"use-theme":{"id":"use-theme","title":"useTheme","description":"The useTheme hook lets us access the currently active theme. You can use it in your own components to have them respond to changes in the theme.","sidebar":"docs"},"used-by":{"id":"used-by","title":"Apps using React Navigation","description":"It\'s impossible to list every single app that uses React Navigation, but below are some of the great apps that we have found that make us feel humbled and proud!","sidebar":"docs"},"web-support":{"id":"web-support","title":"React Navigation on Web","description":"React Navigation has built-in support for the Web platform. This allows you to use the same navigation logic in your React Native app as well as on the web. The navigators require using React Native for Web to work on the web.","sidebar":"docs"}}}')}}]); \ No newline at end of file diff --git a/assets/js/adcb3b88.7398d2b1.js b/assets/js/adcb3b88.7398d2b1.js new file mode 100644 index 00000000000..34799e871f2 --- /dev/null +++ b/assets/js/adcb3b88.7398d2b1.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[24200],{84819:e=>{e.exports=JSON.parse('{"pluginId":"default","version":"7.x","label":"7.x","banner":"unreleased","badge":true,"noIndex":false,"className":"docs-version-7.x","isLast":false,"docsSidebars":{"docs":[{"type":"category","label":"Fundamentals","items":[{"type":"link","label":"Getting started","href":"/docs/7.x/getting-started","docId":"getting-started","unlisted":false},{"type":"link","label":"Hello React Navigation","href":"/docs/7.x/hello-react-navigation","docId":"hello-react-navigation","unlisted":false},{"type":"link","label":"Moving between screens","href":"/docs/7.x/navigating","docId":"navigating","unlisted":false},{"type":"link","label":"Passing parameters to routes","href":"/docs/7.x/params","docId":"params","unlisted":false},{"type":"link","label":"Configuring the header bar","href":"/docs/7.x/headers","docId":"headers","unlisted":false},{"type":"link","label":"Header buttons","href":"/docs/7.x/header-buttons","docId":"header-buttons","unlisted":false},{"type":"link","label":"Nesting navigators","href":"/docs/7.x/nesting-navigators","docId":"nesting-navigators","unlisted":false},{"type":"link","label":"Navigation lifecycle","href":"/docs/7.x/navigation-lifecycle","docId":"navigation-lifecycle","unlisted":false},{"type":"link","label":"Next steps","href":"/docs/7.x/next-steps","docId":"next-steps","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Guides","items":[{"type":"link","label":"Authentication flows","href":"/docs/7.x/auth-flow","docId":"auth-flow","unlisted":false},{"type":"link","label":"Supporting safe areas","href":"/docs/7.x/handling-safe-area","docId":"handling-safe-area","unlisted":false},{"type":"link","label":"Customizing tab bar","href":"/docs/7.x/customizing-tabbar","docId":"customizing-tabbar","unlisted":false},{"type":"link","label":"Hiding tab bar in screens","href":"/docs/7.x/hiding-tabbar-in-screens","docId":"hiding-tabbar-in-screens","unlisted":false},{"type":"link","label":"Status bar configuration","href":"/docs/7.x/status-bar","docId":"status-bar","unlisted":false},{"type":"link","label":"Opening a modal","href":"/docs/7.x/modal","docId":"modal","unlisted":false},{"type":"link","label":"Multiple drawers","href":"/docs/7.x/multiple-drawers","docId":"multiple-drawers","unlisted":false},{"type":"link","label":"Options with nested navigators","href":"/docs/7.x/screen-options-resolution","docId":"screen-options-resolution","unlisted":false},{"type":"link","label":"Android back button behavior","href":"/docs/7.x/custom-android-back-button-handling","docId":"custom-android-back-button-handling","unlisted":false},{"type":"link","label":"Shared element transitions","href":"/docs/7.x/shared-element-transitions","docId":"shared-element-transitions","unlisted":false},{"type":"link","label":"Preventing going back","href":"/docs/7.x/preventing-going-back","docId":"preventing-going-back","unlisted":false},{"type":"link","label":"Call a function on focus","href":"/docs/7.x/function-after-focusing-screen","docId":"function-after-focusing-screen","unlisted":false},{"type":"link","label":"Navigation Ref","href":"/docs/7.x/navigating-without-navigation-prop","docId":"navigating-without-navigation-prop","unlisted":false},{"type":"link","label":"Deep linking","href":"/docs/7.x/deep-linking","docId":"deep-linking","unlisted":false},{"type":"link","label":"Configuring links","href":"/docs/7.x/configuring-links","docId":"configuring-links","unlisted":false},{"type":"link","label":"Web support","href":"/docs/7.x/web-support","docId":"web-support","unlisted":false},{"type":"link","label":"Server rendering","href":"/docs/7.x/server-rendering","docId":"server-rendering","unlisted":false},{"type":"link","label":"Screen tracking","href":"/docs/7.x/screen-tracking","docId":"screen-tracking","unlisted":false},{"type":"link","label":"Themes","href":"/docs/7.x/themes","docId":"themes","unlisted":false},{"type":"link","label":"State persistence","href":"/docs/7.x/state-persistence","docId":"state-persistence","unlisted":false},{"type":"link","label":"Static and dynamic APIs","href":"/docs/7.x/combine-static-with-dynamic","docId":"combine-static-with-dynamic","unlisted":false},{"type":"link","label":"Testing with Jest","href":"/docs/7.x/testing","docId":"testing","unlisted":false},{"type":"link","label":"Configuring TypeScript","href":"/docs/7.x/typescript","docId":"typescript","unlisted":false},{"type":"link","label":"Troubleshooting","href":"/docs/7.x/troubleshooting","docId":"troubleshooting","unlisted":false},{"type":"link","label":"Upgrading from 6.x","href":"/docs/7.x/upgrading-from-6.x","docId":"upgrading-from-6.x","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Navigators","items":[{"type":"link","label":"Stack","href":"/docs/7.x/stack-navigator","docId":"stack-navigator","unlisted":false},{"type":"link","label":"Native Stack","href":"/docs/7.x/native-stack-navigator","docId":"native-stack-navigator","unlisted":false},{"type":"link","label":"Bottom Tabs","href":"/docs/7.x/bottom-tab-navigator","docId":"bottom-tab-navigator","unlisted":false},{"type":"link","label":"Drawer","href":"/docs/7.x/drawer-navigator","docId":"drawer-navigator","unlisted":false},{"type":"link","label":"Material Top Tabs","href":"/docs/7.x/material-top-tab-navigator","docId":"material-top-tab-navigator","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Libraries","items":[{"type":"link","label":"Developer tools","href":"/docs/7.x/devtools","docId":"devtools","unlisted":false},{"type":"link","label":"Elements","href":"/docs/7.x/elements","docId":"elements","unlisted":false},{"type":"link","label":"Tab View","href":"/docs/7.x/tab-view","docId":"tab-view","unlisted":false},{"type":"link","label":"Drawer Layout","href":"/docs/7.x/drawer-layout","docId":"drawer-layout","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"API reference","items":[{"type":"link","label":"Static configuration","href":"/docs/7.x/static-configuration","docId":"static-configuration","unlisted":false},{"type":"link","label":"NavigationContainer","href":"/docs/7.x/navigation-container","docId":"navigation-container","unlisted":false},{"type":"link","label":"ServerContainer","href":"/docs/7.x/server-container","docId":"server-container","unlisted":false},{"type":"link","label":"Navigator","href":"/docs/7.x/navigator","docId":"navigator","unlisted":false},{"type":"link","label":"Group","href":"/docs/7.x/group","docId":"group","unlisted":false},{"type":"link","label":"Screen","href":"/docs/7.x/screen","docId":"screen","unlisted":false},{"type":"link","label":"Options for screens","href":"/docs/7.x/screen-options","docId":"screen-options","unlisted":false},{"type":"link","label":"Route object","href":"/docs/7.x/route-object","docId":"route-object","unlisted":false},{"type":"link","label":"Navigation object","href":"/docs/7.x/navigation-object","docId":"navigation-object","unlisted":false},{"type":"link","label":"NavigationContext","href":"/docs/7.x/navigation-context","docId":"navigation-context","unlisted":false},{"type":"link","label":"Navigation events","href":"/docs/7.x/navigation-events","docId":"navigation-events","unlisted":false},{"type":"link","label":"Navigation state","href":"/docs/7.x/navigation-state","docId":"navigation-state","unlisted":false},{"type":"link","label":"Link","href":"/docs/7.x/link","docId":"link","unlisted":false},{"type":"category","collapsible":true,"label":"Hooks","items":[{"type":"link","label":"useNavigation","href":"/docs/7.x/use-navigation","docId":"use-navigation","unlisted":false},{"type":"link","label":"useRoute","href":"/docs/7.x/use-route","docId":"use-route","unlisted":false},{"type":"link","label":"useNavigationState","href":"/docs/7.x/use-navigation-state","docId":"use-navigation-state","unlisted":false},{"type":"link","label":"useFocusEffect","href":"/docs/7.x/use-focus-effect","docId":"use-focus-effect","unlisted":false},{"type":"link","label":"useIsFocused","href":"/docs/7.x/use-is-focused","docId":"use-is-focused","unlisted":false},{"type":"link","label":"usePreventRemove","href":"/docs/7.x/use-prevent-remove","docId":"use-prevent-remove","unlisted":false},{"type":"link","label":"useLinkTo","href":"/docs/7.x/use-link-to","docId":"use-link-to","unlisted":false},{"type":"link","label":"useLinkProps","href":"/docs/7.x/use-link-props","docId":"use-link-props","unlisted":false},{"type":"link","label":"useLinkBuilder","href":"/docs/7.x/use-link-builder","docId":"use-link-builder","unlisted":false},{"type":"link","label":"useScrollToTop","href":"/docs/7.x/use-scroll-to-top","docId":"use-scroll-to-top","unlisted":false},{"type":"link","label":"useTheme","href":"/docs/7.x/use-theme","docId":"use-theme","unlisted":false}],"collapsed":false},{"type":"category","collapsible":true,"label":"Actions","items":[{"type":"link","label":"CommonActions","href":"/docs/7.x/navigation-actions","docId":"navigation-actions","unlisted":false},{"type":"link","label":"StackActions","href":"/docs/7.x/stack-actions","docId":"stack-actions","unlisted":false},{"type":"link","label":"DrawerActions","href":"/docs/7.x/drawer-actions","docId":"drawer-actions","unlisted":false},{"type":"link","label":"TabActions","href":"/docs/7.x/tab-actions","docId":"tab-actions","unlisted":false}],"collapsed":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Build your own Navigator","items":[{"type":"link","label":"Custom routers","href":"/docs/7.x/custom-routers","docId":"custom-routers","unlisted":false},{"type":"link","label":"Custom navigators","href":"/docs/7.x/custom-navigators","docId":"custom-navigators","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Additional resources","items":[{"type":"link","label":"Migration Guides","href":"/docs/7.x/migration-guides","docId":"migration-guides","unlisted":false},{"type":"link","label":"Community Libraries","href":"/docs/7.x/navigation-solutions-and-community-libraries","docId":"navigation-solutions-and-community-libraries","unlisted":false},{"type":"link","label":"More Resources","href":"/docs/7.x/more-resources","docId":"more-resources","unlisted":false}],"collapsed":false,"collapsible":true},{"type":"category","label":"Meta","items":[{"type":"link","label":"Glossary of terms","href":"/docs/7.x/glossary-of-terms","docId":"glossary-of-terms","unlisted":false},{"type":"link","label":"Pitch & anti-pitch","href":"/docs/7.x/pitch","docId":"pitch","unlisted":false},{"type":"link","label":"Limitations","href":"/docs/7.x/limitations","docId":"limitations","unlisted":false},{"type":"link","label":"Apps using React Navigation","href":"/docs/7.x/used-by","docId":"used-by","unlisted":false},{"type":"link","label":"Contributing","href":"/docs/7.x/contributing","docId":"contributing","unlisted":false}],"collapsed":false,"collapsible":true}]},"docs":{"auth-flow":{"id":"auth-flow","title":"Authentication flows","description":"Most apps require that a user authenticates in some way to have access to data associated with a user or other private content. Typically the flow will look like this:","sidebar":"docs"},"bottom-tab-navigator":{"id":"bottom-tab-navigator","title":"Bottom Tabs Navigator","description":"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.","sidebar":"docs"},"combine-static-with-dynamic":{"id":"combine-static-with-dynamic","title":"Combining static and dynamic APIs","description":"While the static API has many advantages, it doesn\'t fit use cases where the navigation configuration needs to be dynamic. So React Navigation supports interop between the static and dynamic APIs.","sidebar":"docs"},"configuring-links":{"id":"configuring-links","title":"Configuring links","description":"In this guide, we will configure React Navigation to handle external links. This is necessary if you want to:","sidebar":"docs"},"contributing":{"id":"contributing","title":"React Navigation contributor guide","description":"Want to help improve React Navigation? Your help would be greatly appreciated!","sidebar":"docs"},"custom-android-back-button-handling":{"id":"custom-android-back-button-handling","title":"Custom Android back button behavior","description":"By default, when user presses the Android hardware back button, react-navigation will pop a screen or exit the app if there are no screens to pop. This is a sensible default behavior, but there are situations when you might want to implement custom handling.","sidebar":"docs"},"custom-navigators":{"id":"custom-navigators","title":"Custom navigators","description":"Navigators allow you to define your application\'s navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.","sidebar":"docs"},"custom-routers":{"id":"custom-routers","title":"Custom routers","description":"The router object provides various helper methods to deal with the state and actions, a reducer to update the state as well as some action creators.","sidebar":"docs"},"customizing-tabbar":{"id":"customizing-tabbar","title":"Customizing bottom tab bar","description":"This guide covers customizing the tab bar in createBottomTabNavigator. Make sure to install and configure the library according to the installation instructions first.","sidebar":"docs"},"deep-linking":{"id":"deep-linking","title":"Deep linking","description":"This guide will describe how to configure your app to handle deep links on various platforms. To handle incoming links, you need to handle 2 scenarios:","sidebar":"docs"},"devtools":{"id":"devtools","title":"Developer tools","description":"Developer tools to make debugging easier when using React Navigation.","sidebar":"docs"},"drawer-actions":{"id":"drawer-actions","title":"DrawerActions reference","description":"DrawerActions is an object containing methods for generating actions specific to drawer-based navigators. Its methods expand upon the actions available in CommonActions.","sidebar":"docs"},"drawer-based-navigation":{"id":"drawer-based-navigation","title":"Drawer navigation","description":"Common pattern in navigation is to use drawer from left (sometimes right) side for navigating between screens."},"drawer-layout":{"id":"drawer-layout","title":"React Native Drawer Layout","description":"A cross-platform Drawer component for React Native implemented using react-native-gesture-handler and react-native-reanimated on native platforms and CSS transitions on Web.","sidebar":"docs"},"drawer-navigator":{"id":"drawer-navigator","title":"Drawer Navigator","description":"Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.","sidebar":"docs"},"elements":{"id":"elements","title":"Elements Library","description":"A component library containing the UI elements and helpers used in React Navigation. It can be useful if you\'re building your own navigator, or want to reuse a default functionality in your app.","sidebar":"docs"},"function-after-focusing-screen":{"id":"function-after-focusing-screen","title":"Call a function when focused screen changes","description":"In this guide we will call a function or render something on screen focusing. This is useful for making additional API calls when a user revisits a particular screen in a Tab Navigator, or to track user events as they tap around our app.","sidebar":"docs"},"getting-started":{"id":"getting-started","title":"Getting started","description":"What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to know how to build your typical small mobile application, and give you the background that you need to dive deeper into the more advanced parts of React Navigation.","sidebar":"docs"},"glossary-of-terms":{"id":"glossary-of-terms","title":"Glossary of terms","description":"This is a new section of the documentation and it\'s missing a lot of terms! Please submit a pull request or an issue with a term that you think should be explained here.","sidebar":"docs"},"group":{"id":"group","title":"Group","description":"A group contains several screens inside a navigator for organizational purposes. They can also be used to apply the same options such as header styles to a group of screens, or to define a common layout etc.","sidebar":"docs"},"handling-safe-area":{"id":"handling-safe-area","title":"Supporting safe areas","description":"By default, React Navigation tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:","sidebar":"docs"},"header-buttons":{"id":"header-buttons","title":"Header buttons","description":"Now that we know how to customize the look of our headers, let\'s make them sentient! Actually perhaps that\'s ambitious, let\'s just make them able to respond to our touches in very well-defined ways.","sidebar":"docs"},"headers":{"id":"headers","title":"Configuring the header bar","description":"We\'ve seen how to configure the header title already, but let\'s go over that again before moving on to some other options — repetition is key to learning!","sidebar":"docs"},"hello-react-navigation":{"id":"hello-react-navigation","title":"Hello React Navigation","description":"In a web browser, you can link to different pages using an anchor (``) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When the user presses the back button, the browser pops the item from the top of the history stack, so the active page is now the previously visited page. React Native doesn\'t have a built-in idea of a global history stack like a web browser does -- this is where React Navigation enters the story.","sidebar":"docs"},"hiding-tabbar-in-screens":{"id":"hiding-tabbar-in-screens","title":"Hiding tab bar in specific screens","description":"Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let\'s say we have 5 screens","sidebar":"docs"},"limitations":{"id":"limitations","title":"Limitations","description":"As a potential user of the library, it\'s important to know what you can and cannot do with it. Armed with this knowledge, you may choose to adopt a different library such as react-native-navigation instead. We discuss the high level design decisions in the pitch & anti-pitch section, and here we will cover some of the use cases that are either not supported or are so difficult to do that they may as well be impossible. If any of the following limitations are dealbreakers for your app, React Navigation might not be for you.","sidebar":"docs"},"link":{"id":"link","title":"Link","description":"The Link component renders a component that can navigate to a screen on press. This renders a ` tag when used on the Web and uses a Text component on other platforms. It preserves the default behavior of anchor tags in the browser such as Right click -> Open link in new tab\\", Ctrl+Click/\u2318+Click` etc. to provide a native experience.","sidebar":"docs"},"material-top-tab-navigator":{"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.","sidebar":"docs"},"migration-guides":{"id":"migration-guides","title":"Migration Guides","description":"This page contains links to pages that will guide you through the process of upgrading React Navigation:","sidebar":"docs"},"modal":{"id":"modal","title":"Opening a modal","description":"Modal shown on screen","sidebar":"docs"},"more-resources":{"id":"more-resources","title":"More Resources","description":"Talks","sidebar":"docs"},"multiple-drawers":{"id":"multiple-drawers","title":"Multiple drawers","description":"Sometimes we want to have multiple drawers on the same screen","sidebar":"docs"},"native-stack-navigator":{"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.","sidebar":"docs"},"navigating":{"id":"navigating","title":"Moving between screens","description":"In the previous section, we defined a stack navigator with two routes (Home and Details), but we didn\'t learn how to let a user navigate from Home to Details (although we did learn how to change the initial route in our code, but forcing our users to clone our repository and change the route in our code in order to see another screen is arguably among the worst user experiences one could imagine).","sidebar":"docs"},"navigating-without-navigation-prop":{"id":"navigating-without-navigation-prop","title":"Navigating without the navigation prop","description":"Sometimes you need to trigger a navigation action from places where you do not have access to the navigation object, such as a Redux middleware. For such cases, you can dispatch navigation actions use a ref on the navigation container.","sidebar":"docs"},"navigation-actions":{"id":"navigation-actions","title":"CommonActions reference","description":"A navigation action is an object containing at least a type property. Internally, the action can be handled by routers with the getStateForAction method to return a new state from an existing navigation state.","sidebar":"docs"},"navigation-container":{"id":"navigation-container","title":"NavigationContainer","description":"The NavigationContainer is responsible for managing your app\'s navigation state and linking your top-level navigator to the app environment.","sidebar":"docs"},"navigation-context":{"id":"navigation-context","title":"NavigationContext","description":"NavigationContext provides the navigation object (same object as the navigation prop). In fact, useNavigation uses this context to get the navigation prop.","sidebar":"docs"},"navigation-events":{"id":"navigation-events","title":"Navigation events","description":"You can listen to various events emitted by React Navigation to get notified of certain events, and in some cases, override the default action. There are few core events such as focus, blur etc. (documented below) that work for every navigator, as well as navigator specific events that work only for certain navigators.","sidebar":"docs"},"navigation-lifecycle":{"id":"navigation-lifecycle","title":"Navigation lifecycle","description":"In a previous section, we worked with a stack navigator that has two screens (Home and Profile) and learned how to use navigation.navigate(\'RouteName\') to navigate between the screens.","sidebar":"docs"},"navigation-object":{"id":"navigation-object","title":"Navigation object reference","description":"The navigation object contains various convenience functions that dispatch navigation actions. It looks like this:","sidebar":"docs"},"navigation-solutions-and-community-libraries":{"id":"navigation-solutions-and-community-libraries","title":"Navigation Solutions and Community Libraries","description":"Libraries listed in this guide may not have been updated to work with the latest version of React Navigation. Please refer to the library\'s documentation to see which version of React Navigation it supports.","sidebar":"docs"},"navigation-state":{"id":"navigation-state","title":"Navigation state reference","description":"The navigation state is the state where React Navigation stores the navigation structure and history of the app. It\'s useful to know about the structure of the navigation state if you need to do advanced operations such as resetting the state, providing a custom initial state etc.","sidebar":"docs"},"navigator":{"id":"navigator","title":"Navigator","description":"A navigator is responsible for managing and rendering a set of screens. It can be created using the createXNavigator functions, e.g. createStackNavigator, createNativeStackNavigator, createBottomTabNavigator, createMaterialTopTabNavigator, createDrawerNavigator etc.:","sidebar":"docs"},"nesting-navigators":{"id":"nesting-navigators","title":"Nesting navigators","description":"Nesting navigators means rendering a navigator inside a screen of another navigator, for example:","sidebar":"docs"},"next-steps":{"id":"next-steps","title":"Next steps","description":"You are now familiar with how to create a stack navigator, configure it on your screen components, navigate between routes, and display modals. Stack navigators and their related APIs will be the most frequently used tools in your React Navigation toolbelt, but there are problems that they don\'t solve. For example, you can\'t build tab-based navigation using a stack navigator — for that, you need to use a Bottom Tabs Navigator.","sidebar":"docs"},"params":{"id":"params","title":"Passing parameters to routes","description":"Remember when I said \\"more on that later when we talk about params!\\"? Well, the time has come.","sidebar":"docs"},"pitch":{"id":"pitch","title":"Pitch & anti-pitch","description":"It\'s useful when considering whether or not to use a project to understand the tradeoffs that the developers of the project made when building it. What problems does it explicitly try to solve for you, and which ones does it ignore? What are the current limitations of the project and common problems that people encounter? These are the kinds of questions that we believe you should have answers to when making an important technology decision for your project, and so we have documented answers to these questions as best we can here, in the form of a \\"pitch\\" (why you should use it) and \\"anti-pitch\\" (why you should not use it). Please submit a pull request if you believe we have omitted important information!","sidebar":"docs"},"preventing-going-back":{"id":"preventing-going-back","title":"Preventing going back","description":"Sometimes you may want to prevent the user from leaving a screen to avoid losing unsaved changes. There are a couple of things you may want to do in this case:","sidebar":"docs"},"route-object":{"id":"route-object","title":"Route object reference","description":"Each screen component in your app is provided with the route object as a prop automatically. The prop contains various information regarding current route (place in navigation hierarchy component lives).","sidebar":"docs"},"screen":{"id":"screen","title":"Screen","description":"A screen represents routes in a navigator. A screen\'s configuration contains the component for the route, options, event listeners, etc.","sidebar":"docs"},"screen-options":{"id":"screen-options","title":"Options for screens","description":"Each screen can configure various aspects about how it gets presented in the navigator that renders it by specifying certain options, for example, the header title in stack navigator, tab bar icon in bottom tab navigator etc. Different navigators support different set of options.","sidebar":"docs"},"screen-options-resolution":{"id":"screen-options-resolution","title":"Screen options with nested navigators","description":"In this document we\'ll explain how screen options work when there are multiple navigators. It\'s important to understand this so that you put your options in the correct place and can properly configure your navigators. If you put them in the wrong place, at best nothing will happen and at worst something confusing and unexpected will happen.","sidebar":"docs"},"screen-tracking":{"id":"screen-tracking","title":"Screen tracking for analytics","description":"To track the currently active screen, we need to:","sidebar":"docs"},"server-container":{"id":"server-container","title":"ServerContainer","description":"The ServerContainer component provides utilities to render your app on server with the correct navigation state.","sidebar":"docs"},"server-rendering":{"id":"server-rendering","title":"Server rendering","description":"This guide will cover how to server render your React Native app using React Native for Web and React Navigation. We\'ll cover the following cases:","sidebar":"docs"},"shared-element-transitions":{"id":"shared-element-transitions","title":"Animating elements between screens","description":"This guide covers how to animate elements between screens. This feature is known as a Shared Element Transition and it\'s implemented in the @react-navigation/native-stack with React Native Reanimated.","sidebar":"docs"},"stack-actions":{"id":"stack-actions","title":"StackActions reference","description":"StackActions is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in CommonActions.","sidebar":"docs"},"stack-navigator":{"id":"stack-navigator","title":"Stack Navigator","description":"Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack.","sidebar":"docs"},"state-persistence":{"id":"state-persistence","title":"State persistence","description":"You might want to save the user\'s location in the app, so that they are immediately returned to the same location after the app is restarted.","sidebar":"docs"},"static-configuration":{"id":"static-configuration","title":"Static configuration","description":"The bulk of the static configuration is done using the createXNavigator functions, e.g. createNativeStackNavigator, createBottomTabNavigator, createDrawerNavigator etc. We\'ll refer to these functions as createXNavigator in the rest of this guide.","sidebar":"docs"},"status-bar":{"id":"status-bar","title":"Different status bar configuration based on route","description":"If you don\'t have a navigation header, or your navigation header changes color based on the route, you\'ll want to ensure that the correct color is used for the content.","sidebar":"docs"},"tab-actions":{"id":"tab-actions","title":"TabActions reference","description":"TabActions is an object containing methods for generating actions specific to tab-based navigators. Its methods expand upon the actions available in CommonActions.","sidebar":"docs"},"tab-view":{"id":"tab-view","title":"React Native Tab View","description":"React Native Tab View is a cross-platform Tab View component for React Native implemented using react-native-pager-view on Android & iOS, and PanResponder on Web, macOS, and Windows.","sidebar":"docs"},"testing":{"id":"testing","title":"Testing with Jest","description":"Testing code using React Navigation may require some setup since we need to mock native dependencies used in the navigators. We recommend using Jest to write unit tests.","sidebar":"docs"},"themes":{"id":"themes","title":"Themes","description":"Themes allow you to change the colors and fonts of various components provided by React Navigation. You can use themes to:","sidebar":"docs"},"troubleshooting":{"id":"troubleshooting","title":"Troubleshooting","description":"This section attempts to outline issues that users frequently encounter when first getting accustomed to using React Navigation. These issues may or may not be related to React Navigation itself.","sidebar":"docs"},"typescript":{"id":"typescript","title":"Type checking with TypeScript","description":"React Navigation can be configured to type-check screens and their params, as well as various other APIs using TypeScript. This provides better intelliSense and type safety when working with React Navigation.","sidebar":"docs"},"upgrading-from-6.x":{"id":"upgrading-from-6.x","title":"Upgrading from 6.x","description":"React Navigation 7 focuses on streamlining the API to avoid patterns that can cause bugs. This means deprecating some of the legacy behavior kept for backward compatibility reasons.","sidebar":"docs"},"use-focus-effect":{"id":"use-focus-effect","title":"useFocusEffect","description":"Sometimes we want to run side-effects when a screen is focused. A side effect may involve things like adding an event listener, fetching data, updating document title, etc. While this can be achieved using focus and blur events, it\'s not very ergonomic.","sidebar":"docs"},"use-is-focused":{"id":"use-is-focused","title":"useIsFocused","description":"We might want to render different content based on the current focus state of the screen. The library exports a useIsFocused hook to make this easier:","sidebar":"docs"},"use-link-builder":{"id":"use-link-builder","title":"useLinkBuilder","description":"The useLinkBuilder hook returns helpers to build href or action based on the linking options. It returns an object with the following properties:","sidebar":"docs"},"use-link-props":{"id":"use-link-props","title":"useLinkProps","description":"The useLinkProps hook lets us build our custom link component. The link component can be used as a button to navigate to a screen. On the web, it will be rendered as an anchor tag (`) with the href attribute so that all the accessibility features of a link are preserved, e.g. - such as Right click -> Open link in new tab\\", Ctrl+Click/\u2318+Click` etc.","sidebar":"docs"},"use-link-to":{"id":"use-link-to","title":"useLinkTo","description":"The useLinkTo hook lets us navigate to a screen using a path instead of a screen name based on the linking options. It returns a function that receives the path to navigate to.","sidebar":"docs"},"use-navigation":{"id":"use-navigation","title":"useNavigation","description":"useNavigation is a hook that gives access to navigation object. It\'s useful when you cannot pass the navigation object as a prop to the component directly, or don\'t want to pass it in case of a deeply nested child.","sidebar":"docs"},"use-navigation-state":{"id":"use-navigation-state","title":"useNavigationState","description":"useNavigationState is a hook which gives access to the navigation state of the navigator which contains the screen. It\'s useful in rare cases where you want to render something based on the navigation state.","sidebar":"docs"},"use-prevent-remove":{"id":"use-prevent-remove","title":"usePreventRemove","description":"The usePreventRemove hook allows you to prevent the user from leaving a screen. For example, if there are unsaved changes, you might want to show a confirmation dialog before the user can navigate away.","sidebar":"docs"},"use-route":{"id":"use-route","title":"useRoute","description":"useRoute is a hook which gives access to route object. It\'s useful when you cannot pass down the route object from props to the component, or don\'t want to pass it in case of a deeply nested child.","sidebar":"docs"},"use-scroll-to-top":{"id":"use-scroll-to-top","title":"useScrollToTop","description":"The expected native behavior of scrollable components is to respond to events from navigation that will scroll to top when tapping on the active tab as you would expect from native tab bars.","sidebar":"docs"},"use-theme":{"id":"use-theme","title":"useTheme","description":"The useTheme hook lets us access the currently active theme. You can use it in your own components to have them respond to changes in the theme.","sidebar":"docs"},"used-by":{"id":"used-by","title":"Apps using React Navigation","description":"It\'s impossible to list every single app that uses React Navigation, but below are some of the great apps that we have found that make us feel humbled and proud!","sidebar":"docs"},"web-support":{"id":"web-support","title":"React Navigation on Web","description":"React Navigation has built-in support for the Web platform. This allows you to use the same navigation logic in your React Native app as well as on the web. The navigators require using React Native for Web to work on the web.","sidebar":"docs"}}}')}}]); \ No newline at end of file diff --git a/assets/js/b89f9e6f.0a540f64.js b/assets/js/b89f9e6f.0a540f64.js new file mode 100644 index 00000000000..10255255117 --- /dev/null +++ b/assets/js/b89f9e6f.0a540f64.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[20259],{8242:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>b,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var a=t(85893),r=t(11151),i=t(74866),o=t(85162);const s={id:"hiding-tabbar-in-screens",title:"Hiding tab bar in specific screens",sidebar_label:"Hiding tab bar in screens"},c=void 0,l={id:"hiding-tabbar-in-screens",title:"Hiding tab bar in specific screens",description:"Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens",source:"@site/versioned_docs/version-7.x/hiding-tabbar-in-screens.md",sourceDirName:".",slug:"/hiding-tabbar-in-screens",permalink:"/docs/7.x/hiding-tabbar-in-screens",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/hiding-tabbar-in-screens.md",tags:[],version:"7.x",frontMatter:{id:"hiding-tabbar-in-screens",title:"Hiding tab bar in specific screens",sidebar_label:"Hiding tab bar in screens"},sidebar:"docs",previous:{title:"Customizing tab bar",permalink:"/docs/7.x/customizing-tabbar"},next:{title:"Status bar configuration",permalink:"/docs/7.x/status-bar"}},u={},d=[];function m(e){const n={code:"code",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens: ",(0,a.jsx)(n.code,{children:"Home"}),", ",(0,a.jsx)(n.code,{children:"Feed"}),", ",(0,a.jsx)(n.code,{children:"Notifications"}),", ",(0,a.jsx)(n.code,{children:"Profile"})," and ",(0,a.jsx)(n.code,{children:"Settings"}),", and your navigation structure looks like this:"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hiding tab bar in screens"',children:"const HomeStack = createNativeStackNavigator({\n screens: {\n Home: Home,\n Profile: Profile,\n Settings: Settings,\n },\n});\n\nconst MyTabs = createBottomTabNavigator({\n screens: {\n Home: HomeStack,\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(MyTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'function HomeStack() {\n return (\n \n \n \n \n \n );\n}\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n );\n}\n'})})})]}),"\n",(0,a.jsxs)(n.p,{children:["With this structure, when we navigate to the ",(0,a.jsx)(n.code,{children:"Profile"})," or ",(0,a.jsx)(n.code,{children:"Settings"})," screen, the tab bar will still stay visible over those screens."]}),"\n",(0,a.jsxs)(n.p,{children:["But if we want to show the tab bar only on the ",(0,a.jsx)(n.code,{children:"Home"}),", ",(0,a.jsx)(n.code,{children:"Feed"})," and ",(0,a.jsx)(n.code,{children:"Notifications"})," screens, but not on the ",(0,a.jsx)(n.code,{children:"Profile"})," and ",(0,a.jsx)(n.code,{children:"Settings"})," screens, we'll need to change the navigation structure. The easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator:"]}),"\n",(0,a.jsxs)(i.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":"Hiding tabbar","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hiding tabbar" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { Button } from '@react-navigation/elements';\n\nfunction EmptyScreen() {\n return ;\n}\n\nfunction Home() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n \n );\n}\n\n// codeblock-focus-start\nconst HomeTabs = createBottomTabNavigator({\n screens: {\n Home: Home,\n Feed: EmptyScreen,\n Notifications: EmptyScreen,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n screens: {\n Home: HomeTabs,\n Profile: EmptyScreen,\n Settings: EmptyScreen,\n },\n});\n\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Hiding tabbar","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hiding tabbar" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { Button } from '@react-navigation/elements';\n\nconst Tab = createBottomTabNavigator();\nconst Stack = createNativeStackNavigator();\n\nfunction EmptyScreen() {\n return ;\n}\n\nfunction Home() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n \n );\n}\n\n// codeblock-focus-start\nfunction HomeTabs() {\n return (\n \n \n \n \n \n );\n}\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default App;\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["After re-organizing the navigation structure, now if we navigate to the ",(0,a.jsx)(n.code,{children:"Profile"})," or ",(0,a.jsx)(n.code,{children:"Settings"})," screens, the tab bar won't be visible over the screen anymore."]})]})}function b(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>o});t(67294);var a=t(86010);const r={tabItem:"tabItem_Ymn6"};var i=t(85893);function o(e){let{children:n,hidden:t,className:o}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,o),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>k});var a=t(67294),r=t(86010),i=t(12466),o=t(16550),s=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function m(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:r}}=e;return{value:n,label:t,attributes:a,default:r}}))}(t);return function(e){const n=(0,l.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,t])}function b(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function g(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.k6)(),i=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(i),(0,a.useCallback)((e=>{if(!i)return;const n=new URLSearchParams(r.location.search);n.set(i,e),r.replace({...r.location,search:n.toString()})}),[i,r])]}function v(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,i=m(e),[o,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const r=null!=(n=a.find((e=>e.default)))?n:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:i}))),[l,d]=g({queryString:t,groupId:r}),[v,f]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[r,i]=(0,u.Nk)(t);return[r,(0,a.useCallback)((e=>{t&&i.set(e)}),[t,i])]}({groupId:r}),p=(()=>{const e=null!=l?l:v;return b({value:e,tabValues:i})?e:null})();(0,s.Z)((()=>{p&&c(p)}),[p]);return{selectedValue:o,selectValue:(0,a.useCallback)((e=>{if(!b({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);c(e),d(e),f(e)}),[d,f,i]),tabValues:i}}var f=t(72389);const p={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var h=t(85893);function S(e){let{className:n,block:t,selectedValue:a,selectValue:o,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),u=e=>{const n=e.currentTarget,t=c.indexOf(n),r=s[t].value;r!==a&&(l(n),o(r))},d=e=>{var n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var r;const n=c.indexOf(e.currentTarget)-1;t=null!=(r=c[n])?r:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,h.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:i}=e;return(0,h.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:d,onClick:u,...i,className:(0,r.Z)("tabs__item",p.tabItem,null==i?void 0:i.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function x(e){let{lazy:n,children:t,selectedValue:r}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,h.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function N(e){const n=v(e);return(0,h.jsxs)("div",{className:(0,r.Z)("tabs-container",p.tabList),children:[(0,h.jsx)(S,{...e,...n}),(0,h.jsx)(x,{...e,...n})]})}function k(e){const n=(0,f.Z)();return(0,h.jsx)(N,{...e,children:d(e.children)},String(n))}},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>o});var a=t(67294);const r={},i=a.createContext(r);function o(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/b89f9e6f.b2f1ce30.js b/assets/js/b89f9e6f.b2f1ce30.js deleted file mode 100644 index 21867672f46..00000000000 --- a/assets/js/b89f9e6f.b2f1ce30.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[20259],{8242:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>b,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var a=t(85893),r=t(11151),i=t(74866),o=t(85162);const s={id:"hiding-tabbar-in-screens",title:"Hiding tab bar in specific screens",sidebar_label:"Hiding tab bar in screens"},c=void 0,l={id:"hiding-tabbar-in-screens",title:"Hiding tab bar in specific screens",description:"Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens",source:"@site/versioned_docs/version-7.x/hiding-tabbar-in-screens.md",sourceDirName:".",slug:"/hiding-tabbar-in-screens",permalink:"/docs/7.x/hiding-tabbar-in-screens",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/hiding-tabbar-in-screens.md",tags:[],version:"7.x",frontMatter:{id:"hiding-tabbar-in-screens",title:"Hiding tab bar in specific screens",sidebar_label:"Hiding tab bar in screens"},sidebar:"docs",previous:{title:"Supporting safe areas",permalink:"/docs/7.x/handling-safe-area"},next:{title:"Status bar configuration",permalink:"/docs/7.x/status-bar"}},u={},d=[];function m(e){const n={code:"code",p:"p",pre:"pre",...(0,r.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(n.p,{children:["Sometimes we may want to hide the tab bar in specific screens in a stack navigator nested in a tab navigator. Let's say we have 5 screens: ",(0,a.jsx)(n.code,{children:"Home"}),", ",(0,a.jsx)(n.code,{children:"Feed"}),", ",(0,a.jsx)(n.code,{children:"Notifications"}),", ",(0,a.jsx)(n.code,{children:"Profile"})," and ",(0,a.jsx)(n.code,{children:"Settings"}),", and your navigation structure looks like this:"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hiding tab bar in screens"',children:"const HomeStack = createNativeStackNavigator({\n screens: {\n Home: Home,\n Profile: Profile,\n Settings: Settings,\n },\n});\n\nconst MyTabs = createBottomTabNavigator({\n screens: {\n Home: HomeStack,\n Feed: Feed,\n Notifications: Notifications,\n },\n});\n\nconst Navigation = createStaticNavigation(MyTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:'function HomeStack() {\n return (\n \n \n \n \n \n );\n}\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n );\n}\n'})})})]}),"\n",(0,a.jsxs)(n.p,{children:["With this structure, when we navigate to the ",(0,a.jsx)(n.code,{children:"Profile"})," or ",(0,a.jsx)(n.code,{children:"Settings"})," screen, the tab bar will still stay visible over those screens."]}),"\n",(0,a.jsxs)(n.p,{children:["But if we want to show the tab bar only on the ",(0,a.jsx)(n.code,{children:"Home"}),", ",(0,a.jsx)(n.code,{children:"Feed"})," and ",(0,a.jsx)(n.code,{children:"Notifications"})," screens, but not on the ",(0,a.jsx)(n.code,{children:"Profile"})," and ",(0,a.jsx)(n.code,{children:"Settings"})," screens, we'll need to change the navigation structure. The easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator:"]}),"\n",(0,a.jsxs)(i.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":"Hiding tabbar","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hiding tabbar" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { Button } from '@react-navigation/elements';\n\nfunction EmptyScreen() {\n return ;\n}\n\nfunction Home() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n \n );\n}\n\n// codeblock-focus-start\nconst HomeTabs = createBottomTabNavigator({\n screens: {\n Home: Home,\n Feed: EmptyScreen,\n Notifications: EmptyScreen,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n screens: {\n Home: HomeTabs,\n Profile: EmptyScreen,\n Settings: EmptyScreen,\n },\n});\n\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Hiding tabbar","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hiding tabbar" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { Button } from '@react-navigation/elements';\n\nconst Tab = createBottomTabNavigator();\nconst Stack = createNativeStackNavigator();\n\nfunction EmptyScreen() {\n return ;\n}\n\nfunction Home() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n \n );\n}\n\n// codeblock-focus-start\nfunction HomeTabs() {\n return (\n \n \n \n \n \n );\n}\n\nfunction App() {\n return (\n \n \n \n \n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default App;\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["After re-organizing the navigation structure, now if we navigate to the ",(0,a.jsx)(n.code,{children:"Profile"})," or ",(0,a.jsx)(n.code,{children:"Settings"})," screens, the tab bar won't be visible over the screen anymore."]})]})}function b(e={}){const{wrapper:n}={...(0,r.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>o});t(67294);var a=t(86010);const r={tabItem:"tabItem_Ymn6"};var i=t(85893);function o(e){let{children:n,hidden:t,className:o}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,a.Z)(r.tabItem,o),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>k});var a=t(67294),r=t(86010),i=t(12466),o=t(16550),s=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function m(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:r}}=e;return{value:n,label:t,attributes:a,default:r}}))}(t);return function(e){const n=(0,l.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,t])}function b(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function g(e){let{queryString:n=!1,groupId:t}=e;const r=(0,o.k6)(),i=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(i),(0,a.useCallback)((e=>{if(!i)return;const n=new URLSearchParams(r.location.search);n.set(i,e),r.replace({...r.location,search:n.toString()})}),[i,r])]}function v(e){const{defaultValue:n,queryString:t=!1,groupId:r}=e,i=m(e),[o,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const r=null!=(n=a.find((e=>e.default)))?n:a[0];if(!r)throw new Error("Unexpected error: 0 tabValues");return r.value}({defaultValue:n,tabValues:i}))),[l,d]=g({queryString:t,groupId:r}),[v,f]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[r,i]=(0,u.Nk)(t);return[r,(0,a.useCallback)((e=>{t&&i.set(e)}),[t,i])]}({groupId:r}),p=(()=>{const e=null!=l?l:v;return b({value:e,tabValues:i})?e:null})();(0,s.Z)((()=>{p&&c(p)}),[p]);return{selectedValue:o,selectValue:(0,a.useCallback)((e=>{if(!b({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);c(e),d(e),f(e)}),[d,f,i]),tabValues:i}}var f=t(72389);const p={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var h=t(85893);function S(e){let{className:n,block:t,selectedValue:a,selectValue:o,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),u=e=>{const n=e.currentTarget,t=c.indexOf(n),r=s[t].value;r!==a&&(l(n),o(r))},d=e=>{var n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var r;const n=c.indexOf(e.currentTarget)-1;t=null!=(r=c[n])?r:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,h.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:i}=e;return(0,h.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:d,onClick:u,...i,className:(0,r.Z)("tabs__item",p.tabItem,null==i?void 0:i.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function x(e){let{lazy:n,children:t,selectedValue:r}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===r));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,h.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==r})))})}function N(e){const n=v(e);return(0,h.jsxs)("div",{className:(0,r.Z)("tabs-container",p.tabList),children:[(0,h.jsx)(S,{...e,...n}),(0,h.jsx)(x,{...e,...n})]})}function k(e){const n=(0,f.Z)();return(0,h.jsx)(N,{...e,children:d(e.children)},String(n))}},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>o});var a=t(67294);const r={},i=a.createContext(r);function o(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/bbc7a4b0.3d7bb362.js b/assets/js/bbc7a4b0.3d7bb362.js deleted file mode 100644 index 91b222faeb4..00000000000 --- a/assets/js/bbc7a4b0.3d7bb362.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[53249],{31715:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>r,metadata:()=>l,toc:()=>u});var i=t(85893),s=t(11151),o=t(74866),a=t(85162);const r={id:"auth-flow",title:"Authentication flows",sidebar_label:"Authentication flows"},c=void 0,l={id:"auth-flow",title:"Authentication flows",description:"Most apps require that a user authenticates in some way to have access to data associated with a user or other private content. Typically the flow will look like this:",source:"@site/versioned_docs/version-7.x/auth-flow.md",sourceDirName:".",slug:"/auth-flow",permalink:"/docs/7.x/auth-flow",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/auth-flow.md",tags:[],version:"7.x",frontMatter:{id:"auth-flow",title:"Authentication flows",sidebar_label:"Authentication flows"},sidebar:"docs",previous:{title:"Drawer navigation",permalink:"/docs/7.x/drawer-based-navigation"},next:{title:"Supporting safe areas",permalink:"/docs/7.x/handling-safe-area"}},d={},u=[{value:"What we need",id:"what-we-need",level:2},{value:"How it will work",id:"how-it-will-work",level:2},{value:"Define the hooks",id:"define-the-hooks",level:2},{value:"Define our screens",id:"define-our-screens",level:2},{value:"Implement the logic for restoring the token",id:"implement-the-logic-for-restoring-the-token",level:2},{value:"Fill in other components",id:"fill-in-other-components",level:2},{value:"Removing shared screens when auth state changes",id:"removing-shared-screens-when-auth-state-changes",level:2},{value:"Don't manually navigate when conditionally rendering screens",id:"dont-manually-navigate-when-conditionally-rendering-screens",level:2}];function h(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Most apps require that a user authenticates in some way to have access to data associated with a user or other private content. Typically the flow will look like this:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The user opens the app."}),"\n",(0,i.jsxs)(n.li,{children:["The app loads some authentication state from encrypted persistent storage (for example, ",(0,i.jsx)(n.a,{href:"https://docs.expo.io/versions/latest/sdk/securestore/",children:(0,i.jsx)(n.code,{children:"SecureStore"})}),")."]}),"\n",(0,i.jsx)(n.li,{children:"When the state has loaded, the user is presented with either authentication screens or the main app, depending on whether valid authentication state was loaded."}),"\n",(0,i.jsx)(n.li,{children:"When the user signs out, we clear the authentication state and send them back to authentication screens."}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsx)(n.p,{children:'We say "authentication screens" because usually there is more than one. You may have a main screen with a username and password field, another for "forgot password", and another set for sign up.'})}),"\n",(0,i.jsx)(n.h2,{id:"what-we-need",children:"What we need"}),"\n",(0,i.jsx)(n.p,{children:"We want the following behavior from our authentication flow:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"When the user is signed in, we want to show the main app screens and not the authentication-related screens."}),"\n",(0,i.jsx)(n.li,{children:"When the user is signed out, we want to show the authentication screens and not the main app screens."}),"\n",(0,i.jsx)(n.li,{children:"After the user goes through the authentication flow and signs in, we want to unmount all of the screens related to authentication, and when we press the hardware back button, we expect to not be able to go back to the authentication flow."}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"how-it-will-work",children:"How it will work"}),"\n",(0,i.jsxs)(n.p,{children:["We can configure different screens to be available based on some condition. For example, if the user is signed in, we can define ",(0,i.jsx)(n.code,{children:"Home"}),", ",(0,i.jsx)(n.code,{children:"Profile"}),", ",(0,i.jsx)(n.code,{children:"Settings"})," etc. If the user is not signed in, we can define ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens."]}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsxs)(a.Z,{value:"static",label:"Static",default:!0,children:[(0,i.jsx)(n.p,{children:"To do this, we need a couple of things:"}),(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Define two hooks: ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"}),", which return a boolean value indicating whether the user is signed in or not."]}),"\n",(0,i.jsxs)(n.li,{children:["Use the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," along with the ",(0,i.jsx)(n.a,{href:"/docs/7.x/static-configuration#if",children:(0,i.jsx)(n.code,{children:"if"})})," property to define the screens that are available based on the condition."]}),"\n"]}),(0,i.jsx)(n.p,{children:"This tells React Navigation to show specific screens based on the signed in status. When the signed in status changes, React Navigation will automatically show the appropriate screen."}),(0,i.jsx)(n.h2,{id:"define-the-hooks",children:"Define the hooks"}),(0,i.jsxs)(n.p,{children:["To implement the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," hooks, we can start by creating a context to store the authentication state. Let's call it ",(0,i.jsx)(n.code,{children:"SignInContext"}),":"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import * as React from 'react';\n\nconst SignInContext = React.createContext();\n"})}),(0,i.jsxs)(n.p,{children:["Then we can implement the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," hooks as follows:"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"function useIsSignedIn() {\n const isSignedIn = React.useContext(SignInContext);\n return isSignedIn;\n}\n\nfunction useIsSignedOut() {\n const isSignedIn = React.useContext(SignInContext);\n return !isSignedIn;\n}\n"})}),(0,i.jsx)(n.p,{children:"We'll discuss how to expose the context value later."}),(0,i.jsx)(n.pre,{"data-name":"Customizing tabs appearance","data-snack":"true",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Customizing tabs appearance" snack',children:"import * as React from 'react';\nimport { View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nconst useIsSignedIn = () => {\n return true;\n};\n\nconst useIsSignedOut = () => {\n return false;\n};\n\nconst signedInStack = createNativeStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n Settings: SettingsScreen,\n },\n});\n\nconst signedOutStack = createNativeStackNavigator({\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n },\n});\n\n// codeblock-focus-start\nconst RootStack = createNativeStackNavigator({\n screens: {\n LoggedIn: {\n if: useIsSignedIn,\n screen: signedInStack,\n options: {\n headerShown: false,\n },\n },\n LoggedOut: {\n if: useIsSignedOut,\n screen: signedOutStack,\n options: {\n headerShown: false,\n },\n },\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nfunction HomeScreen() {\n return ;\n}\n\nfunction ProfileScreen() {\n return ;\n}\n\nfunction SettingsScreen() {\n return ;\n}\n\nfunction SignInScreen() {\n return ;\n}\n\nfunction SignUpScreen() {\n return ;\n}\n"})})]}),(0,i.jsxs)(a.Z,{value:"dynamic",label:"Dynamic",children:[(0,i.jsx)(n.p,{children:"For example:"}),(0,i.jsx)(n.pre,{"data-name":"Customizing tabs appearance","data-snack":"true",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Customizing tabs appearance" snack',children:'import * as React from \'react\';\nimport { View } from \'react-native\';\nimport { NavigationContainer } from \'@react-navigation/native\';\nimport { createNativeStackNavigator } from \'@react-navigation/native-stack\';\n\nconst Stack = createNativeStackNavigator();\n\nconst getIsSignedIn = () => {\n // custom logic\n return true;\n};\n\nexport default function App() {\n const isSignedIn = getIsSignedIn();\n\n return (\n \n \n // codeblock-focus-start\n {isSignedIn ? (\n <>\n \n \n \n \n ) : (\n <>\n \n \n \n )}\n // codeblock-focus-end\n \n \n );\n}\n\nfunction HomeScreen() {\n return ;\n}\n\nfunction ProfileScreen() {\n return ;\n}\n\nfunction SettingsScreen() {\n return ;\n}\n\nfunction SignInScreen() {\n return ;\n}\n\nfunction SignUpScreen() {\n return ;\n}\n'})}),(0,i.jsxs)(n.p,{children:["When we define screens like this, when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," is ",(0,i.jsx)(n.code,{children:"true"}),", React Navigation will only see the ",(0,i.jsx)(n.code,{children:"Home"}),", ",(0,i.jsx)(n.code,{children:"Profile"})," and ",(0,i.jsx)(n.code,{children:"Settings"})," screens, and when it's ",(0,i.jsx)(n.code,{children:"false"}),", React Navigation will see the ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens. This makes it impossible to navigate to the ",(0,i.jsx)(n.code,{children:"Home"}),", ",(0,i.jsx)(n.code,{children:"Profile"})," and ",(0,i.jsx)(n.code,{children:"Settings"})," screens when the user is not signed in, and to ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens when the user is signed in."]}),(0,i.jsx)(n.p,{children:'This pattern has been in use by other routing libraries such as React Router for a long time, and is commonly known as "Protected routes". Here, our screens which need the user to be signed in are "protected" and cannot be navigated to by other means if the user is not signed in.'}),(0,i.jsxs)(n.p,{children:["The magic happens when the value of the ",(0,i.jsx)(n.code,{children:"isSignedIn"})," variable changes. Let's say, initially ",(0,i.jsx)(n.code,{children:"isSignedIn"})," is ",(0,i.jsx)(n.code,{children:"false"}),". This means, either ",(0,i.jsx)(n.code,{children:"SignIn"})," or ",(0,i.jsx)(n.code,{children:"SignUp"})," screens are shown. After the user signs in, the value of ",(0,i.jsx)(n.code,{children:"isSignedIn"})," will change to ",(0,i.jsx)(n.code,{children:"true"}),". React Navigation will see that the ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens are no longer defined and so it will remove them. Then it'll show the ",(0,i.jsx)(n.code,{children:"Home"})," screen automatically because that's the first screen defined when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," is ",(0,i.jsx)(n.code,{children:"true"}),"."]}),(0,i.jsx)(n.p,{children:"The example shows stack navigator, but you can use the same approach with any navigator."}),(0,i.jsx)(n.p,{children:"By conditionally defining different screens based on a variable, we can implement auth flow in a simple way that doesn't require additional logic to make sure that the correct screen is shown."})]})]}),"\n",(0,i.jsx)(n.h2,{id:"define-our-screens",children:"Define our screens"}),"\n",(0,i.jsx)(n.p,{children:"In our navigator, we can conditionally define appropriate screens. For our case, let's say we have 3 screens:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"SplashScreen"})," - This will show a splash or loading screen when we're restoring the token."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"SignIn"})," - This is the screen we show if the user isn't signed in already (we couldn't find a token)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"Home"})," - This is the screen we show if the user is already signed in."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"So our navigator will look like:"}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsxs)(a.Z,{value:"static",label:"Static",default:!0,children:[(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n screens: {\n Home: {\n if: useIsSignedIn,\n screen: HomeScreen,\n },\n SignIn: {\n if: useIsSignedOut,\n screen: SignInScreen,\n options: {\n title: 'Sign in',\n },\n },\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n"})}),(0,i.jsxs)(n.p,{children:["Notice how we have only defined the ",(0,i.jsx)(n.code,{children:"Home"})," and ",(0,i.jsx)(n.code,{children:"SignIn"})," screens here, and not the ",(0,i.jsx)(n.code,{children:"SplashScreen"}),". The ",(0,i.jsx)(n.code,{children:"SplashScreen"})," should be rendered before we render any navigators so that we don't render incorrect screens before we know whether the user is signed in or not."]}),(0,i.jsx)(n.p,{children:"When we use this in our component, it'd look something like this:"}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"if (isLoading) {\n // We haven't finished checking for the token yet\n return ;\n}\n\nconst isSignedIn = userToken != null;\n\nreturn (\n \n \n \n);\n"})}),(0,i.jsxs)(n.p,{children:["In the above snippet, ",(0,i.jsx)(n.code,{children:"isLoading"})," means that we're still checking if we have a token. This can usually be done by checking if we have a token in ",(0,i.jsx)(n.code,{children:"SecureStore"})," and validating the token. After we get the token and if it's valid, we need to set the ",(0,i.jsx)(n.code,{children:"userToken"}),". We also have another state called ",(0,i.jsx)(n.code,{children:"isSignout"})," to have a different animation on sign out."]}),(0,i.jsxs)(n.p,{children:["Next, we're exposing the sign in status via the ",(0,i.jsx)(n.code,{children:"SignInContext"})," so that it's available to the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," hooks."]}),(0,i.jsxs)(n.p,{children:["In the above example, we're have one screen for each case. But you could also define multiple screens. For example, you probably want to define password reset, signup, etc screens as well when the user isn't signed in. Similarly for the screens accessible after sign in, you probably have more than one screen. We can use ",(0,i.jsx)(n.a,{href:"/docs/7.x/static-configuration#groups",children:(0,i.jsx)(n.code,{children:"groups"})})," to define multiple screens:"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n screens: {\n // Common screens\n },\n groups: {\n SignedIn: {\n if: useIsSignedIn,\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n },\n SignedOut: {\n if: useIsSignedOut,\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n ResetPassword: ResetPasswordScreen,\n },\n },\n },\n});\n"})}),(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsx)(n.p,{children:"If you have both your login-related screens and rest of the screens in Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout."})})]}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"if (isLoading) {\n // We haven't finished checking for the token yet\n return ;\n}\n\nreturn (\n \n \n {userToken == null ? (\n // No token found, user isn't signed in\n \n ) : (\n // User is signed in\n \n )}\n \n \n);\n"})})})]}),"\n",(0,i.jsxs)(n.p,{children:["In the above snippet, ",(0,i.jsx)(n.code,{children:"isLoading"})," means that we're still checking if we have a token. This can usually be done by checking if we have a token in ",(0,i.jsx)(n.code,{children:"SecureStore"})," and validating the token. After we get the token and if it's valid, we need to set the ",(0,i.jsx)(n.code,{children:"userToken"}),". We also have another state called ",(0,i.jsx)(n.code,{children:"isSignout"})," to have a different animation on sign out."]}),"\n",(0,i.jsx)(n.p,{children:"The main thing to notice is that we're conditionally defining screens based on these state variables:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"SignIn"})," screen is only defined if ",(0,i.jsx)(n.code,{children:"userToken"})," is ",(0,i.jsx)(n.code,{children:"null"})," (user is not signed in)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"Home"})," screen is only defined if ",(0,i.jsx)(n.code,{children:"userToken"})," is non-null (user is signed in)"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Here, we're conditionally defining one screen for each case. But you could also define multiple screens. For example, you probably want to define password reset, signup, etc screens as well when the user isn't signed in. Similarly, for the screens accessible after signing in, you probably have more than one screen. We can use ",(0,i.jsx)(n.code,{children:"React.Fragment"})," to define multiple screens:"]}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsx)(a.Z,{value:"static",label:"Static",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const SignInContext = React.createContext();\n\nfunction useIsSignedIn() {\n const isSignedIn = React.useContext(SignInContext);\n return isSignedIn;\n}\n\nfunction useIsSignedOut() {\n const isSignedIn = React.useContext(SignInContext);\n return !isSignedIn;\n}\n\n/* content */\n\nexport default function App() {\n /* content */\n\n const isSignedIn = userToken != null;\n\n return (\n \n \n \n );\n}\n"})})}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'state.userToken == null ? (\n <>\n \n \n \n \n) : (\n <>\n \n \n \n);\n'})})})]}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsx)(n.p,{children:"If you have both your login-related screens and rest of the screens in two different Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout."})}),"\n",(0,i.jsx)(n.h2,{id:"implement-the-logic-for-restoring-the-token",children:"Implement the logic for restoring the token"}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsx)(n.p,{children:"The following is just an example of how you might implement the logic for authentication in your app. You don't need to follow it as is."})}),"\n",(0,i.jsx)(n.p,{children:"From the previous snippet, we can see that we need 3 state variables:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"isLoading"})," - We set this to ",(0,i.jsx)(n.code,{children:"true"})," when we're trying to check if we already have a token saved in ",(0,i.jsx)(n.code,{children:"SecureStore"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"isSignout"})," - We set this to ",(0,i.jsx)(n.code,{children:"true"})," when user is signing out, otherwise set it to ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"userToken"})," - The token for the user. If it's non-null, we assume the user is logged in, otherwise not."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"So we need to:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Add some logic for restoring token, signing in and signing out"}),"\n",(0,i.jsx)(n.li,{children:"Expose methods for signing in and signing out to other components"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["We'll use ",(0,i.jsx)(n.code,{children:"React.useReducer"})," and ",(0,i.jsx)(n.code,{children:"React.useContext"})," in this guide. But if you're using a state management library such as Redux or Mobx, you can use them for this functionality instead. In fact, in bigger apps, a global state management library is more suitable for storing authentication tokens. You can adapt the same approach to your state management library."]}),"\n",(0,i.jsx)(n.p,{children:"First we'll need to create a context for auth where we can expose the necessary methods:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import * as React from 'react';\n\nconst AuthContext = React.createContext();\n"})}),"\n",(0,i.jsx)(n.p,{children:"In our component, we will:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Store the token and loading state in ",(0,i.jsx)(n.code,{children:"useReducer"})]}),"\n",(0,i.jsxs)(n.li,{children:["Persist it to ",(0,i.jsx)(n.code,{children:"SecureStore"})," and read it from there on app launch"]}),"\n",(0,i.jsxs)(n.li,{children:["Expose the methods for sign in and sign out to child components using ",(0,i.jsx)(n.code,{children:"AuthContext"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"So our component will look like this:"}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsx)(a.Z,{value:"static",label:"Static",default:!0,children:(0,i.jsx)(n.pre,{"data-name":"Signing in and signing out with AuthContext","data-snack":"true","data-dependencies":"expo-secure-store",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store',children:"// codeblock-focus-start\nimport * as React from 'react';\nimport * as SecureStore from 'expo-secure-store';\n\n// codeblock-focus-end\nimport { Text, TextInput, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\n\nconst AuthContext = React.createContext();\n\nconst SignInContext = React.createContext();\n\nfunction useIsSignedIn() {\n const isSignedIn = React.useContext(SignInContext);\n return isSignedIn;\n}\n\nfunction useIsSignedOut() {\n const isSignedIn = React.useContext(SignInContext);\n return !isSignedIn;\n}\n\nfunction SplashScreen() {\n return (\n \n Loading...\n \n );\n}\n\nfunction HomeScreen() {\n const { signOut } = React.useContext(AuthContext);\n\n return (\n \n Signed in!\n \n \n );\n}\n\nfunction SignInScreen() {\n const [username, setUsername] = React.useState('');\n const [password, setPassword] = React.useState('');\n\n const { signIn } = React.useContext(AuthContext);\n\n return (\n \n \n \n \n \n );\n}\n\n// codeblock-focus-start\nexport default function App() {\n const [state, dispatch] = React.useReducer(\n (prevState, action) => {\n switch (action.type) {\n case 'RESTORE_TOKEN':\n return {\n ...prevState,\n userToken: action.token,\n isLoading: false,\n };\n case 'SIGN_IN':\n return {\n ...prevState,\n isSignout: false,\n userToken: action.token,\n };\n case 'SIGN_OUT':\n return {\n ...prevState,\n isSignout: true,\n userToken: null,\n };\n }\n },\n {\n isLoading: true,\n isSignout: false,\n userToken: null,\n }\n );\n\n React.useEffect(() => {\n // Fetch the token from storage then navigate to our appropriate place\n const bootstrapAsync = async () => {\n let userToken;\n\n try {\n // Restore token stored in `SecureStore` or any other encrypted storage\n userToken = await SecureStore.getItemAsync('userToken');\n } catch (e) {\n // Restoring token failed\n }\n\n // After restoring token, we may need to validate it in production apps\n\n // This will switch to the App screen or Auth screen and this loading\n // screen will be unmounted and thrown away.\n dispatch({ type: 'RESTORE_TOKEN', token: userToken });\n };\n\n bootstrapAsync();\n }, []);\n\n const authContext = React.useMemo(\n () => ({\n signIn: async (data) => {\n // In a production app, we need to send some data (usually username, password) to server and get a token\n // We will also need to handle errors if sign in failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n signOut: () => dispatch({ type: 'SIGN_OUT' }),\n signUp: async (data) => {\n // In a production app, we need to send user data to server and get a token\n // We will also need to handle errors if sign up failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n }),\n []\n );\n\n if (state.isLoading) {\n // We haven't finished checking for the token yet\n return ;\n }\n\n if (state.isLoading) {\n return ;\n }\n\n const isSignedIn = state.userToken != null;\n\n return (\n \n \n \n \n \n );\n}\n\nconst RootStack = createNativeStackNavigator({\n screens: {\n Home: {\n if: useIsSignedIn,\n screen: HomeScreen,\n },\n SignIn: {\n screen: SignInScreen,\n options: {\n title: 'Sign in',\n },\n if: useIsSignedOut,\n },\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n// codeblock-focus-end\n"})})}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{"data-name":"Signing in and signing out with AuthContext","data-snack":"true","data-dependencies":"expo-secure-store",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store',children:"// codeblock-focus-start\nimport * as React from 'react';\nimport * as SecureStore from 'expo-secure-store';\n\n// codeblock-focus-end\nimport { Text, TextInput, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\n\nconst AuthContext = React.createContext();\n\nfunction SplashScreen() {\n return (\n \n Loading...\n \n );\n}\n\nfunction HomeScreen() {\n const { signOut } = React.useContext(AuthContext);\n\n return (\n \n Signed in!\n \n \n );\n}\n\nfunction SignInScreen() {\n const [username, setUsername] = React.useState('');\n const [password, setPassword] = React.useState('');\n\n const { signIn } = React.useContext(AuthContext);\n\n return (\n \n \n \n \n \n );\n}\n\nconst Stack = createNativeStackNavigator();\n\n// codeblock-focus-start\nexport default function App() {\n const [state, dispatch] = React.useReducer(\n (prevState, action) => {\n switch (action.type) {\n case 'RESTORE_TOKEN':\n return {\n ...prevState,\n userToken: action.token,\n isLoading: false,\n };\n case 'SIGN_IN':\n return {\n ...prevState,\n isSignout: false,\n userToken: action.token,\n };\n case 'SIGN_OUT':\n return {\n ...prevState,\n isSignout: true,\n userToken: null,\n };\n }\n },\n {\n isLoading: true,\n isSignout: false,\n userToken: null,\n }\n );\n\n React.useEffect(() => {\n // Fetch the token from storage then navigate to our appropriate place\n const bootstrapAsync = async () => {\n let userToken;\n\n try {\n // Restore token stored in `SecureStore` or any other encrypted storage\n userToken = await SecureStore.getItemAsync('userToken');\n } catch (e) {\n // Restoring token failed\n }\n\n // After restoring token, we may need to validate it in production apps\n\n // This will switch to the App screen or Auth screen and this loading\n // screen will be unmounted and thrown away.\n dispatch({ type: 'RESTORE_TOKEN', token: userToken });\n };\n\n bootstrapAsync();\n }, []);\n\n const authContext = React.useMemo(\n () => ({\n signIn: async (data) => {\n // In a production app, we need to send some data (usually username, password) to server and get a token\n // We will also need to handle errors if sign in failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n signOut: () => dispatch({ type: 'SIGN_OUT' }),\n signUp: async (data) => {\n // In a production app, we need to send user data to server and get a token\n // We will also need to handle errors if sign up failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n }),\n []\n );\n\n return (\n \n \n \n {state.isLoading ? (\n // We haven't finished checking for the token yet\n \n ) : state.userToken == null ? (\n // No token found, user isn't signed in\n \n ) : (\n // User is signed in\n \n )}\n \n \n \n );\n}\n// codeblock-focus-end\n"})})})]}),"\n",(0,i.jsx)(n.h2,{id:"fill-in-other-components",children:"Fill in other components"}),"\n",(0,i.jsx)(n.p,{children:"We won't talk about how to implement the text inputs and buttons for the authentication screen, that is outside of the scope of navigation. We'll just fill in some placeholder content."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"function SignInScreen() {\n const [username, setUsername] = React.useState('');\n const [password, setPassword] = React.useState('');\n\n const { signIn } = React.useContext(AuthContext);\n\n return (\n \n \n \n \n \n );\n}\n"})}),"\n",(0,i.jsx)(n.p,{children:"You can similarly fill in the other screens according to your requirements."}),"\n",(0,i.jsx)(n.h2,{id:"removing-shared-screens-when-auth-state-changes",children:"Removing shared screens when auth state changes"}),"\n",(0,i.jsx)(n.p,{children:"Consider the following example:"}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsx)(a.Z,{value:"static",label:"Static",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n groups: {\n LoggedIn: {\n if: useIsSignedIn,\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n },\n LoggedOut: {\n if: useIsSignedOut,\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n },\n },\n },\n screens: {\n Help: HelpScreen,\n },\n});\n"})})}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'isSignedIn ? (\n <>\n \n \n \n \n) : (\n <>\n \n \n \n \n);\n'})})})]}),"\n",(0,i.jsxs)(n.p,{children:["Here we have specific screens such as ",(0,i.jsx)(n.code,{children:"SignIn"}),", ",(0,i.jsx)(n.code,{children:"Home"})," etc. which are only shown depending on the sign in state. But we also have the ",(0,i.jsx)(n.code,{children:"Help"})," screen which can be shown regardless of the login status. This also means that if the sign in state changes when the user is in the ",(0,i.jsx)(n.code,{children:"Help"})," screen, they'll stay on the ",(0,i.jsx)(n.code,{children:"Help"})," screen."]}),"\n",(0,i.jsxs)(n.p,{children:["This can be a problem, we probably want the user to be taken to the ",(0,i.jsx)(n.code,{children:"SignIn"})," screen or ",(0,i.jsx)(n.code,{children:"Home"})," screen instead of keeping them on the ",(0,i.jsx)(n.code,{children:"Help"})," screen."]}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsxs)(a.Z,{value:"static",label:"Static",default:!0,children:[(0,i.jsxs)(n.p,{children:["To make this work, we can move the ",(0,i.jsx)(n.code,{children:"Help"})," screen to both of the groups instead of keeping it outside. This will ensure that the ",(0,i.jsx)(n.a,{href:"/docs/7.x/screen#navigation-key",children:(0,i.jsx)(n.code,{children:"navigationKey"})})," (the name of the group) for the screen changes when the sign in state changes."]}),(0,i.jsx)(n.p,{children:"So our updated code will look like the following:"}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n groups: {\n LoggedIn: {\n if: useIsSignedIn,\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n Help: HelpScreen,\n },\n },\n LoggedOut: {\n if: useIsSignedOut,\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n Help: HelpScreen,\n },\n },\n },\n});\n"})})]}),(0,i.jsxs)(a.Z,{value:"dynamic",label:"Dynamic",children:[(0,i.jsxs)(n.p,{children:["To make this work, we can use ",(0,i.jsx)(n.a,{href:"/docs/7.x/screen#navigation-key",children:(0,i.jsx)(n.code,{children:"navigationKey"})}),". When the ",(0,i.jsx)(n.code,{children:"navigationKey"})," changes, React Navigation will remove all the screen."]}),(0,i.jsx)(n.p,{children:"So our updated code will look like the following:"}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'<>\n {isSignedIn ? (\n <>\n \n \n \n ) : (\n <>\n \n \n \n )}\n \n\n'})}),(0,i.jsxs)(n.p,{children:["If you have a bunch of shared screens, you can also use ",(0,i.jsxs)(n.a,{href:"/docs/7.x/group#navigation-key",children:[(0,i.jsx)(n.code,{children:"navigationKey"})," with a ",(0,i.jsx)(n.code,{children:"Group"})]})," to remove all of the screens in the group. For example:"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'<>\n {isSignedIn ? (\n <>\n \n \n \n ) : (\n <>\n \n \n \n )}\n \n \n \n \n\n'})})]})]}),"\n",(0,i.jsx)(n.h2,{id:"dont-manually-navigate-when-conditionally-rendering-screens",children:"Don't manually navigate when conditionally rendering screens"}),"\n",(0,i.jsxs)(n.p,{children:["It's important to note that when using such a setup, you ",(0,i.jsx)(n.strong,{children:"don't manually navigate"})," to the ",(0,i.jsx)(n.code,{children:"Home"})," screen by calling ",(0,i.jsx)(n.code,{children:"navigation.navigate('Home')"})," or any other method. ",(0,i.jsx)(n.strong,{children:"React Navigation will automatically navigate to the correct screen"})," when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," changes - ",(0,i.jsx)(n.code,{children:"Home"})," screen when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," becomes ",(0,i.jsx)(n.code,{children:"true"}),", and to ",(0,i.jsx)(n.code,{children:"SignIn"})," screen when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," becomes ",(0,i.jsx)(n.code,{children:"false"}),". You'll get an error if you attempt to navigate manually."]})]})}function g(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>a});t(67294);var i=t(86010);const s={tabItem:"tabItem_Ymn6"};var o=t(85893);function a(e){let{children:n,hidden:t,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,i.Z)(s.tabItem,a),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>k});var i=t(67294),s=t(86010),o=t(12466),a=t(16550),r=t(20469),c=t(91980),l=t(67392),d=t(50012);function u(e){var n,t;return null!=(n=null==(t=i.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,i.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:t.filter(Boolean))?n:[]}function h(e){const{values:n,children:t}=e;return(0,i.useMemo)((()=>{const e=null!=n?n:function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:i,default:s}}=e;return{value:n,label:t,attributes:i,default:s}}))}(t);return function(e){const n=(0,l.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,t])}function g(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:t}=e;const s=(0,a.k6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(o),(0,i.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(s.location.search);n.set(o,e),s.replace({...s.location,search:n.toString()})}),[o,s])]}function S(e){const{defaultValue:n,queryString:t=!1,groupId:s}=e,o=h(e),[a,c]=(0,i.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:i}=e;if(0===i.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:i}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+i.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const s=null!=(n=i.find((e=>e.default)))?n:i[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[l,u]=p({queryString:t,groupId:s}),[S,m]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[s,o]=(0,d.Nk)(t);return[s,(0,i.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:s}),x=(()=>{const e=null!=l?l:S;return g({value:e,tabValues:o})?e:null})();(0,r.Z)((()=>{x&&c(x)}),[x]);return{selectedValue:a,selectValue:(0,i.useCallback)((e=>{if(!g({value:e,tabValues:o}))throw new Error("Can't select invalid tab value="+e);c(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(72389);const x={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=t(85893);function w(e){let{className:n,block:t,selectedValue:i,selectValue:a,tabValues:r}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),s=r[t].value;s!==i&&(l(n),a(s))},u=e=>{var n;let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var i;const n=c.indexOf(e.currentTarget)+1;t=null!=(i=c[n])?i:c[0];break}case"ArrowLeft":{var s;const n=c.indexOf(e.currentTarget)-1;t=null!=(s=c[n])?s:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":t},n),children:r.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:i===n?0:-1,"aria-selected":i===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...o,className:(0,s.Z)("tabs__item",x.tabItem,null==o?void 0:o.className,{"tabs__item--active":i===n}),children:null!=t?t:n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:s}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===s));return e?(0,i.cloneElement)(e,{className:"margin-top--md"}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,i.cloneElement)(e,{key:n,hidden:e.props.value!==s})))})}function j(e){const n=S(e);return(0,f.jsxs)("div",{className:(0,s.Z)("tabs-container",x.tabList),children:[(0,f.jsx)(w,{...e,...n}),(0,f.jsx)(v,{...e,...n})]})}function k(e){const n=(0,m.Z)();return(0,f.jsx)(j,{...e,children:u(e.children)},String(n))}},11151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>a});var i=t(67294);const s={},o=i.createContext(s);function a(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/bbc7a4b0.e5bbf5b4.js b/assets/js/bbc7a4b0.e5bbf5b4.js new file mode 100644 index 00000000000..862bf559c3b --- /dev/null +++ b/assets/js/bbc7a4b0.e5bbf5b4.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[53249],{31715:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>g,frontMatter:()=>r,metadata:()=>l,toc:()=>u});var i=t(85893),s=t(11151),o=t(74866),a=t(85162);const r={id:"auth-flow",title:"Authentication flows",sidebar_label:"Authentication flows"},c=void 0,l={id:"auth-flow",title:"Authentication flows",description:"Most apps require that a user authenticates in some way to have access to data associated with a user or other private content. Typically the flow will look like this:",source:"@site/versioned_docs/version-7.x/auth-flow.md",sourceDirName:".",slug:"/auth-flow",permalink:"/docs/7.x/auth-flow",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/auth-flow.md",tags:[],version:"7.x",frontMatter:{id:"auth-flow",title:"Authentication flows",sidebar_label:"Authentication flows"},sidebar:"docs",previous:{title:"Next steps",permalink:"/docs/7.x/next-steps"},next:{title:"Supporting safe areas",permalink:"/docs/7.x/handling-safe-area"}},d={},u=[{value:"What we need",id:"what-we-need",level:2},{value:"How it will work",id:"how-it-will-work",level:2},{value:"Define the hooks",id:"define-the-hooks",level:2},{value:"Define our screens",id:"define-our-screens",level:2},{value:"Implement the logic for restoring the token",id:"implement-the-logic-for-restoring-the-token",level:2},{value:"Fill in other components",id:"fill-in-other-components",level:2},{value:"Removing shared screens when auth state changes",id:"removing-shared-screens-when-auth-state-changes",level:2},{value:"Don't manually navigate when conditionally rendering screens",id:"dont-manually-navigate-when-conditionally-rendering-screens",level:2}];function h(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.p,{children:"Most apps require that a user authenticates in some way to have access to data associated with a user or other private content. Typically the flow will look like this:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"The user opens the app."}),"\n",(0,i.jsxs)(n.li,{children:["The app loads some authentication state from encrypted persistent storage (for example, ",(0,i.jsx)(n.a,{href:"https://docs.expo.io/versions/latest/sdk/securestore/",children:(0,i.jsx)(n.code,{children:"SecureStore"})}),")."]}),"\n",(0,i.jsx)(n.li,{children:"When the state has loaded, the user is presented with either authentication screens or the main app, depending on whether valid authentication state was loaded."}),"\n",(0,i.jsx)(n.li,{children:"When the user signs out, we clear the authentication state and send them back to authentication screens."}),"\n"]}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsx)(n.p,{children:'We say "authentication screens" because usually there is more than one. You may have a main screen with a username and password field, another for "forgot password", and another set for sign up.'})}),"\n",(0,i.jsx)(n.h2,{id:"what-we-need",children:"What we need"}),"\n",(0,i.jsx)(n.p,{children:"We want the following behavior from our authentication flow:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"When the user is signed in, we want to show the main app screens and not the authentication-related screens."}),"\n",(0,i.jsx)(n.li,{children:"When the user is signed out, we want to show the authentication screens and not the main app screens."}),"\n",(0,i.jsx)(n.li,{children:"After the user goes through the authentication flow and signs in, we want to unmount all of the screens related to authentication, and when we press the hardware back button, we expect to not be able to go back to the authentication flow."}),"\n"]}),"\n",(0,i.jsx)(n.h2,{id:"how-it-will-work",children:"How it will work"}),"\n",(0,i.jsxs)(n.p,{children:["We can configure different screens to be available based on some condition. For example, if the user is signed in, we can define ",(0,i.jsx)(n.code,{children:"Home"}),", ",(0,i.jsx)(n.code,{children:"Profile"}),", ",(0,i.jsx)(n.code,{children:"Settings"})," etc. If the user is not signed in, we can define ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens."]}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsxs)(a.Z,{value:"static",label:"Static",default:!0,children:[(0,i.jsx)(n.p,{children:"To do this, we need a couple of things:"}),(0,i.jsxs)(n.ol,{children:["\n",(0,i.jsxs)(n.li,{children:["Define two hooks: ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"}),", which return a boolean value indicating whether the user is signed in or not."]}),"\n",(0,i.jsxs)(n.li,{children:["Use the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," along with the ",(0,i.jsx)(n.a,{href:"/docs/7.x/static-configuration#if",children:(0,i.jsx)(n.code,{children:"if"})})," property to define the screens that are available based on the condition."]}),"\n"]}),(0,i.jsx)(n.p,{children:"This tells React Navigation to show specific screens based on the signed in status. When the signed in status changes, React Navigation will automatically show the appropriate screen."}),(0,i.jsx)(n.h2,{id:"define-the-hooks",children:"Define the hooks"}),(0,i.jsxs)(n.p,{children:["To implement the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," hooks, we can start by creating a context to store the authentication state. Let's call it ",(0,i.jsx)(n.code,{children:"SignInContext"}),":"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import * as React from 'react';\n\nconst SignInContext = React.createContext();\n"})}),(0,i.jsxs)(n.p,{children:["Then we can implement the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," hooks as follows:"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"function useIsSignedIn() {\n const isSignedIn = React.useContext(SignInContext);\n return isSignedIn;\n}\n\nfunction useIsSignedOut() {\n const isSignedIn = React.useContext(SignInContext);\n return !isSignedIn;\n}\n"})}),(0,i.jsx)(n.p,{children:"We'll discuss how to expose the context value later."}),(0,i.jsx)(n.pre,{"data-name":"Customizing tabs appearance","data-snack":"true",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Customizing tabs appearance" snack',children:"import * as React from 'react';\nimport { View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nconst useIsSignedIn = () => {\n return true;\n};\n\nconst useIsSignedOut = () => {\n return false;\n};\n\nconst signedInStack = createNativeStackNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n Settings: SettingsScreen,\n },\n});\n\nconst signedOutStack = createNativeStackNavigator({\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n },\n});\n\n// codeblock-focus-start\nconst RootStack = createNativeStackNavigator({\n screens: {\n LoggedIn: {\n if: useIsSignedIn,\n screen: signedInStack,\n options: {\n headerShown: false,\n },\n },\n LoggedOut: {\n if: useIsSignedOut,\n screen: signedOutStack,\n options: {\n headerShown: false,\n },\n },\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n\nfunction HomeScreen() {\n return ;\n}\n\nfunction ProfileScreen() {\n return ;\n}\n\nfunction SettingsScreen() {\n return ;\n}\n\nfunction SignInScreen() {\n return ;\n}\n\nfunction SignUpScreen() {\n return ;\n}\n"})})]}),(0,i.jsxs)(a.Z,{value:"dynamic",label:"Dynamic",children:[(0,i.jsx)(n.p,{children:"For example:"}),(0,i.jsx)(n.pre,{"data-name":"Customizing tabs appearance","data-snack":"true",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Customizing tabs appearance" snack',children:'import * as React from \'react\';\nimport { View } from \'react-native\';\nimport { NavigationContainer } from \'@react-navigation/native\';\nimport { createNativeStackNavigator } from \'@react-navigation/native-stack\';\n\nconst Stack = createNativeStackNavigator();\n\nconst getIsSignedIn = () => {\n // custom logic\n return true;\n};\n\nexport default function App() {\n const isSignedIn = getIsSignedIn();\n\n return (\n \n \n // codeblock-focus-start\n {isSignedIn ? (\n <>\n \n \n \n \n ) : (\n <>\n \n \n \n )}\n // codeblock-focus-end\n \n \n );\n}\n\nfunction HomeScreen() {\n return ;\n}\n\nfunction ProfileScreen() {\n return ;\n}\n\nfunction SettingsScreen() {\n return ;\n}\n\nfunction SignInScreen() {\n return ;\n}\n\nfunction SignUpScreen() {\n return ;\n}\n'})}),(0,i.jsxs)(n.p,{children:["When we define screens like this, when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," is ",(0,i.jsx)(n.code,{children:"true"}),", React Navigation will only see the ",(0,i.jsx)(n.code,{children:"Home"}),", ",(0,i.jsx)(n.code,{children:"Profile"})," and ",(0,i.jsx)(n.code,{children:"Settings"})," screens, and when it's ",(0,i.jsx)(n.code,{children:"false"}),", React Navigation will see the ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens. This makes it impossible to navigate to the ",(0,i.jsx)(n.code,{children:"Home"}),", ",(0,i.jsx)(n.code,{children:"Profile"})," and ",(0,i.jsx)(n.code,{children:"Settings"})," screens when the user is not signed in, and to ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens when the user is signed in."]}),(0,i.jsx)(n.p,{children:'This pattern has been in use by other routing libraries such as React Router for a long time, and is commonly known as "Protected routes". Here, our screens which need the user to be signed in are "protected" and cannot be navigated to by other means if the user is not signed in.'}),(0,i.jsxs)(n.p,{children:["The magic happens when the value of the ",(0,i.jsx)(n.code,{children:"isSignedIn"})," variable changes. Let's say, initially ",(0,i.jsx)(n.code,{children:"isSignedIn"})," is ",(0,i.jsx)(n.code,{children:"false"}),". This means, either ",(0,i.jsx)(n.code,{children:"SignIn"})," or ",(0,i.jsx)(n.code,{children:"SignUp"})," screens are shown. After the user signs in, the value of ",(0,i.jsx)(n.code,{children:"isSignedIn"})," will change to ",(0,i.jsx)(n.code,{children:"true"}),". React Navigation will see that the ",(0,i.jsx)(n.code,{children:"SignIn"})," and ",(0,i.jsx)(n.code,{children:"SignUp"})," screens are no longer defined and so it will remove them. Then it'll show the ",(0,i.jsx)(n.code,{children:"Home"})," screen automatically because that's the first screen defined when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," is ",(0,i.jsx)(n.code,{children:"true"}),"."]}),(0,i.jsx)(n.p,{children:"The example shows stack navigator, but you can use the same approach with any navigator."}),(0,i.jsx)(n.p,{children:"By conditionally defining different screens based on a variable, we can implement auth flow in a simple way that doesn't require additional logic to make sure that the correct screen is shown."})]})]}),"\n",(0,i.jsx)(n.h2,{id:"define-our-screens",children:"Define our screens"}),"\n",(0,i.jsx)(n.p,{children:"In our navigator, we can conditionally define appropriate screens. For our case, let's say we have 3 screens:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"SplashScreen"})," - This will show a splash or loading screen when we're restoring the token."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"SignIn"})," - This is the screen we show if the user isn't signed in already (we couldn't find a token)."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"Home"})," - This is the screen we show if the user is already signed in."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"So our navigator will look like:"}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsxs)(a.Z,{value:"static",label:"Static",default:!0,children:[(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n screens: {\n Home: {\n if: useIsSignedIn,\n screen: HomeScreen,\n },\n SignIn: {\n if: useIsSignedOut,\n screen: SignInScreen,\n options: {\n title: 'Sign in',\n },\n },\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n"})}),(0,i.jsxs)(n.p,{children:["Notice how we have only defined the ",(0,i.jsx)(n.code,{children:"Home"})," and ",(0,i.jsx)(n.code,{children:"SignIn"})," screens here, and not the ",(0,i.jsx)(n.code,{children:"SplashScreen"}),". The ",(0,i.jsx)(n.code,{children:"SplashScreen"})," should be rendered before we render any navigators so that we don't render incorrect screens before we know whether the user is signed in or not."]}),(0,i.jsx)(n.p,{children:"When we use this in our component, it'd look something like this:"}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"if (isLoading) {\n // We haven't finished checking for the token yet\n return ;\n}\n\nconst isSignedIn = userToken != null;\n\nreturn (\n \n \n \n);\n"})}),(0,i.jsxs)(n.p,{children:["In the above snippet, ",(0,i.jsx)(n.code,{children:"isLoading"})," means that we're still checking if we have a token. This can usually be done by checking if we have a token in ",(0,i.jsx)(n.code,{children:"SecureStore"})," and validating the token. After we get the token and if it's valid, we need to set the ",(0,i.jsx)(n.code,{children:"userToken"}),". We also have another state called ",(0,i.jsx)(n.code,{children:"isSignout"})," to have a different animation on sign out."]}),(0,i.jsxs)(n.p,{children:["Next, we're exposing the sign in status via the ",(0,i.jsx)(n.code,{children:"SignInContext"})," so that it's available to the ",(0,i.jsx)(n.code,{children:"useIsSignedIn"})," and ",(0,i.jsx)(n.code,{children:"useIsSignedOut"})," hooks."]}),(0,i.jsxs)(n.p,{children:["In the above example, we're have one screen for each case. But you could also define multiple screens. For example, you probably want to define password reset, signup, etc screens as well when the user isn't signed in. Similarly for the screens accessible after sign in, you probably have more than one screen. We can use ",(0,i.jsx)(n.a,{href:"/docs/7.x/static-configuration#groups",children:(0,i.jsx)(n.code,{children:"groups"})})," to define multiple screens:"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n screens: {\n // Common screens\n },\n groups: {\n SignedIn: {\n if: useIsSignedIn,\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n },\n SignedOut: {\n if: useIsSignedOut,\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n ResetPassword: ResetPasswordScreen,\n },\n },\n },\n});\n"})}),(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsx)(n.p,{children:"If you have both your login-related screens and rest of the screens in Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout."})})]}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"if (isLoading) {\n // We haven't finished checking for the token yet\n return ;\n}\n\nreturn (\n \n \n {userToken == null ? (\n // No token found, user isn't signed in\n \n ) : (\n // User is signed in\n \n )}\n \n \n);\n"})})})]}),"\n",(0,i.jsxs)(n.p,{children:["In the above snippet, ",(0,i.jsx)(n.code,{children:"isLoading"})," means that we're still checking if we have a token. This can usually be done by checking if we have a token in ",(0,i.jsx)(n.code,{children:"SecureStore"})," and validating the token. After we get the token and if it's valid, we need to set the ",(0,i.jsx)(n.code,{children:"userToken"}),". We also have another state called ",(0,i.jsx)(n.code,{children:"isSignout"})," to have a different animation on sign out."]}),"\n",(0,i.jsx)(n.p,{children:"The main thing to notice is that we're conditionally defining screens based on these state variables:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"SignIn"})," screen is only defined if ",(0,i.jsx)(n.code,{children:"userToken"})," is ",(0,i.jsx)(n.code,{children:"null"})," (user is not signed in)"]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"Home"})," screen is only defined if ",(0,i.jsx)(n.code,{children:"userToken"})," is non-null (user is signed in)"]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Here, we're conditionally defining one screen for each case. But you could also define multiple screens. For example, you probably want to define password reset, signup, etc screens as well when the user isn't signed in. Similarly, for the screens accessible after signing in, you probably have more than one screen. We can use ",(0,i.jsx)(n.code,{children:"React.Fragment"})," to define multiple screens:"]}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsx)(a.Z,{value:"static",label:"Static",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const SignInContext = React.createContext();\n\nfunction useIsSignedIn() {\n const isSignedIn = React.useContext(SignInContext);\n return isSignedIn;\n}\n\nfunction useIsSignedOut() {\n const isSignedIn = React.useContext(SignInContext);\n return !isSignedIn;\n}\n\n/* content */\n\nexport default function App() {\n /* content */\n\n const isSignedIn = userToken != null;\n\n return (\n \n \n \n );\n}\n"})})}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'state.userToken == null ? (\n <>\n \n \n \n \n) : (\n <>\n \n \n \n);\n'})})})]}),"\n",(0,i.jsx)(n.admonition,{type:"tip",children:(0,i.jsx)(n.p,{children:"If you have both your login-related screens and rest of the screens in two different Stack navigators, we recommend to use a single Stack navigator and place the conditional inside instead of using 2 different navigators. This makes it possible to have a proper transition animation during login/logout."})}),"\n",(0,i.jsx)(n.h2,{id:"implement-the-logic-for-restoring-the-token",children:"Implement the logic for restoring the token"}),"\n",(0,i.jsx)(n.admonition,{type:"note",children:(0,i.jsx)(n.p,{children:"The following is just an example of how you might implement the logic for authentication in your app. You don't need to follow it as is."})}),"\n",(0,i.jsx)(n.p,{children:"From the previous snippet, we can see that we need 3 state variables:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"isLoading"})," - We set this to ",(0,i.jsx)(n.code,{children:"true"})," when we're trying to check if we already have a token saved in ",(0,i.jsx)(n.code,{children:"SecureStore"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"isSignout"})," - We set this to ",(0,i.jsx)(n.code,{children:"true"})," when user is signing out, otherwise set it to ",(0,i.jsx)(n.code,{children:"false"})]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"userToken"})," - The token for the user. If it's non-null, we assume the user is logged in, otherwise not."]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"So we need to:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsx)(n.li,{children:"Add some logic for restoring token, signing in and signing out"}),"\n",(0,i.jsx)(n.li,{children:"Expose methods for signing in and signing out to other components"}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["We'll use ",(0,i.jsx)(n.code,{children:"React.useReducer"})," and ",(0,i.jsx)(n.code,{children:"React.useContext"})," in this guide. But if you're using a state management library such as Redux or Mobx, you can use them for this functionality instead. In fact, in bigger apps, a global state management library is more suitable for storing authentication tokens. You can adapt the same approach to your state management library."]}),"\n",(0,i.jsx)(n.p,{children:"First we'll need to create a context for auth where we can expose the necessary methods:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"import * as React from 'react';\n\nconst AuthContext = React.createContext();\n"})}),"\n",(0,i.jsx)(n.p,{children:"In our component, we will:"}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:["Store the token and loading state in ",(0,i.jsx)(n.code,{children:"useReducer"})]}),"\n",(0,i.jsxs)(n.li,{children:["Persist it to ",(0,i.jsx)(n.code,{children:"SecureStore"})," and read it from there on app launch"]}),"\n",(0,i.jsxs)(n.li,{children:["Expose the methods for sign in and sign out to child components using ",(0,i.jsx)(n.code,{children:"AuthContext"})]}),"\n"]}),"\n",(0,i.jsx)(n.p,{children:"So our component will look like this:"}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsx)(a.Z,{value:"static",label:"Static",default:!0,children:(0,i.jsx)(n.pre,{"data-name":"Signing in and signing out with AuthContext","data-snack":"true","data-dependencies":"expo-secure-store",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store',children:"// codeblock-focus-start\nimport * as React from 'react';\nimport * as SecureStore from 'expo-secure-store';\n\n// codeblock-focus-end\nimport { Text, TextInput, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\n\nconst AuthContext = React.createContext();\n\nconst SignInContext = React.createContext();\n\nfunction useIsSignedIn() {\n const isSignedIn = React.useContext(SignInContext);\n return isSignedIn;\n}\n\nfunction useIsSignedOut() {\n const isSignedIn = React.useContext(SignInContext);\n return !isSignedIn;\n}\n\nfunction SplashScreen() {\n return (\n \n Loading...\n \n );\n}\n\nfunction HomeScreen() {\n const { signOut } = React.useContext(AuthContext);\n\n return (\n \n Signed in!\n \n \n );\n}\n\nfunction SignInScreen() {\n const [username, setUsername] = React.useState('');\n const [password, setPassword] = React.useState('');\n\n const { signIn } = React.useContext(AuthContext);\n\n return (\n \n \n \n \n \n );\n}\n\n// codeblock-focus-start\nexport default function App() {\n const [state, dispatch] = React.useReducer(\n (prevState, action) => {\n switch (action.type) {\n case 'RESTORE_TOKEN':\n return {\n ...prevState,\n userToken: action.token,\n isLoading: false,\n };\n case 'SIGN_IN':\n return {\n ...prevState,\n isSignout: false,\n userToken: action.token,\n };\n case 'SIGN_OUT':\n return {\n ...prevState,\n isSignout: true,\n userToken: null,\n };\n }\n },\n {\n isLoading: true,\n isSignout: false,\n userToken: null,\n }\n );\n\n React.useEffect(() => {\n // Fetch the token from storage then navigate to our appropriate place\n const bootstrapAsync = async () => {\n let userToken;\n\n try {\n // Restore token stored in `SecureStore` or any other encrypted storage\n userToken = await SecureStore.getItemAsync('userToken');\n } catch (e) {\n // Restoring token failed\n }\n\n // After restoring token, we may need to validate it in production apps\n\n // This will switch to the App screen or Auth screen and this loading\n // screen will be unmounted and thrown away.\n dispatch({ type: 'RESTORE_TOKEN', token: userToken });\n };\n\n bootstrapAsync();\n }, []);\n\n const authContext = React.useMemo(\n () => ({\n signIn: async (data) => {\n // In a production app, we need to send some data (usually username, password) to server and get a token\n // We will also need to handle errors if sign in failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n signOut: () => dispatch({ type: 'SIGN_OUT' }),\n signUp: async (data) => {\n // In a production app, we need to send user data to server and get a token\n // We will also need to handle errors if sign up failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n }),\n []\n );\n\n if (state.isLoading) {\n // We haven't finished checking for the token yet\n return ;\n }\n\n if (state.isLoading) {\n return ;\n }\n\n const isSignedIn = state.userToken != null;\n\n return (\n \n \n \n \n \n );\n}\n\nconst RootStack = createNativeStackNavigator({\n screens: {\n Home: {\n if: useIsSignedIn,\n screen: HomeScreen,\n },\n SignIn: {\n screen: SignInScreen,\n options: {\n title: 'Sign in',\n },\n if: useIsSignedOut,\n },\n },\n});\n\nconst Navigation = createStaticNavigation(RootStack);\n// codeblock-focus-end\n"})})}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{"data-name":"Signing in and signing out with AuthContext","data-snack":"true","data-dependencies":"expo-secure-store",children:(0,i.jsx)(n.code,{className:"language-js",metastring:'name="Signing in and signing out with AuthContext" snack dependencies=expo-secure-store',children:"// codeblock-focus-start\nimport * as React from 'react';\nimport * as SecureStore from 'expo-secure-store';\n\n// codeblock-focus-end\nimport { Text, TextInput, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { Button } from '@react-navigation/elements';\n\nconst AuthContext = React.createContext();\n\nfunction SplashScreen() {\n return (\n \n Loading...\n \n );\n}\n\nfunction HomeScreen() {\n const { signOut } = React.useContext(AuthContext);\n\n return (\n \n Signed in!\n \n \n );\n}\n\nfunction SignInScreen() {\n const [username, setUsername] = React.useState('');\n const [password, setPassword] = React.useState('');\n\n const { signIn } = React.useContext(AuthContext);\n\n return (\n \n \n \n \n \n );\n}\n\nconst Stack = createNativeStackNavigator();\n\n// codeblock-focus-start\nexport default function App() {\n const [state, dispatch] = React.useReducer(\n (prevState, action) => {\n switch (action.type) {\n case 'RESTORE_TOKEN':\n return {\n ...prevState,\n userToken: action.token,\n isLoading: false,\n };\n case 'SIGN_IN':\n return {\n ...prevState,\n isSignout: false,\n userToken: action.token,\n };\n case 'SIGN_OUT':\n return {\n ...prevState,\n isSignout: true,\n userToken: null,\n };\n }\n },\n {\n isLoading: true,\n isSignout: false,\n userToken: null,\n }\n );\n\n React.useEffect(() => {\n // Fetch the token from storage then navigate to our appropriate place\n const bootstrapAsync = async () => {\n let userToken;\n\n try {\n // Restore token stored in `SecureStore` or any other encrypted storage\n userToken = await SecureStore.getItemAsync('userToken');\n } catch (e) {\n // Restoring token failed\n }\n\n // After restoring token, we may need to validate it in production apps\n\n // This will switch to the App screen or Auth screen and this loading\n // screen will be unmounted and thrown away.\n dispatch({ type: 'RESTORE_TOKEN', token: userToken });\n };\n\n bootstrapAsync();\n }, []);\n\n const authContext = React.useMemo(\n () => ({\n signIn: async (data) => {\n // In a production app, we need to send some data (usually username, password) to server and get a token\n // We will also need to handle errors if sign in failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n signOut: () => dispatch({ type: 'SIGN_OUT' }),\n signUp: async (data) => {\n // In a production app, we need to send user data to server and get a token\n // We will also need to handle errors if sign up failed\n // After getting token, we need to persist the token using `SecureStore` or any other encrypted storage\n // In the example, we'll use a dummy token\n\n dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });\n },\n }),\n []\n );\n\n return (\n \n \n \n {state.isLoading ? (\n // We haven't finished checking for the token yet\n \n ) : state.userToken == null ? (\n // No token found, user isn't signed in\n \n ) : (\n // User is signed in\n \n )}\n \n \n \n );\n}\n// codeblock-focus-end\n"})})})]}),"\n",(0,i.jsx)(n.h2,{id:"fill-in-other-components",children:"Fill in other components"}),"\n",(0,i.jsx)(n.p,{children:"We won't talk about how to implement the text inputs and buttons for the authentication screen, that is outside of the scope of navigation. We'll just fill in some placeholder content."}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"function SignInScreen() {\n const [username, setUsername] = React.useState('');\n const [password, setPassword] = React.useState('');\n\n const { signIn } = React.useContext(AuthContext);\n\n return (\n \n \n \n \n \n );\n}\n"})}),"\n",(0,i.jsx)(n.p,{children:"You can similarly fill in the other screens according to your requirements."}),"\n",(0,i.jsx)(n.h2,{id:"removing-shared-screens-when-auth-state-changes",children:"Removing shared screens when auth state changes"}),"\n",(0,i.jsx)(n.p,{children:"Consider the following example:"}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsx)(a.Z,{value:"static",label:"Static",default:!0,children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n groups: {\n LoggedIn: {\n if: useIsSignedIn,\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n },\n LoggedOut: {\n if: useIsSignedOut,\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n },\n },\n },\n screens: {\n Help: HelpScreen,\n },\n});\n"})})}),(0,i.jsx)(a.Z,{value:"dynamic",label:"Dynamic",children:(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'isSignedIn ? (\n <>\n \n \n \n \n) : (\n <>\n \n \n \n \n);\n'})})})]}),"\n",(0,i.jsxs)(n.p,{children:["Here we have specific screens such as ",(0,i.jsx)(n.code,{children:"SignIn"}),", ",(0,i.jsx)(n.code,{children:"Home"})," etc. which are only shown depending on the sign in state. But we also have the ",(0,i.jsx)(n.code,{children:"Help"})," screen which can be shown regardless of the login status. This also means that if the sign in state changes when the user is in the ",(0,i.jsx)(n.code,{children:"Help"})," screen, they'll stay on the ",(0,i.jsx)(n.code,{children:"Help"})," screen."]}),"\n",(0,i.jsxs)(n.p,{children:["This can be a problem, we probably want the user to be taken to the ",(0,i.jsx)(n.code,{children:"SignIn"})," screen or ",(0,i.jsx)(n.code,{children:"Home"})," screen instead of keeping them on the ",(0,i.jsx)(n.code,{children:"Help"})," screen."]}),"\n",(0,i.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,i.jsxs)(a.Z,{value:"static",label:"Static",default:!0,children:[(0,i.jsxs)(n.p,{children:["To make this work, we can move the ",(0,i.jsx)(n.code,{children:"Help"})," screen to both of the groups instead of keeping it outside. This will ensure that the ",(0,i.jsx)(n.a,{href:"/docs/7.x/screen#navigation-key",children:(0,i.jsx)(n.code,{children:"navigationKey"})})," (the name of the group) for the screen changes when the sign in state changes."]}),(0,i.jsx)(n.p,{children:"So our updated code will look like the following:"}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:"const RootStack = createNativeStackNavigator({\n groups: {\n LoggedIn: {\n if: useIsSignedIn,\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n Help: HelpScreen,\n },\n },\n LoggedOut: {\n if: useIsSignedOut,\n screens: {\n SignIn: SignInScreen,\n SignUp: SignUpScreen,\n Help: HelpScreen,\n },\n },\n },\n});\n"})})]}),(0,i.jsxs)(a.Z,{value:"dynamic",label:"Dynamic",children:[(0,i.jsxs)(n.p,{children:["To make this work, we can use ",(0,i.jsx)(n.a,{href:"/docs/7.x/screen#navigation-key",children:(0,i.jsx)(n.code,{children:"navigationKey"})}),". When the ",(0,i.jsx)(n.code,{children:"navigationKey"})," changes, React Navigation will remove all the screen."]}),(0,i.jsx)(n.p,{children:"So our updated code will look like the following:"}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'<>\n {isSignedIn ? (\n <>\n \n \n \n ) : (\n <>\n \n \n \n )}\n \n\n'})}),(0,i.jsxs)(n.p,{children:["If you have a bunch of shared screens, you can also use ",(0,i.jsxs)(n.a,{href:"/docs/7.x/group#navigation-key",children:[(0,i.jsx)(n.code,{children:"navigationKey"})," with a ",(0,i.jsx)(n.code,{children:"Group"})]})," to remove all of the screens in the group. For example:"]}),(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-js",children:'<>\n {isSignedIn ? (\n <>\n \n \n \n ) : (\n <>\n \n \n \n )}\n \n \n \n \n\n'})})]})]}),"\n",(0,i.jsx)(n.h2,{id:"dont-manually-navigate-when-conditionally-rendering-screens",children:"Don't manually navigate when conditionally rendering screens"}),"\n",(0,i.jsxs)(n.p,{children:["It's important to note that when using such a setup, you ",(0,i.jsx)(n.strong,{children:"don't manually navigate"})," to the ",(0,i.jsx)(n.code,{children:"Home"})," screen by calling ",(0,i.jsx)(n.code,{children:"navigation.navigate('Home')"})," or any other method. ",(0,i.jsx)(n.strong,{children:"React Navigation will automatically navigate to the correct screen"})," when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," changes - ",(0,i.jsx)(n.code,{children:"Home"})," screen when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," becomes ",(0,i.jsx)(n.code,{children:"true"}),", and to ",(0,i.jsx)(n.code,{children:"SignIn"})," screen when ",(0,i.jsx)(n.code,{children:"isSignedIn"})," becomes ",(0,i.jsx)(n.code,{children:"false"}),". You'll get an error if you attempt to navigate manually."]})]})}function g(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(h,{...e})}):h(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>a});t(67294);var i=t(86010);const s={tabItem:"tabItem_Ymn6"};var o=t(85893);function a(e){let{children:n,hidden:t,className:a}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,i.Z)(s.tabItem,a),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>k});var i=t(67294),s=t(86010),o=t(12466),a=t(16550),r=t(20469),c=t(91980),l=t(67392),d=t(50012);function u(e){var n,t;return null!=(n=null==(t=i.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,i.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:t.filter(Boolean))?n:[]}function h(e){const{values:n,children:t}=e;return(0,i.useMemo)((()=>{const e=null!=n?n:function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:i,default:s}}=e;return{value:n,label:t,attributes:i,default:s}}))}(t);return function(e){const n=(0,l.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,t])}function g(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:t}=e;const s=(0,a.k6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(o),(0,i.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(s.location.search);n.set(o,e),s.replace({...s.location,search:n.toString()})}),[o,s])]}function S(e){const{defaultValue:n,queryString:t=!1,groupId:s}=e,o=h(e),[a,c]=(0,i.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:i}=e;if(0===i.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:i}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+i.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const s=null!=(n=i.find((e=>e.default)))?n:i[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o}))),[l,u]=p({queryString:t,groupId:s}),[S,m]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[s,o]=(0,d.Nk)(t);return[s,(0,i.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:s}),x=(()=>{const e=null!=l?l:S;return g({value:e,tabValues:o})?e:null})();(0,r.Z)((()=>{x&&c(x)}),[x]);return{selectedValue:a,selectValue:(0,i.useCallback)((e=>{if(!g({value:e,tabValues:o}))throw new Error("Can't select invalid tab value="+e);c(e),u(e),m(e)}),[u,m,o]),tabValues:o}}var m=t(72389);const x={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var f=t(85893);function w(e){let{className:n,block:t,selectedValue:i,selectValue:a,tabValues:r}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),s=r[t].value;s!==i&&(l(n),a(s))},u=e=>{var n;let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var i;const n=c.indexOf(e.currentTarget)+1;t=null!=(i=c[n])?i:c[0];break}case"ArrowLeft":{var s;const n=c.indexOf(e.currentTarget)-1;t=null!=(s=c[n])?s:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,f.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,s.Z)("tabs",{"tabs--block":t},n),children:r.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,f.jsx)("li",{role:"tab",tabIndex:i===n?0:-1,"aria-selected":i===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...o,className:(0,s.Z)("tabs__item",x.tabItem,null==o?void 0:o.className,{"tabs__item--active":i===n}),children:null!=t?t:n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:s}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===s));return e?(0,i.cloneElement)(e,{className:"margin-top--md"}):null}return(0,f.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,i.cloneElement)(e,{key:n,hidden:e.props.value!==s})))})}function j(e){const n=S(e);return(0,f.jsxs)("div",{className:(0,s.Z)("tabs-container",x.tabList),children:[(0,f.jsx)(w,{...e,...n}),(0,f.jsx)(v,{...e,...n})]})}function k(e){const n=(0,m.Z)();return(0,f.jsx)(j,{...e,children:u(e.children)},String(n))}},11151:(e,n,t)=>{t.d(n,{Z:()=>r,a:()=>a});var i=t(67294);const s={},o=i.createContext(s);function a(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function r(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:a(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/be5f3a5f.bc3dd06f.js b/assets/js/be5f3a5f.bc3dd06f.js deleted file mode 100644 index 7d1a7b2bf66..00000000000 --- a/assets/js/be5f3a5f.bc3dd06f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[12344],{5385:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>c,toc:()=>h});var t=r(85893),a=r(11151),i=r(74866),o=r(85162);const s={id:"drawer-navigator",title:"Drawer Navigator",sidebar_label:"Drawer"},d=void 0,c={id:"drawer-navigator",title:"Drawer Navigator",description:"Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.",source:"@site/versioned_docs/version-7.x/drawer-navigator.md",sourceDirName:".",slug:"/drawer-navigator",permalink:"/docs/7.x/drawer-navigator",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/drawer-navigator.md",tags:[],version:"7.x",frontMatter:{id:"drawer-navigator",title:"Drawer Navigator",sidebar_label:"Drawer"},sidebar:"docs",previous:{title:"Bottom Tabs",permalink:"/docs/7.x/bottom-tab-navigator"},next:{title:"Material Top Tabs",permalink:"/docs/7.x/material-top-tab-navigator"}},l={},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:"backBehavior",id:"backbehavior",level:4},{value:"defaultStatus",id:"defaultstatus",level:4},{value:"detachInactiveScreens",id:"detachinactivescreens",level:4},{value:"drawerContent",id:"drawercontent",level:4},{value:"Providing a custom drawerContent",id:"providing-a-custom-drawercontent",level:5},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"lazy",id:"lazy",level:4},{value:"drawerLabel",id:"drawerlabel",level:4},{value:"drawerIcon",id:"drawericon",level:4},{value:"drawerActiveTintColor",id:"draweractivetintcolor",level:4},{value:"drawerActiveBackgroundColor",id:"draweractivebackgroundcolor",level:4},{value:"drawerInactiveTintColor",id:"drawerinactivetintcolor",level:4},{value:"drawerInactiveBackgroundColor",id:"drawerinactivebackgroundcolor",level:4},{value:"drawerItemStyle",id:"draweritemstyle",level:4},{value:"drawerLabelStyle",id:"drawerlabelstyle",level:4},{value:"drawerContentContainerStyle",id:"drawercontentcontainerstyle",level:4},{value:"drawerContentStyle",id:"drawercontentstyle",level:4},{value:"drawerStyle",id:"drawerstyle",level:4},{value:"drawerPosition",id:"drawerposition",level:4},{value:"drawerType",id:"drawertype",level:4},{value:"drawerHideStatusBarOnOpen",id:"drawerhidestatusbaronopen",level:4},{value:"drawerStatusBarAnimation",id:"drawerstatusbaranimation",level:4},{value:"overlayColor",id:"overlaycolor",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"gestureHandlerProps",id:"gesturehandlerprops",level:4},{value:"swipeEnabled",id:"swipeenabled",level:4},{value:"swipeEdgeWidth",id:"swipeedgewidth",level:4},{value:"swipeMinDistance",id:"swipemindistance",level:4},{value:"keyboardDismissMode",id:"keyboarddismissmode",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"popToTopOnBlur",id:"poptotoponblur",level:4},{value:"Header related options",id:"header-related-options",level:3},{value:"header",id:"header",level:4},{value:"Specify a height in headerStyle",id:"specify-a-height-in-headerstyle",level:5},{value:"headerShown",id:"headershown",level:4},{value:"Events",id:"events",level:3},{value:"drawerItemPress",id:"draweritempress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"openDrawer",id:"opendrawer",level:4},{value:"closeDrawer",id:"closedrawer",level:4},{value:"toggleDrawer",id:"toggledrawer",level:4},{value:"jumpTo",id:"jumpto",level:4},{value:"Hooks",id:"hooks",level:3},{value:"useDrawerProgress",id:"usedrawerprogress",level:4},{value:"useDrawerStatus",id:"usedrawerstatus",level:4},{value:"Nesting drawer navigators inside others",id:"nesting-drawer-navigators-inside-others",level:2}];function u(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures."}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer.mp4"})}),"\n",(0,t.jsxs)(n.p,{children:["This wraps ",(0,t.jsx)(n.a,{href:"/docs/7.x/drawer-layout",children:(0,t.jsx)(n.code,{children:"react-native-drawer-layout"})}),". If you want to use the drawer without React Navigation integration, use the library directly instead."]}),"\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/drawer",children:(0,t.jsx)(n.code,{children:"@react-navigation/drawer"})}),":"]}),"\n",(0,t.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(o.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/drawer@next\n"})})}),(0,t.jsx)(o.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/drawer@next\n"})})}),(0,t.jsx)(o.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/drawer@next\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"Then, you need to install and configure the libraries that are required by the drawer navigator:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["First, install ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/",children:(0,t.jsx)(n.code,{children:"react-native-gesture-handler"})})," and ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:(0,t.jsx)(n.code,{children:"react-native-reanimated"})})," (at least version 2 or 3)."]}),"\n",(0,t.jsx)(n.p,{children:"If you have a Expo managed project, in your project directory, run:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npx expo install react-native-gesture-handler react-native-reanimated\n"})}),"\n",(0,t.jsx)(n.p,{children:"If you have a bare React Native project, in your project directory, run:"}),"\n",(0,t.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(o.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install react-native-gesture-handler react-native-reanimated\n"})})}),(0,t.jsx)(o.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn add react-native-gesture-handler react-native-reanimated\n"})})}),(0,t.jsx)(o.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm add react-native-gesture-handler react-native-reanimated\n"})})})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Configure the Reanimated Babel Plugin in your project following the ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started",children:"installation guide"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["To finalize the installation of ",(0,t.jsx)(n.code,{children:"react-native-gesture-handler"}),", we need to conditionally import it. To do this, create 2 files:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="gesture-handler.native.js"',children:"// Only import react-native-gesture-handler on native platforms\nimport 'react-native-gesture-handler';\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="gesture-handler.js"',children:"// Don't import react-native-gesture-handler on web\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Now, add the following at the ",(0,t.jsx)(n.strong,{children:"top"})," (make sure it's at the top and there's nothing else before it) of your entry file, such as ",(0,t.jsx)(n.code,{children:"index.js"})," or ",(0,t.jsx)(n.code,{children:"App.js"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import './gesture-handler';\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Since the drawer navigator doesn't use ",(0,t.jsx)(n.code,{children:"react-native-gesture-handler"})," on Web, this avoids unnecessarily increasing the bundle size."]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms."})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["If you're on a Mac and developing for iOS, you also need to install the pods (via ",(0,t.jsx)(n.a,{href:"https://cocoapods.org/",children:"Cocoapods"}),") to complete the linking."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npx pod-install ios\n"})}),"\n"]}),"\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/drawer"}),":"]}),"\n",(0,t.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,t.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,t.jsx)(n.pre,{"data-name":"Drawer Navigator","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\n// codeblock-focus-start\nconst MyDrawer = createDrawerNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(MyDrawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,t.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,t.jsx)(n.pre,{"data-name":"Drawer Navigator","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\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 \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,t.jsx)(n.admonition,{type:"note",children:(0,t.jsxs)(n.p,{children:["For a complete usage guide see ",(0,t.jsx)(n.a,{href:"/docs/7.x/drawer-based-navigation",children:"Drawer Navigation"}),"."]})}),"\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:["In addition to the ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigator#configuration",children:"common props"})," shared by all navigators, the drawer navigator component accepts the following additional props:"]}),"\n",(0,t.jsx)(n.h4,{id:"backbehavior",children:(0,t.jsx)(n.code,{children:"backBehavior"})}),"\n",(0,t.jsxs)(n.p,{children:["This controls what happens when ",(0,t.jsx)(n.code,{children:"goBack"})," is called in the navigator. This includes pressing the device's back button or back gesture on Android."]}),"\n",(0,t.jsx)(n.p,{children:"It supports the following values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"firstRoute"})," - return to the first screen defined in the navigator (default)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"initialRoute"})," - return to initial screen passed in ",(0,t.jsx)(n.code,{children:"initialRouteName"})," prop, if not passed, defaults to the first screen"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"order"})," - return to screen defined before the focused screen"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"history"})," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"none"})," - do not handle back button"]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"defaultstatus",children:(0,t.jsx)(n.code,{children:"defaultStatus"})}),"\n",(0,t.jsxs)(n.p,{children:["The default status of the drawer - whether the drawer should stay ",(0,t.jsx)(n.code,{children:"open"})," or ",(0,t.jsx)(n.code,{children:"closed"})," by default."]}),"\n",(0,t.jsxs)(n.p,{children:["When this is set to ",(0,t.jsx)(n.code,{children:"open"}),", the drawer will be open from the initial render. It can be closed normally using gestures or programmatically. However, when going back, the drawer will re-open if it was closed. This is essentially the opposite of the default behavior of the drawer where it starts ",(0,t.jsx)(n.code,{children:"closed"}),", and the back button closes an open drawer."]}),"\n",(0,t.jsx)(n.h4,{id:"detachinactivescreens",children:(0,t.jsx)(n.code,{children:"detachInactiveScreens"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with ",(0,t.jsx)(n.a,{href:"https://github.com/software-mansion/react-native-screens",children:"react-native-screens"}),". Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"drawercontent",children:(0,t.jsx)(n.code,{children:"drawerContent"})}),"\n",(0,t.jsx)(n.p,{children:"Function that returns React element to render as the content of the drawer, for example, navigation items"}),"\n",(0,t.jsx)(n.p,{children:"The content component receives the following props by default:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"state"})," - The ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigation-state",children:"navigation state"})," of the navigator."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"navigation"})," - The navigation object for the navigator."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"descriptors"})," - An descriptor object containing options for the drawer screens. The options can be accessed at ",(0,t.jsx)(n.code,{children:"descriptors[route.key].options"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.h5,{id:"providing-a-custom-drawercontent",children:["Providing a custom ",(0,t.jsx)(n.code,{children:"drawerContent"})]}),"\n",(0,t.jsxs)(n.p,{children:["The default component for the drawer is scrollable and only contains links for the routes in the RouteConfig. You can easily override the default component to add a header, footer, or other content to the drawer. The default content component is exported as ",(0,t.jsx)(n.code,{children:"DrawerContent"}),". It renders a ",(0,t.jsx)(n.code,{children:"DrawerItemList"})," component inside a ",(0,t.jsx)(n.code,{children:"ScrollView"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["By default, the drawer is scrollable and supports devices with notches. If you customize the content, you can use ",(0,t.jsx)(n.code,{children:"DrawerContentScrollView"})," to handle this automatically:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import {\n DrawerContentScrollView,\n DrawerItemList,\n} from '@react-navigation/drawer';\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To add additional items in the drawer, you can use the ",(0,t.jsx)(n.code,{children:"DrawerItem"})," component:"]}),"\n",(0,t.jsx)("samp",{id:"custom-drawer-content"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"function CustomDrawerContent(props) {\n return (\n \n \n Linking.openURL('https://mywebsite.com/help')}\n />\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"DrawerItem"})," component accepts the following props:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"label"})," (required): The label text of the item. Can be string, or a function returning a react element. e.g. ",(0,t.jsx)(n.code,{children:"({ focused, color }) => {focused ? 'Focused text' : 'Unfocused text'}"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"icon"}),": Icon to display for the item. Accepts a function returning a react element. e.g. ",(0,t.jsx)(n.code,{children:"({ focused, color, size }) => "}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"focused"}),": Boolean indicating whether to highlight the drawer item as active."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onPress"})," (required): Function to execute on press."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"activeTintColor"}),": Color for the icon and label when the item is active."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"inactiveTintColor"}),": Color for the icon and label when the item is inactive."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"activeBackgroundColor"}),": Background color for item when it's active."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"inactiveBackgroundColor"}),": Background color for item when it's inactive."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"labelStyle"}),": Style object for the label ",(0,t.jsx)(n.code,{children:"Text"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"style"}),": Style object for the wrapper ",(0,t.jsx)(n.code,{children:"View"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Note that you ",(0,t.jsx)(n.strong,{children:"cannot"})," use the ",(0,t.jsx)(n.code,{children:"useNavigation"})," hook inside the ",(0,t.jsx)(n.code,{children:"drawerContent"})," since ",(0,t.jsx)(n.code,{children:"useNavigation"})," is only available inside screens. You get a ",(0,t.jsx)(n.code,{children:"navigation"})," prop for your ",(0,t.jsx)(n.code,{children:"drawerContent"})," which you can use instead:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"function CustomDrawerContent({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n >\n Go somewhere\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To use the custom component, we need to pass it in the ",(0,t.jsx)(n.code,{children:"drawerContent"})," prop:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" }>\n {/* screens */}\n\n"})}),"\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. These can be specified under ",(0,t.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.navigator"})," or ",(0,t.jsx)(n.code,{children:"options"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.Screen"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"title",children:(0,t.jsx)(n.code,{children:"title"})}),"\n",(0,t.jsxs)(n.p,{children:["A generic title that can be used as a fallback for ",(0,t.jsx)(n.code,{children:"headerTitle"})," and ",(0,t.jsx)(n.code,{children:"drawerLabel"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"lazy",children:(0,t.jsx)(n.code,{children:"lazy"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether this screen should render the first time it's accessed. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),". Set it to ",(0,t.jsx)(n.code,{children:"false"})," if you want to render the screen on initial render."]}),"\n",(0,t.jsx)(n.h4,{id:"drawerlabel",children:(0,t.jsx)(n.code,{children:"drawerLabel"})}),"\n",(0,t.jsxs)(n.p,{children:["String or a function that given ",(0,t.jsx)(n.code,{children:"{ focused: boolean, color: string }"})," returns a React.Node, to display in drawer sidebar. When undefined, scene ",(0,t.jsx)(n.code,{children:"title"})," is used."]}),"\n",(0,t.jsx)(n.h4,{id:"drawericon",children:(0,t.jsx)(n.code,{children:"drawerIcon"})}),"\n",(0,t.jsxs)(n.p,{children:["Function, that given ",(0,t.jsx)(n.code,{children:"{ focused: boolean, color: string, size: number }"})," returns a React.Node to display in drawer sidebar."]}),"\n",(0,t.jsx)(n.h4,{id:"draweractivetintcolor",children:(0,t.jsx)(n.code,{children:"drawerActiveTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"Color for the icon and label in the active item in the drawer."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerActiveTintColor.png",width:"500",alt:"Drawer active tint color"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" drawerActiveTintColor: 'green',\n"})}),"\n",(0,t.jsx)(n.h4,{id:"draweractivebackgroundcolor",children:(0,t.jsx)(n.code,{children:"drawerActiveBackgroundColor"})}),"\n",(0,t.jsx)(n.p,{children:"Background color for the active item in the drawer."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerActiveBackgroundColor.png",width:"500",alt:"Drawer active background color"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" screenOptions={{\n drawerActiveTintColor: 'white',\n drawerActiveBackgroundColor: '#003CB3',\n drawerLabelStyle: {\n color: 'white',\n },\n }}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerinactivetintcolor",children:(0,t.jsx)(n.code,{children:"drawerInactiveTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"Color for the icon and label in the inactive items in the drawer."}),"\n",(0,t.jsx)(n.h4,{id:"drawerinactivebackgroundcolor",children:(0,t.jsx)(n.code,{children:"drawerInactiveBackgroundColor"})}),"\n",(0,t.jsx)(n.p,{children:"Background color for the inactive items in the drawer."}),"\n",(0,t.jsx)(n.h4,{id:"draweritemstyle",children:(0,t.jsx)(n.code,{children:"drawerItemStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the single item, which can contain an icon and/or a label."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerItemStyle.png",width:"500",alt:"Drawer item style"}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" drawerItemStyle: {\n backgroundColor: '#9dd3c8',\n borderColor: 'black',\n orderWidth: 2,\n opacity: 0.6,\n },\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerlabelstyle",children:(0,t.jsx)(n.code,{children:"drawerLabelStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Style object to apply to the ",(0,t.jsx)(n.code,{children:"Text"})," style inside content section which renders a label."]}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerLabelStyle.png",width:"500",alt:"Drawer label style"}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" drawerLabelStyle: {\n color: 'black',\n fontSize: 20,\n fontFamily: 'Georgia',\n },\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawercontentcontainerstyle",children:(0,t.jsx)(n.code,{children:"drawerContentContainerStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Style object for the content section inside the ",(0,t.jsx)(n.code,{children:"ScrollView"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"drawercontentstyle",children:(0,t.jsx)(n.code,{children:"drawerContentStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the wrapper view."}),"\n",(0,t.jsx)(n.h4,{id:"drawerstyle",children:(0,t.jsx)(n.code,{children:"drawerStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the drawer component. You can pass a custom background color for a drawer or a custom width here."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerStyle.png",width:"500",alt:"Drawer style"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"\n {/* screens */}\n\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerposition",children:(0,t.jsx)(n.code,{children:"drawerPosition"})}),"\n",(0,t.jsxs)(n.p,{children:["Options are ",(0,t.jsx)(n.code,{children:"left"})," or ",(0,t.jsx)(n.code,{children:"right"}),". Defaults to ",(0,t.jsx)(n.code,{children:"left"})," for LTR languages and ",(0,t.jsx)(n.code,{children:"right"})," for RTL languages."]}),"\n",(0,t.jsx)(n.h4,{id:"drawertype",children:(0,t.jsx)(n.code,{children:"drawerType"})}),"\n",(0,t.jsx)(n.p,{children:"Type of the drawer. It determines how the drawer looks and animates."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"front"}),": Traditional drawer which covers the screen with an overlay behind it."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-front.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"back"}),": The drawer is revealed behind the screen on swipe."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-back.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"slide"}),": Both the screen and the drawer slide on swipe to reveal the drawer."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-slide.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"permanent"}),": A permanent drawer is shown as a sidebar. Useful for having always visible drawer on larger screens."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"slide"})," on iOS and ",(0,t.jsx)(n.code,{children:"front"})," on other platforms."]}),"\n",(0,t.jsxs)(n.p,{children:["You can conditionally specify the ",(0,t.jsx)(n.code,{children:"drawerType"})," to show a permanent drawer on bigger screens and a traditional drawer drawer on small screens:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { useWindowDimensions } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n const dimensions = useWindowDimensions();\n\n return (\n = 768 ? 'permanent' : 'front',\n }}\n >\n {/* Screens */}\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can also specify other props such as ",(0,t.jsx)(n.code,{children:"drawerStyle"})," based on screen size to customize the behavior. For example, you can combine it with ",(0,t.jsx)(n.code,{children:'defaultStatus="open"'})," to achieve a master-detail layout:"]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-masterDetail.mp4"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { useWindowDimensions } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n const dimensions = useWindowDimensions();\n\n const isLargeScreen = dimensions.width >= 768;\n\n return (\n \n {/* Screens */}\n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerhidestatusbaronopen",children:(0,t.jsx)(n.code,{children:"drawerHideStatusBarOnOpen"})}),"\n",(0,t.jsxs)(n.p,{children:["When set to ",(0,t.jsx)(n.code,{children:"true"}),', Drawer will hide the OS status bar whenever the drawer is pulled or when it\'s in an "open" state.']}),"\n",(0,t.jsx)(n.h4,{id:"drawerstatusbaranimation",children:(0,t.jsx)(n.code,{children:"drawerStatusBarAnimation"})}),"\n",(0,t.jsxs)(n.p,{children:["Animation of the statusbar when hiding it. use in combination with ",(0,t.jsx)(n.code,{children:"drawerHideStatusBarOnOpen"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["This is only supported on iOS. Defaults to ",(0,t.jsx)(n.code,{children:"slide"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"slide"})}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerStatusBarAnimation-slide.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"fade"})}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerStatusBarAnimation-fade.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"none"})}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"overlaycolor",children:(0,t.jsx)(n.code,{children:"overlayColor"})}),"\n",(0,t.jsxs)(n.p,{children:["Color overlay to be displayed on top of the content view when drawer gets open. The opacity is animated from ",(0,t.jsx)(n.code,{children:"0"})," to ",(0,t.jsx)(n.code,{children:"1"})," when the drawer opens."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/overlayColor.mp4"})}),"\n",(0,t.jsx)(n.h4,{id:"scenecontainerstyle",children:(0,t.jsx)(n.code,{children:"sceneContainerStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the component wrapping the screen content."}),"\n",(0,t.jsx)(n.h4,{id:"gesturehandlerprops",children:(0,t.jsx)(n.code,{children:"gestureHandlerProps"})}),"\n",(0,t.jsx)(n.p,{children:"Props to pass to the underlying pan gesture handler."}),"\n",(0,t.jsx)(n.p,{children:"This is not supported on Web."}),"\n",(0,t.jsx)(n.h4,{id:"swipeenabled",children:(0,t.jsx)(n.code,{children:"swipeEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether you can use swipe gestures to open or close the drawer. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Swipe gesture is not supported on Web."}),"\n",(0,t.jsx)(n.h4,{id:"swipeedgewidth",children:(0,t.jsx)(n.code,{children:"swipeEdgeWidth"})}),"\n",(0,t.jsx)(n.p,{children:"Allows for defining how far from the edge of the content view the swipe gesture should activate."}),"\n",(0,t.jsx)(n.p,{children:"This is not supported on Web."}),"\n",(0,t.jsx)(n.h4,{id:"swipemindistance",children:(0,t.jsx)(n.code,{children:"swipeMinDistance"})}),"\n",(0,t.jsx)(n.p,{children:"Minimum swipe distance threshold that should activate opening the drawer."}),"\n",(0,t.jsx)(n.h4,{id:"keyboarddismissmode",children:(0,t.jsx)(n.code,{children:"keyboardDismissMode"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the keyboard should be dismissed when the swipe gesture begins. Defaults to ",(0,t.jsx)(n.code,{children:"'on-drag'"}),". Set to ",(0,t.jsx)(n.code,{children:"'none'"})," to disable keyboard handling."]}),"\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.h4,{id:"poptotoponblur",children:(0,t.jsx)(n.code,{children:"popToTopOnBlur"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether any nested stack should be popped to the top of the stack when navigating away from this drawer screen. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["It only works when there is a stack navigator (e.g. ",(0,t.jsx)(n.a,{href:"/docs/7.x/stack-navigator",children:"stack navigator"})," or ",(0,t.jsx)(n.a,{href:"/docs/7.x/native-stack-navigator",children:"native stack navigator"}),") nested under the drawer navigator."]}),"\n",(0,t.jsx)(n.h3,{id:"header-related-options",children:"Header related options"}),"\n",(0,t.jsxs)(n.p,{children:["You can find the list of header related options ",(0,t.jsx)(n.a,{href:"/docs/7.x/elements#header",children:"here"}),". These ",(0,t.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be specified under ",(0,t.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.navigator"})," or ",(0,t.jsx)(n.code,{children:"options"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.Screen"}),". You don't have to be using ",(0,t.jsx)(n.code,{children:"@react-navigation/elements"})," directly to use these options, they are just documented in that page."]}),"\n",(0,t.jsx)(n.p,{children:"In addition to those, the following options are also supported in drawer:"}),"\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:"layout"})," - Dimensions of the screen, contains ",(0,t.jsx)(n.code,{children:"height"})," and ",(0,t.jsx)(n.code,{children:"width"})," properties."]}),"\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 }) => {\n const title = getHeaderTitle(options, route.name);\n\n return ;\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.jsxs)(n.h5,{id:"specify-a-height-in-headerstyle",children:["Specify a ",(0,t.jsx)(n.code,{children:"height"})," in ",(0,t.jsx)(n.code,{children:"headerStyle"})]}),"\n",(0,t.jsx)(n.p,{children:"If your custom header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches."}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"headerStyle: {\n height: 80, // Specify the height of your custom header\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use ",(0,t.jsx)(n.code,{children:"options.headerStyle"})," from the props."]}),"\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 or hide the header for the screen. The header is shown by default. Setting this to ",(0,t.jsx)(n.code,{children:"false"})," hides the header."]}),"\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:"draweritempress",children:(0,t.jsx)(n.code,{children:"drawerItemPress"})}),"\n",(0,t.jsx)(n.p,{children:"This event is fired when the user presses the button for the screen in the drawer. By default a drawer item press does several things:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"If the screen is not focused, drawer item press will focus that screen"}),"\n",(0,t.jsx)(n.li,{children:"If the screen is already focused, then it'll close the drawer"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["To prevent the default behavior, you can call ",(0,t.jsx)(n.code,{children:"event.preventDefault"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('drawerItemPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.p,{children:"If you have custom drawer content, make sure to emit this event."}),"\n",(0,t.jsx)(n.h3,{id:"helpers",children:"Helpers"}),"\n",(0,t.jsx)(n.p,{children:"The drawer navigator adds the following methods to the navigation object:"}),"\n",(0,t.jsx)(n.h4,{id:"opendrawer",children:(0,t.jsx)(n.code,{children:"openDrawer"})}),"\n",(0,t.jsx)(n.p,{children:"Opens the drawer pane."}),"\n",(0,t.jsx)("samp",{id:"drawer-open-close-toggle"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.openDrawer();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"closedrawer",children:(0,t.jsx)(n.code,{children:"closeDrawer"})}),"\n",(0,t.jsx)(n.p,{children:"Closes the drawer pane."}),"\n",(0,t.jsx)("samp",{id:"drawer-open-close-toggle"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.closeDrawer();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"toggledrawer",children:(0,t.jsx)(n.code,{children:"toggleDrawer"})}),"\n",(0,t.jsx)(n.p,{children:"Opens the drawer pane if closed, closes the drawer pane if opened."}),"\n",(0,t.jsx)("samp",{id:"drawer-open-close-toggle"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.toggleDrawer();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"jumpto",children:(0,t.jsx)(n.code,{children:"jumpTo"})}),"\n",(0,t.jsx)(n.p,{children:"Navigates to an existing screen in the drawer navigator. 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 jump 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)("samp",{id:"drawer-jump-to"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.jumpTo('Profile', { owner: 'Satya' });\n"})}),"\n",(0,t.jsx)(n.h3,{id:"hooks",children:"Hooks"}),"\n",(0,t.jsx)(n.p,{children:"The drawer navigator exports the following hooks:"}),"\n",(0,t.jsx)(n.h4,{id:"usedrawerprogress",children:(0,t.jsx)(n.code,{children:"useDrawerProgress"})}),"\n",(0,t.jsxs)(n.p,{children:["This hook returns the progress of the drawer. It is available in the screen components rendered by the drawer navigator as well as in the ",(0,t.jsx)(n.a,{href:"#drawercontent",children:"custom drawer content"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"progress"})," object is a ",(0,t.jsx)(n.code,{children:"SharedValue"})," that represents the animated position of the drawer (",(0,t.jsx)(n.code,{children:"0"})," is closed; ",(0,t.jsx)(n.code,{children:"1"})," is open). It can be used to animate elements based on the animation of the drawer with ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:"Reanimated"}),":"]}),"\n",(0,t.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,t.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,t.jsx)(n.pre,{"data-name":"Drawer animation progress","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer animation progress" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport {\n createDrawerNavigator,\n useDrawerProgress,\n} from '@react-navigation/drawer';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\nfunction HomeScreen() {\n // highlight-next-line\n const progress = useDrawerProgress();\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateX: progress.value * -100 }],\n }));\n\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n\nconst MyDrawer = createDrawerNavigator({\n screens: {\n Home: HomeScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(MyDrawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,t.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,t.jsx)(n.pre,{"data-name":"Drawer animation progress","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer animation progress" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport {\n createDrawerNavigator,\n useDrawerProgress,\n} from '@react-navigation/drawer';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\nfunction HomeScreen() {\n // highlight-next-line\n const progress = useDrawerProgress();\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateX: progress.value * -100 }],\n }));\n\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,t.jsxs)(n.p,{children:["If you are using class components, you can use the ",(0,t.jsx)(n.code,{children:"DrawerProgressContext"})," to get the progress value."]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"useDrawerProgress"})," hook (or ",(0,t.jsx)(n.code,{children:"DrawerProgressContext"}),") will return a mock value on Web since Reanimated is not used on Web. The mock value can only represent the open state of the drawer (",(0,t.jsx)(n.code,{children:"0"})," when closed, ",(0,t.jsx)(n.code,{children:"1"})," when open), and not the progress of the drawer."]})}),"\n",(0,t.jsx)(n.h4,{id:"usedrawerstatus",children:(0,t.jsx)(n.code,{children:"useDrawerStatus"})}),"\n",(0,t.jsxs)(n.p,{children:["You can check if the drawer is open by using the ",(0,t.jsx)(n.code,{children:"useDrawerStatus"})," hook."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { useDrawerStatus } from '@react-navigation/drawer';\n\n// ...\n\nconst isDrawerOpen = useDrawerStatus() === 'open';\n"})}),"\n",(0,t.jsxs)(n.p,{children:["If you can't use the hook, you can also use the ",(0,t.jsx)(n.code,{children:"getDrawerStatusFromState"})," helper:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { getDrawerStatusFromState } from '@react-navigation/drawer';\n\n// ...\n\nconst isDrawerOpen = getDrawerStatusFromState(navigation.getState()) === 'open';\n"})}),"\n",(0,t.jsxs)(n.p,{children:["For class components, you can listen to the ",(0,t.jsx)(n.code,{children:"state"})," event to check if the drawer was opened or closed:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"class Profile extends React.Component {\n componentDidMount() {\n this._unsubscribe = navigation.addListener('state', () => {\n const isDrawerOpen =\n getDrawerStatusFromState(navigation.getState()) === 'open';\n\n // do something\n });\n }\n\n componentWillUnmount() {\n this._unsubscribe();\n }\n\n render() {\n // Content of the component\n }\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"nesting-drawer-navigators-inside-others",children:"Nesting drawer navigators inside others"}),"\n",(0,t.jsx)(n.p,{children:"If a drawer navigator is nested inside of another navigator that provides some UI, for example, a tab navigator or stack navigator, then the drawer will be rendered below the UI from those navigators. The drawer will appear below the tab bar and below the header of the stack. You will need to make the drawer navigator the parent of any navigator where the drawer should be rendered on top of its UI."})]})}function p(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}},85162:(e,n,r)=>{r.d(n,{Z:()=>o});r(67294);var t=r(86010);const a={tabItem:"tabItem_Ymn6"};var i=r(85893);function o(e){let{children:n,hidden:r,className:o}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,t.Z)(a.tabItem,o),hidden:r,children:n})}},74866:(e,n,r)=>{r.d(n,{Z:()=>b});var t=r(67294),a=r(86010),i=r(12466),o=r(16550),s=r(20469),d=r(91980),c=r(67392),l=r(50012);function h(e){var n,r;return null!=(n=null==(r=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:r.filter(Boolean))?n:[]}function u(e){const{values:n,children:r}=e;return(0,t.useMemo)((()=>{const e=null!=n?n:function(e){return h(e).map((e=>{let{props:{value:n,label:r,attributes:t,default:a}}=e;return{value:n,label:r,attributes:t,default:a}}))}(r);return function(e){const n=(0,c.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,r])}function p(e){let{value:n,tabValues:r}=e;return r.some((e=>e.value===n))}function x(e){let{queryString:n=!1,groupId:r}=e;const a=(0,o.k6)(),i=function(e){let{queryString:n=!1,groupId:r}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,d._X)(i),(0,t.useCallback)((e=>{if(!i)return;const n=new URLSearchParams(a.location.search);n.set(i,e),a.replace({...a.location,search:n.toString()})}),[i,a])]}function j(e){const{defaultValue:n,queryString:r=!1,groupId:a}=e,i=u(e),[o,d]=(0,t.useState)((()=>function(e){var n;let{defaultValue:r,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(r){if(!p({value:r,tabValues:t}))throw new Error('Docusaurus error: The has a defaultValue "'+r+'" 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 r}const a=null!=(n=t.find((e=>e.default)))?n:t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:i}))),[c,h]=x({queryString:r,groupId:a}),[j,g]=function(e){let{groupId:n}=e;const r=function(e){return e?"docusaurus.tab."+e:null}(n),[a,i]=(0,l.Nk)(r);return[a,(0,t.useCallback)((e=>{r&&i.set(e)}),[r,i])]}({groupId:a}),w=(()=>{const e=null!=c?c:j;return p({value:e,tabValues:i})?e:null})();(0,s.Z)((()=>{w&&d(w)}),[w]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!p({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);d(e),h(e),g(e)}),[h,g,i]),tabValues:i}}var g=r(72389);const w={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=r(85893);function m(e){let{className:n,block:r,selectedValue:t,selectValue:o,tabValues:s}=e;const d=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),l=e=>{const n=e.currentTarget,r=d.indexOf(n),a=s[r].value;a!==t&&(c(n),o(a))},h=e=>{var n;let r=null;switch(e.key){case"Enter":l(e);break;case"ArrowRight":{var t;const n=d.indexOf(e.currentTarget)+1;r=null!=(t=d[n])?t:d[0];break}case"ArrowLeft":{var a;const n=d.indexOf(e.currentTarget)-1;r=null!=(a=d[n])?a:d[d.length-1];break}}null==(n=r)||n.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":r},n),children:s.map((e=>{let{value:n,label:r,attributes:i}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>d.push(e),onKeyDown:h,onClick:l,...i,className:(0,a.Z)("tabs__item",w.tabItem,null==i?void 0:i.className,{"tabs__item--active":t===n}),children:null!=r?r:n},n)}))})}function f(e){let{lazy:n,children:r,selectedValue:a}=e;const i=(Array.isArray(r)?r:[r]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=j(e);return(0,v.jsxs)("div",{className:(0,a.Z)("tabs-container",w.tabList),children:[(0,v.jsx)(m,{...e,...n}),(0,v.jsx)(f,{...e,...n})]})}function b(e){const n=(0,g.Z)();return(0,v.jsx)(y,{...e,children:h(e.children)},String(n))}},11151:(e,n,r)=>{r.d(n,{Z:()=>s,a:()=>o});var t=r(67294);const a={},i=t.createContext(a);function o(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/be5f3a5f.bfbbb871.js b/assets/js/be5f3a5f.bfbbb871.js new file mode 100644 index 00000000000..c323b860863 --- /dev/null +++ b/assets/js/be5f3a5f.bfbbb871.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[12344],{5385:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>d,default:()=>p,frontMatter:()=>s,metadata:()=>c,toc:()=>h});var t=r(85893),a=r(11151),i=r(74866),o=r(85162);const s={id:"drawer-navigator",title:"Drawer Navigator",sidebar_label:"Drawer"},d=void 0,c={id:"drawer-navigator",title:"Drawer Navigator",description:"Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures.",source:"@site/versioned_docs/version-7.x/drawer-navigator.md",sourceDirName:".",slug:"/drawer-navigator",permalink:"/docs/7.x/drawer-navigator",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/drawer-navigator.md",tags:[],version:"7.x",frontMatter:{id:"drawer-navigator",title:"Drawer Navigator",sidebar_label:"Drawer"},sidebar:"docs",previous:{title:"Bottom Tabs",permalink:"/docs/7.x/bottom-tab-navigator"},next:{title:"Material Top Tabs",permalink:"/docs/7.x/material-top-tab-navigator"}},l={},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:"backBehavior",id:"backbehavior",level:4},{value:"defaultStatus",id:"defaultstatus",level:4},{value:"detachInactiveScreens",id:"detachinactivescreens",level:4},{value:"drawerContent",id:"drawercontent",level:4},{value:"Providing a custom drawerContent",id:"providing-a-custom-drawercontent",level:5},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"lazy",id:"lazy",level:4},{value:"drawerLabel",id:"drawerlabel",level:4},{value:"drawerIcon",id:"drawericon",level:4},{value:"drawerActiveTintColor",id:"draweractivetintcolor",level:4},{value:"drawerActiveBackgroundColor",id:"draweractivebackgroundcolor",level:4},{value:"drawerInactiveTintColor",id:"drawerinactivetintcolor",level:4},{value:"drawerInactiveBackgroundColor",id:"drawerinactivebackgroundcolor",level:4},{value:"drawerItemStyle",id:"draweritemstyle",level:4},{value:"drawerLabelStyle",id:"drawerlabelstyle",level:4},{value:"drawerContentContainerStyle",id:"drawercontentcontainerstyle",level:4},{value:"drawerContentStyle",id:"drawercontentstyle",level:4},{value:"drawerStyle",id:"drawerstyle",level:4},{value:"drawerPosition",id:"drawerposition",level:4},{value:"drawerType",id:"drawertype",level:4},{value:"drawerHideStatusBarOnOpen",id:"drawerhidestatusbaronopen",level:4},{value:"drawerStatusBarAnimation",id:"drawerstatusbaranimation",level:4},{value:"overlayColor",id:"overlaycolor",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"gestureHandlerProps",id:"gesturehandlerprops",level:4},{value:"swipeEnabled",id:"swipeenabled",level:4},{value:"swipeEdgeWidth",id:"swipeedgewidth",level:4},{value:"swipeMinDistance",id:"swipemindistance",level:4},{value:"keyboardDismissMode",id:"keyboarddismissmode",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"popToTopOnBlur",id:"poptotoponblur",level:4},{value:"Header related options",id:"header-related-options",level:3},{value:"header",id:"header",level:4},{value:"Specify a height in headerStyle",id:"specify-a-height-in-headerstyle",level:5},{value:"headerShown",id:"headershown",level:4},{value:"Events",id:"events",level:3},{value:"drawerItemPress",id:"draweritempress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"openDrawer",id:"opendrawer",level:4},{value:"closeDrawer",id:"closedrawer",level:4},{value:"toggleDrawer",id:"toggledrawer",level:4},{value:"jumpTo",id:"jumpto",level:4},{value:"Hooks",id:"hooks",level:3},{value:"useDrawerProgress",id:"usedrawerprogress",level:4},{value:"useDrawerStatus",id:"usedrawerstatus",level:4},{value:"Nesting drawer navigators inside others",id:"nesting-drawer-navigators-inside-others",level:2}];function u(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.a)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"Drawer Navigator renders a navigation drawer on the side of the screen which can be opened and closed via gestures."}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer.mp4"})}),"\n",(0,t.jsxs)(n.p,{children:["This wraps ",(0,t.jsx)(n.a,{href:"/docs/7.x/drawer-layout",children:(0,t.jsx)(n.code,{children:"react-native-drawer-layout"})}),". If you want to use the drawer without React Navigation integration, use the library directly instead."]}),"\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/drawer",children:(0,t.jsx)(n.code,{children:"@react-navigation/drawer"})}),":"]}),"\n",(0,t.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(o.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/drawer@next\n"})})}),(0,t.jsx)(o.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/drawer@next\n"})})}),(0,t.jsx)(o.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/drawer@next\n"})})})]}),"\n",(0,t.jsx)(n.p,{children:"Then, you need to install and configure the libraries that are required by the drawer navigator:"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["First, install ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-gesture-handler/",children:(0,t.jsx)(n.code,{children:"react-native-gesture-handler"})})," and ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:(0,t.jsx)(n.code,{children:"react-native-reanimated"})})," (at least version 2 or 3)."]}),"\n",(0,t.jsx)(n.p,{children:"If you have a Expo managed project, in your project directory, run:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npx expo install react-native-gesture-handler react-native-reanimated\n"})}),"\n",(0,t.jsx)(n.p,{children:"If you have a bare React Native project, in your project directory, run:"}),"\n",(0,t.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,t.jsx)(o.Z,{value:"npm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npm install react-native-gesture-handler react-native-reanimated\n"})})}),(0,t.jsx)(o.Z,{value:"yarn",label:"Yarn",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"yarn add react-native-gesture-handler react-native-reanimated\n"})})}),(0,t.jsx)(o.Z,{value:"pnpm",label:"pnpm",children:(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"pnpm add react-native-gesture-handler react-native-reanimated\n"})})})]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["Configure the Reanimated Babel Plugin in your project following the ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started",children:"installation guide"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["To finalize the installation of ",(0,t.jsx)(n.code,{children:"react-native-gesture-handler"}),", we need to conditionally import it. To do this, create 2 files:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="gesture-handler.native.js"',children:"// Only import react-native-gesture-handler on native platforms\nimport 'react-native-gesture-handler';\n"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",metastring:'title="gesture-handler.js"',children:"// Don't import react-native-gesture-handler on web\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Now, add the following at the ",(0,t.jsx)(n.strong,{children:"top"})," (make sure it's at the top and there's nothing else before it) of your entry file, such as ",(0,t.jsx)(n.code,{children:"index.js"})," or ",(0,t.jsx)(n.code,{children:"App.js"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import './gesture-handler';\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Since the drawer navigator doesn't use ",(0,t.jsx)(n.code,{children:"react-native-gesture-handler"})," on Web, this avoids unnecessarily increasing the bundle size."]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsx)(n.p,{children:"If you are building for Android or iOS, do not skip this step, or your app may crash in production even if it works fine in development. This is not applicable to other platforms."})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:["If you're on a Mac and developing for iOS, you also need to install the pods (via ",(0,t.jsx)(n.a,{href:"https://cocoapods.org/",children:"Cocoapods"}),") to complete the linking."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-bash",children:"npx pod-install ios\n"})}),"\n"]}),"\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/drawer"}),":"]}),"\n",(0,t.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,t.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,t.jsx)(n.pre,{"data-name":"Drawer Navigator","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\n// codeblock-focus-start\nconst MyDrawer = createDrawerNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(MyDrawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,t.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,t.jsx)(n.pre,{"data-name":"Drawer Navigator","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\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 \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\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:["In addition to the ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigator#configuration",children:"common props"})," shared by all navigators, the drawer navigator component accepts the following additional props:"]}),"\n",(0,t.jsx)(n.h4,{id:"backbehavior",children:(0,t.jsx)(n.code,{children:"backBehavior"})}),"\n",(0,t.jsxs)(n.p,{children:["This controls what happens when ",(0,t.jsx)(n.code,{children:"goBack"})," is called in the navigator. This includes pressing the device's back button or back gesture on Android."]}),"\n",(0,t.jsx)(n.p,{children:"It supports the following values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"firstRoute"})," - return to the first screen defined in the navigator (default)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"initialRoute"})," - return to initial screen passed in ",(0,t.jsx)(n.code,{children:"initialRouteName"})," prop, if not passed, defaults to the first screen"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"order"})," - return to screen defined before the focused screen"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"history"})," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"none"})," - do not handle back button"]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"defaultstatus",children:(0,t.jsx)(n.code,{children:"defaultStatus"})}),"\n",(0,t.jsxs)(n.p,{children:["The default status of the drawer - whether the drawer should stay ",(0,t.jsx)(n.code,{children:"open"})," or ",(0,t.jsx)(n.code,{children:"closed"})," by default."]}),"\n",(0,t.jsxs)(n.p,{children:["When this is set to ",(0,t.jsx)(n.code,{children:"open"}),", the drawer will be open from the initial render. It can be closed normally using gestures or programmatically. However, when going back, the drawer will re-open if it was closed. This is essentially the opposite of the default behavior of the drawer where it starts ",(0,t.jsx)(n.code,{children:"closed"}),", and the back button closes an open drawer."]}),"\n",(0,t.jsx)(n.h4,{id:"detachinactivescreens",children:(0,t.jsx)(n.code,{children:"detachInactiveScreens"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with ",(0,t.jsx)(n.a,{href:"https://github.com/software-mansion/react-native-screens",children:"react-native-screens"}),". Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"drawercontent",children:(0,t.jsx)(n.code,{children:"drawerContent"})}),"\n",(0,t.jsx)(n.p,{children:"Function that returns React element to render as the content of the drawer, for example, navigation items"}),"\n",(0,t.jsx)(n.p,{children:"The content component receives the following props by default:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"state"})," - The ",(0,t.jsx)(n.a,{href:"/docs/7.x/navigation-state",children:"navigation state"})," of the navigator."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"navigation"})," - The navigation object for the navigator."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"descriptors"})," - An descriptor object containing options for the drawer screens. The options can be accessed at ",(0,t.jsx)(n.code,{children:"descriptors[route.key].options"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.h5,{id:"providing-a-custom-drawercontent",children:["Providing a custom ",(0,t.jsx)(n.code,{children:"drawerContent"})]}),"\n",(0,t.jsxs)(n.p,{children:["The default component for the drawer is scrollable and only contains links for the routes in the RouteConfig. You can easily override the default component to add a header, footer, or other content to the drawer. The default content component is exported as ",(0,t.jsx)(n.code,{children:"DrawerContent"}),". It renders a ",(0,t.jsx)(n.code,{children:"DrawerItemList"})," component inside a ",(0,t.jsx)(n.code,{children:"ScrollView"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["By default, the drawer is scrollable and supports devices with notches. If you customize the content, you can use ",(0,t.jsx)(n.code,{children:"DrawerContentScrollView"})," to handle this automatically:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import {\n DrawerContentScrollView,\n DrawerItemList,\n} from '@react-navigation/drawer';\n\nfunction CustomDrawerContent(props) {\n return (\n \n \n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To add additional items in the drawer, you can use the ",(0,t.jsx)(n.code,{children:"DrawerItem"})," component:"]}),"\n",(0,t.jsx)("samp",{id:"custom-drawer-content"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"function CustomDrawerContent(props) {\n return (\n \n \n Linking.openURL('https://mywebsite.com/help')}\n />\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"DrawerItem"})," component accepts the following props:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"label"})," (required): The label text of the item. Can be string, or a function returning a react element. e.g. ",(0,t.jsx)(n.code,{children:"({ focused, color }) => {focused ? 'Focused text' : 'Unfocused text'}"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"icon"}),": Icon to display for the item. Accepts a function returning a react element. e.g. ",(0,t.jsx)(n.code,{children:"({ focused, color, size }) => "}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"focused"}),": Boolean indicating whether to highlight the drawer item as active."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"onPress"})," (required): Function to execute on press."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"activeTintColor"}),": Color for the icon and label when the item is active."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"inactiveTintColor"}),": Color for the icon and label when the item is inactive."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"activeBackgroundColor"}),": Background color for item when it's active."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"inactiveBackgroundColor"}),": Background color for item when it's inactive."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"labelStyle"}),": Style object for the label ",(0,t.jsx)(n.code,{children:"Text"}),"."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"style"}),": Style object for the wrapper ",(0,t.jsx)(n.code,{children:"View"}),"."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Note that you ",(0,t.jsx)(n.strong,{children:"cannot"})," use the ",(0,t.jsx)(n.code,{children:"useNavigation"})," hook inside the ",(0,t.jsx)(n.code,{children:"drawerContent"})," since ",(0,t.jsx)(n.code,{children:"useNavigation"})," is only available inside screens. You get a ",(0,t.jsx)(n.code,{children:"navigation"})," prop for your ",(0,t.jsx)(n.code,{children:"drawerContent"})," which you can use instead:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"function CustomDrawerContent({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n >\n Go somewhere\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["To use the custom component, we need to pass it in the ",(0,t.jsx)(n.code,{children:"drawerContent"})," prop:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" }>\n {/* screens */}\n\n"})}),"\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. These can be specified under ",(0,t.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.navigator"})," or ",(0,t.jsx)(n.code,{children:"options"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.Screen"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"title",children:(0,t.jsx)(n.code,{children:"title"})}),"\n",(0,t.jsxs)(n.p,{children:["A generic title that can be used as a fallback for ",(0,t.jsx)(n.code,{children:"headerTitle"})," and ",(0,t.jsx)(n.code,{children:"drawerLabel"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"lazy",children:(0,t.jsx)(n.code,{children:"lazy"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether this screen should render the first time it's accessed. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),". Set it to ",(0,t.jsx)(n.code,{children:"false"})," if you want to render the screen on initial render."]}),"\n",(0,t.jsx)(n.h4,{id:"drawerlabel",children:(0,t.jsx)(n.code,{children:"drawerLabel"})}),"\n",(0,t.jsxs)(n.p,{children:["String or a function that given ",(0,t.jsx)(n.code,{children:"{ focused: boolean, color: string }"})," returns a React.Node, to display in drawer sidebar. When undefined, scene ",(0,t.jsx)(n.code,{children:"title"})," is used."]}),"\n",(0,t.jsx)(n.h4,{id:"drawericon",children:(0,t.jsx)(n.code,{children:"drawerIcon"})}),"\n",(0,t.jsxs)(n.p,{children:["Function, that given ",(0,t.jsx)(n.code,{children:"{ focused: boolean, color: string, size: number }"})," returns a React.Node to display in drawer sidebar."]}),"\n",(0,t.jsx)(n.h4,{id:"draweractivetintcolor",children:(0,t.jsx)(n.code,{children:"drawerActiveTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"Color for the icon and label in the active item in the drawer."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerActiveTintColor.png",width:"500",alt:"Drawer active tint color"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" drawerActiveTintColor: 'green',\n"})}),"\n",(0,t.jsx)(n.h4,{id:"draweractivebackgroundcolor",children:(0,t.jsx)(n.code,{children:"drawerActiveBackgroundColor"})}),"\n",(0,t.jsx)(n.p,{children:"Background color for the active item in the drawer."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerActiveBackgroundColor.png",width:"500",alt:"Drawer active background color"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" screenOptions={{\n drawerActiveTintColor: 'white',\n drawerActiveBackgroundColor: '#003CB3',\n drawerLabelStyle: {\n color: 'white',\n },\n }}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerinactivetintcolor",children:(0,t.jsx)(n.code,{children:"drawerInactiveTintColor"})}),"\n",(0,t.jsx)(n.p,{children:"Color for the icon and label in the inactive items in the drawer."}),"\n",(0,t.jsx)(n.h4,{id:"drawerinactivebackgroundcolor",children:(0,t.jsx)(n.code,{children:"drawerInactiveBackgroundColor"})}),"\n",(0,t.jsx)(n.p,{children:"Background color for the inactive items in the drawer."}),"\n",(0,t.jsx)(n.h4,{id:"draweritemstyle",children:(0,t.jsx)(n.code,{children:"drawerItemStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the single item, which can contain an icon and/or a label."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerItemStyle.png",width:"500",alt:"Drawer item style"}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" drawerItemStyle: {\n backgroundColor: '#9dd3c8',\n borderColor: 'black',\n orderWidth: 2,\n opacity: 0.6,\n },\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerlabelstyle",children:(0,t.jsx)(n.code,{children:"drawerLabelStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Style object to apply to the ",(0,t.jsx)(n.code,{children:"Text"})," style inside content section which renders a label."]}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerLabelStyle.png",width:"500",alt:"Drawer label style"}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:" drawerLabelStyle: {\n color: 'black',\n fontSize: 20,\n fontFamily: 'Georgia',\n },\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawercontentcontainerstyle",children:(0,t.jsx)(n.code,{children:"drawerContentContainerStyle"})}),"\n",(0,t.jsxs)(n.p,{children:["Style object for the content section inside the ",(0,t.jsx)(n.code,{children:"ScrollView"}),"."]}),"\n",(0,t.jsx)(n.h4,{id:"drawercontentstyle",children:(0,t.jsx)(n.code,{children:"drawerContentStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the wrapper view."}),"\n",(0,t.jsx)(n.h4,{id:"drawerstyle",children:(0,t.jsx)(n.code,{children:"drawerStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the drawer component. You can pass a custom background color for a drawer or a custom width here."}),"\n",(0,t.jsx)("img",{src:"/assets/7.x/drawer/drawerStyle.png",width:"500",alt:"Drawer style"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"\n {/* screens */}\n\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerposition",children:(0,t.jsx)(n.code,{children:"drawerPosition"})}),"\n",(0,t.jsxs)(n.p,{children:["Options are ",(0,t.jsx)(n.code,{children:"left"})," or ",(0,t.jsx)(n.code,{children:"right"}),". Defaults to ",(0,t.jsx)(n.code,{children:"left"})," for LTR languages and ",(0,t.jsx)(n.code,{children:"right"})," for RTL languages."]}),"\n",(0,t.jsx)(n.h4,{id:"drawertype",children:(0,t.jsx)(n.code,{children:"drawerType"})}),"\n",(0,t.jsx)(n.p,{children:"Type of the drawer. It determines how the drawer looks and animates."}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"front"}),": Traditional drawer which covers the screen with an overlay behind it."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-front.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"back"}),": The drawer is revealed behind the screen on swipe."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-back.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"slide"}),": Both the screen and the drawer slide on swipe to reveal the drawer."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-slide.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.code,{children:"permanent"}),": A permanent drawer is shown as a sidebar. Useful for having always visible drawer on larger screens."]}),"\n"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["Defaults to ",(0,t.jsx)(n.code,{children:"slide"})," on iOS and ",(0,t.jsx)(n.code,{children:"front"})," on other platforms."]}),"\n",(0,t.jsxs)(n.p,{children:["You can conditionally specify the ",(0,t.jsx)(n.code,{children:"drawerType"})," to show a permanent drawer on bigger screens and a traditional drawer drawer on small screens:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { useWindowDimensions } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n const dimensions = useWindowDimensions();\n\n return (\n = 768 ? 'permanent' : 'front',\n }}\n >\n {/* Screens */}\n \n );\n}\n"})}),"\n",(0,t.jsxs)(n.p,{children:["You can also specify other props such as ",(0,t.jsx)(n.code,{children:"drawerStyle"})," based on screen size to customize the behavior. For example, you can combine it with ",(0,t.jsx)(n.code,{children:'defaultStatus="open"'})," to achieve a master-detail layout:"]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerType-masterDetail.mp4"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { useWindowDimensions } from 'react-native';\nimport { createDrawerNavigator } from '@react-navigation/drawer';\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n const dimensions = useWindowDimensions();\n\n const isLargeScreen = dimensions.width >= 768;\n\n return (\n \n {/* Screens */}\n \n );\n}\n"})}),"\n",(0,t.jsx)(n.h4,{id:"drawerhidestatusbaronopen",children:(0,t.jsx)(n.code,{children:"drawerHideStatusBarOnOpen"})}),"\n",(0,t.jsxs)(n.p,{children:["When set to ",(0,t.jsx)(n.code,{children:"true"}),', Drawer will hide the OS status bar whenever the drawer is pulled or when it\'s in an "open" state.']}),"\n",(0,t.jsx)(n.h4,{id:"drawerstatusbaranimation",children:(0,t.jsx)(n.code,{children:"drawerStatusBarAnimation"})}),"\n",(0,t.jsxs)(n.p,{children:["Animation of the statusbar when hiding it. use in combination with ",(0,t.jsx)(n.code,{children:"drawerHideStatusBarOnOpen"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["This is only supported on iOS. Defaults to ",(0,t.jsx)(n.code,{children:"slide"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Supported values:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"slide"})}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerStatusBarAnimation-slide.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"fade"})}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/drawerStatusBarAnimation-fade.mp4"})}),"\n"]}),"\n",(0,t.jsxs)(n.li,{children:["\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.code,{children:"none"})}),"\n"]}),"\n"]}),"\n",(0,t.jsx)(n.h4,{id:"overlaycolor",children:(0,t.jsx)(n.code,{children:"overlayColor"})}),"\n",(0,t.jsxs)(n.p,{children:["Color overlay to be displayed on top of the content view when drawer gets open. The opacity is animated from ",(0,t.jsx)(n.code,{children:"0"})," to ",(0,t.jsx)(n.code,{children:"1"})," when the drawer opens."]}),"\n",(0,t.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,t.jsx)("source",{src:"/assets/7.x/drawer/overlayColor.mp4"})}),"\n",(0,t.jsx)(n.h4,{id:"scenecontainerstyle",children:(0,t.jsx)(n.code,{children:"sceneContainerStyle"})}),"\n",(0,t.jsx)(n.p,{children:"Style object for the component wrapping the screen content."}),"\n",(0,t.jsx)(n.h4,{id:"gesturehandlerprops",children:(0,t.jsx)(n.code,{children:"gestureHandlerProps"})}),"\n",(0,t.jsx)(n.p,{children:"Props to pass to the underlying pan gesture handler."}),"\n",(0,t.jsx)(n.p,{children:"This is not supported on Web."}),"\n",(0,t.jsx)(n.h4,{id:"swipeenabled",children:(0,t.jsx)(n.code,{children:"swipeEnabled"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether you can use swipe gestures to open or close the drawer. Defaults to ",(0,t.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,t.jsx)(n.p,{children:"Swipe gesture is not supported on Web."}),"\n",(0,t.jsx)(n.h4,{id:"swipeedgewidth",children:(0,t.jsx)(n.code,{children:"swipeEdgeWidth"})}),"\n",(0,t.jsx)(n.p,{children:"Allows for defining how far from the edge of the content view the swipe gesture should activate."}),"\n",(0,t.jsx)(n.p,{children:"This is not supported on Web."}),"\n",(0,t.jsx)(n.h4,{id:"swipemindistance",children:(0,t.jsx)(n.code,{children:"swipeMinDistance"})}),"\n",(0,t.jsx)(n.p,{children:"Minimum swipe distance threshold that should activate opening the drawer."}),"\n",(0,t.jsx)(n.h4,{id:"keyboarddismissmode",children:(0,t.jsx)(n.code,{children:"keyboardDismissMode"})}),"\n",(0,t.jsxs)(n.p,{children:["Whether the keyboard should be dismissed when the swipe gesture begins. Defaults to ",(0,t.jsx)(n.code,{children:"'on-drag'"}),". Set to ",(0,t.jsx)(n.code,{children:"'none'"})," to disable keyboard handling."]}),"\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.h4,{id:"poptotoponblur",children:(0,t.jsx)(n.code,{children:"popToTopOnBlur"})}),"\n",(0,t.jsxs)(n.p,{children:["Boolean indicating whether any nested stack should be popped to the top of the stack when navigating away from this drawer screen. Defaults to ",(0,t.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["It only works when there is a stack navigator (e.g. ",(0,t.jsx)(n.a,{href:"/docs/7.x/stack-navigator",children:"stack navigator"})," or ",(0,t.jsx)(n.a,{href:"/docs/7.x/native-stack-navigator",children:"native stack navigator"}),") nested under the drawer navigator."]}),"\n",(0,t.jsx)(n.h3,{id:"header-related-options",children:"Header related options"}),"\n",(0,t.jsxs)(n.p,{children:["You can find the list of header related options ",(0,t.jsx)(n.a,{href:"/docs/7.x/elements#header",children:"here"}),". These ",(0,t.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be specified under ",(0,t.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.navigator"})," or ",(0,t.jsx)(n.code,{children:"options"})," prop of ",(0,t.jsx)(n.code,{children:"Drawer.Screen"}),". You don't have to be using ",(0,t.jsx)(n.code,{children:"@react-navigation/elements"})," directly to use these options, they are just documented in that page."]}),"\n",(0,t.jsx)(n.p,{children:"In addition to those, the following options are also supported in drawer:"}),"\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:"layout"})," - Dimensions of the screen, contains ",(0,t.jsx)(n.code,{children:"height"})," and ",(0,t.jsx)(n.code,{children:"width"})," properties."]}),"\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 }) => {\n const title = getHeaderTitle(options, route.name);\n\n return ;\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.jsxs)(n.h5,{id:"specify-a-height-in-headerstyle",children:["Specify a ",(0,t.jsx)(n.code,{children:"height"})," in ",(0,t.jsx)(n.code,{children:"headerStyle"})]}),"\n",(0,t.jsx)(n.p,{children:"If your custom header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches."}),"\n",(0,t.jsx)(n.p,{children:"Example:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"headerStyle: {\n height: 80, // Specify the height of your custom header\n};\n"})}),"\n",(0,t.jsxs)(n.p,{children:["Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use ",(0,t.jsx)(n.code,{children:"options.headerStyle"})," from the props."]}),"\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 or hide the header for the screen. The header is shown by default. Setting this to ",(0,t.jsx)(n.code,{children:"false"})," hides the header."]}),"\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:"draweritempress",children:(0,t.jsx)(n.code,{children:"drawerItemPress"})}),"\n",(0,t.jsx)(n.p,{children:"This event is fired when the user presses the button for the screen in the drawer. By default a drawer item press does several things:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"If the screen is not focused, drawer item press will focus that screen"}),"\n",(0,t.jsx)(n.li,{children:"If the screen is already focused, then it'll close the drawer"}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["To prevent the default behavior, you can call ",(0,t.jsx)(n.code,{children:"event.preventDefault"}),":"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('drawerItemPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,t.jsx)(n.p,{children:"If you have custom drawer content, make sure to emit this event."}),"\n",(0,t.jsx)(n.h3,{id:"helpers",children:"Helpers"}),"\n",(0,t.jsx)(n.p,{children:"The drawer navigator adds the following methods to the navigation object:"}),"\n",(0,t.jsx)(n.h4,{id:"opendrawer",children:(0,t.jsx)(n.code,{children:"openDrawer"})}),"\n",(0,t.jsx)(n.p,{children:"Opens the drawer pane."}),"\n",(0,t.jsx)("samp",{id:"drawer-open-close-toggle"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.openDrawer();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"closedrawer",children:(0,t.jsx)(n.code,{children:"closeDrawer"})}),"\n",(0,t.jsx)(n.p,{children:"Closes the drawer pane."}),"\n",(0,t.jsx)("samp",{id:"drawer-open-close-toggle"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.closeDrawer();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"toggledrawer",children:(0,t.jsx)(n.code,{children:"toggleDrawer"})}),"\n",(0,t.jsx)(n.p,{children:"Opens the drawer pane if closed, closes the drawer pane if opened."}),"\n",(0,t.jsx)("samp",{id:"drawer-open-close-toggle"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.toggleDrawer();\n"})}),"\n",(0,t.jsx)(n.h4,{id:"jumpto",children:(0,t.jsx)(n.code,{children:"jumpTo"})}),"\n",(0,t.jsx)(n.p,{children:"Navigates to an existing screen in the drawer navigator. 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 jump 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)("samp",{id:"drawer-jump-to"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"navigation.jumpTo('Profile', { owner: 'Satya' });\n"})}),"\n",(0,t.jsx)(n.h3,{id:"hooks",children:"Hooks"}),"\n",(0,t.jsx)(n.p,{children:"The drawer navigator exports the following hooks:"}),"\n",(0,t.jsx)(n.h4,{id:"usedrawerprogress",children:(0,t.jsx)(n.code,{children:"useDrawerProgress"})}),"\n",(0,t.jsxs)(n.p,{children:["This hook returns the progress of the drawer. It is available in the screen components rendered by the drawer navigator as well as in the ",(0,t.jsx)(n.a,{href:"#drawercontent",children:"custom drawer content"}),"."]}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"progress"})," object is a ",(0,t.jsx)(n.code,{children:"SharedValue"})," that represents the animated position of the drawer (",(0,t.jsx)(n.code,{children:"0"})," is closed; ",(0,t.jsx)(n.code,{children:"1"})," is open). It can be used to animate elements based on the animation of the drawer with ",(0,t.jsx)(n.a,{href:"https://docs.swmansion.com/react-native-reanimated/",children:"Reanimated"}),":"]}),"\n",(0,t.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,t.jsx)(o.Z,{value:"static",label:"Static",default:!0,children:(0,t.jsx)(n.pre,{"data-name":"Drawer animation progress","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer animation progress" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport {\n createDrawerNavigator,\n useDrawerProgress,\n} from '@react-navigation/drawer';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\nfunction HomeScreen() {\n // highlight-next-line\n const progress = useDrawerProgress();\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateX: progress.value * -100 }],\n }));\n\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n\nconst MyDrawer = createDrawerNavigator({\n screens: {\n Home: HomeScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(MyDrawer);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,t.jsx)(o.Z,{value:"dynamic",label:"Dynamic",children:(0,t.jsx)(n.pre,{"data-name":"Drawer animation progress","data-snack":"true",children:(0,t.jsx)(n.code,{className:"language-js",metastring:'name="Drawer animation progress" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport {\n createDrawerNavigator,\n useDrawerProgress,\n} from '@react-navigation/drawer';\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated';\n\nfunction HomeScreen() {\n // highlight-next-line\n const progress = useDrawerProgress();\n\n const animatedStyle = useAnimatedStyle(() => ({\n transform: [{ translateX: progress.value * -100 }],\n }));\n\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n\nconst Drawer = createDrawerNavigator();\n\nfunction MyDrawer() {\n return (\n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,t.jsxs)(n.p,{children:["If you are using class components, you can use the ",(0,t.jsx)(n.code,{children:"DrawerProgressContext"})," to get the progress value."]}),"\n",(0,t.jsx)(n.admonition,{type:"warning",children:(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"useDrawerProgress"})," hook (or ",(0,t.jsx)(n.code,{children:"DrawerProgressContext"}),") will return a mock value on Web since Reanimated is not used on Web. The mock value can only represent the open state of the drawer (",(0,t.jsx)(n.code,{children:"0"})," when closed, ",(0,t.jsx)(n.code,{children:"1"})," when open), and not the progress of the drawer."]})}),"\n",(0,t.jsx)(n.h4,{id:"usedrawerstatus",children:(0,t.jsx)(n.code,{children:"useDrawerStatus"})}),"\n",(0,t.jsxs)(n.p,{children:["You can check if the drawer is open by using the ",(0,t.jsx)(n.code,{children:"useDrawerStatus"})," hook."]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { useDrawerStatus } from '@react-navigation/drawer';\n\n// ...\n\nconst isDrawerOpen = useDrawerStatus() === 'open';\n"})}),"\n",(0,t.jsxs)(n.p,{children:["If you can't use the hook, you can also use the ",(0,t.jsx)(n.code,{children:"getDrawerStatusFromState"})," helper:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"import { getDrawerStatusFromState } from '@react-navigation/drawer';\n\n// ...\n\nconst isDrawerOpen = getDrawerStatusFromState(navigation.getState()) === 'open';\n"})}),"\n",(0,t.jsxs)(n.p,{children:["For class components, you can listen to the ",(0,t.jsx)(n.code,{children:"state"})," event to check if the drawer was opened or closed:"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-js",children:"class Profile extends React.Component {\n componentDidMount() {\n this._unsubscribe = navigation.addListener('state', () => {\n const isDrawerOpen =\n getDrawerStatusFromState(navigation.getState()) === 'open';\n\n // do something\n });\n }\n\n componentWillUnmount() {\n this._unsubscribe();\n }\n\n render() {\n // Content of the component\n }\n}\n"})}),"\n",(0,t.jsx)(n.h2,{id:"nesting-drawer-navigators-inside-others",children:"Nesting drawer navigators inside others"}),"\n",(0,t.jsx)(n.p,{children:"If a drawer navigator is nested inside of another navigator that provides some UI, for example, a tab navigator or stack navigator, then the drawer will be rendered below the UI from those navigators. The drawer will appear below the tab bar and below the header of the stack. You will need to make the drawer navigator the parent of any navigator where the drawer should be rendered on top of its UI."})]})}function p(e={}){const{wrapper:n}={...(0,a.a)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}},85162:(e,n,r)=>{r.d(n,{Z:()=>o});r(67294);var t=r(86010);const a={tabItem:"tabItem_Ymn6"};var i=r(85893);function o(e){let{children:n,hidden:r,className:o}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,t.Z)(a.tabItem,o),hidden:r,children:n})}},74866:(e,n,r)=>{r.d(n,{Z:()=>b});var t=r(67294),a=r(86010),i=r(12466),o=r(16550),s=r(20469),d=r(91980),c=r(67392),l=r(50012);function h(e){var n,r;return null!=(n=null==(r=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:r.filter(Boolean))?n:[]}function u(e){const{values:n,children:r}=e;return(0,t.useMemo)((()=>{const e=null!=n?n:function(e){return h(e).map((e=>{let{props:{value:n,label:r,attributes:t,default:a}}=e;return{value:n,label:r,attributes:t,default:a}}))}(r);return function(e){const n=(0,c.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,r])}function p(e){let{value:n,tabValues:r}=e;return r.some((e=>e.value===n))}function x(e){let{queryString:n=!1,groupId:r}=e;const a=(0,o.k6)(),i=function(e){let{queryString:n=!1,groupId:r}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!r)throw new Error('Docusaurus error: The component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return null!=r?r:null}({queryString:n,groupId:r});return[(0,d._X)(i),(0,t.useCallback)((e=>{if(!i)return;const n=new URLSearchParams(a.location.search);n.set(i,e),a.replace({...a.location,search:n.toString()})}),[i,a])]}function j(e){const{defaultValue:n,queryString:r=!1,groupId:a}=e,i=u(e),[o,d]=(0,t.useState)((()=>function(e){var n;let{defaultValue:r,tabValues:t}=e;if(0===t.length)throw new Error("Docusaurus error: the component requires at least one children component");if(r){if(!p({value:r,tabValues:t}))throw new Error('Docusaurus error: The has a defaultValue "'+r+'" 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 r}const a=null!=(n=t.find((e=>e.default)))?n:t[0];if(!a)throw new Error("Unexpected error: 0 tabValues");return a.value}({defaultValue:n,tabValues:i}))),[c,h]=x({queryString:r,groupId:a}),[j,g]=function(e){let{groupId:n}=e;const r=function(e){return e?"docusaurus.tab."+e:null}(n),[a,i]=(0,l.Nk)(r);return[a,(0,t.useCallback)((e=>{r&&i.set(e)}),[r,i])]}({groupId:a}),w=(()=>{const e=null!=c?c:j;return p({value:e,tabValues:i})?e:null})();(0,s.Z)((()=>{w&&d(w)}),[w]);return{selectedValue:o,selectValue:(0,t.useCallback)((e=>{if(!p({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);d(e),h(e),g(e)}),[h,g,i]),tabValues:i}}var g=r(72389);const w={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var v=r(85893);function m(e){let{className:n,block:r,selectedValue:t,selectValue:o,tabValues:s}=e;const d=[],{blockElementScrollPositionUntilNextRender:c}=(0,i.o5)(),l=e=>{const n=e.currentTarget,r=d.indexOf(n),a=s[r].value;a!==t&&(c(n),o(a))},h=e=>{var n;let r=null;switch(e.key){case"Enter":l(e);break;case"ArrowRight":{var t;const n=d.indexOf(e.currentTarget)+1;r=null!=(t=d[n])?t:d[0];break}case"ArrowLeft":{var a;const n=d.indexOf(e.currentTarget)-1;r=null!=(a=d[n])?a:d[d.length-1];break}}null==(n=r)||n.focus()};return(0,v.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,a.Z)("tabs",{"tabs--block":r},n),children:s.map((e=>{let{value:n,label:r,attributes:i}=e;return(0,v.jsx)("li",{role:"tab",tabIndex:t===n?0:-1,"aria-selected":t===n,ref:e=>d.push(e),onKeyDown:h,onClick:l,...i,className:(0,a.Z)("tabs__item",w.tabItem,null==i?void 0:i.className,{"tabs__item--active":t===n}),children:null!=r?r:n},n)}))})}function f(e){let{lazy:n,children:r,selectedValue:a}=e;const i=(Array.isArray(r)?r:[r]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===a));return e?(0,t.cloneElement)(e,{className:"margin-top--md"}):null}return(0,v.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,t.cloneElement)(e,{key:n,hidden:e.props.value!==a})))})}function y(e){const n=j(e);return(0,v.jsxs)("div",{className:(0,a.Z)("tabs-container",w.tabList),children:[(0,v.jsx)(m,{...e,...n}),(0,v.jsx)(f,{...e,...n})]})}function b(e){const n=(0,g.Z)();return(0,v.jsx)(y,{...e,children:h(e.children)},String(n))}},11151:(e,n,r)=>{r.d(n,{Z:()=>s,a:()=>o});var t=r(67294);const a={},i=t.createContext(a);function o(e){const n=t.useContext(i);return t.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:o(e.components),t.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/be9b4d2c.559d629f.js b/assets/js/be9b4d2c.559d629f.js deleted file mode 100644 index 61cbb7ccee1..00000000000 --- a/assets/js/be9b4d2c.559d629f.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[57807],{1559:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>u,contentTitle:()=>c,default:()=>g,frontMatter:()=>s,metadata:()=>l,toc:()=>d});var a=t(85893),o=t(11151),i=t(74866),r=t(85162);const s={id:"tab-based-navigation",title:"Tab navigation",sidebar_label:"Tab navigation"},c=void 0,l={id:"tab-based-navigation",title:"Tab navigation",description:"Possibly the most common style of navigation in mobile apps is tab-based navigation. This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header).",source:"@site/versioned_docs/version-7.x/tab-based-navigation.md",sourceDirName:".",slug:"/tab-based-navigation",permalink:"/docs/7.x/tab-based-navigation",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/tab-based-navigation.md",tags:[],version:"7.x",frontMatter:{id:"tab-based-navigation",title:"Tab navigation",sidebar_label:"Tab navigation"},sidebar:"docs",previous:{title:"Next steps",permalink:"/docs/7.x/next-steps"},next:{title:"Drawer navigation",permalink:"/docs/7.x/drawer-based-navigation"}},u={},d=[{value:"Minimal example of tab-based navigation",id:"minimal-example-of-tab-based-navigation",level:2},{value:"Customizing the appearance",id:"customizing-the-appearance",level:2},{value:"Add badges to icons",id:"add-badges-to-icons",level:2},{value:"Jumping between tabs",id:"jumping-between-tabs",level:2},{value:"A stack navigator for each tab",id:"a-stack-navigator-for-each-tab",level:2},{value:"Why do we need a TabNavigator instead of TabBarIOS or some other component?",id:"why-do-we-need-a-tabnavigator-instead-of-tabbarios-or-some-other-component",level:2},{value:"A tab navigator contains a stack and you want to hide the tab bar on specific screens",id:"a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab-bar-on-specific-screens",level:2}];function m(e){const n={a:"a",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"Possibly the most common style of navigation in mobile apps is tab-based navigation. This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header)."}),"\n",(0,a.jsxs)(n.p,{children:["This guide covers ",(0,a.jsx)(n.a,{href:"/docs/7.x/bottom-tab-navigator",children:(0,a.jsx)(n.code,{children:"createBottomTabNavigator"})}),". Before continuing, first install ",(0,a.jsx)(n.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs",children:(0,a.jsx)(n.code,{children:"@react-navigation/bottom-tabs"})}),":"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(r.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/bottom-tabs@next\n"})})}),(0,a.jsx)(r.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/bottom-tabs@next\n"})})}),(0,a.jsx)(r.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/bottom-tabs@next\n"})})})]}),"\n",(0,a.jsx)(n.h2,{id:"minimal-example-of-tab-based-navigation",children:"Minimal example of tab-based navigation"}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nconst RootTabs = createBottomTabNavigator({\n screens: {\n Home: HomeScreen,\n Settings: SettingsScreen,\n },\n});\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\nfunction RootTabs() {\n return (\n \n \n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Tabs minimal",src:t(80811).Z+"",width:"300",height:"649"})}),"\n",(0,a.jsx)(n.h2,{id:"customizing-the-appearance",children:"Customizing the appearance"}),"\n",(0,a.jsxs)(n.p,{children:["This is similar to how you would customize a stack navigator \u2014 there are some properties that are set when you initialize the tab navigator and others that can be customized per-screen in ",(0,a.jsx)(n.code,{children:"options"}),"."]}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true","data-dependencies":"@expo/vector-icons,@expo/vector-icons/Ionicons",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n// codeblock-focus-start\n// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or\n// react-native-vector-icons/Ionicons otherwise.\nimport Ionicons from 'react-native-vector-icons/Ionicons';\n\n// codeblock-focus-end\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screenOptions: ({ route }) => ({\n // highlight-start\n tabBarIcon: ({ focused, color, size }) => {\n let iconName;\n\n if (route.name === 'Home') {\n iconName = focused\n ? 'ios-information-circle'\n : 'ios-information-circle-outline';\n } else if (route.name === 'Settings') {\n iconName = focused ? 'ios-list' : 'ios-list-outline';\n }\n\n // You can return any component that you like here!\n return ;\n },\n // highlight-end\n tabBarActiveTintColor: 'tomato',\n tabBarInactiveTintColor: 'gray',\n }),\n screens: {\n Home: HomeScreen,\n Settings: SettingsScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true","data-dependencies":"@expo/vector-icons,@expo/vector-icons/Ionicons",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack dependencies=@expo/vector-icons,@expo/vector-icons/Ionicons',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n// codeblock-focus-start\n// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or\n// react-native-vector-icons/Ionicons otherwise.\nimport Ionicons from 'react-native-vector-icons/Ionicons';\n\n// codeblock-focus-end\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n ({\n // highlight-start\n tabBarIcon: ({ focused, color, size }) => {\n let iconName;\n\n if (route.name === 'Home') {\n iconName = focused\n ? 'ios-information-circle'\n : 'ios-information-circle-outline';\n } else if (route.name === 'Settings') {\n iconName = focused ? 'ios-list' : 'ios-list-outline';\n }\n\n // You can return any component that you like here!\n return ;\n },\n // highlight-end\n tabBarActiveTintColor: 'tomato',\n tabBarInactiveTintColor: 'gray',\n })}\n >\n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"Let's dissect this:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"tabBarIcon"})," is a supported option in bottom tab navigator. So we know we can use it on our screen components in the ",(0,a.jsx)(n.code,{children:"options"})," prop, but in this case chose to put it in the ",(0,a.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.Navigator"})," in order to centralize the icon configuration for convenience."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"tabBarIcon"})," is a function that is given the ",(0,a.jsx)(n.code,{children:"focused"})," state, ",(0,a.jsx)(n.code,{children:"color"}),", and ",(0,a.jsx)(n.code,{children:"size"})," params. If you take a peek further down in the configuration you will see ",(0,a.jsx)(n.code,{children:"tabBarActiveTintColor"})," and ",(0,a.jsx)(n.code,{children:"tabBarInactiveTintColor"}),". These default to the iOS platform defaults, but you can change them here. The ",(0,a.jsx)(n.code,{children:"color"})," that is passed through to the ",(0,a.jsx)(n.code,{children:"tabBarIcon"})," is either the active or inactive one, depending on the ",(0,a.jsx)(n.code,{children:"focused"})," state (focused is active). The ",(0,a.jsx)(n.code,{children:"size"})," is the size of the icon expected by the tab bar."]}),"\n",(0,a.jsxs)(n.li,{children:["Read the ",(0,a.jsx)(n.a,{href:"/docs/7.x/bottom-tab-navigator",children:"full API reference"})," for further information on ",(0,a.jsx)(n.code,{children:"createBottomTabNavigator"})," configuration options."]}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"add-badges-to-icons",children:"Add badges to icons"}),"\n",(0,a.jsxs)(n.p,{children:["Sometimes we want to add badges to some icons. You can use the ",(0,a.jsxs)(n.a,{href:"/docs/7.x/bottom-tab-navigator#tabbarbadge",children:[(0,a.jsx)(n.code,{children:"tabBarBadge"})," option"]})," to do it:"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screens: {\n Home: {\n screen: HomeScreen,\n options: {\n // highlight-start\n tabBarBadge: 3,\n // highlight-end\n },\n },\n Settings: SettingsScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Tab based navigation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Tab based navigation" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction SettingsScreen() {\n return (\n \n Settings!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n \n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["From UI perspective this component is ready to use, but you still need to find some way to pass down the badge count properly from somewhere else, like using ",(0,a.jsx)(n.a,{href:"https://reactjs.org/docs/context.html",children:"React Context"}),", ",(0,a.jsx)(n.a,{href:"https://redux.js.org/",children:"Redux"}),", ",(0,a.jsx)(n.a,{href:"https://mobx.js.org/",children:"MobX"})," or ",(0,a.jsx)(n.a,{href:"https://github.com/facebook/react-native/blob/master/Libraries/vendor/emitter/EventEmitter.js",children:"event emitters"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Tabs with badges",src:t(73580).Z+"",width:"300",height:"649"})}),"\n",(0,a.jsx)(n.h2,{id:"jumping-between-tabs",children:"Jumping between tabs"}),"\n",(0,a.jsxs)(n.p,{children:["Switching from one tab to another has a familiar API \u2014 ",(0,a.jsx)(n.code,{children:"navigation.navigate"}),"."]}),"\n",(0,a.jsx)("samp",{id:"tab-based-navigation-switching"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"function HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home!\n \n \n );\n}\n\nfunction SettingsScreen() {\n const navigation = useNavigation();\n\n return (\n \n Settings!\n \n \n );\n}\n"})}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/navigators/tabs/tabs-navigate.mp4"})}),"\n",(0,a.jsx)(n.h2,{id:"a-stack-navigator-for-each-tab",children:"A stack navigator for each tab"}),"\n",(0,a.jsx)(n.p,{children:"Often tabs don't just display one screen \u2014 for example, on your Twitter feed, you can tap on a tweet and it brings you to a new screen within that tab with all of the replies. You can think of this as there being separate navigation stacks within each tab, and that's exactly how we will model it in React Navigation."}),"\n",(0,a.jsx)("samp",{id:"tab-based-navigation-stack"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { Button } from '@react-navigation/elements';\n\nfunction DetailsScreen() {\n return (\n \n Details!\n \n );\n}\n\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home screen\n \n \n );\n}\n\nfunction SettingsScreen() {\n const navigation = useNavigation();\n\n return (\n \n Settings screen\n \n \n );\n}\n\nconst HomeStack = createNativeStackNavigator();\n\nfunction HomeStackScreen() {\n return (\n \n \n \n \n );\n}\n\nconst SettingsStack = createNativeStackNavigator();\n\nfunction SettingsStackScreen() {\n return (\n \n \n \n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n \n \n );\n}\n"})}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/navigators/tabs/tabs-with-stack.mp4"})}),"\n",(0,a.jsx)(n.h2,{id:"why-do-we-need-a-tabnavigator-instead-of-tabbarios-or-some-other-component",children:"Why do we need a TabNavigator instead of TabBarIOS or some other component?"}),"\n",(0,a.jsx)(n.p,{children:"It's common to attempt to use a standalone tab bar component without integrating it into the navigation library you use in your app. In some cases, this works fine! You should be warned, however, that you may run into some frustrating unanticipated issues when doing this."}),"\n",(0,a.jsx)(n.p,{children:'For example, React Navigation\'s tab navigator takes care of handling the Android back button for you, while standalone components typically do not. Additionally, it is more difficult for you (as the developer) to perform actions such as "jump to this tab and then go to this screen" if you need to call into two distinct APIs for it. Lastly, mobile user interfaces have numerous small design details that require that certain components are aware of the layout or presence of other components \u2014 for example, if you have a translucent tab bar, content should scroll underneath it and the scroll view should have an inset on the bottom equal to the height of the tab bar so you can see all of the content. Double tapping the tab bar should make the active navigation stack pop to the top of the stack, and doing it again should scroll the active scroll view in that stack scroll to the top. While not all of these behaviors are implemented out of the box yet with React Navigation, they will be and you will not get any of this if you use a standalone tab view component.'}),"\n",(0,a.jsx)(n.h2,{id:"a-tab-navigator-contains-a-stack-and-you-want-to-hide-the-tab-bar-on-specific-screens",children:"A tab navigator contains a stack and you want to hide the tab bar on specific screens"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.a,{href:"/docs/7.x/hiding-tabbar-in-screens",children:"See the documentation here"})})]})}function g(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(m,{...e})}):m(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>r});t(67294);var a=t(86010);const o={tabItem:"tabItem_Ymn6"};var i=t(85893);function r(e){let{children:n,hidden:t,className:r}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,a.Z)(o.tabItem,r),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>T});var a=t(67294),o=t(86010),i=t(12466),r=t(16550),s=t(20469),c=t(91980),l=t(67392),u=t(50012);function d(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function m(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return d(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:o}}=e;return{value:n,label:t,attributes:a,default:o}}))}(t);return function(e){const n=(0,l.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,t])}function g(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function h(e){let{queryString:n=!1,groupId:t}=e;const o=(0,r.k6)(),i=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(i),(0,a.useCallback)((e=>{if(!i)return;const n=new URLSearchParams(o.location.search);n.set(i,e),o.replace({...o.location,search:n.toString()})}),[i,o])]}function b(e){const{defaultValue:n,queryString:t=!1,groupId:o}=e,i=m(e),[r,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!g({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const o=null!=(n=a.find((e=>e.default)))?n:a[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:n,tabValues:i}))),[l,d]=h({queryString:t,groupId:o}),[b,v]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[o,i]=(0,u.Nk)(t);return[o,(0,a.useCallback)((e=>{t&&i.set(e)}),[t,i])]}({groupId:o}),f=(()=>{const e=null!=l?l:b;return g({value:e,tabValues:i})?e:null})();(0,s.Z)((()=>{f&&c(f)}),[f]);return{selectedValue:r,selectValue:(0,a.useCallback)((e=>{if(!g({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);c(e),d(e),v(e)}),[d,v,i]),tabValues:i}}var v=t(72389);const f={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var p=t(85893);function x(e){let{className:n,block:t,selectedValue:a,selectValue:r,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),u=e=>{const n=e.currentTarget,t=c.indexOf(n),o=s[t].value;o!==a&&(l(n),r(o))},d=e=>{var n;let t=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var o;const n=c.indexOf(e.currentTarget)-1;t=null!=(o=c[n])?o:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,p.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:i}=e;return(0,p.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:d,onClick:u,...i,className:(0,o.Z)("tabs__item",f.tabItem,null==i?void 0:i.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function j(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,p.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function S(e){const n=b(e);return(0,p.jsxs)("div",{className:(0,o.Z)("tabs-container",f.tabList),children:[(0,p.jsx)(x,{...e,...n}),(0,p.jsx)(j,{...e,...n})]})}function T(e){const n=(0,v.Z)();return(0,p.jsx)(S,{...e,children:d(e.children)},String(n))}},73580:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/tabs-badges-af2f1f6228840836ac05e2a7636ffbd9.png"},80811:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/tabs-minimal-8f3eb63b32257060a4cf1657a6f4f90c.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>r});var a=t(67294);const o={},i=a.createContext(o);function r(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f171b4fe.47604412.js b/assets/js/f171b4fe.47604412.js deleted file mode 100644 index 22180b20920..00000000000 --- a/assets/js/f171b4fe.47604412.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[18098],{27052:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>b,frontMatter:()=>s,metadata:()=>l,toc:()=>h});var a=t(85893),i=t(11151),o=t(74866),r=t(85162);const s={id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},c=void 0,l={id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",description:"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.",source:"@site/versioned_docs/version-7.x/bottom-tab-navigator.md",sourceDirName:".",slug:"/bottom-tab-navigator",permalink:"/docs/7.x/bottom-tab-navigator",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/bottom-tab-navigator.md",tags:[],version:"7.x",frontMatter:{id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},sidebar:"docs",previous:{title:"Native Stack",permalink:"/docs/7.x/native-stack-navigator"},next:{title:"Drawer",permalink:"/docs/7.x/drawer-navigator"}},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:"backBehavior",id:"backbehavior",level:4},{value:"detachInactiveScreens",id:"detachinactivescreens",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"tabBar",id:"tabbar",level:4},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"tabBarLabel",id:"tabbarlabel",level:4},{value:"tabBarShowLabel",id:"tabbarshowlabel",level:4},{value:"tabBarLabelPosition",id:"tabbarlabelposition",level:4},{value:"tabBarLabelStyle",id:"tabbarlabelstyle",level:4},{value:"tabBarIcon",id:"tabbaricon",level:4},{value:"tabBarIconStyle",id:"tabbariconstyle",level:4},{value:"tabBarBadge",id:"tabbarbadge",level:4},{value:"tabBarBadgeStyle",id:"tabbarbadgestyle",level:4},{value:"tabBarAccessibilityLabel",id:"tabbaraccessibilitylabel",level:4},{value:"tabBarButton",id:"tabbarbutton",level:4},{value:"tabBarButtonTestID",id:"tabbarbuttontestid",level:4},{value:"tabBarActiveTintColor",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor",id:"tabbarinactivetintcolor",level:4},{value:"tabBarActiveBackgroundColor",id:"tabbaractivebackgroundcolor",level:4},{value:"tabBarInactiveBackgroundColor",id:"tabbarinactivebackgroundcolor",level:4},{value:"tabBarHideOnKeyboard",id:"tabbarhideonkeyboard",level:4},{value:"tabBarItemStyle",id:"tabbaritemstyle",level:4},{value:"tabBarStyle",id:"tabbarstyle",level:4},{value:"tabBarBackground",id:"tabbarbackground",level:4},{value:"tabBarPosition",id:"tabbarposition",level:4},{value:"tabBarVariant",id:"tabbarvariant",level:4},{value:"lazy",id:"lazy",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"popToTopOnBlur",id:"poptotoponblur",level:4},{value:"Header related options",id:"header-related-options",level:3},{value:"header",id:"header",level:4},{value:"Specify a height in headerStyle",id:"specify-a-height-in-headerstyle",level:5},{value:"headerShown",id:"headershown",level:4},{value:"Events",id:"events",level:3},{value:"tabPress",id:"tabpress",level:4},{value:"tabLongPress",id:"tablongpress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"jumpTo",id:"jumpto",level:4},{value:"Hooks",id:"hooks",level:3},{value:"useBottomTabBarHeight",id:"usebottomtabbarheight",level:4},{value:"Animations",id:"animations",level:2},{value:"Animation related options",id:"animation-related-options",level:3},{value:"Pre-made configs",id:"pre-made-configs",level:3},{value:"TransitionSpecs",id:"transitionspecs",level:4},{value:"SceneStyleInterpolators",id:"scenestyleinterpolators",level:4},{value:"TransitionPresets",id:"transitionpresets",level:4}];function u(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",img:"img",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 simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused."}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/7.x/bottom-tabs.mp4"})}),"\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/bottom-tabs",children:(0,a.jsx)(n.code,{children:"@react-navigation/bottom-tabs"})}),":"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(r.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/bottom-tabs@next\n"})})}),(0,a.jsx)(r.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/bottom-tabs@next\n"})})}),(0,a.jsx)(r.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/bottom-tabs@next\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/bottom-tabs"}),":"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tab Navigator","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tab Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\n// codeblock-focus-start\nconst MyTabs = createBottomTabNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(MyTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tab Navigator","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tab Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabs() {\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 \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.admonition,{type:"note",children:(0,a.jsxs)(n.p,{children:["For a complete usage guide see ",(0,a.jsx)(n.a,{href:"/docs/7.x/tab-based-navigation",children:"Tab Navigation"}),"."]})}),"\n",(0,a.jsx)(n.h2,{id:"api-definition",children:"API Definition"}),"\n",(0,a.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,a.jsxs)(n.p,{children:["In addition to the ",(0,a.jsx)(n.a,{href:"/docs/7.x/navigator#configuration",children:"common props"})," shared by all navigators, the bottom tab navigator accepts the following additional props:"]}),"\n",(0,a.jsx)(n.h4,{id:"backbehavior",children:(0,a.jsx)(n.code,{children:"backBehavior"})}),"\n",(0,a.jsxs)(n.p,{children:["This controls what happens when ",(0,a.jsx)(n.code,{children:"goBack"})," is called in the navigator. This includes pressing the device's back button or back gesture on Android."]}),"\n",(0,a.jsx)(n.p,{children:"It supports the following values:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"firstRoute"})," - return to the first screen defined in the navigator (default)"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"initialRoute"})," - return to initial screen passed in ",(0,a.jsx)(n.code,{children:"initialRouteName"})," prop, if not passed, defaults to the first screen"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"order"})," - return to screen defined before the focused screen"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"history"})," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"none"})," - do not handle back button"]}),"\n"]}),"\n",(0,a.jsx)(n.h4,{id:"detachinactivescreens",children:(0,a.jsx)(n.code,{children:"detachInactiveScreens"})}),"\n",(0,a.jsxs)(n.p,{children:["Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with ",(0,a.jsx)(n.a,{href:"https://github.com/software-mansion/react-native-screens",children:"react-native-screens"}),". Defaults to ",(0,a.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"scenecontainerstyle",children:(0,a.jsx)(n.code,{children:"sceneContainerStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the component wrapping the screen content."}),"\n",(0,a.jsx)(n.h4,{id:"tabbar",children:(0,a.jsx)(n.code,{children:"tabBar"})}),"\n",(0,a.jsx)(n.p,{children:"Function that returns a React element to display as the tab bar."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)("samp",{id:"custom-tab-bar"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { View, Text, TouchableOpacity, Platform } from 'react-native';\nimport { useLinkBuilder, useTheme } from '@react-navigation/native';\n\nfunction MyTabBar({ state, descriptors, navigation }) {\n const { colors } = useTheme();\n const { buildHref } = useLinkBuilder();\n\n return (\n \n {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: 'tabLongPress',\n target: route.key,\n });\n };\n\n return (\n \n \n {label}\n \n \n );\n })}\n \n );\n}\n\n// ...\n\n }>\n {/* ... */}\n;\n"})}),"\n",(0,a.jsx)(n.p,{children:"This example will render a basic tab bar with labels."}),"\n",(0,a.jsxs)(n.p,{children:["Note that you ",(0,a.jsx)(n.strong,{children:"cannot"})," use the ",(0,a.jsx)(n.code,{children:"useNavigation"})," hook inside the ",(0,a.jsx)(n.code,{children:"tabBar"})," since ",(0,a.jsx)(n.code,{children:"useNavigation"})," is only available inside screens. You get a ",(0,a.jsx)(n.code,{children:"navigation"})," prop for your ",(0,a.jsx)(n.code,{children:"tabBar"})," which you can use instead:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"function MyTabBar({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n >\n Go somewhere\n \n );\n}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"options",children:"Options"}),"\n",(0,a.jsxs)(n.p,{children:["The following ",(0,a.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be used to configure the screens in the navigator. These can be specified under ",(0,a.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.navigator"})," or ",(0,a.jsx)(n.code,{children:"options"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.Screen"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"title",children:(0,a.jsx)(n.code,{children:"title"})}),"\n",(0,a.jsxs)(n.p,{children:["Generic title that can be used as a fallback for ",(0,a.jsx)(n.code,{children:"headerTitle"})," and ",(0,a.jsx)(n.code,{children:"tabBarLabel"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarlabel",children:(0,a.jsx)(n.code,{children:"tabBarLabel"})}),"\n",(0,a.jsxs)(n.p,{children:["Title string of a tab displayed in the tab bar or a function that given ",(0,a.jsx)(n.code,{children:"{ focused: boolean, color: string }"})," returns a React.Node, to display in tab bar. When undefined, scene ",(0,a.jsx)(n.code,{children:"title"})," is used. To hide, see ",(0,a.jsx)(n.code,{children:"tabBarShowLabel"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarshowlabel",children:(0,a.jsx)(n.code,{children:"tabBarShowLabel"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether the tab label should be visible. Defaults to ",(0,a.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarlabelposition",children:(0,a.jsx)(n.code,{children:"tabBarLabelPosition"})}),"\n",(0,a.jsx)(n.p,{children:"Whether the label is shown below the icon or beside the icon."}),"\n",(0,a.jsx)(n.p,{children:"By default, the position is chosen automatically based on device width."}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"below-icon"}),": the label is shown below the icon (typical for iPhones)"]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarLabelPosition-below.png",width:"400",alt:"Tab bar label position - below"}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"beside-icon"})," the label is shown next to the icon (typical for iPad)"]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarLabelPosition-beside.png",width:"700",alt:"Tab bar label position - beside"}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarlabelstyle",children:(0,a.jsx)(n.code,{children:"tabBarLabelStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab label."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarLabelStyle.png",width:"500",alt:"Tab bar label style"}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:" tabBarLabelStyle: {\n fontSize: 16,\n fontFamily: 'Georgia',\n fontWeight: 300,\n },\n"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbaricon",children:(0,a.jsx)(n.code,{children:"tabBarIcon"})}),"\n",(0,a.jsxs)(n.p,{children:["Function that given ",(0,a.jsx)(n.code,{children:"{ focused: boolean, color: string, size: number }"})," returns a React.Node, to display in the tab bar."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbariconstyle",children:(0,a.jsx)(n.code,{children:"tabBarIconStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab icon."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbadge",children:(0,a.jsx)(n.code,{children:"tabBarBadge"})}),"\n",(0,a.jsxs)(n.p,{children:["Text to show in a badge on the tab icon. Accepts a ",(0,a.jsx)(n.code,{children:"string"})," or a ",(0,a.jsx)(n.code,{children:"number"}),"."]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarBadge.png",width:"500",alt:"Tab bar badge"}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbadgestyle",children:(0,a.jsx)(n.code,{children:"tabBarBadgeStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style for the badge on the tab icon. You can specify a background color or text color here."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarBadgeStyle.png",width:"500",alt:"Tab bar badge style"}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:" tabBarBadgeStyle: {\n color: 'black',\n backgroundColor: 'yellow',\n },\n"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbaraccessibilitylabel",children:(0,a.jsx)(n.code,{children:"tabBarAccessibilityLabel"})}),"\n",(0,a.jsx)(n.p,{children:"Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbutton",children:(0,a.jsx)(n.code,{children:"tabBarButton"})}),"\n",(0,a.jsxs)(n.p,{children:["Function which returns a React element to render as the tab bar button. It wraps the icon and label. Renders ",(0,a.jsx)(n.code,{children:"Pressable"})," by default."]}),"\n",(0,a.jsx)(n.p,{children:"You can specify a custom implementation here:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"tabBarButton: (props) => ;\n"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbuttontestid",children:(0,a.jsx)(n.code,{children:"tabBarButtonTestID"})}),"\n",(0,a.jsx)(n.p,{children:"ID to locate this tab button in tests."}),"\n",(0,a.jsx)(n.h4,{id:"tabbaractivetintcolor",children:(0,a.jsx)(n.code,{children:"tabBarActiveTintColor"})}),"\n",(0,a.jsx)(n.p,{children:"Color for the icon and label in the active tab."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarActiveTintColor.png",width:"500",alt:"Tab bar active tint color"}),"\n",(0,a.jsx)(n.h4,{id:"tabbarinactivetintcolor",children:(0,a.jsx)(n.code,{children:"tabBarInactiveTintColor"})}),"\n",(0,a.jsx)(n.p,{children:"Color for the icon and label in the inactive tabs."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarInactiveTintColor.png",width:"500",alt:"Tab bar inactive tint color"}),"\n",(0,a.jsx)(n.h4,{id:"tabbaractivebackgroundcolor",children:(0,a.jsx)(n.code,{children:"tabBarActiveBackgroundColor"})}),"\n",(0,a.jsx)(n.p,{children:"Background color for the active tab."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarinactivebackgroundcolor",children:(0,a.jsx)(n.code,{children:"tabBarInactiveBackgroundColor"})}),"\n",(0,a.jsx)(n.p,{children:"Background color for the inactive tabs."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarhideonkeyboard",children:(0,a.jsx)(n.code,{children:"tabBarHideOnKeyboard"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether the tab bar is hidden when the keyboard opens. Defaults to ",(0,a.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbaritemstyle",children:(0,a.jsx)(n.code,{children:"tabBarItemStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab item container."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarstyle",children:(0,a.jsx)(n.code,{children:"tabBarStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab bar. You can configure styles such as background color here."}),"\n",(0,a.jsxs)(n.p,{children:["To show your screen under the tab bar, you can set the ",(0,a.jsx)(n.code,{children:"position"})," style to absolute:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})}),"\n",(0,a.jsxs)(n.p,{children:["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 ",(0,a.jsx)(n.a,{href:"#usebottomtabbarheight",children:(0,a.jsx)(n.code,{children:"useBottomTabBarHeight"})})," for more details."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbackground",children:(0,a.jsx)(n.code,{children:"tabBarBackground"})}),"\n",(0,a.jsx)(n.p,{children:"Function which returns a React Element to use as background for the tab bar. You could render an image, a gradient, blur view etc.:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { BlurView } from 'expo-blur';\n\n// ...\n\n (\n \n ),\n }}\n>\n"})}),"\n",(0,a.jsxs)(n.p,{children:["When using ",(0,a.jsx)(n.code,{children:"BlurView"}),", make sure to set ",(0,a.jsx)(n.code,{children:"position: 'absolute'"})," in ",(0,a.jsx)(n.code,{children:"tabBarStyle"})," as well. You'd also need to use ",(0,a.jsx)(n.a,{href:"#usebottomtabbarheight",children:(0,a.jsx)(n.code,{children:"useBottomTabBarHeight"})})," to add bottom padding to your content."]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarBackground.png",width:"500",alt:"Tab bar background"}),"\n",(0,a.jsx)(n.h4,{id:"tabbarposition",children:(0,a.jsx)(n.code,{children:"tabBarPosition"})}),"\n",(0,a.jsx)(n.p,{children:"Position of the tab bar. Available values are:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"bottom"})," (Default)"]}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"top"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"left"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"right"})}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["When the tab bar is positioned on the ",(0,a.jsx)(n.code,{children:"left"})," or ",(0,a.jsx)(n.code,{children:"right"}),", it is styled as a sidebar. This can be useful when you want to show a sidebar on larger screens and a bottom tab bar on smaller screens:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const Tabs = createBottomTabNavigator({\n screenOptions: {\n tabBarPosition: isLargeScreen ? 'left' ? 'bottom',\n },\n\n // ...\n});\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})})})]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs-side.png",alt:"Sidebar","data-landscape":!0}),"\n",(0,a.jsxs)(n.p,{children:["You can also render a compact sidebar by placing the label below the icon. This is only supported when the ",(0,a.jsx)(n.a,{href:"#tabbarvariant",children:(0,a.jsx)(n.code,{children:"tabBarVariant"})})," is set to ",(0,a.jsx)(n.code,{children:"material"}),":"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const Tabs = createBottomTabNavigator({\n screenOptions: {\n tabBarPosition: isLargeScreen ? 'left' ? 'bottom',\n tabBarVariant: isLargeScreen ? 'material' : 'uikit',\n tabBarLabelPosition: 'below-icon',\n },\n\n // ...\n});\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Compact sidebar",src:t(47131).Z+"",width:"2402",height:"1081"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbarvariant",children:(0,a.jsx)(n.code,{children:"tabBarVariant"})}),"\n",(0,a.jsx)(n.p,{children:"Variant of the tab bar. Available values are:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"uikit"})," (Default) - The tab bar will be styled according to the iOS UIKit guidelines."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"material"})," - The tab bar will be styled according to the Material Design guidelines."]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"material"})," variant is currently only supported when the ",(0,a.jsx)(n.a,{href:"#tabbarposition",children:(0,a.jsx)(n.code,{children:"tabBarPosition"})})," is set to ",(0,a.jsx)(n.code,{children:"left"})," or ",(0,a.jsx)(n.code,{children:"right"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Material sidebar",src:t(66736).Z+"",width:"2402",height:"1081"})}),"\n",(0,a.jsx)(n.h4,{id:"lazy",children:(0,a.jsx)(n.code,{children:"lazy"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether this screen should render only after the first time it's accessed. Defaults to ",(0,a.jsx)(n.code,{children:"true"}),". Set it to ",(0,a.jsx)(n.code,{children:"false"})," if you want to render the screen on the initial render of the navigator."]}),"\n",(0,a.jsx)(n.h4,{id:"freezeonblur",children:(0,a.jsx)(n.code,{children:"freezeOnBlur"})}),"\n",(0,a.jsxs)(n.p,{children:["Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to ",(0,a.jsx)(n.code,{children:"false"}),".\nDefaults to ",(0,a.jsx)(n.code,{children:"true"})," when ",(0,a.jsx)(n.code,{children:"enableFreeze()"})," from ",(0,a.jsx)(n.code,{children:"react-native-screens"})," package is run at the top of the application."]}),"\n",(0,a.jsxs)(n.p,{children:["Requires ",(0,a.jsx)(n.code,{children:"react-native-screens"})," version >=3.16.0."]}),"\n",(0,a.jsx)(n.p,{children:"Only supported on iOS and Android."}),"\n",(0,a.jsx)(n.h4,{id:"poptotoponblur",children:(0,a.jsx)(n.code,{children:"popToTopOnBlur"})}),"\n",(0,a.jsxs)(n.p,{children:["Boolean indicating whether any nested stack should be popped to the top of the stack when navigating away from this tab. Defaults to ",(0,a.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["It only works when there is a stack navigator (e.g. ",(0,a.jsx)(n.a,{href:"/docs/7.x/stack-navigator",children:"stack navigator"})," or ",(0,a.jsx)(n.a,{href:"/docs/7.x/native-stack-navigator",children:"native stack navigator"}),") nested under the tab navigator."]}),"\n",(0,a.jsx)(n.h3,{id:"header-related-options",children:"Header related options"}),"\n",(0,a.jsxs)(n.p,{children:["You can find the list of header related options ",(0,a.jsx)(n.a,{href:"/docs/7.x/elements#header",children:"here"}),". These ",(0,a.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be specified under ",(0,a.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.navigator"})," or ",(0,a.jsx)(n.code,{children:"options"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.Screen"}),". You don't have to be using ",(0,a.jsx)(n.code,{children:"@react-navigation/elements"})," directly to use these options, they are just documented in that page."]}),"\n",(0,a.jsx)(n.p,{children:"In addition to those, the following options are also supported in bottom tabs:"}),"\n",(0,a.jsx)(n.h4,{id:"header",children:(0,a.jsx)(n.code,{children:"header"})}),"\n",(0,a.jsx)(n.p,{children:"Custom header to use instead of the default header."}),"\n",(0,a.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,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"navigation"})," - The navigation object for the current screen."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"route"})," - The route object for the current screen."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"options"})," - The options for the current screen"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"layout"})," - Dimensions of the screen, contains ",(0,a.jsx)(n.code,{children:"height"})," and ",(0,a.jsx)(n.code,{children:"width"})," properties."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { getHeaderTitle } from '@react-navigation/elements';\n\n// ..\n\nheader: ({ navigation, route, options }) => {\n const title = getHeaderTitle(options, route.name);\n\n return ;\n};\n"})}),"\n",(0,a.jsxs)(n.p,{children:["To set a custom header for all the screens in the navigator, you can specify this option in the ",(0,a.jsx)(n.code,{children:"screenOptions"})," prop of the navigator."]}),"\n",(0,a.jsxs)(n.h5,{id:"specify-a-height-in-headerstyle",children:["Specify a ",(0,a.jsx)(n.code,{children:"height"})," in ",(0,a.jsx)(n.code,{children:"headerStyle"})]}),"\n",(0,a.jsx)(n.p,{children:"If your custom header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"headerStyle: {\n height: 80, // Specify the height of your custom header\n};\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use ",(0,a.jsx)(n.code,{children:"options.headerStyle"})," from the props."]}),"\n",(0,a.jsx)(n.h4,{id:"headershown",children:(0,a.jsx)(n.code,{children:"headerShown"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether to show or hide the header for the screen. The header is shown by default. Setting this to ",(0,a.jsx)(n.code,{children:"false"})," hides the header."]}),"\n",(0,a.jsx)(n.h3,{id:"events",children:"Events"}),"\n",(0,a.jsxs)(n.p,{children:["The navigator can ",(0,a.jsx)(n.a,{href:"/docs/7.x/navigation-events",children:"emit events"})," on certain actions. Supported events are:"]}),"\n",(0,a.jsx)(n.h4,{id:"tabpress",children:(0,a.jsx)(n.code,{children:"tabPress"})}),"\n",(0,a.jsx)(n.p,{children:"This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"If the tab is not focused, tab press will focus that tab"}),"\n",(0,a.jsxs)(n.li,{children:["If the tab is already focused:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["If the screen for the tab renders a scroll view, you can use ",(0,a.jsx)(n.a,{href:"/docs/7.x/use-scroll-to-top",children:(0,a.jsx)(n.code,{children:"useScrollToTop"})})," to scroll it to top"]}),"\n",(0,a.jsxs)(n.li,{children:["If the screen for the tab renders a stack navigator, a ",(0,a.jsx)(n.code,{children:"popToTop"})," action is performed on the stack"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["To prevent the default behavior, you can call ",(0,a.jsx)(n.code,{children:"event.preventDefault"}),":"]}),"\n",(0,a.jsx)("samp",{id:"bottom-tab-prevent-default"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,a.jsx)(n.p,{children:"If you have a custom tab bar, make sure to emit this event."}),"\n",(0,a.jsx)(n.h4,{id:"tablongpress",children:(0,a.jsx)(n.code,{children:"tabLongPress"})}),"\n",(0,a.jsx)(n.p,{children:"This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period. If you have a custom tab bar, make sure to emit this event."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabLongPress', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,a.jsx)(n.h3,{id:"helpers",children:"Helpers"}),"\n",(0,a.jsx)(n.p,{children:"The tab navigator adds the following methods to the navigation object:"}),"\n",(0,a.jsx)(n.h4,{id:"jumpto",children:(0,a.jsx)(n.code,{children:"jumpTo"})}),"\n",(0,a.jsx)(n.p,{children:"Navigates to an existing screen in the tab navigator. The method accepts following arguments:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"name"})," - ",(0,a.jsx)(n.em,{children:"string"})," - Name of the route to jump to."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"params"})," - ",(0,a.jsx)(n.em,{children:"object"})," - Screen params to use for the destination route."]}),"\n"]}),"\n",(0,a.jsx)("samp",{id:"tab-jump-to"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"navigation.jumpTo('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,a.jsx)(n.h3,{id:"hooks",children:"Hooks"}),"\n",(0,a.jsx)(n.p,{children:"The bottom tab navigator exports the following hooks:"}),"\n",(0,a.jsx)(n.h4,{id:"usebottomtabbarheight",children:(0,a.jsx)(n.code,{children:"useBottomTabBarHeight"})}),"\n",(0,a.jsx)(n.p,{children:"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."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';\n\nfunction MyComponent() {\n const tabBarHeight = useBottomTabBarHeight();\n\n return (\n \n {/* Content */}\n \n );\n}\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Alternatively, you can use the ",(0,a.jsx)(n.code,{children:"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:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';\n\n// ...\n\n\n {tabBarHeight => (\n /* render something */\n )}\n\n"})}),"\n",(0,a.jsx)(n.h2,{id:"animations",children:"Animations"}),"\n",(0,a.jsxs)(n.p,{children:["By default, switching between tabs doesn't have any animation. You can specify the ",(0,a.jsx)(n.code,{children:"animation"})," option to customize the transition animation."]}),"\n",(0,a.jsxs)(n.p,{children:["Supported values for ",(0,a.jsx)(n.code,{children:"animation"})," are:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"fade"})," - Cross-fade animation for the screen transition where the new screen fades in and the old screen fades out."]}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/7.x/bottom-tabs-fade.mp4"})}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"shift"})," - Shifting animation for the screen transition where the screens slightly shift to left/right."]}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/7.x/bottom-tabs-shift.mp4"})}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"none"})," - The screen transition doesn't have any animation. This is the default value."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs animation" snack',children:"import * as React from 'react';\nimport { View, Text, Easing } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screenOptions: {\n // highlight-start\n animation: 'fade',\n // highlight-end\n },\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs animation" snack',children:"import * as React from 'react';\nimport { Text, View, Easing } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n \n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"If you need more control over the animation, you can customize individual parts of the animation using the various animation-related options:"}),"\n",(0,a.jsx)(n.h3,{id:"animation-related-options",children:"Animation related options"}),"\n",(0,a.jsxs)(n.p,{children:["Bottom Tab Navigator exposes various options to configure the transition animation when switching tabs. These transition animations can be customized on a per-screen basis by specifying the options in the ",(0,a.jsx)(n.code,{children:"options"})," for each screen, or for all screens in the tab navigator by specifying them in the ",(0,a.jsx)(n.code,{children:"screenOptions"}),"."]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"transitionSpec"})," - An object that specifies the animation type (",(0,a.jsx)(n.code,{children:"timing"})," or ",(0,a.jsx)(n.code,{children:"spring"}),") and its options (such as ",(0,a.jsx)(n.code,{children:"duration"})," for ",(0,a.jsx)(n.code,{children:"timing"}),"). It contains 2 properties:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"animation"})," - The animation function to use for the animation. Supported values are ",(0,a.jsx)(n.code,{children:"timing"})," and ",(0,a.jsx)(n.code,{children:"spring"}),"."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"config"})," - The configuration object for the timing function. For ",(0,a.jsx)(n.code,{children:"timing"}),", it can be ",(0,a.jsx)(n.code,{children:"duration"})," and ",(0,a.jsx)(n.code,{children:"easing"}),". For ",(0,a.jsx)(n.code,{children:"spring"}),", it can be ",(0,a.jsx)(n.code,{children:"stiffness"}),", ",(0,a.jsx)(n.code,{children:"damping"}),", ",(0,a.jsx)(n.code,{children:"mass"}),", ",(0,a.jsx)(n.code,{children:"overshootClamping"}),", ",(0,a.jsx)(n.code,{children:"restDisplacementThreshold"})," and ",(0,a.jsx)(n.code,{children:"restSpeedThreshold"}),"."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"A config that uses a timing animation looks like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const config = {\n animation: 'timing',\n config: {\n duration: 150,\n easing: Easing.inOut(Easing.ease),\n },\n};\n"})}),"\n",(0,a.jsxs)(n.p,{children:["We can pass this config in the ",(0,a.jsx)(n.code,{children:"transitionSpec"})," option:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n transitionSpec: {\n animation: 'timing',\n config: {\n duration: 150,\n easing: Easing.inOut(Easing.ease),\n },\n },\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})})})]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"sceneStyleInterpolator"})," - This is a function that specifies interpolated styles for various parts of the scene. It currently supports style for the view containing the screen:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"sceneStyle"})," - Style for the container view wrapping the screen content."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"The function receives the following properties in its argument:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"current"})," - Animation values for the current screen:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"progress"})," - Animated node representing the progress value of the current screen."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"A config that fades the screen looks like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const forFade = ({ current }) => ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n});\n"})}),"\n",(0,a.jsxs)(n.p,{children:["The value of ",(0,a.jsx)(n.code,{children:"current.progress"})," is as follows:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"-1 if the index is lower than the active tab,"}),"\n",(0,a.jsx)(n.li,{children:"0 if they're active,"}),"\n",(0,a.jsx)(n.li,{children:"1 if the index is higher than the active tab"}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["We can pass this function in ",(0,a.jsx)(n.code,{children:"sceneStyleInterpolator"})," option:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n sceneStyleInterpolator: ({ current }) => ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:' ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n // highlight-end\n }}\n/>\n'})})})]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Putting these together, you can customize the transition animation for a screen:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs custom animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs custom animation" snack',children:"import * as React from 'react';\nimport { View, Text, Easing } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screenOptions: {\n transitionSpec: {\n animation: 'timing',\n config: {\n duration: 150,\n easing: Easing.inOut(Easing.ease),\n },\n },\n sceneStyleInterpolator: ({ current }) => ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n },\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs custom animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs custom animation" snack',children:"import * as React from 'react';\nimport { Text, View, Easing } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n }}\n >\n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.h3,{id:"pre-made-configs",children:"Pre-made configs"}),"\n",(0,a.jsx)(n.p,{children:"We also export various configs from the library with ready-made configs that you can use to customize the animations:"}),"\n",(0,a.jsx)(n.h4,{id:"transitionspecs",children:(0,a.jsx)(n.code,{children:"TransitionSpecs"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"FadeSpec"})," - Configuration for a cross-fade animation between screens."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"ShiftSpec"})," - Configuration for a shifting animation between screens."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionSpecs } from '@react-navigation/bottom-tabs';\n\n// ...\n\n{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n transitionSpec: TransitionSpecs.CrossFadeSpec,\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionSpecs } from '@react-navigation/bottom-tabs';\n\n// ...\n\n;\n"})})})]}),"\n",(0,a.jsx)(n.h4,{id:"scenestyleinterpolators",children:(0,a.jsx)(n.code,{children:"SceneStyleInterpolators"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"forFade"})," - Cross-fade animation for the screen transition where the new screen fades in and the old screen fades out."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"forShift"})," - Shifting animation for the screen transition where the screens slightly shift to left/right."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { SceneStyleInterpolators } from '@react-navigation/bottom-tabs';\n\n// ...\n\n{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n sceneStyleInterpolator: SceneStyleInterpolators.forFade,\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { SceneStyleInterpolators } from '@react-navigation/bottom-tabs';\n\n// ...\n\n;\n"})})})]}),"\n",(0,a.jsx)(n.h4,{id:"transitionpresets",children:(0,a.jsx)(n.code,{children:"TransitionPresets"})}),"\n",(0,a.jsxs)(n.p,{children:["We export transition presets that bundle various sets of these options together. A transition preset is an object containing a few animation-related screen options exported under ",(0,a.jsx)(n.code,{children:"TransitionPresets"}),". Currently the following presets are available:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"FadeTransition"})," - Cross-fade animation for the screen transition where the new screen fades in and the old screen fades out."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"ShiftTransition"})," - Shifting animation for the screen transition where the screens slightly shift to left/right."]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["You can spread these presets in ",(0,a.jsx)(n.code,{children:"options"})," to customize the animation for a screen:"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionPresets } from '@react-navigation/bottom-tabs';\n\n// ...\n\n{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n ...TransitionPresets.FadeTransition,\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionPresets } from '@react-navigation/bottom-tabs';\n\n// ...\n\n;\n"})})})]})]})}function b(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>r});t(67294);var a=t(86010);const i={tabItem:"tabItem_Ymn6"};var o=t(85893);function r(e){let{children:n,hidden:t,className:r}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,a.Z)(i.tabItem,r),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>T});var a=t(67294),i=t(86010),o=t(12466),r=t(16550),s=t(20469),c=t(91980),l=t(67392),d=t(50012);function h(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function u(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return h(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:i}}=e;return{value:n,label:t,attributes:a,default:i}}))}(t);return function(e){const n=(0,l.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,t])}function b(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:t}=e;const i=(0,r.k6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(o),(0,a.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(i.location.search);n.set(o,e),i.replace({...i.location,search:n.toString()})}),[o,i])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:i}=e,o=u(e),[r,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const i=null!=(n=a.find((e=>e.default)))?n:a[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:n,tabValues:o}))),[l,h]=p({queryString:t,groupId:i}),[g,x]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[i,o]=(0,d.Nk)(t);return[i,(0,a.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:i}),m=(()=>{const e=null!=l?l:g;return b({value:e,tabValues:o})?e:null})();(0,s.Z)((()=>{m&&c(m)}),[m]);return{selectedValue:r,selectValue:(0,a.useCallback)((e=>{if(!b({value:e,tabValues:o}))throw new Error("Can't select invalid tab value="+e);c(e),h(e),x(e)}),[h,x,o]),tabValues:o}}var x=t(72389);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=t(85893);function f(e){let{className:n,block:t,selectedValue:a,selectValue:r,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),i=s[t].value;i!==a&&(l(n),r(i))},h=e=>{var n;let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var i;const n=c.indexOf(e.currentTarget)-1;t=null!=(i=c[n])?i:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:h,onClick:d,...o,className:(0,i.Z)("tabs__item",m.tabItem,null==o?void 0:o.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:i}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===i));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==i})))})}function y(e){const n=g(e);return(0,j.jsxs)("div",{className:(0,i.Z)("tabs-container",m.tabList),children:[(0,j.jsx)(f,{...e,...n}),(0,j.jsx)(v,{...e,...n})]})}function T(e){const n=(0,x.Z)();return(0,j.jsx)(y,{...e,children:h(e.children)},String(n))}},47131:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/bottom-tabs-side-compact-00c9d793ff72f5512dd304c85c872b6a.png"},66736:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/bottom-tabs-side-material-f306f4f31881fc875463a5e6ad74e415.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>r});var a=t(67294);const i={},o=a.createContext(i);function r(e){const n=a.useContext(o);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f171b4fe.dd94f1ae.js b/assets/js/f171b4fe.dd94f1ae.js new file mode 100644 index 00000000000..ea05df1a889 --- /dev/null +++ b/assets/js/f171b4fe.dd94f1ae.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[18098],{27052:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>b,frontMatter:()=>s,metadata:()=>l,toc:()=>h});var a=t(85893),i=t(11151),o=t(74866),r=t(85162);const s={id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},c=void 0,l={id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",description:"A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused.",source:"@site/versioned_docs/version-7.x/bottom-tab-navigator.md",sourceDirName:".",slug:"/bottom-tab-navigator",permalink:"/docs/7.x/bottom-tab-navigator",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/bottom-tab-navigator.md",tags:[],version:"7.x",frontMatter:{id:"bottom-tab-navigator",title:"Bottom Tabs Navigator",sidebar_label:"Bottom Tabs"},sidebar:"docs",previous:{title:"Native Stack",permalink:"/docs/7.x/native-stack-navigator"},next:{title:"Drawer",permalink:"/docs/7.x/drawer-navigator"}},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:"backBehavior",id:"backbehavior",level:4},{value:"detachInactiveScreens",id:"detachinactivescreens",level:4},{value:"sceneContainerStyle",id:"scenecontainerstyle",level:4},{value:"tabBar",id:"tabbar",level:4},{value:"Options",id:"options",level:3},{value:"title",id:"title",level:4},{value:"tabBarLabel",id:"tabbarlabel",level:4},{value:"tabBarShowLabel",id:"tabbarshowlabel",level:4},{value:"tabBarLabelPosition",id:"tabbarlabelposition",level:4},{value:"tabBarLabelStyle",id:"tabbarlabelstyle",level:4},{value:"tabBarIcon",id:"tabbaricon",level:4},{value:"tabBarIconStyle",id:"tabbariconstyle",level:4},{value:"tabBarBadge",id:"tabbarbadge",level:4},{value:"tabBarBadgeStyle",id:"tabbarbadgestyle",level:4},{value:"tabBarAccessibilityLabel",id:"tabbaraccessibilitylabel",level:4},{value:"tabBarButton",id:"tabbarbutton",level:4},{value:"tabBarButtonTestID",id:"tabbarbuttontestid",level:4},{value:"tabBarActiveTintColor",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor",id:"tabbarinactivetintcolor",level:4},{value:"tabBarActiveBackgroundColor",id:"tabbaractivebackgroundcolor",level:4},{value:"tabBarInactiveBackgroundColor",id:"tabbarinactivebackgroundcolor",level:4},{value:"tabBarHideOnKeyboard",id:"tabbarhideonkeyboard",level:4},{value:"tabBarItemStyle",id:"tabbaritemstyle",level:4},{value:"tabBarStyle",id:"tabbarstyle",level:4},{value:"tabBarBackground",id:"tabbarbackground",level:4},{value:"tabBarPosition",id:"tabbarposition",level:4},{value:"tabBarVariant",id:"tabbarvariant",level:4},{value:"lazy",id:"lazy",level:4},{value:"freezeOnBlur",id:"freezeonblur",level:4},{value:"popToTopOnBlur",id:"poptotoponblur",level:4},{value:"Header related options",id:"header-related-options",level:3},{value:"header",id:"header",level:4},{value:"Specify a height in headerStyle",id:"specify-a-height-in-headerstyle",level:5},{value:"headerShown",id:"headershown",level:4},{value:"Events",id:"events",level:3},{value:"tabPress",id:"tabpress",level:4},{value:"tabLongPress",id:"tablongpress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"jumpTo",id:"jumpto",level:4},{value:"Hooks",id:"hooks",level:3},{value:"useBottomTabBarHeight",id:"usebottomtabbarheight",level:4},{value:"Animations",id:"animations",level:2},{value:"Animation related options",id:"animation-related-options",level:3},{value:"Pre-made configs",id:"pre-made-configs",level:3},{value:"TransitionSpecs",id:"transitionspecs",level:4},{value:"SceneStyleInterpolators",id:"scenestyleinterpolators",level:4},{value:"TransitionPresets",id:"transitionpresets",level:4}];function u(e){const n={a:"a",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",img:"img",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 simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized -- their screen components are not mounted until they are first focused."}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/7.x/bottom-tabs.mp4"})}),"\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/bottom-tabs",children:(0,a.jsx)(n.code,{children:"@react-navigation/bottom-tabs"})}),":"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"npm2yarn",children:[(0,a.jsx)(r.Z,{value:"npm",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/bottom-tabs@next\n"})})}),(0,a.jsx)(r.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/bottom-tabs@next\n"})})}),(0,a.jsx)(r.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/bottom-tabs@next\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/bottom-tabs"}),":"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tab Navigator","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tab Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n \n Home Screen\n \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\n// codeblock-focus-start\nconst MyTabs = createBottomTabNavigator({\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(MyTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tab Navigator","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tab Navigator" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer, useNavigation } from '@react-navigation/native';\nimport { Button } from '@react-navigation/elements';\n// codeblock-focus-start\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nconst Tab = createBottomTabNavigator();\n\nfunction MyTabs() {\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 \n \n );\n}\n\nfunction ProfileScreen() {\n const navigation = useNavigation();\n\n return (\n \n Profile Screen\n \n \n );\n}\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.h2,{id:"api-definition",children:"API Definition"}),"\n",(0,a.jsx)(n.h3,{id:"props",children:"Props"}),"\n",(0,a.jsxs)(n.p,{children:["In addition to the ",(0,a.jsx)(n.a,{href:"/docs/7.x/navigator#configuration",children:"common props"})," shared by all navigators, the bottom tab navigator accepts the following additional props:"]}),"\n",(0,a.jsx)(n.h4,{id:"backbehavior",children:(0,a.jsx)(n.code,{children:"backBehavior"})}),"\n",(0,a.jsxs)(n.p,{children:["This controls what happens when ",(0,a.jsx)(n.code,{children:"goBack"})," is called in the navigator. This includes pressing the device's back button or back gesture on Android."]}),"\n",(0,a.jsx)(n.p,{children:"It supports the following values:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"firstRoute"})," - return to the first screen defined in the navigator (default)"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"initialRoute"})," - return to initial screen passed in ",(0,a.jsx)(n.code,{children:"initialRouteName"})," prop, if not passed, defaults to the first screen"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"order"})," - return to screen defined before the focused screen"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"history"})," - return to last visited screen in the navigator; if the same screen is visited multiple times, the older entries are dropped from the history"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"none"})," - do not handle back button"]}),"\n"]}),"\n",(0,a.jsx)(n.h4,{id:"detachinactivescreens",children:(0,a.jsx)(n.code,{children:"detachInactiveScreens"})}),"\n",(0,a.jsxs)(n.p,{children:["Boolean used to indicate whether inactive screens should be detached from the view hierarchy to save memory. This enables integration with ",(0,a.jsx)(n.a,{href:"https://github.com/software-mansion/react-native-screens",children:"react-native-screens"}),". Defaults to ",(0,a.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"scenecontainerstyle",children:(0,a.jsx)(n.code,{children:"sceneContainerStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the component wrapping the screen content."}),"\n",(0,a.jsx)(n.h4,{id:"tabbar",children:(0,a.jsx)(n.code,{children:"tabBar"})}),"\n",(0,a.jsx)(n.p,{children:"Function that returns a React element to display as the tab bar."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)("samp",{id:"custom-tab-bar"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"// codeblock-focus-start\nimport { View, Text, TouchableOpacity, Platform } from 'react-native';\nimport { useLinkBuilder, useTheme } from '@react-navigation/native';\n\nfunction MyTabBar({ state, descriptors, navigation }) {\n const { colors } = useTheme();\n const { buildHref } = useLinkBuilder();\n\n return (\n \n {state.routes.map((route, index) => {\n const { options } = descriptors[route.key];\n const label =\n options.tabBarLabel !== undefined\n ? options.tabBarLabel\n : options.title !== undefined\n ? options.title\n : route.name;\n\n const isFocused = state.index === index;\n\n const onPress = () => {\n const event = navigation.emit({\n type: 'tabPress',\n target: route.key,\n canPreventDefault: true,\n });\n\n if (!isFocused && !event.defaultPrevented) {\n navigation.navigate(route.name, route.params);\n }\n };\n\n const onLongPress = () => {\n navigation.emit({\n type: 'tabLongPress',\n target: route.key,\n });\n };\n\n return (\n \n \n {label}\n \n \n );\n })}\n \n );\n}\n// codeblock-focus-end\n\n// ...\n\n }>\n {/* ... */}\n;\n"})}),"\n",(0,a.jsx)(n.p,{children:"This example will render a basic tab bar with labels."}),"\n",(0,a.jsxs)(n.p,{children:["Note that you ",(0,a.jsx)(n.strong,{children:"cannot"})," use the ",(0,a.jsx)(n.code,{children:"useNavigation"})," hook inside the ",(0,a.jsx)(n.code,{children:"tabBar"})," since ",(0,a.jsx)(n.code,{children:"useNavigation"})," is only available inside screens. You get a ",(0,a.jsx)(n.code,{children:"navigation"})," prop for your ",(0,a.jsx)(n.code,{children:"tabBar"})," which you can use instead:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"function MyTabBar({ navigation }) {\n return (\n {\n // Navigate using the `navigation` prop that you received\n navigation.navigate('SomeScreen');\n }}\n >\n Go somewhere\n \n );\n}\n"})}),"\n",(0,a.jsx)(n.h3,{id:"options",children:"Options"}),"\n",(0,a.jsxs)(n.p,{children:["The following ",(0,a.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be used to configure the screens in the navigator. These can be specified under ",(0,a.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.navigator"})," or ",(0,a.jsx)(n.code,{children:"options"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.Screen"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"title",children:(0,a.jsx)(n.code,{children:"title"})}),"\n",(0,a.jsxs)(n.p,{children:["Generic title that can be used as a fallback for ",(0,a.jsx)(n.code,{children:"headerTitle"})," and ",(0,a.jsx)(n.code,{children:"tabBarLabel"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarlabel",children:(0,a.jsx)(n.code,{children:"tabBarLabel"})}),"\n",(0,a.jsxs)(n.p,{children:["Title string of a tab displayed in the tab bar or a function that given ",(0,a.jsx)(n.code,{children:"{ focused: boolean, color: string }"})," returns a React.Node, to display in tab bar. When undefined, scene ",(0,a.jsx)(n.code,{children:"title"})," is used. To hide, see ",(0,a.jsx)(n.code,{children:"tabBarShowLabel"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarshowlabel",children:(0,a.jsx)(n.code,{children:"tabBarShowLabel"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether the tab label should be visible. Defaults to ",(0,a.jsx)(n.code,{children:"true"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarlabelposition",children:(0,a.jsx)(n.code,{children:"tabBarLabelPosition"})}),"\n",(0,a.jsx)(n.p,{children:"Whether the label is shown below the icon or beside the icon."}),"\n",(0,a.jsx)(n.p,{children:"By default, the position is chosen automatically based on device width."}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"below-icon"}),": the label is shown below the icon (typical for iPhones)"]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarLabelPosition-below.png",width:"400",alt:"Tab bar label position - below"}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"beside-icon"})," the label is shown next to the icon (typical for iPad)"]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarLabelPosition-beside.png",width:"700",alt:"Tab bar label position - beside"}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarlabelstyle",children:(0,a.jsx)(n.code,{children:"tabBarLabelStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab label."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarLabelStyle.png",width:"500",alt:"Tab bar label style"}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:" tabBarLabelStyle: {\n fontSize: 16,\n fontFamily: 'Georgia',\n fontWeight: 300,\n },\n"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbaricon",children:(0,a.jsx)(n.code,{children:"tabBarIcon"})}),"\n",(0,a.jsxs)(n.p,{children:["Function that given ",(0,a.jsx)(n.code,{children:"{ focused: boolean, color: string, size: number }"})," returns a React.Node, to display in the tab bar."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbariconstyle",children:(0,a.jsx)(n.code,{children:"tabBarIconStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab icon."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbadge",children:(0,a.jsx)(n.code,{children:"tabBarBadge"})}),"\n",(0,a.jsxs)(n.p,{children:["Text to show in a badge on the tab icon. Accepts a ",(0,a.jsx)(n.code,{children:"string"})," or a ",(0,a.jsx)(n.code,{children:"number"}),"."]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarBadge.png",width:"500",alt:"Tab bar badge"}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbadgestyle",children:(0,a.jsx)(n.code,{children:"tabBarBadgeStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style for the badge on the tab icon. You can specify a background color or text color here."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarBadgeStyle.png",width:"500",alt:"Tab bar badge style"}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:" tabBarBadgeStyle: {\n color: 'black',\n backgroundColor: 'yellow',\n },\n"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbaraccessibilitylabel",children:(0,a.jsx)(n.code,{children:"tabBarAccessibilityLabel"})}),"\n",(0,a.jsx)(n.p,{children:"Accessibility label for the tab button. This is read by the screen reader when the user taps the tab. It's recommended to set this if you don't have a label for the tab."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbutton",children:(0,a.jsx)(n.code,{children:"tabBarButton"})}),"\n",(0,a.jsxs)(n.p,{children:["Function which returns a React element to render as the tab bar button. It wraps the icon and label. Renders ",(0,a.jsx)(n.code,{children:"Pressable"})," by default."]}),"\n",(0,a.jsx)(n.p,{children:"You can specify a custom implementation here:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"tabBarButton: (props) => ;\n"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbuttontestid",children:(0,a.jsx)(n.code,{children:"tabBarButtonTestID"})}),"\n",(0,a.jsx)(n.p,{children:"ID to locate this tab button in tests."}),"\n",(0,a.jsx)(n.h4,{id:"tabbaractivetintcolor",children:(0,a.jsx)(n.code,{children:"tabBarActiveTintColor"})}),"\n",(0,a.jsx)(n.p,{children:"Color for the icon and label in the active tab."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarActiveTintColor.png",width:"500",alt:"Tab bar active tint color"}),"\n",(0,a.jsx)(n.h4,{id:"tabbarinactivetintcolor",children:(0,a.jsx)(n.code,{children:"tabBarInactiveTintColor"})}),"\n",(0,a.jsx)(n.p,{children:"Color for the icon and label in the inactive tabs."}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarInactiveTintColor.png",width:"500",alt:"Tab bar inactive tint color"}),"\n",(0,a.jsx)(n.h4,{id:"tabbaractivebackgroundcolor",children:(0,a.jsx)(n.code,{children:"tabBarActiveBackgroundColor"})}),"\n",(0,a.jsx)(n.p,{children:"Background color for the active tab."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarinactivebackgroundcolor",children:(0,a.jsx)(n.code,{children:"tabBarInactiveBackgroundColor"})}),"\n",(0,a.jsx)(n.p,{children:"Background color for the inactive tabs."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarhideonkeyboard",children:(0,a.jsx)(n.code,{children:"tabBarHideOnKeyboard"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether the tab bar is hidden when the keyboard opens. Defaults to ",(0,a.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbaritemstyle",children:(0,a.jsx)(n.code,{children:"tabBarItemStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab item container."}),"\n",(0,a.jsx)(n.h4,{id:"tabbarstyle",children:(0,a.jsx)(n.code,{children:"tabBarStyle"})}),"\n",(0,a.jsx)(n.p,{children:"Style object for the tab bar. You can configure styles such as background color here."}),"\n",(0,a.jsxs)(n.p,{children:["To show your screen under the tab bar, you can set the ",(0,a.jsx)(n.code,{children:"position"})," style to absolute:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})}),"\n",(0,a.jsxs)(n.p,{children:["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 ",(0,a.jsx)(n.a,{href:"#usebottomtabbarheight",children:(0,a.jsx)(n.code,{children:"useBottomTabBarHeight"})})," for more details."]}),"\n",(0,a.jsx)(n.h4,{id:"tabbarbackground",children:(0,a.jsx)(n.code,{children:"tabBarBackground"})}),"\n",(0,a.jsx)(n.p,{children:"Function which returns a React Element to use as background for the tab bar. You could render an image, a gradient, blur view etc.:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { BlurView } from 'expo-blur';\n\n// ...\n\n (\n \n ),\n }}\n>\n"})}),"\n",(0,a.jsxs)(n.p,{children:["When using ",(0,a.jsx)(n.code,{children:"BlurView"}),", make sure to set ",(0,a.jsx)(n.code,{children:"position: 'absolute'"})," in ",(0,a.jsx)(n.code,{children:"tabBarStyle"})," as well. You'd also need to use ",(0,a.jsx)(n.a,{href:"#usebottomtabbarheight",children:(0,a.jsx)(n.code,{children:"useBottomTabBarHeight"})})," to add bottom padding to your content."]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs/tabBarBackground.png",width:"500",alt:"Tab bar background"}),"\n",(0,a.jsx)(n.h4,{id:"tabbarposition",children:(0,a.jsx)(n.code,{children:"tabBarPosition"})}),"\n",(0,a.jsx)(n.p,{children:"Position of the tab bar. Available values are:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"bottom"})," (Default)"]}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"top"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"left"})}),"\n",(0,a.jsx)(n.li,{children:(0,a.jsx)(n.code,{children:"right"})}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["When the tab bar is positioned on the ",(0,a.jsx)(n.code,{children:"left"})," or ",(0,a.jsx)(n.code,{children:"right"}),", it is styled as a sidebar. This can be useful when you want to show a sidebar on larger screens and a bottom tab bar on smaller screens:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const Tabs = createBottomTabNavigator({\n screenOptions: {\n tabBarPosition: isLargeScreen ? 'left' ? 'bottom',\n },\n\n // ...\n});\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})})})]}),"\n",(0,a.jsx)("img",{src:"/assets/7.x/bottom-tabs-side.png",alt:"Sidebar","data-landscape":!0}),"\n",(0,a.jsxs)(n.p,{children:["You can also render a compact sidebar by placing the label below the icon. This is only supported when the ",(0,a.jsx)(n.a,{href:"#tabbarvariant",children:(0,a.jsx)(n.code,{children:"tabBarVariant"})})," is set to ",(0,a.jsx)(n.code,{children:"material"}),":"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const Tabs = createBottomTabNavigator({\n screenOptions: {\n tabBarPosition: isLargeScreen ? 'left' ? 'bottom',\n tabBarVariant: isLargeScreen ? 'material' : 'uikit',\n tabBarLabelPosition: 'below-icon',\n },\n\n // ...\n});\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Compact sidebar",src:t(47131).Z+"",width:"2402",height:"1081"})}),"\n",(0,a.jsx)(n.h4,{id:"tabbarvariant",children:(0,a.jsx)(n.code,{children:"tabBarVariant"})}),"\n",(0,a.jsx)(n.p,{children:"Variant of the tab bar. Available values are:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"uikit"})," (Default) - The tab bar will be styled according to the iOS UIKit guidelines."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"material"})," - The tab bar will be styled according to the Material Design guidelines."]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"material"})," variant is currently only supported when the ",(0,a.jsx)(n.a,{href:"#tabbarposition",children:(0,a.jsx)(n.code,{children:"tabBarPosition"})})," is set to ",(0,a.jsx)(n.code,{children:"left"})," or ",(0,a.jsx)(n.code,{children:"right"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Material sidebar",src:t(66736).Z+"",width:"2402",height:"1081"})}),"\n",(0,a.jsx)(n.h4,{id:"lazy",children:(0,a.jsx)(n.code,{children:"lazy"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether this screen should render only after the first time it's accessed. Defaults to ",(0,a.jsx)(n.code,{children:"true"}),". Set it to ",(0,a.jsx)(n.code,{children:"false"})," if you want to render the screen on the initial render of the navigator."]}),"\n",(0,a.jsx)(n.h4,{id:"freezeonblur",children:(0,a.jsx)(n.code,{children:"freezeOnBlur"})}),"\n",(0,a.jsxs)(n.p,{children:["Boolean indicating whether to prevent inactive screens from re-rendering. Defaults to ",(0,a.jsx)(n.code,{children:"false"}),".\nDefaults to ",(0,a.jsx)(n.code,{children:"true"})," when ",(0,a.jsx)(n.code,{children:"enableFreeze()"})," from ",(0,a.jsx)(n.code,{children:"react-native-screens"})," package is run at the top of the application."]}),"\n",(0,a.jsxs)(n.p,{children:["Requires ",(0,a.jsx)(n.code,{children:"react-native-screens"})," version >=3.16.0."]}),"\n",(0,a.jsx)(n.p,{children:"Only supported on iOS and Android."}),"\n",(0,a.jsx)(n.h4,{id:"poptotoponblur",children:(0,a.jsx)(n.code,{children:"popToTopOnBlur"})}),"\n",(0,a.jsxs)(n.p,{children:["Boolean indicating whether any nested stack should be popped to the top of the stack when navigating away from this tab. Defaults to ",(0,a.jsx)(n.code,{children:"false"}),"."]}),"\n",(0,a.jsxs)(n.p,{children:["It only works when there is a stack navigator (e.g. ",(0,a.jsx)(n.a,{href:"/docs/7.x/stack-navigator",children:"stack navigator"})," or ",(0,a.jsx)(n.a,{href:"/docs/7.x/native-stack-navigator",children:"native stack navigator"}),") nested under the tab navigator."]}),"\n",(0,a.jsx)(n.h3,{id:"header-related-options",children:"Header related options"}),"\n",(0,a.jsxs)(n.p,{children:["You can find the list of header related options ",(0,a.jsx)(n.a,{href:"/docs/7.x/elements#header",children:"here"}),". These ",(0,a.jsx)(n.a,{href:"/docs/7.x/screen-options",children:"options"})," can be specified under ",(0,a.jsx)(n.code,{children:"screenOptions"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.navigator"})," or ",(0,a.jsx)(n.code,{children:"options"})," prop of ",(0,a.jsx)(n.code,{children:"Tab.Screen"}),". You don't have to be using ",(0,a.jsx)(n.code,{children:"@react-navigation/elements"})," directly to use these options, they are just documented in that page."]}),"\n",(0,a.jsx)(n.p,{children:"In addition to those, the following options are also supported in bottom tabs:"}),"\n",(0,a.jsx)(n.h4,{id:"header",children:(0,a.jsx)(n.code,{children:"header"})}),"\n",(0,a.jsx)(n.p,{children:"Custom header to use instead of the default header."}),"\n",(0,a.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,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"navigation"})," - The navigation object for the current screen."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"route"})," - The route object for the current screen."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"options"})," - The options for the current screen"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"layout"})," - Dimensions of the screen, contains ",(0,a.jsx)(n.code,{children:"height"})," and ",(0,a.jsx)(n.code,{children:"width"})," properties."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { getHeaderTitle } from '@react-navigation/elements';\n\n// ..\n\nheader: ({ navigation, route, options }) => {\n const title = getHeaderTitle(options, route.name);\n\n return ;\n};\n"})}),"\n",(0,a.jsxs)(n.p,{children:["To set a custom header for all the screens in the navigator, you can specify this option in the ",(0,a.jsx)(n.code,{children:"screenOptions"})," prop of the navigator."]}),"\n",(0,a.jsxs)(n.h5,{id:"specify-a-height-in-headerstyle",children:["Specify a ",(0,a.jsx)(n.code,{children:"height"})," in ",(0,a.jsx)(n.code,{children:"headerStyle"})]}),"\n",(0,a.jsx)(n.p,{children:"If your custom header's height differs from the default header height, then you might notice glitches due to measurement being async. Explicitly specifying the height will avoid such glitches."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"headerStyle: {\n height: 80, // Specify the height of your custom header\n};\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Note that this style is not applied to the header by default since you control the styling of your custom header. If you also want to apply this style to your header, use ",(0,a.jsx)(n.code,{children:"options.headerStyle"})," from the props."]}),"\n",(0,a.jsx)(n.h4,{id:"headershown",children:(0,a.jsx)(n.code,{children:"headerShown"})}),"\n",(0,a.jsxs)(n.p,{children:["Whether to show or hide the header for the screen. The header is shown by default. Setting this to ",(0,a.jsx)(n.code,{children:"false"})," hides the header."]}),"\n",(0,a.jsx)(n.h3,{id:"events",children:"Events"}),"\n",(0,a.jsxs)(n.p,{children:["The navigator can ",(0,a.jsx)(n.a,{href:"/docs/7.x/navigation-events",children:"emit events"})," on certain actions. Supported events are:"]}),"\n",(0,a.jsx)(n.h4,{id:"tabpress",children:(0,a.jsx)(n.code,{children:"tabPress"})}),"\n",(0,a.jsx)(n.p,{children:"This event is fired when the user presses the tab button for the current screen in the tab bar. By default a tab press does several things:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"If the tab is not focused, tab press will focus that tab"}),"\n",(0,a.jsxs)(n.li,{children:["If the tab is already focused:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["If the screen for the tab renders a scroll view, you can use ",(0,a.jsx)(n.a,{href:"/docs/7.x/use-scroll-to-top",children:(0,a.jsx)(n.code,{children:"useScrollToTop"})})," to scroll it to top"]}),"\n",(0,a.jsxs)(n.li,{children:["If the screen for the tab renders a stack navigator, a ",(0,a.jsx)(n.code,{children:"popToTop"})," action is performed on the stack"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["To prevent the default behavior, you can call ",(0,a.jsx)(n.code,{children:"event.preventDefault"}),":"]}),"\n",(0,a.jsx)("samp",{id:"bottom-tab-prevent-default"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabPress', (e) => {\n // Prevent default behavior\n e.preventDefault();\n\n // Do something manually\n // ...\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,a.jsx)(n.p,{children:"If you have a custom tab bar, make sure to emit this event."}),"\n",(0,a.jsx)(n.h4,{id:"tablongpress",children:(0,a.jsx)(n.code,{children:"tabLongPress"})}),"\n",(0,a.jsx)(n.p,{children:"This event is fired when the user presses the tab button for the current screen in the tab bar for an extended period. If you have a custom tab bar, make sure to emit this event."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"React.useEffect(() => {\n const unsubscribe = navigation.addListener('tabLongPress', (e) => {\n // Do something\n });\n\n return unsubscribe;\n}, [navigation]);\n"})}),"\n",(0,a.jsx)(n.h3,{id:"helpers",children:"Helpers"}),"\n",(0,a.jsx)(n.p,{children:"The tab navigator adds the following methods to the navigation object:"}),"\n",(0,a.jsx)(n.h4,{id:"jumpto",children:(0,a.jsx)(n.code,{children:"jumpTo"})}),"\n",(0,a.jsx)(n.p,{children:"Navigates to an existing screen in the tab navigator. The method accepts following arguments:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"name"})," - ",(0,a.jsx)(n.em,{children:"string"})," - Name of the route to jump to."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"params"})," - ",(0,a.jsx)(n.em,{children:"object"})," - Screen params to use for the destination route."]}),"\n"]}),"\n",(0,a.jsx)("samp",{id:"tab-jump-to"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"navigation.jumpTo('Profile', { owner: 'Micha\u015b' });\n"})}),"\n",(0,a.jsx)(n.h3,{id:"hooks",children:"Hooks"}),"\n",(0,a.jsx)(n.p,{children:"The bottom tab navigator exports the following hooks:"}),"\n",(0,a.jsx)(n.h4,{id:"usebottomtabbarheight",children:(0,a.jsx)(n.code,{children:"useBottomTabBarHeight"})}),"\n",(0,a.jsx)(n.p,{children:"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."}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';\n\nfunction MyComponent() {\n const tabBarHeight = useBottomTabBarHeight();\n\n return (\n \n {/* Content */}\n \n );\n}\n"})}),"\n",(0,a.jsxs)(n.p,{children:["Alternatively, you can use the ",(0,a.jsx)(n.code,{children:"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:"]}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';\n\n// ...\n\n\n {tabBarHeight => (\n /* render something */\n )}\n\n"})}),"\n",(0,a.jsx)(n.h2,{id:"animations",children:"Animations"}),"\n",(0,a.jsxs)(n.p,{children:["By default, switching between tabs doesn't have any animation. You can specify the ",(0,a.jsx)(n.code,{children:"animation"})," option to customize the transition animation."]}),"\n",(0,a.jsxs)(n.p,{children:["Supported values for ",(0,a.jsx)(n.code,{children:"animation"})," are:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"fade"})," - Cross-fade animation for the screen transition where the new screen fades in and the old screen fades out."]}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/7.x/bottom-tabs-fade.mp4"})}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"shift"})," - Shifting animation for the screen transition where the screens slightly shift to left/right."]}),"\n",(0,a.jsx)("video",{playsInline:!0,autoPlay:!0,muted:!0,loop:!0,children:(0,a.jsx)("source",{src:"/assets/7.x/bottom-tabs-shift.mp4"})}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"none"})," - The screen transition doesn't have any animation. This is the default value."]}),"\n"]}),"\n"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs animation" snack',children:"import * as React from 'react';\nimport { View, Text, Easing } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screenOptions: {\n // highlight-start\n animation: 'fade',\n // highlight-end\n },\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs animation" snack',children:"import * as React from 'react';\nimport { Text, View, Easing } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n \n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:"If you need more control over the animation, you can customize individual parts of the animation using the various animation-related options:"}),"\n",(0,a.jsx)(n.h3,{id:"animation-related-options",children:"Animation related options"}),"\n",(0,a.jsxs)(n.p,{children:["Bottom Tab Navigator exposes various options to configure the transition animation when switching tabs. These transition animations can be customized on a per-screen basis by specifying the options in the ",(0,a.jsx)(n.code,{children:"options"})," for each screen, or for all screens in the tab navigator by specifying them in the ",(0,a.jsx)(n.code,{children:"screenOptions"}),"."]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"transitionSpec"})," - An object that specifies the animation type (",(0,a.jsx)(n.code,{children:"timing"})," or ",(0,a.jsx)(n.code,{children:"spring"}),") and its options (such as ",(0,a.jsx)(n.code,{children:"duration"})," for ",(0,a.jsx)(n.code,{children:"timing"}),"). It contains 2 properties:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"animation"})," - The animation function to use for the animation. Supported values are ",(0,a.jsx)(n.code,{children:"timing"})," and ",(0,a.jsx)(n.code,{children:"spring"}),"."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"config"})," - The configuration object for the timing function. For ",(0,a.jsx)(n.code,{children:"timing"}),", it can be ",(0,a.jsx)(n.code,{children:"duration"})," and ",(0,a.jsx)(n.code,{children:"easing"}),". For ",(0,a.jsx)(n.code,{children:"spring"}),", it can be ",(0,a.jsx)(n.code,{children:"stiffness"}),", ",(0,a.jsx)(n.code,{children:"damping"}),", ",(0,a.jsx)(n.code,{children:"mass"}),", ",(0,a.jsx)(n.code,{children:"overshootClamping"}),", ",(0,a.jsx)(n.code,{children:"restDisplacementThreshold"})," and ",(0,a.jsx)(n.code,{children:"restSpeedThreshold"}),"."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"A config that uses a timing animation looks like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const config = {\n animation: 'timing',\n config: {\n duration: 150,\n easing: Easing.inOut(Easing.ease),\n },\n};\n"})}),"\n",(0,a.jsxs)(n.p,{children:["We can pass this config in the ",(0,a.jsx)(n.code,{children:"transitionSpec"})," option:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n transitionSpec: {\n animation: 'timing',\n config: {\n duration: 150,\n easing: Easing.inOut(Easing.ease),\n },\n },\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"\n"})})})]}),"\n"]}),"\n",(0,a.jsxs)(n.li,{children:["\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"sceneStyleInterpolator"})," - This is a function that specifies interpolated styles for various parts of the scene. It currently supports style for the view containing the screen:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"sceneStyle"})," - Style for the container view wrapping the screen content."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"The function receives the following properties in its argument:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"current"})," - Animation values for the current screen:","\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"progress"})," - Animated node representing the progress value of the current screen."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"A config that fades the screen looks like this:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"const forFade = ({ current }) => ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n});\n"})}),"\n",(0,a.jsxs)(n.p,{children:["The value of ",(0,a.jsx)(n.code,{children:"current.progress"})," is as follows:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"-1 if the index is lower than the active tab,"}),"\n",(0,a.jsx)(n.li,{children:"0 if they're active,"}),"\n",(0,a.jsx)(n.li,{children:"1 if the index is higher than the active tab"}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["We can pass this function in ",(0,a.jsx)(n.code,{children:"sceneStyleInterpolator"})," option:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n sceneStyleInterpolator: ({ current }) => ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:' ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n // highlight-end\n }}\n/>\n'})})})]}),"\n"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Putting these together, you can customize the transition animation for a screen:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs custom animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs custom animation" snack',children:"import * as React from 'react';\nimport { View, Text, Easing } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\n// codeblock-focus-start\nconst RootTabs = createBottomTabNavigator({\n screenOptions: {\n transitionSpec: {\n animation: 'timing',\n config: {\n duration: 150,\n easing: Easing.inOut(Easing.ease),\n },\n },\n sceneStyleInterpolator: ({ current }) => ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n },\n screens: {\n Home: HomeScreen,\n Profile: ProfileScreen,\n },\n});\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootTabs);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Bottom Tabs custom animation","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tabs custom animation" snack',children:"import * as React from 'react';\nimport { Text, View, Easing } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\nfunction HomeScreen() {\n return (\n \n Home!\n \n );\n}\n\nfunction ProfileScreen() {\n return (\n \n Profile!\n \n );\n}\n\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nfunction RootTabs() {\n return (\n ({\n sceneStyle: {\n opacity: current.progress.interpolate({\n inputRange: [-1, 0, 1],\n outputRange: [0, 1, 0],\n }),\n },\n }),\n }}\n >\n \n \n \n );\n}\n// codeblock-focus-end\n\nexport default function App() {\n return (\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.h3,{id:"pre-made-configs",children:"Pre-made configs"}),"\n",(0,a.jsx)(n.p,{children:"We also export various configs from the library with ready-made configs that you can use to customize the animations:"}),"\n",(0,a.jsx)(n.h4,{id:"transitionspecs",children:(0,a.jsx)(n.code,{children:"TransitionSpecs"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"FadeSpec"})," - Configuration for a cross-fade animation between screens."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"ShiftSpec"})," - Configuration for a shifting animation between screens."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionSpecs } from '@react-navigation/bottom-tabs';\n\n// ...\n\n{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n transitionSpec: TransitionSpecs.CrossFadeSpec,\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionSpecs } from '@react-navigation/bottom-tabs';\n\n// ...\n\n;\n"})})})]}),"\n",(0,a.jsx)(n.h4,{id:"scenestyleinterpolators",children:(0,a.jsx)(n.code,{children:"SceneStyleInterpolators"})}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"forFade"})," - Cross-fade animation for the screen transition where the new screen fades in and the old screen fades out."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"forShift"})," - Shifting animation for the screen transition where the screens slightly shift to left/right."]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { SceneStyleInterpolators } from '@react-navigation/bottom-tabs';\n\n// ...\n\n{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n sceneStyleInterpolator: SceneStyleInterpolators.forFade,\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { SceneStyleInterpolators } from '@react-navigation/bottom-tabs';\n\n// ...\n\n;\n"})})})]}),"\n",(0,a.jsx)(n.h4,{id:"transitionpresets",children:(0,a.jsx)(n.code,{children:"TransitionPresets"})}),"\n",(0,a.jsxs)(n.p,{children:["We export transition presets that bundle various sets of these options together. A transition preset is an object containing a few animation-related screen options exported under ",(0,a.jsx)(n.code,{children:"TransitionPresets"}),". Currently the following presets are available:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"FadeTransition"})," - Cross-fade animation for the screen transition where the new screen fades in and the old screen fades out."]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"ShiftTransition"})," - Shifting animation for the screen transition where the screens slightly shift to left/right."]}),"\n"]}),"\n",(0,a.jsxs)(n.p,{children:["You can spread these presets in ",(0,a.jsx)(n.code,{children:"options"})," to customize the animation for a screen:"]}),"\n",(0,a.jsx)(n.p,{children:"Example:"}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionPresets } from '@react-navigation/bottom-tabs';\n\n// ...\n\n{\n Profile: {\n screen: Profile,\n options: {\n // highlight-start\n ...TransitionPresets.FadeTransition,\n // highlight-end\n },\n },\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{className:"language-js",children:"import { TransitionPresets } from '@react-navigation/bottom-tabs';\n\n// ...\n\n;\n"})})})]})]})}function b(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(u,{...e})}):u(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>r});t(67294);var a=t(86010);const i={tabItem:"tabItem_Ymn6"};var o=t(85893);function r(e){let{children:n,hidden:t,className:r}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,a.Z)(i.tabItem,r),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>T});var a=t(67294),i=t(86010),o=t(12466),r=t(16550),s=t(20469),c=t(91980),l=t(67392),d=t(50012);function h(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function u(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return h(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:i}}=e;return{value:n,label:t,attributes:a,default:i}}))}(t);return function(e){const n=(0,l.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,t])}function b(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:t}=e;const i=(0,r.k6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(o),(0,a.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(i.location.search);n.set(o,e),i.replace({...i.location,search:n.toString()})}),[o,i])]}function g(e){const{defaultValue:n,queryString:t=!1,groupId:i}=e,o=u(e),[r,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!b({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const i=null!=(n=a.find((e=>e.default)))?n:a[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:n,tabValues:o}))),[l,h]=p({queryString:t,groupId:i}),[g,x]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[i,o]=(0,d.Nk)(t);return[i,(0,a.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:i}),m=(()=>{const e=null!=l?l:g;return b({value:e,tabValues:o})?e:null})();(0,s.Z)((()=>{m&&c(m)}),[m]);return{selectedValue:r,selectValue:(0,a.useCallback)((e=>{if(!b({value:e,tabValues:o}))throw new Error("Can't select invalid tab value="+e);c(e),h(e),x(e)}),[h,x,o]),tabValues:o}}var x=t(72389);const m={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var j=t(85893);function f(e){let{className:n,block:t,selectedValue:a,selectValue:r,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),i=s[t].value;i!==a&&(l(n),r(i))},h=e=>{var n;let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var i;const n=c.indexOf(e.currentTarget)-1;t=null!=(i=c[n])?i:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,j.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,j.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:h,onClick:d,...o,className:(0,i.Z)("tabs__item",m.tabItem,null==o?void 0:o.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function v(e){let{lazy:n,children:t,selectedValue:i}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===i));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,j.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==i})))})}function y(e){const n=g(e);return(0,j.jsxs)("div",{className:(0,i.Z)("tabs-container",m.tabList),children:[(0,j.jsx)(f,{...e,...n}),(0,j.jsx)(v,{...e,...n})]})}function T(e){const n=(0,x.Z)();return(0,j.jsx)(y,{...e,children:h(e.children)},String(n))}},47131:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/bottom-tabs-side-compact-00c9d793ff72f5512dd304c85c872b6a.png"},66736:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/bottom-tabs-side-material-f306f4f31881fc875463a5e6ad74e415.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>r});var a=t(67294);const i={},o=a.createContext(i);function r(e){const n=a.useContext(o);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f60d5e0f.d56d0cf2.js b/assets/js/f60d5e0f.d56d0cf2.js new file mode 100644 index 00000000000..158b5cee015 --- /dev/null +++ b/assets/js/f60d5e0f.d56d0cf2.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[16163],{52581:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>m,frontMatter:()=>s,metadata:()=>l,toc:()=>u});var a=t(85893),o=t(11151),i=t(74866),r=t(85162);const s={id:"handling-safe-area",title:"Supporting safe areas",sidebar_label:"Supporting safe areas"},c=void 0,l={id:"handling-safe-area",title:"Supporting safe areas",description:"By default, React Navigation tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:",source:"@site/versioned_docs/version-7.x/handling-safe-area.md",sourceDirName:".",slug:"/handling-safe-area",permalink:"/docs/7.x/handling-safe-area",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/handling-safe-area.md",tags:[],version:"7.x",frontMatter:{id:"handling-safe-area",title:"Supporting safe areas",sidebar_label:"Supporting safe areas"},sidebar:"docs",previous:{title:"Authentication flows",permalink:"/docs/7.x/auth-flow"},next:{title:"Customizing tab bar",permalink:"/docs/7.x/customizing-tabbar"}},d={},u=[{value:"Hidden/Custom Header or Tab Bar",id:"hiddencustom-header-or-tab-bar",level:2},{value:"Landscape Mode",id:"landscape-mode",level:2},{value:"Use the hook for more control",id:"use-the-hook-for-more-control",level:2},{value:"Summary",id:"summary",level:2}];function h(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,o.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"By default, React Navigation tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Physical notches"}),"\n",(0,a.jsx)(n.li,{children:"Status bar overlay"}),"\n",(0,a.jsx)(n.li,{children:"Home activity indicator on iOS"}),"\n",(0,a.jsx)(n.li,{children:"Navigation bar on Android"}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:'The area not overlapped by such items is referred to as "safe area".'}),"\n",(0,a.jsx)(n.p,{children:"We try to apply proper insets on the UI elements of the navigators to avoid being overlapped by such items. The goal is to (a) maximize usage of the screen (b) without hiding content or making it difficult to interact with by having it obscured by a physical display cutout or some operating system UI."}),"\n",(0,a.jsx)(n.p,{children:"While React Navigation handles safe areas for the built-in UI elements by default, your own content may also need to handle it to ensure that content isn't hidden by these items."}),"\n",(0,a.jsx)(n.p,{children:"It's tempting to solve (a) by wrapping your entire app in a container with padding that ensures all content will not be occluded. But in doing so, we waste a bunch of space on the screen, as pictured in the image on the left below. What we ideally want is the image pictured on the right."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Notch on the iPhone X",src:t(82541).Z+"",width:"794",height:"785"})}),"\n",(0,a.jsxs)(n.p,{children:["While React Native exports a ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component, this component only supports iOS 10+ with no support for older iOS versions or Android. In addition, it also has some issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. So we recommend to use the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook from the ",(0,a.jsx)(n.a,{href:"https://github.com/th3rdwave/react-native-safe-area-context",children:"react-native-safe-area-context"})," library to handle safe areas in a more reliable way."]}),"\n",(0,a.jsx)(n.admonition,{type:"warning",children:(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"react-native-safe-area-context"})," library also exports a ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component. While it works on Android, it also has the same issues related to jumpy behavior when animating. So we recommend always using the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook instead and avoid using the ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component."]})}),"\n",(0,a.jsx)(n.p,{children:"The rest of this guide gives more information on how to support safe areas in React Navigation."}),"\n",(0,a.jsx)(n.h2,{id:"hiddencustom-header-or-tab-bar",children:"Hidden/Custom Header or Tab Bar"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Default React Navigation Behavior",src:t(93006).Z+"",width:"323",height:"700"})}),"\n",(0,a.jsx)(n.p,{children:"React Navigation handles safe area in the default header. However, if you're using a custom header, it's important to ensure your UI is within the safe area."}),"\n",(0,a.jsxs)(n.p,{children:["For example, if I render nothing for the ",(0,a.jsx)(n.code,{children:"header"})," or ",(0,a.jsx)(n.code,{children:"tabBar"}),", nothing renders"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Hidden components","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hidden components" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nfunction Demo() {\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n\n// codeblock-focus-start\nconst MyTabs = createBottomTabNavigator({\n initialRouteName: 'Analitics',\n // highlight-start\n tabBar: () => null,\n screenOptions: {\n headerShown: false,\n },\n // highlight-end\n screens: {\n Analitics: Demo,\n Profile: Demo,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n initialRouteName: 'Home',\n // highlight-start\n screenOptions: {\n headerShown: false,\n },\n // highlight-end\n screens: {\n Home: MyTabs,\n Settings: Demo,\n },\n});\n\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Hidden components","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hidden components" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nfunction Demo() {\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\nconst Stack = createNativeStackNavigator();\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\n return (\n \n \n \n {() => (\n null}\n screenOptions={{ headerShown: false }}\n >\n \n \n \n )}\n \n\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Text hidden by iPhoneX UI elements",src:t(19860).Z+"",width:"323",height:"700"})}),"\n",(0,a.jsxs)(n.p,{children:["To fix this issue you can apply safe area insets on your content. This can be achieved using the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook from the ",(0,a.jsx)(n.code,{children:"react-native-safe-area-context"})," library:"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Safe area example","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Safe area example" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// codeblock-focus-start\nfunction Demo() {\n const insets = useSafeAreaInsets();\n\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst MyTabs = createBottomTabNavigator({\n initialRouteName: 'Analitics',\n tabBar: () => null,\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Analitics: Demo,\n Profile: Demo,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n initialRouteName: 'Home',\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Home: MyTabs,\n Settings: Demo,\n },\n});\n\n// codeblock-focus-start\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Safe area example","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Safe area example" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// codeblock-focus-start\nfunction Demo() {\n const insets = useSafeAreaInsets();\n\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst Stack = createNativeStackNavigator();\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nexport default function App() {\n return (\n \n \n {/*(...) */}\n // codeblock-focus-end\n \n \n {() => (\n null}\n screenOptions={{ headerShown: false }}\n >\n \n \n \n )}\n \n \n \n // codeblock-focus-start\n \n \n );\n}\n// codeblock-focus-end\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["Make sure to wrap your app in ",(0,a.jsx)(n.code,{children:"SafeAreaProvider"})," as per the instructions ",(0,a.jsx)(n.a,{href:"https://github.com/th3rdwave/react-native-safe-area-context#usage",children:"here"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Content spaced correctly with safe area insets",src:t(52819).Z+"",width:"323",height:"700"})}),"\n",(0,a.jsx)(n.p,{children:"This will detect if the app is running on a device with notches, if so, ensure the content isn't hidden behind any hardware elements."}),"\n",(0,a.jsx)(n.h2,{id:"landscape-mode",children:"Landscape Mode"}),"\n",(0,a.jsx)(n.p,{children:"Even if you're using the default navigation bar and tab bar - if your application works in landscape mode it's important to ensure your content isn't hidden behind the sensor cluster."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"App in landscape mode with text hidden",src:t(43559).Z+"",width:"2436",height:"1125"})}),"\n",(0,a.jsx)(n.p,{children:"To fix this you can, once again, apply safe area insets to your content. This will not conflict with the navigation bar nor the tab bar's default behavior in portrait mode."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"App in landscape mode with text visible",src:t(42224).Z+"",width:"2436",height:"1125"})}),"\n",(0,a.jsx)(n.h2,{id:"use-the-hook-for-more-control",children:"Use the hook for more control"}),"\n",(0,a.jsxs)(n.p,{children:["In some cases you might need more control over which paddings are applied. For example, you can only apply the top and the bottom padding by changing the ",(0,a.jsx)(n.code,{children:"style"})," object:"]}),"\n",(0,a.jsxs)(i.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"useSafeAreaInsets hook","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="useSafeAreaInsets hook" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n// codeblock-focus-start\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction Demo() {\n const insets = useSafeAreaInsets();\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst MyTabs = createBottomTabNavigator({\n initialRouteName: 'Analitics',\n tabBar: () => null,\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Analitics: Demo,\n Profile: Demo,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n initialRouteName: 'Home',\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Home: MyTabs,\n Settings: Demo,\n },\n});\n\n// codeblock-focus-start\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"useSafeAreaInsets hook","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="useSafeAreaInsets hook" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createStackNavigator } from '@react-navigation/stack';\n// codeblock-focus-start\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction Demo() {\n const insets = useSafeAreaInsets();\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst Stack = createStackNavigator();\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n {() => (\n null}\n screenOptions={{ headerShown: false }}\n >\n \n \n \n )}\n \n\n \n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["Similarly, you could apply these paddings in ",(0,a.jsx)(n.code,{children:"contentContainerStyle"})," of ",(0,a.jsx)(n.code,{children:"FlatList"})," to have the content avoid the safe areas, but still show them under the statusbar and navigation bar when scrolling."]}),"\n",(0,a.jsx)(n.h2,{id:"summary",children:"Summary"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["Use ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook from ",(0,a.jsx)(n.code,{children:"react-native-safe-area-context"})," instead of ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component"]}),"\n",(0,a.jsxs)(n.li,{children:["Don't wrap your whole app in ",(0,a.jsx)(n.code,{children:"SafeAreaView"}),", instead apply the styles to content inside your screens"]}),"\n",(0,a.jsxs)(n.li,{children:["Apply only specific insets using the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook for more control"]}),"\n"]})]})}function m(e={}){const{wrapper:n}={...(0,o.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>r});t(67294);var a=t(86010);const o={tabItem:"tabItem_Ymn6"};var i=t(85893);function r(e){let{children:n,hidden:t,className:r}=e;return(0,i.jsx)("div",{role:"tabpanel",className:(0,a.Z)(o.tabItem,r),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>w});var a=t(67294),o=t(86010),i=t(12466),r=t(16550),s=t(20469),c=t(91980),l=t(67392),d=t(50012);function u(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function h(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:o}}=e;return{value:n,label:t,attributes:a,default:o}}))}(t);return function(e){const n=(0,l.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,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:t}=e;const o=(0,r.k6)(),i=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(i),(0,a.useCallback)((e=>{if(!i)return;const n=new URLSearchParams(o.location.search);n.set(i,e),o.replace({...o.location,search:n.toString()})}),[i,o])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:o}=e,i=h(e),[r,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const o=null!=(n=a.find((e=>e.default)))?n:a[0];if(!o)throw new Error("Unexpected error: 0 tabValues");return o.value}({defaultValue:n,tabValues:i}))),[l,u]=p({queryString:t,groupId:o}),[f,g]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[o,i]=(0,d.Nk)(t);return[o,(0,a.useCallback)((e=>{t&&i.set(e)}),[t,i])]}({groupId:o}),v=(()=>{const e=null!=l?l:f;return m({value:e,tabValues:i})?e:null})();(0,s.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:r,selectValue:(0,a.useCallback)((e=>{if(!m({value:e,tabValues:i}))throw new Error("Can't select invalid tab value="+e);c(e),u(e),g(e)}),[u,g,i]),tabValues:i}}var g=t(72389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(85893);function x(e){let{className:n,block:t,selectedValue:a,selectValue:r,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,i.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),o=s[t].value;o!==a&&(l(n),r(o))},u=e=>{var n;let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var o;const n=c.indexOf(e.currentTarget)-1;t=null!=(o=c[n])?o:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:i}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...i,className:(0,o.Z)("tabs__item",v.tabItem,null==i?void 0:i.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function S(e){let{lazy:n,children:t,selectedValue:o}=e;const i=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=i.find((e=>e.props.value===o));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:i.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==o})))})}function y(e){const n=f(e);return(0,b.jsxs)("div",{className:(0,o.Z)("tabs-container",v.tabList),children:[(0,b.jsx)(x,{...e,...n}),(0,b.jsx)(S,{...e,...n})]})}function w(e){const n=(0,g.Z)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},82541:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/00-intro-4709ed78711b21c7bd54d2a1385262bb.png"},93006:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/01-iphonex-default-2588bf4cb73433282b14319e54ea4815.png"},19860:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/02-iphonex-content-hidden-2a5db62e9fa6340cfb3e8f5a4250b7d4.png"},52819:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/03-iphonex-content-fixed-cb656e6a268a30af3f9aae2b6f3d4c64.png"},43559:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/04-iphonex-landscape-hidden-113cbaf522b57ff8fbfdf4b1b39411d3.png"},42224:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/05-iphonex-landscape-fixed-0d90c3fe5813cdd8664946c5873d7f57.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>r});var a=t(67294);const o={},i=a.createContext(o);function r(e){const n=a.useContext(i);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:r(e.components),a.createElement(i.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/f60d5e0f.f336a668.js b/assets/js/f60d5e0f.f336a668.js deleted file mode 100644 index 5d5629eabcc..00000000000 --- a/assets/js/f60d5e0f.f336a668.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[16163],{52581:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>m,frontMatter:()=>s,metadata:()=>l,toc:()=>u});var a=t(85893),i=t(11151),o=t(74866),r=t(85162);const s={id:"handling-safe-area",title:"Supporting safe areas",sidebar_label:"Supporting safe areas"},c=void 0,l={id:"handling-safe-area",title:"Supporting safe areas",description:"By default, React Navigation tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:",source:"@site/versioned_docs/version-7.x/handling-safe-area.md",sourceDirName:".",slug:"/handling-safe-area",permalink:"/docs/7.x/handling-safe-area",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-7.x/handling-safe-area.md",tags:[],version:"7.x",frontMatter:{id:"handling-safe-area",title:"Supporting safe areas",sidebar_label:"Supporting safe areas"},sidebar:"docs",previous:{title:"Authentication flows",permalink:"/docs/7.x/auth-flow"},next:{title:"Hiding tab bar in screens",permalink:"/docs/7.x/hiding-tabbar-in-screens"}},d={},u=[{value:"Hidden/Custom Header or Tab Bar",id:"hiddencustom-header-or-tab-bar",level:2},{value:"Landscape Mode",id:"landscape-mode",level:2},{value:"Use the hook for more control",id:"use-the-hook-for-more-control",level:2},{value:"Summary",id:"summary",level:2}];function h(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,i.a)(),...e.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.p,{children:"By default, React Navigation tries to ensure that the elements of the navigators display correctly on devices with notches (e.g. iPhone X) and UI elements which may overlap the app content. Such items include:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Physical notches"}),"\n",(0,a.jsx)(n.li,{children:"Status bar overlay"}),"\n",(0,a.jsx)(n.li,{children:"Home activity indicator on iOS"}),"\n",(0,a.jsx)(n.li,{children:"Navigation bar on Android"}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:'The area not overlapped by such items is referred to as "safe area".'}),"\n",(0,a.jsx)(n.p,{children:"We try to apply proper insets on the UI elements of the navigators to avoid being overlapped by such items. The goal is to (a) maximize usage of the screen (b) without hiding content or making it difficult to interact with by having it obscured by a physical display cutout or some operating system UI."}),"\n",(0,a.jsx)(n.p,{children:"While React Navigation handles safe areas for the built-in UI elements by default, your own content may also need to handle it to ensure that content isn't hidden by these items."}),"\n",(0,a.jsx)(n.p,{children:"It's tempting to solve (a) by wrapping your entire app in a container with padding that ensures all content will not be occluded. But in doing so, we waste a bunch of space on the screen, as pictured in the image on the left below. What we ideally want is the image pictured on the right."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Notch on the iPhone X",src:t(82541).Z+"",width:"794",height:"785"})}),"\n",(0,a.jsxs)(n.p,{children:["While React Native exports a ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component, this component only supports iOS 10+ with no support for older iOS versions or Android. In addition, it also has some issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. So we recommend to use the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook from the ",(0,a.jsx)(n.a,{href:"https://github.com/th3rdwave/react-native-safe-area-context",children:"react-native-safe-area-context"})," library to handle safe areas in a more reliable way."]}),"\n",(0,a.jsx)(n.admonition,{type:"warning",children:(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.code,{children:"react-native-safe-area-context"})," library also exports a ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component. While it works on Android, it also has the same issues related to jumpy behavior when animating. So we recommend always using the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook instead and avoid using the ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component."]})}),"\n",(0,a.jsx)(n.p,{children:"The rest of this guide gives more information on how to support safe areas in React Navigation."}),"\n",(0,a.jsx)(n.h2,{id:"hiddencustom-header-or-tab-bar",children:"Hidden/Custom Header or Tab Bar"}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Default React Navigation Behavior",src:t(93006).Z+"",width:"323",height:"700"})}),"\n",(0,a.jsx)(n.p,{children:"React Navigation handles safe area in the default header. However, if you're using a custom header, it's important to ensure your UI is within the safe area."}),"\n",(0,a.jsxs)(n.p,{children:["For example, if I render nothing for the ",(0,a.jsx)(n.code,{children:"header"})," or ",(0,a.jsx)(n.code,{children:"tabBar"}),", nothing renders"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Hidden components","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hidden components" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nfunction Demo() {\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n\n// codeblock-focus-start\nconst MyTabs = createBottomTabNavigator({\n initialRouteName: 'Analitics',\n // highlight-start\n tabBar: () => null,\n screenOptions: {\n headerShown: false,\n },\n // highlight-end\n screens: {\n Analitics: Demo,\n Profile: Demo,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n initialRouteName: 'Home',\n // highlight-start\n screenOptions: {\n headerShown: false,\n },\n // highlight-end\n screens: {\n Home: MyTabs,\n Settings: Demo,\n },\n});\n\n// codeblock-focus-end\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return ;\n}\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Hidden components","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Hidden components" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n\nfunction Demo() {\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\nconst Stack = createNativeStackNavigator();\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\n return (\n \n \n \n {() => (\n null}\n screenOptions={{ headerShown: false }}\n >\n \n \n \n )}\n \n\n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Text hidden by iPhoneX UI elements",src:t(19860).Z+"",width:"323",height:"700"})}),"\n",(0,a.jsxs)(n.p,{children:["To fix this issue you can apply safe area insets on your content. This can be achieved using the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook from the ",(0,a.jsx)(n.code,{children:"react-native-safe-area-context"})," library:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"Safe area example","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Safe area example" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// codeblock-focus-start\nfunction Demo() {\n const insets = useSafeAreaInsets();\n\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst MyTabs = createBottomTabNavigator({\n initialRouteName: 'Analitics',\n tabBar: () => null,\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Analitics: Demo,\n Profile: Demo,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n initialRouteName: 'Home',\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Home: MyTabs,\n Settings: Demo,\n },\n});\n\n// codeblock-focus-start\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"Safe area example","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Safe area example" snack',children:"import * as React from 'react';\nimport { View, Text } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\n// codeblock-focus-start\nfunction Demo() {\n const insets = useSafeAreaInsets();\n\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst Stack = createNativeStackNavigator();\nconst Tab = createBottomTabNavigator();\n\n// codeblock-focus-start\nexport default function App() {\n return (\n \n \n {/*(...) */}\n // codeblock-focus-end\n \n \n {() => (\n null}\n screenOptions={{ headerShown: false }}\n >\n \n \n \n )}\n \n \n \n // codeblock-focus-start\n \n \n );\n}\n// codeblock-focus-end\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["Make sure to wrap your app in ",(0,a.jsx)(n.code,{children:"SafeAreaProvider"})," as per the instructions ",(0,a.jsx)(n.a,{href:"https://github.com/th3rdwave/react-native-safe-area-context#usage",children:"here"}),"."]}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"Content spaced correctly with safe area insets",src:t(52819).Z+"",width:"323",height:"700"})}),"\n",(0,a.jsx)(n.p,{children:"This will detect if the app is running on a device with notches, if so, ensure the content isn't hidden behind any hardware elements."}),"\n",(0,a.jsx)(n.h2,{id:"landscape-mode",children:"Landscape Mode"}),"\n",(0,a.jsx)(n.p,{children:"Even if you're using the default navigation bar and tab bar - if your application works in landscape mode it's important to ensure your content isn't hidden behind the sensor cluster."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"App in landscape mode with text hidden",src:t(43559).Z+"",width:"2436",height:"1125"})}),"\n",(0,a.jsx)(n.p,{children:"To fix this you can, once again, apply safe area insets to your content. This will not conflict with the navigation bar nor the tab bar's default behavior in portrait mode."}),"\n",(0,a.jsx)(n.p,{children:(0,a.jsx)(n.img,{alt:"App in landscape mode with text visible",src:t(42224).Z+"",width:"2436",height:"1125"})}),"\n",(0,a.jsx)(n.h2,{id:"use-the-hook-for-more-control",children:"Use the hook for more control"}),"\n",(0,a.jsxs)(n.p,{children:["In some cases you might need more control over which paddings are applied. For example, you can only apply the top and the bottom padding by changing the ",(0,a.jsx)(n.code,{children:"style"})," object:"]}),"\n",(0,a.jsxs)(o.Z,{groupId:"config",queryString:"config",children:[(0,a.jsx)(r.Z,{value:"static",label:"Static",default:!0,children:(0,a.jsx)(n.pre,{"data-name":"useSafeAreaInsets hook","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="useSafeAreaInsets hook" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { createStaticNavigation } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createNativeStackNavigator } from '@react-navigation/native-stack';\n// codeblock-focus-start\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction Demo() {\n const insets = useSafeAreaInsets();\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst MyTabs = createBottomTabNavigator({\n initialRouteName: 'Analitics',\n tabBar: () => null,\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Analitics: Demo,\n Profile: Demo,\n },\n});\n\nconst RootStack = createNativeStackNavigator({\n initialRouteName: 'Home',\n screenOptions: {\n headerShown: false,\n },\n screens: {\n Home: MyTabs,\n Settings: Demo,\n },\n});\n\n// codeblock-focus-start\n\nconst Navigation = createStaticNavigation(RootStack);\n\nexport default function App() {\n return (\n \n \n \n );\n}\n// codeblock-focus-end\n"})})}),(0,a.jsx)(r.Z,{value:"dynamic",label:"Dynamic",children:(0,a.jsx)(n.pre,{"data-name":"useSafeAreaInsets hook","data-snack":"true",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="useSafeAreaInsets hook" snack',children:"import * as React from 'react';\nimport { Text, View } from 'react-native';\nimport { NavigationContainer } from '@react-navigation/native';\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\nimport { createStackNavigator } from '@react-navigation/stack';\n// codeblock-focus-start\nimport {\n SafeAreaProvider,\n useSafeAreaInsets,\n} from 'react-native-safe-area-context';\n\nfunction Demo() {\n const insets = useSafeAreaInsets();\n return (\n \n This is top text.\n This is bottom text.\n \n );\n}\n// codeblock-focus-end\n\nconst Stack = createStackNavigator();\nconst Tab = createBottomTabNavigator();\n\nexport default function App() {\n return (\n \n \n \n \n {() => (\n null}\n screenOptions={{ headerShown: false }}\n >\n \n \n \n )}\n \n\n \n \n \n \n );\n}\n"})})})]}),"\n",(0,a.jsxs)(n.p,{children:["Similarly, you could apply these paddings in ",(0,a.jsx)(n.code,{children:"contentContainerStyle"})," of ",(0,a.jsx)(n.code,{children:"FlatList"})," to have the content avoid the safe areas, but still show them under the statusbar and navigation bar when scrolling."]}),"\n",(0,a.jsx)(n.h2,{id:"summary",children:"Summary"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["Use ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook from ",(0,a.jsx)(n.code,{children:"react-native-safe-area-context"})," instead of ",(0,a.jsx)(n.code,{children:"SafeAreaView"})," component"]}),"\n",(0,a.jsxs)(n.li,{children:["Don't wrap your whole app in ",(0,a.jsx)(n.code,{children:"SafeAreaView"}),", instead apply the styles to content inside your screens"]}),"\n",(0,a.jsxs)(n.li,{children:["Apply only specific insets using the ",(0,a.jsx)(n.code,{children:"useSafeAreaInsets"})," hook for more control"]}),"\n"]})]})}function m(e={}){const{wrapper:n}={...(0,i.a)(),...e.components};return n?(0,a.jsx)(n,{...e,children:(0,a.jsx)(h,{...e})}):h(e)}},85162:(e,n,t)=>{t.d(n,{Z:()=>r});t(67294);var a=t(86010);const i={tabItem:"tabItem_Ymn6"};var o=t(85893);function r(e){let{children:n,hidden:t,className:r}=e;return(0,o.jsx)("div",{role:"tabpanel",className:(0,a.Z)(i.tabItem,r),hidden:t,children:n})}},74866:(e,n,t)=>{t.d(n,{Z:()=>w});var a=t(67294),i=t(86010),o=t(12466),r=t(16550),s=t(20469),c=t(91980),l=t(67392),d=t(50012);function u(e){var n,t;return null!=(n=null==(t=a.Children.toArray(e).filter((e=>"\n"!==e)).map((e=>{if(!e||(0,a.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:t.filter(Boolean))?n:[]}function h(e){const{values:n,children:t}=e;return(0,a.useMemo)((()=>{const e=null!=n?n:function(e){return u(e).map((e=>{let{props:{value:n,label:t,attributes:a,default:i}}=e;return{value:n,label:t,attributes:a,default:i}}))}(t);return function(e){const n=(0,l.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,t])}function m(e){let{value:n,tabValues:t}=e;return t.some((e=>e.value===n))}function p(e){let{queryString:n=!1,groupId:t}=e;const i=(0,r.k6)(),o=function(e){let{queryString:n=!1,groupId:t}=e;if("string"==typeof n)return n;if(!1===n)return null;if(!0===n&&!t)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!=t?t:null}({queryString:n,groupId:t});return[(0,c._X)(o),(0,a.useCallback)((e=>{if(!o)return;const n=new URLSearchParams(i.location.search);n.set(o,e),i.replace({...i.location,search:n.toString()})}),[o,i])]}function f(e){const{defaultValue:n,queryString:t=!1,groupId:i}=e,o=h(e),[r,c]=(0,a.useState)((()=>function(e){var n;let{defaultValue:t,tabValues:a}=e;if(0===a.length)throw new Error("Docusaurus error: the component requires at least one children component");if(t){if(!m({value:t,tabValues:a}))throw new Error('Docusaurus error: The has a defaultValue "'+t+'" but none of its children has the corresponding value. Available values are: '+a.map((e=>e.value)).join(", ")+". If you intend to show no default tab, use defaultValue={null} instead.");return t}const i=null!=(n=a.find((e=>e.default)))?n:a[0];if(!i)throw new Error("Unexpected error: 0 tabValues");return i.value}({defaultValue:n,tabValues:o}))),[l,u]=p({queryString:t,groupId:i}),[f,g]=function(e){let{groupId:n}=e;const t=function(e){return e?"docusaurus.tab."+e:null}(n),[i,o]=(0,d.Nk)(t);return[i,(0,a.useCallback)((e=>{t&&o.set(e)}),[t,o])]}({groupId:i}),v=(()=>{const e=null!=l?l:f;return m({value:e,tabValues:o})?e:null})();(0,s.Z)((()=>{v&&c(v)}),[v]);return{selectedValue:r,selectValue:(0,a.useCallback)((e=>{if(!m({value:e,tabValues:o}))throw new Error("Can't select invalid tab value="+e);c(e),u(e),g(e)}),[u,g,o]),tabValues:o}}var g=t(72389);const v={tabList:"tabList__CuJ",tabItem:"tabItem_LNqP"};var b=t(85893);function x(e){let{className:n,block:t,selectedValue:a,selectValue:r,tabValues:s}=e;const c=[],{blockElementScrollPositionUntilNextRender:l}=(0,o.o5)(),d=e=>{const n=e.currentTarget,t=c.indexOf(n),i=s[t].value;i!==a&&(l(n),r(i))},u=e=>{var n;let t=null;switch(e.key){case"Enter":d(e);break;case"ArrowRight":{var a;const n=c.indexOf(e.currentTarget)+1;t=null!=(a=c[n])?a:c[0];break}case"ArrowLeft":{var i;const n=c.indexOf(e.currentTarget)-1;t=null!=(i=c[n])?i:c[c.length-1];break}}null==(n=t)||n.focus()};return(0,b.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,i.Z)("tabs",{"tabs--block":t},n),children:s.map((e=>{let{value:n,label:t,attributes:o}=e;return(0,b.jsx)("li",{role:"tab",tabIndex:a===n?0:-1,"aria-selected":a===n,ref:e=>c.push(e),onKeyDown:u,onClick:d,...o,className:(0,i.Z)("tabs__item",v.tabItem,null==o?void 0:o.className,{"tabs__item--active":a===n}),children:null!=t?t:n},n)}))})}function S(e){let{lazy:n,children:t,selectedValue:i}=e;const o=(Array.isArray(t)?t:[t]).filter(Boolean);if(n){const e=o.find((e=>e.props.value===i));return e?(0,a.cloneElement)(e,{className:"margin-top--md"}):null}return(0,b.jsx)("div",{className:"margin-top--md",children:o.map(((e,n)=>(0,a.cloneElement)(e,{key:n,hidden:e.props.value!==i})))})}function y(e){const n=f(e);return(0,b.jsxs)("div",{className:(0,i.Z)("tabs-container",v.tabList),children:[(0,b.jsx)(x,{...e,...n}),(0,b.jsx)(S,{...e,...n})]})}function w(e){const n=(0,g.Z)();return(0,b.jsx)(y,{...e,children:u(e.children)},String(n))}},82541:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/00-intro-4709ed78711b21c7bd54d2a1385262bb.png"},93006:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/01-iphonex-default-2588bf4cb73433282b14319e54ea4815.png"},19860:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/02-iphonex-content-hidden-2a5db62e9fa6340cfb3e8f5a4250b7d4.png"},52819:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/03-iphonex-content-fixed-cb656e6a268a30af3f9aae2b6f3d4c64.png"},43559:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/04-iphonex-landscape-hidden-113cbaf522b57ff8fbfdf4b1b39411d3.png"},42224:(e,n,t)=>{t.d(n,{Z:()=>a});const a=t.p+"assets/images/05-iphonex-landscape-fixed-0d90c3fe5813cdd8664946c5873d7f57.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>s,a:()=>r});var a=t(67294);const i={},o=a.createContext(i);function r(e){const n=a.useContext(o);return a.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function s(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:r(e.components),a.createElement(o.Provider,{value:n},e.children)}}}]); \ No newline at end of file diff --git a/assets/js/main.2f574f38.js b/assets/js/main.2f574f38.js new file mode 100644 index 00000000000..ea638225cb0 --- /dev/null +++ b/assets/js/main.2f574f38.js @@ -0,0 +1,2 @@ +/*! For license information please see main.2f574f38.js.LICENSE.txt */ +(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[40179],{20830:(e,t,n)=>{"use strict";n.d(t,{W:()=>a});var o=n(67294);function a(){return o.createElement("svg",{width:"20",height:"20",className:"DocSearch-Search-Icon",viewBox:"0 0 20 20"},o.createElement("path",{d:"M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z",stroke:"currentColor",fill:"none",fillRule:"evenodd",strokeLinecap:"round",strokeLinejoin:"round"}))}},723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(67294);var o=n(68356),a=n.n(o),r=n(16887);const i={"00d72952":[()=>n.e(25590).then(n.bind(n,93222)),"@site/versioned_docs/version-5.x/link.md",93222],"017fa78e":[()=>Promise.all([n.e(40532),n.e(64067)]).then(n.bind(n,69722)),"@site/versioned_docs/version-5.x/stack-navigator.md",69722],"01a1bba5":[()=>n.e(50347).then(n.t.bind(n,78530,19)),"~docs/default/version-6-x-metadata-prop-658.json",78530],"01a85c17":[()=>Promise.all([n.e(40532),n.e(64013)]).then(n.bind(n,91223)),"@theme/BlogTagsListPage",91223],"02715c9e":[()=>n.e(97535).then(n.t.bind(n,71290,19)),"~docs/default/version-1-x-metadata-prop-27c.json",71290],"029dc854":[()=>n.e(23273).then(n.bind(n,11893)),"@site/versioned_docs/version-2.x/navigating.md",11893],"02f293a2":[()=>n.e(36926).then(n.bind(n,28492)),"@site/versioned_docs/version-1.x/auth-flow.md",28492],"0334870a":[()=>n.e(63057).then(n.bind(n,59265)),"@site/versioned_docs/version-6.x/use-scroll-to-top.md",59265],"055cb6cb":[()=>n.e(62348).then(n.bind(n,11500)),"@site/blog/2020-05-16-web-support.md",11500],"060b58ec":[()=>n.e(38407).then(n.bind(n,91418)),"@site/versioned_docs/version-3.x/transitioner.md",91418],"06aa38ed":[()=>n.e(78657).then(n.bind(n,36627)),"@site/versioned_docs/version-4.x/headers.md",36627],"0732884c":[()=>n.e(81963).then(n.bind(n,47658)),"@site/versioned_docs/version-5.x/stack-actions.md",47658],"07fb801c":[()=>n.e(19250).then(n.bind(n,63658)),"@site/versioned_docs/version-4.x/community-libraries-and-navigators.md",63658],"08731dbd":[()=>n.e(88095).then(n.bind(n,49685)),"@site/versioned_docs/version-6.x/multiple-drawers.md",49685],"08c74c36":[()=>n.e(98639).then(n.bind(n,74518)),"@site/versioned_docs/version-1.x/tab-based-navigation.md",74518],"09dc4294":[()=>n.e(34475).then(n.bind(n,27600)),"@site/versioned_docs/version-4.x/react-native-screens.md",27600],"0ad77dda":[()=>n.e(31912).then(n.bind(n,37145)),"@site/blog/2018-04-06-react-navigation-2.0-rc.md",37145],"0bcf026f":[()=>n.e(85831).then(n.bind(n,48876)),"@site/versioned_docs/version-6.x/route-prop.md",48876],"0cd801b6":[()=>Promise.all([n.e(40532),n.e(44554)]).then(n.bind(n,114)),"@site/versioned_docs/version-6.x/elements.md",114],"0e0a3cb0":[()=>Promise.all([n.e(40532),n.e(25392)]).then(n.bind(n,99011)),"@site/versioned_docs/version-4.x/getting-started.md",99011],"0e9dd1f6":[()=>n.e(64039).then(n.bind(n,40184)),"@site/versioned_docs/version-6.x/stack-actions.md",40184],"0e9f90e2":[()=>n.e(93970).then(n.bind(n,99704)),"@site/versioned_docs/version-2.x/common-mistakes.md",99704],"0f251e76":[()=>n.e(65492).then(n.bind(n,95561)),"@site/versioned_docs/version-3.x/custom-android-back-button-handling.md",95561],"0fd48e70":[()=>n.e(80898).then(n.bind(n,88900)),"@site/blog/2020-05-19-joining-github-sponsors.md?truncated=true",88900],"116934ab":[()=>n.e(36590).then(n.bind(n,37364)),"@site/versioned_docs/version-2.x/modal.md",37364],"11c37a84":[()=>n.e(36912).then(n.bind(n,6953)),"@site/versioned_docs/version-5.x/server-rendering.md",6953],"11edefd1":[()=>Promise.all([n.e(40532),n.e(38431)]).then(n.bind(n,25821)),"@site/versioned_docs/version-5.x/bottom-tab-navigator.md",25821],"11fb85f3":[()=>n.e(21862).then(n.bind(n,17658)),"@site/versioned_docs/version-5.x/drawer-actions.md",17658],"1233d971":[()=>n.e(73825).then(n.bind(n,45471)),"@site/versioned_docs/version-1.x/api-reference.md",45471],"1279275a":[()=>n.e(82723).then(n.bind(n,89376)),"@site/versioned_docs/version-6.x/navigation-context.md",89376],"13e4d9ef":[()=>n.e(96802).then(n.bind(n,98987)),"@site/versioned_docs/version-2.x/material-top-tab-navigator.md",98987],14616538:[()=>n.e(88187).then(n.bind(n,11356)),"@site/versioned_docs/version-5.x/screen-options-resolution.md",11356],14716511:[()=>n.e(30506).then(n.bind(n,96851)),"@site/versioned_docs/version-1.x/status-bar.md",96851],"14acaad8":[()=>n.e(435).then(n.bind(n,4243)),"@site/versioned_docs/version-2.x/api-reference.md",4243],"156bcb80":[()=>n.e(39198).then(n.bind(n,35773)),"@site/versioned_docs/version-3.x/tab-based-navigation.md",35773],"15cb52a8":[()=>n.e(26819).then(n.bind(n,11093)),"@site/versioned_docs/version-2.x/header-buttons.md",11093],"15f1c7c7":[()=>n.e(93480).then(n.bind(n,53832)),"@site/versioned_docs/version-3.x/stack-actions.md",53832],"168ed425":[()=>n.e(76385).then(n.bind(n,81717)),"@site/versioned_docs/version-1.x/routers.md",81717],"16d126b2":[()=>n.e(81959).then(n.bind(n,56891)),"@site/versioned_docs/version-6.x/redux-integration.md",56891],17896441:[()=>Promise.all([n.e(40532),n.e(3242),n.e(27918)]).then(n.bind(n,78945)),"@theme/DocItem",78945],"17b59e25":[()=>Promise.all([n.e(40532),n.e(89551)]).then(n.bind(n,22128)),"@site/versioned_docs/version-7.x/native-stack-navigator.md",22128],"17d003f0":[()=>n.e(89626).then(n.bind(n,98779)),"@site/versioned_docs/version-2.x/routers.md",98779],"17ec3dcd":[()=>n.e(42743).then(n.bind(n,54580)),"@site/versioned_docs/version-5.x/custom-navigators.md",54580],"188f698f":[()=>Promise.all([n.e(40532),n.e(86561)]).then(n.bind(n,69332)),"@site/versioned_docs/version-7.x/use-scroll-to-top.md",69332],"18b2070b":[()=>n.e(81519).then(n.bind(n,64689)),"@site/versioned_docs/version-5.x/navigation-events.md",64689],"18bf351a":[()=>Promise.all([n.e(40532),n.e(41447)]).then(n.bind(n,37378)),"@site/versioned_docs/version-6.x/stack-navigator.md",37378],"190dc87f":[()=>n.e(74799).then(n.bind(n,69641)),"@site/versioned_docs/version-7.x/static-configuration.md",69641],"198136e6":[()=>n.e(9795).then(n.bind(n,91863)),"@site/versioned_docs/version-3.x/header-buttons.md",91863],"1a4e3797":[()=>Promise.all([n.e(40532),n.e(97920)]).then(n.bind(n,39172)),"@theme/SearchPage",39172],"1ae011e9":[()=>Promise.all([n.e(40532),n.e(23818)]).then(n.bind(n,62690)),"@site/versioned_docs/version-7.x/tab-actions.md",62690],"1b06775d":[()=>n.e(660).then(n.bind(n,50253)),"@site/versioned_docs/version-4.x/animated-switch-navigator.md",50253],"1b79fc76":[()=>n.e(66301).then(n.bind(n,29540)),"@site/blog/2018-11-17-react-navigation-3.0.md?truncated=true",29540],"1be5ddd6":[()=>n.e(22316).then(n.bind(n,21280)),"@site/versioned_docs/version-6.x/server-container.md",21280],"1c007cbb":[()=>n.e(13126).then(n.bind(n,38385)),"@site/versioned_docs/version-2.x/tab-navigator.md",38385],"1c2eab2d":[()=>n.e(83604).then(n.bind(n,19471)),"@site/versioned_docs/version-2.x/with-navigation-focus.md",19471],"1ca07b31":[()=>n.e(94007).then(n.bind(n,90508)),"@site/versioned_docs/version-5.x/more-resources.md",90508],"1d424ec3":[()=>n.e(62989).then(n.bind(n,19601)),"@site/versioned_docs/version-3.x/material-top-tab-navigator.md",19601],"1e63bad8":[()=>n.e(70525).then(n.bind(n,7298)),"@site/versioned_docs/version-5.x/contributing.md",7298],"1eecde9e":[()=>n.e(64222).then(n.bind(n,86739)),"@site/versioned_docs/version-6.x/shared-element-transitions.md",86739],"1f27758d":[()=>n.e(23831).then(n.bind(n,9805)),"@site/blog/2024-03-25-introducing-static-api.md?truncated=true",9805],"1f391b9e":[()=>Promise.all([n.e(40532),n.e(3242),n.e(13085)]).then(n.bind(n,14247)),"@theme/MDXPage",14247],"1f922c0a":[()=>Promise.all([n.e(40532),n.e(62573)]).then(n.bind(n,76870)),"@site/versioned_docs/version-5.x/drawer-navigator.md",76870],"1fc9112c":[()=>n.e(18998).then(n.bind(n,51569)),"@site/versioned_docs/version-4.x/navigation-context.md",51569],20697995:[()=>n.e(31817).then(n.bind(n,65529)),"@site/blog/2018-05-07-react-navigation-2.0.md",65529],"208b9e32":[()=>n.e(21453).then(n.bind(n,36161)),"@site/versioned_docs/version-5.x/use-route.md",36161],20989594:[()=>n.e(71280).then(n.bind(n,61674)),"@site/versioned_docs/version-5.x/route-prop.md",61674],"20f68260":[()=>n.e(16707).then(n.bind(n,45163)),"@site/versioned_docs/version-2.x/glossary-of-terms.md",45163],"2152a276":[()=>n.e(96450).then(n.bind(n,98541)),"@site/versioned_docs/version-7.x/use-link-builder.md",98541],"220adfdd":[()=>n.e(83073).then(n.bind(n,38916)),"@site/versioned_docs/version-2.x/navigating-without-navigation-prop.md",38916],22592995:[()=>Promise.all([n.e(40532),n.e(65799)]).then(n.bind(n,41021)),"@site/versioned_docs/version-7.x/navigating-without-navigation-prop.md",41021],"22cce5e3":[()=>n.e(6679).then(n.bind(n,73433)),"@site/versioned_docs/version-1.x/transitioner.md",73433],"22f4682c":[()=>Promise.all([n.e(40532),n.e(11417)]).then(n.bind(n,64429)),"@site/versioned_docs/version-7.x/navigator.md",64429],"2330c7a5":[()=>n.e(64464).then(n.bind(n,65842)),"@site/versioned_docs/version-2.x/navigation-key.md",65842],"2345d271":[()=>n.e(44501).then(n.bind(n,68793)),"@site/versioned_docs/version-2.x/state-persistence.md",68793],23828948:[()=>n.e(93575).then(n.bind(n,51034)),"@site/versioned_docs/version-5.x/react-native-screens.md",51034],"23dd3248":[()=>n.e(62405).then(n.bind(n,14499)),"@site/versioned_docs/version-6.x/use-focus-effect.md",14499],"242b7c9d":[()=>n.e(62519).then(n.bind(n,10164)),"@site/versioned_docs/version-6.x/screen-options.md",10164],"2725af3e":[()=>n.e(62019).then(n.bind(n,80150)),"@site/blog/2018-11-01-react-navigation-3.0-rc.md",80150],"2742fd1f":[()=>Promise.all([n.e(40532),n.e(42272)]).then(n.bind(n,54906)),"@site/versioned_docs/version-6.x/drawer-navigator.md",54906],"278698af":[()=>Promise.all([n.e(40532),n.e(83612)]).then(n.bind(n,19565)),"@site/versioned_docs/version-2.x/redux-integration.md",19565],"27e00fa9":[()=>n.e(26177).then(n.bind(n,43352)),"@site/versioned_docs/version-2.x/status-bar.md",43352],"283e63f8":[()=>n.e(44157).then(n.t.bind(n,52844,19)),"~blog/default/blog-tags-announcement-752.json",52844],"2895d14d":[()=>n.e(67373).then(n.bind(n,77674)),"@site/versioned_docs/version-7.x/next-steps.md",77674],"28ae1e59":[()=>Promise.all([n.e(40532),n.e(26277)]).then(n.bind(n,58961)),"@site/versioned_docs/version-7.x/drawer-actions.md",58961],"2965ee69":[()=>n.e(78624).then(n.bind(n,15298)),"@site/versioned_docs/version-2.x/app-containers.md",15298],"298dce3d":[()=>n.e(64454).then(n.bind(n,24637)),"@site/blog/2018-05-07-react-navigation-2.0.md?truncated=true",24637],"29af1846":[()=>n.e(2980).then(n.bind(n,93846)),"@site/versioned_docs/version-3.x/with-navigation.md",93846],"2a1e22c6":[()=>Promise.all([n.e(40532),n.e(36234)]).then(n.bind(n,66751)),"@site/versioned_docs/version-6.x/bottom-tab-navigator.md",66751],"2a793fe9":[()=>n.e(47793).then(n.bind(n,2971)),"@site/versioned_docs/version-2.x/auth-flow.md",2971],"2ad06cff":[()=>n.e(94961).then(n.bind(n,41397)),"@site/versioned_docs/version-3.x/custom-navigator-overview.md",41397],"2bba45e9":[()=>Promise.all([n.e(40532),n.e(95801)]).then(n.bind(n,72848)),"@site/versioned_docs/version-6.x/native-stack-navigator.md",72848],"2bc9c82b":[()=>n.e(42041).then(n.bind(n,28241)),"@site/versioned_docs/version-5.x/connecting-navigation-prop.md",28241],"2bf47602":[()=>n.e(15091).then(n.bind(n,87988)),"@site/versioned_docs/version-1.x/handling-iphonex.md",87988],"2c1dfa59":[()=>n.e(41370).then(n.bind(n,52693)),"@site/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md",52693],"2c6e00e5":[()=>n.e(13120).then(n.bind(n,29088)),"@site/versioned_docs/version-4.x/glossary-of-terms.md",29088],"2e2591dd":[()=>n.e(1393).then(n.bind(n,96471)),"@site/versioned_docs/version-6.x/navigating-without-navigation-prop.md",96471],"2e363522":[()=>n.e(38963).then(n.bind(n,16873)),"@site/versioned_docs/version-3.x/localization.md",16873],"2e5371a8":[()=>n.e(41434).then(n.bind(n,16389)),"@site/versioned_docs/version-5.x/screen-options.md",16389],"2f88b479":[()=>n.e(68562).then(n.bind(n,31744)),"@site/versioned_docs/version-4.x/navigation-events.md",31744],"2f8e0f44":[()=>n.e(85261).then(n.bind(n,58522)),"@site/versioned_docs/version-4.x/drawer-actions.md",58522],"2faf7e03":[()=>n.e(72442).then(n.bind(n,29103)),"@site/blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md?truncated=true",29103],"317e2018":[()=>n.e(52735).then(n.bind(n,34805)),"@site/blog/2019-09-16-react-navigation-4.0.md",34805],"31a4dab7":[()=>n.e(35201).then(n.bind(n,76428)),"@site/versioned_docs/version-4.x/common-mistakes.md",76428],"320f57a7":[()=>n.e(94474).then(n.bind(n,96244)),"@site/versioned_docs/version-4.x/switch-actions.md",96244],"322cbdb3":[()=>n.e(12665).then(n.bind(n,51490)),"@site/versioned_docs/version-3.x/themes.md",51490],"3288f5dd":[()=>n.e(19987).then(n.bind(n,23716)),"@site/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md",23716],"32c90e4f":[()=>n.e(15823).then(n.bind(n,29502)),"@site/versioned_docs/version-3.x/custom-navigators.md",29502],"34642e36":[()=>n.e(24076).then(n.bind(n,91785)),"@site/versioned_docs/version-2.x/navigation-context.md",91785],34737634:[()=>n.e(39136).then(n.bind(n,35012)),"@site/versioned_docs/version-1.x/navigating.md",35012],"3473afe0":[()=>n.e(63355).then(n.bind(n,98302)),"@site/versioned_docs/version-4.x/with-navigation-focus.md",98302],34750482:[()=>Promise.all([n.e(40532),n.e(92715)]).then(n.bind(n,51246)),"@site/versioned_docs/version-7.x/drawer-based-navigation.md",51246],"349caeb8":[()=>n.e(38041).then(n.bind(n,12288)),"@site/versioned_docs/version-1.x/header-buttons.md",12288],"34a92c49":[()=>n.e(11529).then(n.bind(n,90275)),"@site/versioned_docs/version-2.x/navigation-lifecycle.md",90275],"34afa66a":[()=>n.e(42277).then(n.bind(n,29439)),"@site/versioned_docs/version-3.x/navigation-lifecycle.md",29439],"34b88438":[()=>n.e(47240).then(n.bind(n,94864)),"@site/versioned_docs/version-1.x/listen-lifecycle-events.md",94864],"34e8079f":[()=>n.e(25101).then(n.bind(n,18910)),"@site/versioned_docs/version-6.x/navigation-lifecycle.md",18910],"369bd8f8":[()=>n.e(25391).then(n.t.bind(n,75650,19)),"~blog/default/blog-tags-tutorial-e7d-list.json",75650],"36dd008b":[()=>n.e(89776).then(n.bind(n,33951)),"@site/versioned_docs/version-2.x/custom-routers.md",33951],"37bf63f8":[()=>n.e(57310).then(n.bind(n,43677)),"@site/versioned_docs/version-6.x/auth-flow.md",43677],"385a96ec":[()=>n.e(26806).then(n.bind(n,79190)),"@site/versioned_docs/version-4.x/more-resources.md",79190],38945924:[()=>n.e(77685).then(n.bind(n,2193)),"@site/versioned_docs/version-3.x/navigation-prop.md",2193],"38e75df9":[()=>n.e(10369).then(n.bind(n,55032)),"@site/versioned_docs/version-3.x/status-bar.md",55032],"38f0ae39":[()=>n.e(31724).then(n.bind(n,74121)),"@site/versioned_docs/version-7.x/pitch.md",74121],"38fc62f0":[()=>n.e(40883).then(n.bind(n,41413)),"@site/versioned_docs/version-5.x/use-focus-effect.md",41413],"3a7a90e6":[()=>n.e(22190).then(n.bind(n,6062)),"@site/versioned_docs/version-5.x/alternatives.md",6062],"3bdd1be4":[()=>n.e(96750).then(n.bind(n,49755)),"@site/blog/2018-11-17-react-navigation-3.0.md",49755],"3d2d3ec8":[()=>n.e(90008).then(n.bind(n,14103)),"@site/versioned_docs/version-2.x/screen-tracking.md",14103],"3d5c69eb":[()=>Promise.all([n.e(40532),n.e(28774)]).then(n.bind(n,20940)),"@site/versioned_docs/version-5.x/hello-react-navigation.md",20940],"3d65d037":[()=>Promise.all([n.e(40532),n.e(34609)]).then(n.bind(n,65017)),"@site/versioned_docs/version-7.x/web-support.md",65017],"3dd22c0a":[()=>n.e(2409).then(n.bind(n,26225)),"@site/versioned_docs/version-3.x/screen-tracking.md",26225],"3ddd3618":[()=>n.e(43107).then(n.bind(n,49257)),"@site/versioned_docs/version-3.x/with-navigation-focus.md",49257],"3e290227":[()=>n.e(69264).then(n.bind(n,97296)),"@site/versioned_docs/version-6.x/status-bar.md",97296],"3f09e8c5":[()=>Promise.all([n.e(40532),n.e(78777)]).then(n.bind(n,89207)),"@site/versioned_docs/version-4.x/material-top-tab-navigator.md",89207],"3fe99ec0":[()=>n.e(42568).then(n.bind(n,81401)),"@site/versioned_docs/version-6.x/navigation-solutions-and-community-libraries.md",81401],"4097ee88":[()=>n.e(11456).then(n.bind(n,18350)),"@site/versioned_docs/version-1.x/navigation-views.md",18350],"41d864f0":[()=>n.e(18999).then(n.bind(n,14039)),"@site/versioned_docs/version-3.x/navigating-without-navigation-prop.md",14039],"421dbb3b":[()=>n.e(22782).then(n.bind(n,36392)),"@site/versioned_docs/version-3.x/handling-iphonex.md",36392],"4294b48d":[()=>n.e(2448).then(n.bind(n,50642)),"@site/versioned_docs/version-6.x/hiding-tabbar-in-screens.md",50642],"42baf60a":[()=>n.e(43969).then(n.bind(n,22419)),"@site/versioned_docs/version-3.x/animated-switch-navigator.md",22419],"430040aa":[()=>n.e(49375).then(n.bind(n,3199)),"@site/versioned_docs/version-4.x/pitch.md",3199],"43895b73":[()=>n.e(8960).then(n.bind(n,19325)),"@site/versioned_docs/version-3.x/navigation-options-resolution.md",19325],"451c00d0":[()=>n.e(10801).then(n.t.bind(n,90637,19)),"~blog/default/blog-tags-react-native-paper-084.json",90637],"454aff66":[()=>n.e(94754).then(n.bind(n,20802)),"@site/versioned_docs/version-6.x/use-navigation-state.md",20802],"4554b8eb":[()=>n.e(82827).then(n.bind(n,4383)),"@site/versioned_docs/version-3.x/more-resources.md",4383],"45aab7e5":[()=>n.e(94499).then(n.t.bind(n,4962,19)),"~docs/default/version-2-x-metadata-prop-4fa.json",4962],"45e61a04":[()=>n.e(79720).then(n.bind(n,21024)),"@site/versioned_docs/version-4.x/navigation-key.md",21024],"472ed44a":[()=>Promise.all([n.e(40532),n.e(54825)]).then(n.bind(n,15893)),"@site/versioned_docs/version-6.x/tab-based-navigation.md",15893],"47734c36":[()=>Promise.all([n.e(40532),n.e(82806)]).then(n.bind(n,36865)),"@site/versioned_docs/version-3.x/material-bottom-tab-navigator.md",36865],"4790fcfc":[()=>n.e(70918).then(n.bind(n,29959)),"@site/versioned_docs/version-5.x/supported-react-native-versions.md",29959],"47cdb689":[()=>Promise.all([n.e(40532),n.e(1697)]).then(n.bind(n,59630)),"@site/versioned_docs/version-6.x/tab-view.md",59630],"480dd063":[()=>n.e(85476).then(n.bind(n,71262)),"@site/versioned_docs/version-2.x/alternatives.md",71262],"48179b36":[()=>n.e(5882).then(n.bind(n,49574)),"@site/versioned_docs/version-1.x/contributing.md",49574],"482751c5":[()=>n.e(25655).then(n.bind(n,39669)),"@site/versioned_docs/version-3.x/next-steps.md",39669],"48627ccf":[()=>Promise.all([n.e(40532),n.e(91324)]).then(n.bind(n,71272)),"@site/versioned_docs/version-7.x/getting-started.md",71272],"48bce793":[()=>n.e(83388).then(n.bind(n,28703)),"@site/versioned_docs/version-6.x/themes.md",28703],"493070b6":[()=>Promise.all([n.e(40532),n.e(84999)]).then(n.bind(n,45955)),"@site/versioned_docs/version-2.x/material-bottom-tab-navigator.md",45955],"4950f112":[()=>n.e(8543).then(n.t.bind(n,23618,19)),"~blog/default/blog-tags-ui-kitten-157.json",23618],"4971bf21":[()=>n.e(60189).then(n.bind(n,26804)),"@site/versioned_docs/version-6.x/custom-routers.md",26804],"4a85a9e1":[()=>n.e(9772).then(n.bind(n,81121)),"@site/versioned_docs/version-4.x/navigating-without-navigation-prop.md",81121],"4aa34a2d":[()=>n.e(94928).then(n.bind(n,95530)),"@site/versioned_docs/version-2.x/custom-navigator-overview.md",95530],"4affc812":[()=>Promise.all([n.e(40532),n.e(41941)]).then(n.bind(n,31070)),"@site/versioned_docs/version-7.x/themes.md",31070],"4d2cce11":[()=>n.e(44757).then(n.bind(n,85663)),"@site/versioned_docs/version-6.x/pitch.md",85663],"4d989974":[()=>n.e(61092).then(n.bind(n,18056)),"@site/versioned_docs/version-1.x/navigating-without-navigation-prop.md",18056],"4dad2d95":[()=>n.e(66986).then(n.bind(n,11316)),"@site/versioned_docs/version-6.x/params.md",11316],"4dd5a1e2":[()=>n.e(48263).then(n.bind(n,4782)),"@site/versioned_docs/version-6.x/use-link-builder.md",4782],"4de4f0aa":[()=>n.e(8054).then(n.bind(n,72351)),"@site/versioned_docs/version-3.x/modal.md",72351],"4ed526a6":[()=>n.e(60018).then(n.bind(n,22864)),"@site/versioned_docs/version-4.x/switch-navigator.md",22864],"4ee3e0f9":[()=>n.e(73006).then(n.t.bind(n,15745,19)),"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",15745],"4f17f4e8":[()=>n.e(62617).then(n.bind(n,75080)),"@site/versioned_docs/version-3.x/scrollables.md",75080],"4f52b89f":[()=>n.e(57702).then(n.bind(n,81368)),"@site/versioned_docs/version-6.x/screen-tracking.md",81368],"4f9396e4":[()=>n.e(89619).then(n.bind(n,66507)),"@site/versioned_docs/version-3.x/navigation-views.md",66507],"5050cca3":[()=>n.e(9311).then(n.bind(n,58925)),"@site/versioned_docs/version-4.x/modal.md",58925],"506fd606":[()=>n.e(11790).then(n.bind(n,44208)),"@site/versioned_docs/version-4.x/navigation-actions.md",44208],"508f3f9b":[()=>n.e(87666).then(n.bind(n,84843)),"@site/versioned_docs/version-5.x/custom-routers.md",84843],"50f409bc":[()=>Promise.all([n.e(40532),n.e(92048)]).then(n.bind(n,16595)),"@site/versioned_docs/version-7.x/deep-linking.md",16595],"51035c32":[()=>n.e(60329).then(n.bind(n,34416)),"@site/versioned_docs/version-4.x/with-navigation.md",34416],"51368b5b":[()=>n.e(76422).then(n.bind(n,18717)),"@site/versioned_docs/version-5.x/web-support.md",18717],52030153:[()=>n.e(80920).then(n.bind(n,40502)),"@site/blog/2024-03-25-introducing-static-api.md",40502],"524cb6b9":[()=>Promise.all([n.e(40532),n.e(46800)]).then(n.bind(n,80341)),"@site/versioned_docs/version-7.x/header-buttons.md",80341],"53be29f2":[()=>n.e(23258).then(n.bind(n,92591)),"@site/versioned_docs/version-6.x/preventing-going-back.md",92591],"54ce2ec1":[()=>n.e(91883).then(n.bind(n,40038)),"@site/versioned_docs/version-1.x/with-navigation-focus.md",40038],"553b20f2":[()=>n.e(54591).then(n.bind(n,84755)),"@site/versioned_docs/version-4.x/typescript.md",84755],"55b83a48":[()=>n.e(33408).then(n.bind(n,69767)),"@site/versioned_docs/version-3.x/headers.md",69767],"55b92464":[()=>n.e(31047).then(n.bind(n,17046)),"@site/versioned_docs/version-6.x/navigation-prop.md",17046],"561a3eb1":[()=>n.e(12541).then(n.t.bind(n,33722,19)),"~docs/default/version-5-x-metadata-prop-e8f.json",33722],"572e4edf":[()=>Promise.all([n.e(40532),n.e(45098)]).then(n.bind(n,24890)),"@site/versioned_docs/version-5.x/devtools.md",24890],"57bdb9cf":[()=>n.e(73597).then(n.bind(n,68442)),"@site/versioned_docs/version-5.x/headers.md",68442],"5834e856":[()=>n.e(40364).then(n.bind(n,71461)),"@site/versioned_docs/version-4.x/params.md",71461],"585dd972":[()=>n.e(22081).then(n.bind(n,3554)),"@site/versioned_docs/version-3.x/navigating.md",3554],"58932f68":[()=>n.e(80690).then(n.bind(n,55420)),"@site/versioned_docs/version-4.x/navigation-lifecycle.md",55420],"5a6dc606":[()=>n.e(12227).then(n.bind(n,26381)),"@site/versioned_docs/version-2.x/custom-navigators.md",26381],"5a6e47ce":[()=>n.e(7519).then(n.bind(n,29854)),"@site/versioned_docs/version-6.x/navigating.md",29854],"5a783331":[()=>Promise.all([n.e(40532),n.e(26463)]).then(n.bind(n,16052)),"@site/versioned_docs/version-7.x/screen-tracking.md",16052],"5dde19ad":[()=>n.e(80434).then(n.t.bind(n,492,19)),"~docs/default/version-3-x-metadata-prop-df2.json",492],"5e95c892":[()=>n.e(29661).then(n.bind(n,41892)),"@theme/DocsRoot",41892],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,36809)),"@generated/docusaurus.config",36809],"5ee02d5e":[()=>n.e(78236).then(n.bind(n,6996)),"@site/versioned_docs/version-3.x/hello-react-navigation.md",6996],"5f32cb9f":[()=>Promise.all([n.e(40532),n.e(98596)]).then(n.bind(n,78635)),"@site/versioned_docs/version-6.x/getting-started.md",78635],"5f5c23d7":[()=>n.e(53247).then(n.bind(n,60962)),"@site/versioned_docs/version-7.x/navigation-state.md",60962],"5f623a5c":[()=>n.e(4442).then(n.bind(n,7495)),"@site/versioned_docs/version-5.x/screen.md",7495],"5f7a57d5":[()=>n.e(11534).then(n.bind(n,71154)),"@site/versioned_docs/version-6.x/use-is-focused.md",71154],"5f99a06b":[()=>n.e(32065).then(n.bind(n,41559)),"@site/versioned_docs/version-6.x/state-persistence.md",41559],"5fa34f3e":[()=>n.e(12944).then(n.bind(n,61333)),"@site/versioned_docs/version-5.x/use-theme.md",61333],"6054d54f":[()=>n.e(39176).then(n.bind(n,16822)),"@site/versioned_docs/version-6.x/connecting-navigation-prop.md",16822],"61322d15":[()=>n.e(99937).then(n.bind(n,95190)),"@site/versioned_docs/version-6.x/handling-safe-area.md",95190],"61da15b7":[()=>Promise.all([n.e(40532),n.e(86259)]).then(n.bind(n,98557)),"@site/versioned_docs/version-7.x/hello-react-navigation.md",98557],"6289cd6c":[()=>n.e(50149).then(n.bind(n,82301)),"@site/versioned_docs/version-2.x/react-native-screens.md",82301],"6351806c":[()=>Promise.all([n.e(40532),n.e(46524)]).then(n.bind(n,4689)),"@site/versioned_docs/version-7.x/route-object.md",4689],"6354cbd6":[()=>n.e(83340).then(n.bind(n,61663)),"@site/versioned_docs/version-1.x/custom-routers.md",61663],"63a36266":[()=>Promise.all([n.e(40468),n.e(49967)]).then(n.bind(n,85137)),"@site/versioned_docs/version-5.x/configuring-links.md",85137],"63f4abc2":[()=>n.e(2905).then(n.bind(n,53059)),"@site/versioned_docs/version-2.x/handling-iphonex.md",53059],65636706:[()=>Promise.all([n.e(40468),n.e(34568)]).then(n.bind(n,86282)),"@site/versioned_docs/version-6.x/configuring-links.md",86282],"6578c24b":[()=>n.e(76548).then(n.bind(n,59885)),"@site/versioned_docs/version-6.x/next-steps.md",59885],66169356:[()=>n.e(34366).then(n.bind(n,44875)),"@site/versioned_docs/version-4.x/navigating.md",44875],"662e2520":[()=>n.e(85954).then(n.bind(n,59261)),"@site/versioned_docs/version-1.x/navigation-prop.md",59261],66875650:[()=>n.e(89352).then(n.bind(n,52571)),"@site/versioned_docs/version-1.x/stack-navigator.md",52571],"66b225ca":[()=>n.e(63038).then(n.bind(n,59177)),"@site/blog/2019-09-16-react-navigation-4.0.md?truncated=true",59177],"66e8e455":[()=>n.e(3024).then(n.bind(n,22488)),"@site/blog/2021-08-14-react-navigation-6.0.md",22488],"67bc1365":[()=>n.e(47284).then(n.bind(n,6151)),"@site/versioned_docs/version-4.x/themes.md",6151],"682ba1cc":[()=>n.e(88895).then(n.bind(n,35670)),"@site/versioned_docs/version-3.x/community-libraries-and-navigators.md",35670],"682ce172":[()=>n.e(25073).then(n.bind(n,3140)),"@site/versioned_docs/version-2.x/transitioner.md",3140],"6875c492":[()=>Promise.all([n.e(40532),n.e(3242),n.e(79677),n.e(48610)]).then(n.bind(n,41714)),"@theme/BlogTagsPostsPage",41714],"68b0fc05":[()=>n.e(18889).then(n.bind(n,55752)),"@site/versioned_docs/version-3.x/common-mistakes.md",55752],"691c8b2c":[()=>n.e(47715).then(n.bind(n,42249)),"@site/versioned_docs/version-3.x/routers.md",42249],"693618f8":[()=>n.e(20211).then(n.bind(n,32284)),"@site/versioned_docs/version-3.x/bottom-tab-navigator.md",32284],"69616a12":[()=>n.e(31756).then(n.bind(n,92357)),"@site/versioned_docs/version-1.x/glossary-of-terms.md",92357],"69e3adff":[()=>n.e(35549).then(n.bind(n,14643)),"@site/versioned_docs/version-4.x/localization.md",14643],"6a29eacd":[()=>n.e(21513).then(n.bind(n,19269)),"@site/versioned_docs/version-2.x/supported-react-native-versions.md",19269],"6a7fdb9e":[()=>n.e(36708).then(n.bind(n,54503)),"@site/versioned_docs/version-5.x/community-libraries-and-navigators.md",54503],"6b20cb2f":[()=>n.e(24279).then(n.bind(n,56024)),"@site/versioned_docs/version-7.x/migration-guides.md",56024],"6ba5b985":[()=>n.e(70057).then(n.bind(n,63177)),"@site/versioned_docs/version-1.x/headers.md",63177],"6bc8f2a2":[()=>Promise.all([n.e(40532),n.e(44266)]).then(n.bind(n,20997)),"@site/versioned_docs/version-7.x/troubleshooting.md",20997],"6bcec069":[()=>Promise.all([n.e(40532),n.e(21411)]).then(n.bind(n,93166)),"@site/versioned_docs/version-7.x/use-route.md",93166],"6d5e2782":[()=>n.e(44458).then(n.t.bind(n,55553,19)),"~blog/default/blog-tags-ui-kitten-157-list.json",55553],"6d6cabdc":[()=>Promise.all([n.e(40532),n.e(37203)]).then(n.bind(n,60850)),"@site/versioned_docs/version-7.x/navigation-container.md",60850],"6df3dc9e":[()=>Promise.all([n.e(40532),n.e(61998)]).then(n.bind(n,3090)),"@site/versioned_docs/version-7.x/use-is-focused.md",3090],"6f0a4736":[()=>n.e(5024).then(n.bind(n,86060)),"@site/versioned_docs/version-3.x/navigation-context.md",86060],"6f67031a":[()=>n.e(82763).then(n.bind(n,49219)),"@site/versioned_docs/version-4.x/screen-tracking.md",49219],"6f680f40":[()=>Promise.all([n.e(40532),n.e(96536)]).then(n.bind(n,27350)),"@site/versioned_docs/version-7.x/navigation-context.md",27350],"6f859436":[()=>n.e(16457).then(n.bind(n,36777)),"@site/versioned_docs/version-1.x/drawer-based-navigation.md",36777],"6f9c9b78":[()=>n.e(2186).then(n.bind(n,67462)),"@site/versioned_docs/version-3.x/pitch.md",67462],"6fc7b633":[()=>Promise.all([n.e(40532),n.e(3922)]).then(n.bind(n,23540)),"@site/versioned_docs/version-5.x/tab-based-navigation.md",23540],"720ec844":[()=>Promise.all([n.e(40532),n.e(5725)]).then(n.bind(n,22743)),"@site/versioned_docs/version-4.x/material-bottom-tab-navigator.md",22743],"723a1d1f":[()=>n.e(79307).then(n.bind(n,95338)),"@site/versioned_docs/version-6.x/navigation-actions.md",95338],72619197:[()=>n.e(56541).then(n.bind(n,51335)),"@site/blog/2019-10-17-react-navigation-native.md",51335],"726a3ae5":[()=>n.e(20841).then(n.bind(n,6539)),"@site/versioned_docs/version-1.x/with-navigation.md",6539],"7278614b":[()=>n.e(23521).then(n.bind(n,30727)),"@site/blog/2020-05-16-web-support.md?truncated=true",30727],"72a85bb9":[()=>n.e(44456).then(n.bind(n,32504)),"@site/versioned_docs/version-5.x/use-link-props.md",32504],"732a0bdd":[()=>n.e(52223).then(n.bind(n,58084)),"@site/versioned_docs/version-1.x/modal.md",58084],"7396804a":[()=>n.e(72664).then(n.bind(n,94049)),"@site/versioned_docs/version-2.x/with-navigation.md",94049],"73cd3c7f":[()=>n.e(47625).then(n.bind(n,48405)),"@site/versioned_docs/version-4.x/contributing.md",48405],74450489:[()=>n.e(90489).then(n.t.bind(n,19159,19)),"~blog/default/blog-tags-web-0e7.json",19159],"7446ee19":[()=>n.e(51711).then(n.t.bind(n,73492,19)),"~blog/default/blog-tags-announcement-page-2-671-list.json",73492],"74cdd3dc":[()=>Promise.all([n.e(40532),n.e(36054)]).then(n.bind(n,6849)),"@site/versioned_docs/version-7.x/material-top-tab-navigator.md",6849],"74ef9c09":[()=>n.e(31450).then(n.bind(n,26742)),"@site/versioned_docs/version-6.x/use-route.md",26742],"75086e52":[()=>n.e(29200).then(n.bind(n,37911)),"@site/versioned_docs/version-7.x/contributing.md",37911],"75a3cde9":[()=>n.e(71486).then(n.bind(n,50128)),"@site/versioned_docs/version-2.x/navigation-actions.md",50128],76725556:[()=>n.e(58269).then(n.bind(n,42545)),"@site/versioned_docs/version-6.x/use-theme.md",42545],"769a6239":[()=>n.e(98709).then(n.bind(n,3556)),"@site/versioned_docs/version-1.x/pitch.md",3556],"7745b380":[()=>n.e(22531).then(n.bind(n,26988)),"@site/versioned_docs/version-6.x/header-buttons.md",26988],"77aa6ed4":[()=>Promise.all([n.e(40532),n.e(49810)]).then(n.bind(n,41524)),"@site/versioned_docs/version-7.x/screen.md",41524],"77e23114":[()=>n.e(35074).then(n.t.bind(n,67217,19)),"~blog/default/blog-tags-tutorial-e7d.json",67217],"78260baf":[()=>n.e(52878).then(n.bind(n,84703)),"@site/versioned_docs/version-7.x/used-by.md",84703],79893160:[()=>n.e(92110).then(n.bind(n,73644)),"@site/versioned_docs/version-3.x/custom-routers.md",73644],"79ac6895":[()=>n.e(50116).then(n.bind(n,90878)),"@site/versioned_docs/version-1.x/next-steps.md",90878],"79dbb029":[()=>n.e(53556).then(n.bind(n,79316)),"@site/versioned_docs/version-5.x/auth-flow.md",79316],"79f65c0a":[()=>n.e(16766).then(n.t.bind(n,83769,19)),"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",83769],"7a316a81":[()=>n.e(6479).then(n.bind(n,85966)),"@site/versioned_docs/version-4.x/supported-react-native-versions.md",85966],"7a359cef":[()=>n.e(4074).then(n.bind(n,66359)),"@site/versioned_docs/version-3.x/deep-linking.md",66359],"7a69f3f2":[()=>Promise.all([n.e(40532),n.e(24886)]).then(n.bind(n,18186)),"@site/versioned_docs/version-4.x/troubleshooting.md",18186],"7aa771dd":[()=>Promise.all([n.e(40532),n.e(10888)]).then(n.bind(n,3981)),"@site/blog/2024-06-27-react-navigation-7.0-rc.md",3981],"7ac60746":[()=>n.e(60691).then(n.bind(n,8206)),"@site/versioned_docs/version-3.x/drawer-based-navigation.md",8206],"7bde2dda":[()=>Promise.all([n.e(40532),n.e(80908)]).then(n.bind(n,75e3)),"@site/versioned_docs/version-7.x/customizing-bottom-tabs.md",75e3],"7be16658":[()=>Promise.all([n.e(40532),n.e(20694)]).then(n.bind(n,38630)),"@site/versioned_docs/version-7.x/status-bar.md",38630],"7bf45219":[()=>n.e(13083).then(n.bind(n,70656)),"@site/versioned_docs/version-1.x/drawer-navigator.md",70656],"7c94a739":[()=>n.e(76602).then(n.bind(n,53545)),"@site/versioned_docs/version-4.x/navigation-options-resolution.md",53545],"7cbef4dd":[()=>n.e(90759).then(n.bind(n,3076)),"@site/versioned_docs/version-4.x/MST-integration.md",3076],"7d87cf11":[()=>n.e(71794).then(n.bind(n,72768)),"@site/src/pages/help.md",72768],"7e788281":[()=>Promise.all([n.e(40532),n.e(67888)]).then(n.bind(n,93343)),"@site/versioned_docs/version-5.x/drawer-based-navigation.md",93343],"7f0203ae":[()=>n.e(32343).then(n.bind(n,51798)),"@site/versioned_docs/version-2.x/custom-android-back-button-handling.md",51798],"7f3ebd16":[()=>Promise.all([n.e(40532),n.e(34863)]).then(n.bind(n,2800)),"@site/versioned_docs/version-7.x/upgrading-from-6.x.md",2800],"7f524dd3":[()=>n.e(75684).then(n.bind(n,50586)),"@site/versioned_docs/version-6.x/navigation-state.md",50586],"802bca5d":[()=>n.e(97856).then(n.bind(n,63603)),"@site/blog/2018-11-01-react-navigation-3.0-rc.md?truncated=true",63603],"814f3328":[()=>n.e(52535).then(n.t.bind(n,45641,19)),"~blog/default/blog-post-list-prop-default.json",45641],"81cb56fd":[()=>Promise.all([n.e(40532),n.e(94920)]).then(n.bind(n,77564)),"@site/versioned_docs/version-7.x/testing.md",77564],"825d5fdb":[()=>n.e(88784).then(n.bind(n,71633)),"@site/versioned_docs/version-2.x/navigation-views.md",71633],"82bb0d50":[()=>n.e(88584).then(n.bind(n,99585)),"@site/versioned_docs/version-6.x/function-after-focusing-screen.md",99585],"82bb8736":[()=>n.e(61566).then(n.bind(n,36573)),"@site/versioned_docs/version-5.x/params.md",36573],"8386ba1d":[()=>Promise.all([n.e(40532),n.e(54931)]).then(n.bind(n,34206)),"@site/versioned_docs/version-7.x/group.md",34206],"83d480e9":[()=>n.e(60205).then(n.t.bind(n,43672,19)),"~blog/default/blog-tags-release-b5c.json",43672],"8520aa43":[()=>n.e(4604).then(n.bind(n,31655)),"@site/versioned_docs/version-1.x/navigation-actions.md",31655],"8521727c":[()=>n.e(60504).then(n.bind(n,59378)),"@site/versioned_docs/version-5.x/status-bar.md",59378],"8526e2d7":[()=>n.e(92684).then(n.bind(n,98688)),"@site/versioned_docs/version-4.x/navigation-views.md",98688],"857226cd":[()=>n.e(60216).then(n.bind(n,77379)),"@site/versioned_docs/version-4.x/custom-navigator-overview.md",77379],"85ef44ad":[()=>Promise.all([n.e(40532),n.e(19618)]).then(n.bind(n,79416)),"@site/versioned_docs/version-4.x/bottom-tab-navigator.md",79416],"8674297c":[()=>n.e(36166).then(n.bind(n,60474)),"@site/versioned_docs/version-1.x/custom-navigators.md",60474],"868d8162":[()=>Promise.all([n.e(40532),n.e(8200)]).then(n.bind(n,93909)),"@site/versioned_docs/version-7.x/function-after-focusing-screen.md",93909],"86d1f714":[()=>n.e(59158).then(n.bind(n,22164)),"@site/versioned_docs/version-3.x/alternatives.md",22164],"86ee57b9":[()=>n.e(36405).then(n.bind(n,18572)),"@site/versioned_docs/version-6.x/headers.md",18572],"86f1fc09":[()=>n.e(81558).then(n.bind(n,37469)),"@site/blog/2021-03-12-react-navigation-6.0-next.md?truncated=true",37469],"87087cb3":[()=>Promise.all([n.e(40532),n.e(43900)]).then(n.bind(n,35478)),"@site/versioned_docs/version-4.x/hello-react-navigation.md",35478],87288241:[()=>Promise.all([n.e(40532),n.e(56287)]).then(n.bind(n,10915)),"@site/src/pages/home/Splash/index.js",10915],"87fb05fe":[()=>n.e(1547).then(n.bind(n,73932)),"@site/versioned_docs/version-3.x/connecting-navigation-prop.md",73932],"88089c81":[()=>n.e(71379).then(n.bind(n,35588)),"@site/blog/2018-02-06-react-navigation-1.0.md?truncated=true",35588],"882617a0":[()=>n.e(84603).then(n.bind(n,61678)),"@site/blog/2020-05-19-joining-github-sponsors.md",61678],"884b85fa":[()=>n.e(17432).then(n.bind(n,14419)),"@site/versioned_docs/version-5.x/navigation-lifecycle.md",14419],"885db2d5":[()=>n.e(67294).then(n.bind(n,31770)),"@site/blog/2019-10-17-react-navigation-native.md?truncated=true",31770],"891dacb7":[()=>n.e(59071).then(n.bind(n,50171)),"@site/versioned_docs/version-5.x/limitations.md",50171],"8927ca75":[()=>n.e(75878).then(n.bind(n,44291)),"@site/blog/2018-04-06-react-navigation-2.0-rc.md?truncated=true",44291],"8a143e5b":[()=>Promise.all([n.e(40532),n.e(38369)]).then(n.bind(n,23539)),"@site/versioned_docs/version-7.x/nesting-navigators.md",23539],"8a507deb":[()=>n.e(80665).then(n.bind(n,52167)),"@site/versioned_docs/version-3.x/redux-integration.md",52167],"8c4738b1":[()=>Promise.all([n.e(40532),n.e(40468),n.e(8)]).then(n.bind(n,89990)),"@site/versioned_docs/version-7.x/configuring-links.md",89990],"8d3063a8":[()=>Promise.all([n.e(40532),n.e(12305)]).then(n.bind(n,11426)),"@site/versioned_docs/version-7.x/multiple-drawers.md",11426],"8d30a36f":[()=>n.e(85730).then(n.bind(n,98596)),"@site/versioned_docs/version-6.x/migration-guides.md",98596],"8d8bf681":[()=>Promise.all([n.e(40532),n.e(53487)]).then(n.bind(n,36309)),"@site/versioned_docs/version-4.x/stack-navigator-1.0.md",36309],"8da40a13":[()=>n.e(87187).then(n.bind(n,47125)),"@site/versioned_docs/version-1.x/switch-navigator.md",47125],"8dffd375":[()=>n.e(82339).then(n.bind(n,35369)),"@site/versioned_docs/version-2.x/navigation-events.md",35369],"8eb4e46b":[()=>n.e(10001).then(n.t.bind(n,82638,19)),"~blog/default/blog-page-2-677.json",82638],"8fea52f3":[()=>n.e(91499).then(n.bind(n,2622)),"@site/versioned_docs/version-1.x/tab-navigator.md",2622],"900b69c6":[()=>n.e(52587).then(n.bind(n,58504)),"@site/versioned_docs/version-2.x/hello-react-navigation.md",58504],"9122f241":[()=>n.e(25932).then(n.bind(n,38069)),"@site/versioned_docs/version-6.x/modal.md",38069],"9150b537":[()=>n.e(11498).then(n.bind(n,54742)),"@site/versioned_docs/version-4.x/state-persistence.md",54742],"915d8cad":[()=>n.e(74756).then(n.bind(n,10379)),"@site/versioned_docs/version-1.x/deep-linking.md",10379],"93402b4f":[()=>Promise.all([n.e(40532),n.e(71370)]).then(n.bind(n,67832)),"@site/versioned_docs/version-7.x/shared-element-transitions.md",67832],"94bac345":[()=>n.e(43347).then(n.bind(n,30676)),"@site/versioned_docs/version-2.x/pitch.md",30676],"94d96abc":[()=>n.e(78273).then(n.bind(n,8115)),"@site/versioned_docs/version-5.x/navigation-state.md",8115],"957ba597":[()=>n.e(49333).then(n.bind(n,79292)),"@site/versioned_docs/version-3.x/glossary-of-terms.md",79292],"9585dc18":[()=>n.e(68493).then(n.bind(n,52010)),"@site/versioned_docs/version-3.x/function-after-focusing-screen.md",52010],"95e9668b":[()=>n.e(17641).then(n.bind(n,60193)),"@site/versioned_docs/version-6.x/more-resources.md",60193],"966cb129":[()=>Promise.all([n.e(40532),n.e(38122)]).then(n.bind(n,9593)),"@site/versioned_docs/version-5.x/compatibility.md",9593],"96c45902":[()=>Promise.all([n.e(40532),n.e(30098)]).then(n.bind(n,3526)),"@site/versioned_docs/version-7.x/navigation-actions.md",3526],"979dc077":[()=>n.e(17506).then(n.bind(n,25530)),"@site/versioned_docs/version-6.x/drawer-actions.md",25530],"990502fa":[()=>n.e(39138).then(n.bind(n,37598)),"@site/versioned_docs/version-2.x/community-libraries-and-navigators.md",37598],"99b846b2":[()=>n.e(75969).then(n.bind(n,82859)),"@site/versioned_docs/version-3.x/switch-actions.md",82859],"9a16bb9d":[()=>n.e(57842).then(n.bind(n,67641)),"@site/versioned_docs/version-4.x/drawer-based-navigation.md",67641],"9a1d032e":[()=>n.e(86478).then(n.bind(n,16635)),"@site/versioned_docs/version-5.x/native-stack-navigator.md",16635],"9ae89415":[()=>n.e(23158).then(n.bind(n,66444)),"@site/versioned_docs/version-5.x/use-is-focused.md",66444],"9af3f201":[()=>n.e(42266).then(n.bind(n,35600)),"@site/versioned_docs/version-1.x/partial-overlay.md",35600],"9b2fbcce":[()=>n.e(88698).then(n.bind(n,54063)),"@site/versioned_docs/version-7.x/more-resources.md",54063],"9b7f82fe":[()=>Promise.all([n.e(40532),n.e(64370)]).then(n.bind(n,64240)),"@site/versioned_docs/version-7.x/navigation-object.md",64240],"9b8e03c9":[()=>n.e(66277).then(n.bind(n,57997)),"@site/versioned_docs/version-5.x/navigation-prop.md",57997],"9c021584":[()=>n.e(37438).then(n.t.bind(n,98055,19)),"~blog/default/blog-tags-release-b5c-list.json",98055],"9d130922":[()=>Promise.all([n.e(40532),n.e(31762)]).then(n.bind(n,37626)),"@site/versioned_docs/version-7.x/use-navigation.md",37626],"9dbca327":[()=>n.e(95760).then(n.bind(n,63999)),"@site/versioned_docs/version-6.x/tab-actions.md",63999],"9e4087bc":[()=>n.e(53608).then(n.bind(n,63169)),"@theme/BlogArchivePage",63169],"9ff2e65d":[()=>n.e(70713).then(n.bind(n,89553)),"@site/versioned_docs/version-3.x/MST-integration.md",89553],a06a0936:[()=>n.e(36730).then(n.bind(n,268)),"@site/versioned_docs/version-5.x/navigating-without-navigation-prop.md",268],a103d9cd:[()=>Promise.all([n.e(40532),n.e(70216)]).then(n.bind(n,14313)),"@site/src/pages/home/Sponsors/index.js",14313],a11e2eb6:[()=>Promise.all([n.e(40532),n.e(73216)]).then(n.bind(n,61278)),"@site/versioned_docs/version-7.x/state-persistence.md",61278],a178b8fa:[()=>Promise.all([n.e(40532),n.e(25083)]).then(n.bind(n,68038)),"@site/versioned_docs/version-4.x/upgrading-from-3.x.md",68038],a187e2b2:[()=>n.e(2759).then(n.bind(n,25870)),"@site/versioned_docs/version-6.x/glossary-of-terms.md",25870],a1a99b30:[()=>n.e(35145).then(n.t.bind(n,7085,19)),"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-theme-search-algolia/default/plugin-route-context-module-100.json",7085],a2205702:[()=>n.e(60776).then(n.bind(n,93601)),"@site/versioned_docs/version-4.x/redux-integration.md",93601],a2851e91:[()=>n.e(75068).then(n.bind(n,54711)),"@site/versioned_docs/version-6.x/deep-linking.md",54711],a345bb73:[()=>Promise.all([n.e(40532),n.e(76683)]).then(n.bind(n,68810)),"@site/versioned_docs/version-7.x/typescript.md",68810],a44cee0b:[()=>n.e(56417).then(n.bind(n,21887)),"@site/versioned_docs/version-2.x/bottom-tab-navigator.md",21887],a4ac0748:[()=>n.e(80063).then(n.bind(n,19712)),"@site/versioned_docs/version-4.x/auth-flow.md",19712],a4bf4271:[()=>Promise.all([n.e(40532),n.e(67034)]).then(n.bind(n,84763)),"@site/versioned_docs/version-7.x/custom-android-back-button-handling.md",84763],a4e31e78:[()=>Promise.all([n.e(40532),n.e(79007)]).then(n.bind(n,33359)),"@site/versioned_docs/version-5.x/troubleshooting.md",33359],a50c5cfe:[()=>n.e(66088).then(n.bind(n,54676)),"@site/versioned_docs/version-1.x/customize-styles.md",54676],a5a8f997:[()=>Promise.all([n.e(40532),n.e(19249)]).then(n.bind(n,37798)),"@site/versioned_docs/version-6.x/material-top-tab-navigator.md",37798],a5ad4ffe:[()=>n.e(39023).then(n.bind(n,68482)),"@site/versioned_docs/version-5.x/used-by.md",68482],a5ae78fa:[()=>n.e(93460).then(n.bind(n,68303)),"@site/versioned_docs/version-1.x/connecting-navigation-prop.md",68303],a601a56a:[()=>n.e(6039).then(n.bind(n,98876)),"@site/versioned_docs/version-4.x/custom-navigators.md",98876],a62e5334:[()=>n.e(74612).then(n.bind(n,33497)),"@site/versioned_docs/version-4.x/deep-linking.md",33497],a6aa9e1f:[()=>Promise.all([n.e(40532),n.e(3242),n.e(79677),n.e(93089)]).then(n.bind(n,80046)),"@theme/BlogListPage",80046],a7023ddc:[()=>n.e(11713).then(n.t.bind(n,53457,19)),"~blog/default/blog-tags-tags-4c2.json",53457],a76a7284:[()=>n.e(72589).then(n.bind(n,213)),"@site/versioned_docs/version-2.x/contributing.md",213],a7b093db:[()=>n.e(48232).then(n.bind(n,2827)),"@site/versioned_docs/version-4.x/connecting-navigation-prop.md",2827],a7bd4aaa:[()=>n.e(18518).then(n.bind(n,8564)),"@theme/DocVersionRoot",8564],a83f720f:[()=>n.e(23).then(n.bind(n,7153)),"@site/versioned_docs/version-2.x/limitations.md",7153],a8527a90:[()=>n.e(39012).then(n.bind(n,27608)),"@site/versioned_docs/version-5.x/use-link-to.md",27608],a90dbb68:[()=>n.e(90617).then(n.bind(n,87813)),"@site/versioned_docs/version-4.x/custom-routers.md",87813],a92cc67c:[()=>n.e(67097).then(n.bind(n,15962)),"@site/src/pages/home/Splash/SplashRightIllustration.js",15962],a9397062:[()=>n.e(34806).then(n.bind(n,17034)),"@site/blog/2019-11-04-using-react-navigation-5-with-ui-kitten.md?truncated=true",17034],a94703ab:[()=>Promise.all([n.e(40532),n.e(94368)]).then(n.bind(n,12674)),"@theme/DocRoot",12674],ab0218ea:[()=>n.e(85760).then(n.bind(n,62002)),"@site/versioned_docs/version-7.x/combine-static-with-dynamic.md",62002],ab534dd1:[()=>n.e(77447).then(n.bind(n,25225)),"@site/versioned_docs/version-5.x/preventing-going-back.md",25225],abac2178:[()=>Promise.all([n.e(40532),n.e(90975)]).then(n.bind(n,55554)),"@site/versioned_docs/version-7.x/use-navigation-state.md",55554],ac11e877:[()=>n.e(98714).then(n.t.bind(n,24469,19)),"/home/runner/work/react-navigation.github.io/react-navigation.github.io/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",24469],ad88f797:[()=>n.e(6398).then(n.bind(n,83939)),"@site/versioned_docs/version-6.x/use-link-props.md",83939],adcb3b88:[()=>n.e(24200).then(n.t.bind(n,84819,19)),"~docs/default/version-7-x-metadata-prop-51b.json",84819],ae4abcdb:[()=>Promise.all([n.e(40532),n.e(35536)]).then(n.bind(n,8341)),"@site/versioned_docs/version-6.x/devtools.md",8341],ae5fe58f:[()=>n.e(17307).then(n.bind(n,90732)),"@site/versioned_docs/version-1.x/supported-react-native-versions.md",90732],ae733de4:[()=>Promise.all([n.e(40532),n.e(12915)]).then(n.bind(n,2824)),"@site/versioned_docs/version-7.x/screen-options.md",2824],aeac9b7f:[()=>n.e(21942).then(n.bind(n,41760)),"@site/versioned_docs/version-7.x/server-container.md",41760],af725e73:[()=>n.e(66616).then(n.bind(n,58434)),"@site/versioned_docs/version-3.x/limitations.md",58434],b03300d9:[()=>n.e(32252).then(n.bind(n,17491)),"@site/versioned_docs/version-2.x/drawer-navigator.md",17491],b059735e:[()=>n.e(55893).then(n.t.bind(n,17288,19)),"~blog/default/blog-tags-web-0e7-list.json",17288],b0b51b63:[()=>n.e(94206).then(n.bind(n,85943)),"@site/versioned_docs/version-6.x/web-support.md",85943],b0c8eb24:[()=>Promise.all([n.e(40532),n.e(29302)]).then(n.bind(n,19402)),"@site/versioned_docs/version-6.x/troubleshooting.md",19402],b2248fa5:[()=>n.e(78622).then(n.bind(n,92699)),"@site/versioned_docs/version-7.x/limitations.md",92699],b265e1a0:[()=>n.e(88778).then(n.bind(n,99133)),"@site/versioned_docs/version-5.x/header-buttons.md",99133],b296b8b0:[()=>Promise.all([n.e(40532),n.e(51754)]).then(n.bind(n,96472)),"@site/versioned_docs/version-6.x/material-bottom-tab-navigator.md",96472],b2b675dd:[()=>n.e(90533).then(n.t.bind(n,28017,19)),"~blog/default/blog-c06.json",28017],b2f554cd:[()=>n.e(11477).then(n.t.bind(n,30010,19)),"~blog/default/blog-archive-80c.json",30010],b319bd37:[()=>n.e(42358).then(n.bind(n,81069)),"@site/versioned_docs/version-5.x/deep-linking.md",81069],b38ea63a:[()=>n.e(41516).then(n.bind(n,49400)),"@site/versioned_docs/version-4.x/header-buttons.md",49400],b3da0717:[()=>n.e(69786).then(n.bind(n,7450)),"@site/versioned_docs/version-5.x/navigation-actions.md",7450],b48787b6:[()=>n.e(87364).then(n.bind(n,54228)),"@site/versioned_docs/version-4.x/scrollables.md",54228],b540d135:[()=>n.e(58461).then(n.bind(n,77552)),"@site/versioned_docs/version-5.x/redux-integration.md",77552],b5e8ae63:[()=>n.e(94338).then(n.bind(n,96392)),"@site/versioned_docs/version-5.x/modal.md",96392],b62ae7ee:[()=>Promise.all([n.e(40532),n.e(79346)]).then(n.bind(n,76812)),"@site/versioned_docs/version-7.x/params.md",76812],b65a55e7:[()=>n.e(16943).then(n.bind(n,95038)),"@site/versioned_docs/version-6.x/navigation-container.md",95038],b6ac21f8:[()=>n.e(44122).then(n.bind(n,44630)),"@site/versioned_docs/version-5.x/custom-android-back-button-handling.md",44630],b6e1e9f1:[()=>n.e(44527).then(n.bind(n,2869)),"@site/versioned_docs/version-3.x/switch-navigator.md",2869],b81de6e7:[()=>n.e(8327).then(n.bind(n,53822)),"@site/versioned_docs/version-2.x/stack-actions.md",53822],b89e1214:[()=>Promise.all([n.e(40532),n.e(64636)]).then(n.bind(n,20315)),"@site/versioned_docs/version-1.x/getting-started.md",20315],b89f9e6f:[()=>Promise.all([n.e(40532),n.e(20259)]).then(n.bind(n,8242)),"@site/versioned_docs/version-7.x/hiding-tabbar-in-screens.md",8242],b8aafcf7:[()=>Promise.all([n.e(40532),n.e(77430)]).then(n.bind(n,25509)),"@site/versioned_docs/version-3.x/getting-started.md",25509],b91c78db:[()=>n.e(51391).then(n.bind(n,18928)),"@site/versioned_docs/version-7.x/use-link-to.md",18928],b93a612d:[()=>n.e(836).then(n.bind(n,62552)),"@site/versioned_docs/version-7.x/link.md",62552],b9ccf281:[()=>n.e(92091).then(n.bind(n,30542)),"@site/versioned_docs/version-5.x/server-container.md",30542],baaf111f:[()=>n.e(44484).then(n.bind(n,87056)),"@site/versioned_docs/version-2.x/params.md",87056],bbc7a4b0:[()=>Promise.all([n.e(40532),n.e(53249)]).then(n.bind(n,31715)),"@site/versioned_docs/version-7.x/auth-flow.md",31715],bc98b856:[()=>Promise.all([n.e(40532),n.e(1092)]).then(n.bind(n,21106)),"@site/versioned_docs/version-7.x/headers.md",21106],bd109270:[()=>n.e(5829).then(n.bind(n,74909)),"@site/versioned_docs/version-5.x/function-after-focusing-screen.md",74909],bdc0380f:[()=>n.e(91188).then(n.bind(n,2941)),"@site/versioned_docs/version-7.x/navigating.md",2941],be35566b:[()=>n.e(91712).then(n.bind(n,91649)),"@site/versioned_docs/version-6.x/testing.md",91649],be5f3a5f:[()=>Promise.all([n.e(40532),n.e(12344)]).then(n.bind(n,5385)),"@site/versioned_docs/version-7.x/drawer-navigator.md",5385],beb39e3f:[()=>n.e(39315).then(n.bind(n,48058)),"@site/versioned_docs/version-6.x/use-link-to.md",48058],bf3d013e:[()=>n.e(42682).then(n.bind(n,79885)),"@site/versioned_docs/version-1.x/params.md",79885],c0782dcc:[()=>n.e(42581).then(n.bind(n,69026)),"@site/versioned_docs/version-3.x/drawer-actions.md",69026],c088c624:[()=>n.e(34840).then(n.bind(n,21769)),"@site/versioned_docs/version-3.x/state-persistence.md",21769],c183ab7f:[()=>n.e(64737).then(n.bind(n,8986)),"@site/versioned_docs/version-5.x/tab-actions.md",8986],c259c03a:[()=>n.e(54521).then(n.bind(n,67651)),"@site/versioned_docs/version-6.x/custom-navigators.md",67651],c2c0d6a0:[()=>n.e(33242).then(n.bind(n,91824)),"@site/versioned_docs/version-7.x/custom-navigators.md",91824],c2e8381f:[()=>n.e(45939).then(n.bind(n,346)),"@site/versioned_docs/version-3.x/navigation-events.md",346],c320ebc8:[()=>n.e(48653).then(n.bind(n,56408)),"@site/versioned_docs/version-6.x/MST-integration.md",56408],c414ff41:[()=>Promise.all([n.e(40532),n.e(5978)]).then(n.bind(n,15131)),"@site/versioned_docs/version-2.x/getting-started.md",15131],c47cf68d:[()=>n.e(96383).then(n.bind(n,8985)),"@site/versioned_docs/version-2.x/deep-linking.md",8985],c4f5d8e4:[()=>Promise.all([n.e(40532),n.e(64195)]).then(n.bind(n,62841)),"@site/src/pages/index.js",62841],c6c8c51b:[()=>n.e(92771).then(n.bind(n,3950)),"@site/versioned_docs/version-3.x/app-containers.md",3950],c716f0e7:[()=>n.e(85183).then(n.bind(n,20516)),"@site/versioned_docs/version-3.x/tab-navigator.md",20516],c71fcd84:[()=>n.e(45594).then(n.bind(n,7124)),"@site/versioned_docs/version-2.x/switch-navigator.md",7124],c7ff647e:[()=>n.e(23659).then(n.bind(n,19050)),"@site/versioned_docs/version-6.x/server-rendering.md",19050],c8d61245:[()=>n.e(2889).then(n.bind(n,20719)),"@site/versioned_docs/version-4.x/custom-android-back-button-handling.md",20719],c90d5789:[()=>n.e(17595).then(n.bind(n,93300)),"@site/versioned_docs/version-3.x/web-support.md",93300],c94cee29:[()=>n.e(93457).then(n.bind(n,43508)),"@site/versioned_docs/version-4.x/alternatives.md",43508],c96bcf0e:[()=>n.e(44935).then(n.bind(n,63810)),"@site/versioned_docs/version-2.x/stack-navigator.md",63810],c9bae406:[()=>Promise.all([n.e(40532),n.e(53508)]).then(n.bind(n,28897)),"@site/versioned_docs/version-5.x/material-bottom-tab-navigator.md",28897],cae0f04b:[()=>n.e(85709).then(n.t.bind(n,24166,19)),"~docs/default/version-4-x-metadata-prop-21f.json",24166],cafedc52:[()=>Promise.all([n.e(40532),n.e(25255)]).then(n.bind(n,94162)),"@site/versioned_docs/version-5.x/material-top-tab-navigator.md",94162],cb1ca3b7:[()=>n.e(25735).then(n.bind(n,53785)),"@site/versioned_docs/version-2.x/tab-based-navigation.md",53785],cb35979a:[()=>Promise.all([n.e(40532),n.e(84387)]).then(n.bind(n,18078)),"@site/versioned_docs/version-7.x/use-focus-effect.md",18078],cb5b2a41:[()=>n.e(93621).then(n.bind(n,46582)),"@site/versioned_docs/version-4.x/app-containers.md",46582],ccb322b4:[()=>Promise.all([n.e(40532),n.e(27493)]).then(n.bind(n,71189)),"@site/versioned_docs/version-7.x/server-rendering.md",71189],ccc49370:[()=>Promise.all([n.e(40532),n.e(3242),n.e(79677),n.e(46103)]).then(n.bind(n,65203)),"@theme/BlogPostPage",65203],cd3769cf:[()=>n.e(77719).then(n.bind(n,75225)),"@site/versioned_docs/version-3.x/auth-flow.md",75225],cdb30427:[()=>n.e(43913).then(n.bind(n,63098)),"@site/versioned_docs/version-3.x/params.md",63098],cdc21849:[()=>Promise.all([n.e(40532),n.e(6715)]).then(n.bind(n,59617)),"@site/versioned_docs/version-7.x/navigation-events.md",59617],cde59865:[()=>Promise.all([n.e(40532),n.e(81816)]).then(n.bind(n,47299)),"@site/blog/2021-03-12-react-navigation-6.0-next.md",47299],cdf30472:[()=>Promise.all([n.e(40532),n.e(88156)]).then(n.bind(n,96641)),"@site/versioned_docs/version-7.x/elements.md",96641],ce5a6cfc:[()=>n.e(73428).then(n.bind(n,59810)),"@site/versioned_docs/version-6.x/screen.md",59810],ceb96a6a:[()=>Promise.all([n.e(40532),n.e(28004)]).then(n.bind(n,64004)),"@site/versioned_docs/version-7.x/preventing-going-back.md",64004],cec331df:[()=>n.e(88873).then(n.bind(n,6131)),"@site/versioned_docs/version-5.x/testing.md",6131],cf1736b4:[()=>Promise.all([n.e(40532),n.e(4037)]).then(n.bind(n,50607)),"@site/versioned_docs/version-7.x/use-theme.md",50607],cf1b6d54:[()=>n.e(45168).then(n.bind(n,64977)),"@site/versioned_docs/version-4.x/stack-actions.md",64977],cf282c29:[()=>n.e(88462).then(n.bind(n,22169)),"@site/blog/2024-06-27-react-navigation-7.0-rc.md?truncated=true",22169],d08734b9:[()=>Promise.all([n.e(40532),n.e(31346)]).then(n.bind(n,48740)),"@site/versioned_docs/version-7.x/screen-options-resolution.md",48740],d1b2904b:[()=>n.e(36196).then(n.bind(n,29979)),"@site/versioned_docs/version-7.x/navigation-solutions-and-community-libraries.md",29979],d40bf6ce:[()=>n.e(54119).then(n.bind(n,45501)),"@site/versioned_docs/version-3.x/contributing.md",45501],d42d1fd9:[()=>n.e(29810).then(n.bind(n,35112)),"@site/versioned_docs/version-2.x/more-resources.md",35112],d4a28cdc:[()=>n.e(60095).then(n.bind(n,95766)),"@site/versioned_docs/version-5.x/typescript.md",95766],d4bc90ec:[()=>n.e(90302).then(n.bind(n,66395)),"@site/versioned_docs/version-1.x/alternatives.md",66395],d513a03c:[()=>n.e(38833).then(n.bind(n,84230)),"@site/versioned_docs/version-4.x/tab-based-navigation.md",84230],d52010ac:[()=>n.e(5766).then(n.bind(n,20644)),"@site/versioned_docs/version-3.x/navigation-actions.md",20644],d547d075:[()=>n.e(76389).then(n.bind(n,70490)),"@site/versioned_docs/version-3.x/supported-react-native-versions.md",70490],d57ffbba:[()=>Promise.all([n.e(40532),n.e(399)]).then(n.bind(n,62911)),"@site/versioned_docs/version-5.x/getting-started.md",62911],d5baa5c1:[()=>n.e(81848).then(n.bind(n,27541)),"@site/versioned_docs/version-5.x/MST-integration.md",27541],d67ed22e:[()=>n.e(90446).then(n.bind(n,7582)),"@site/versioned_docs/version-6.x/typescript.md",7582],d71b2077:[()=>n.e(84944).then(n.bind(n,18719)),"@site/versioned_docs/version-1.x/custom-navigator-overview.md",18719],d7f84142:[()=>n.e(96060).then(n.bind(n,29712)),"@site/versioned_docs/version-4.x/limitations.md",29712],d84a04ad:[()=>n.e(41080).then(n.bind(n,48121)),"@site/src/pages/home/Splash/SplashLeftIllustration.js",48121],d8cb0df4:[()=>n.e(40462).then(n.bind(n,24576)),"@site/versioned_docs/version-2.x/headers.md",24576],d92e70e8:[()=>n.e(75460).then(n.bind(n,66948)),"@site/versioned_docs/version-6.x/nesting-navigators.md",66948],d9dcdbb0:[()=>n.e(14781).then(n.bind(n,26452)),"@site/versioned_docs/version-5.x/upgrading-from-4.x.md",26452],db02a756:[()=>n.e(94892).then(n.bind(n,16987)),"@site/versioned_docs/version-5.x/use-link-builder.md",16987],db124b13:[()=>n.e(33735).then(n.bind(n,86393)),"@site/blog/2020-02-06-react-navigation-5.0.md",86393],db2d2c66:[()=>n.e(7391).then(n.bind(n,56751)),"@site/versioned_docs/version-4.x/navigation-prop.md",56751],dbb6f292:[()=>n.e(22804).then(n.bind(n,25463)),"@site/versioned_docs/version-5.x/navigation-container.md",25463],dc42149f:[()=>n.e(99322).then(n.bind(n,73047)),"@site/versioned_docs/version-6.x/drawer-based-navigation.md",73047],dd056032:[()=>n.e(22589).then(n.bind(n,6711)),"@site/versioned_docs/version-5.x/use-navigation.md",6711],dde9984f:[()=>n.e(36837).then(n.bind(n,97483)),"@site/versioned_docs/version-7.x/use-link-props.md",97483],ddf45c7d:[()=>n.e(80321).then(n.bind(n,47050)),"@site/versioned_docs/version-1.x/screen-tracking.md",47050],de6d21b5:[()=>Promise.all([n.e(40532),n.e(96641)]).then(n.bind(n,86196)),"@site/versioned_docs/version-7.x/modal.md",86196],deb950c3:[()=>n.e(62175).then(n.bind(n,7227)),"@site/versioned_docs/version-5.x/use-navigation-state.md",7227],debf69ae:[()=>Promise.all([n.e(40532),n.e(85354)]).then(n.bind(n,11162)),"@site/versioned_docs/version-4.x/stack-navigator.md",11162],df5aa17f:[()=>n.e(13677).then(n.bind(n,45923)),"@site/versioned_docs/version-2.x/next-steps.md",45923],df9f3515:[()=>n.e(95506).then(n.bind(n,71016)),"@site/versioned_docs/version-6.x/link.md",71016],e0160539:[()=>n.e(5514).then(n.bind(n,67429)),"@site/versioned_docs/version-7.x/custom-routers.md",67429],e14b9321:[()=>n.e(78680).then(n.bind(n,21306)),"@site/versioned_docs/version-4.x/function-after-focusing-screen.md",21306],e222d324:[()=>n.e(180).then(n.bind(n,46014)),"@site/blog/2021-08-14-react-navigation-6.0.md?truncated=true",46014],e3217e06:[()=>n.e(86415).then(n.bind(n,87530)),"@site/versioned_docs/version-5.x/navigation-context.md",87530],e3d4941e:[()=>Promise.all([n.e(40532),n.e(55583)]).then(n.bind(n,56832)),"@site/versioned_docs/version-1.x/redux-integration.md",56832],e4e30971:[()=>n.e(8550).then(n.bind(n,63711)),"@site/versioned_docs/version-5.x/use-linking.md",63711],e83bbd46:[()=>n.e(92733).then(n.bind(n,86973)),"@site/versioned_docs/version-2.x/navigation-prop.md",86973],e88484b3:[()=>n.e(73163).then(n.bind(n,89834)),"@site/versioned_docs/version-4.x/web-support.md",89834],e8ce4f5a:[()=>n.e(33123).then(n.t.bind(n,54484,19)),"~blog/default/blog-tags-announcement-page-2-671.json",54484],e95c8dff:[()=>n.e(86876).then(n.bind(n,36351)),"@site/versioned_docs/version-1.x/navigation-options.md",36351],ea5ec219:[()=>n.e(79902).then(n.bind(n,8981)),"@site/versioned_docs/version-1.x/custom-android-back-button-handling.md",8981],ea8a36e7:[()=>Promise.all([n.e(40532),n.e(86152)]).then(n.bind(n,11765)),"@site/versioned_docs/version-7.x/drawer-layout.md",11765],ec406ec4:[()=>n.e(83112).then(n.bind(n,71557)),"@site/versioned_docs/version-5.x/screen-tracking.md",71557],ecd87419:[()=>Promise.all([n.e(40532),n.e(73063)]).then(n.bind(n,34147)),"@site/versioned_docs/version-7.x/use-prevent-remove.md",34147],ece86388:[()=>n.e(4832).then(n.t.bind(n,42747,19)),"~blog/default/blog-tags-announcement-752-list.json",42747],ee216893:[()=>n.e(11545).then(n.bind(n,53235)),"@site/versioned_docs/version-2.x/drawer-based-navigation.md",53235],eebb4bfa:[()=>n.e(40014).then(n.bind(n,33884)),"@site/versioned_docs/version-6.x/used-by.md",33884],eef70735:[()=>n.e(5657).then(n.bind(n,42617)),"@site/versioned_docs/version-5.x/glossary-of-terms.md",42617],ef5f5123:[()=>n.e(98427).then(n.bind(n,23202)),"@site/versioned_docs/version-4.x/routers.md",23202],ef628c14:[()=>Promise.all([n.e(40532),n.e(81142)]).then(n.bind(n,47032)),"@site/versioned_docs/version-6.x/hello-react-navigation.md",47032],ef7138f6:[()=>n.e(4800).then(n.bind(n,46166)),"@site/versioned_docs/version-1.x/set-params-on-back.md",46166],f04ef758:[()=>Promise.all([n.e(40532),n.e(60010)]).then(n.bind(n,41227)),"@site/versioned_docs/version-4.x/drawer-navigator.md",41227],f066ce3d:[()=>Promise.all([n.e(40532),n.e(22120)]).then(n.bind(n,60139)),"@site/versioned_docs/version-7.x/devtools.md",60139],f0d91a18:[()=>n.e(48239).then(n.bind(n,86810)),"@site/versioned_docs/version-5.x/navigating.md",86810],f0fc524c:[()=>n.e(27075).then(n.t.bind(n,34542,19)),"~blog/default/blog-tags-react-native-paper-084-list.json",34542],f100c192:[()=>n.e(1566).then(n.bind(n,2640)),"@site/blog/2018-02-06-react-navigation-1.0.md",2640],f123de88:[()=>n.e(71338).then(n.bind(n,6710)),"@site/versioned_docs/version-3.x/navigation-key.md",6710],f171b4fe:[()=>Promise.all([n.e(40532),n.e(18098)]).then(n.bind(n,27052)),"@site/versioned_docs/version-7.x/bottom-tab-navigator.md",27052],f176e462:[()=>Promise.all([n.e(40532),n.e(29360)]).then(n.bind(n,50043)),"@site/versioned_docs/version-6.x/upgrading-from-5.x.md",50043],f1d3306a:[()=>n.e(1210).then(n.bind(n,82079)),"@site/versioned_docs/version-6.x/custom-android-back-button-handling.md",82079],f22d3a1f:[()=>n.e(84193).then(n.bind(n,42146)),"@site/versioned_docs/version-5.x/pitch.md",42146],f265caf3:[()=>n.e(46283).then(n.bind(n,40407)),"@site/versioned_docs/version-2.x/navigation-options-resolution.md",40407],f2fd19de:[()=>n.e(25558).then(n.bind(n,32890)),"@site/versioned_docs/version-6.x/use-navigation.md",32890],f3135da8:[()=>n.e(81170).then(n.bind(n,56518)),"@site/versioned_docs/version-5.x/use-scroll-to-top.md",56518],f33b6a3d:[()=>n.e(27951).then(n.bind(n,99463)),"@site/versioned_docs/version-4.x/status-bar.md",99463],f3886628:[()=>Promise.all([n.e(40532),n.e(69757)]).then(n.bind(n,79342)),"@site/versioned_docs/version-6.x/drawer-layout.md",79342],f3898f13:[()=>n.e(79163).then(n.bind(n,81143)),"@site/versioned_docs/version-5.x/hiding-tabbar-in-screens.md",81143],f4398715:[()=>n.e(4675).then(n.bind(n,39644)),"@site/versioned_docs/version-3.x/react-native-screens.md",39644],f45c00a7:[()=>Promise.all([n.e(40532),n.e(62462)]).then(n.bind(n,24386)),"@site/src/pages/home/Features/index.js",24386],f4e7a611:[()=>n.e(93760).then(n.bind(n,27482)),"@site/versioned_docs/version-5.x/state-persistence.md",27482],f5632d3b:[()=>n.e(48878).then(n.bind(n,91590)),"@site/versioned_docs/version-5.x/nesting-navigators.md",91590],f60c941b:[()=>n.e(67289).then(n.bind(n,91113)),"@site/versioned_docs/version-6.x/contributing.md",91113],f60d5e0f:[()=>Promise.all([n.e(40532),n.e(16163)]).then(n.bind(n,52581)),"@site/versioned_docs/version-7.x/handling-safe-area.md",52581],f6147c3e:[()=>n.e(31473).then(n.bind(n,92709)),"@site/versioned_docs/version-5.x/handling-safe-area.md",92709],f6756196:[()=>n.e(5119).then(n.bind(n,47060)),"@site/versioned_docs/version-3.x/drawer-navigator.md",47060],f6f7d065:[()=>n.e(55123).then(n.bind(n,62180)),"@site/versioned_docs/version-6.x/screen-options-resolution.md",62180],f71ac7f0:[()=>n.e(95699).then(n.bind(n,66625)),"@site/blog/2020-02-06-react-navigation-5.0.md?truncated=true",66625],f745e7d6:[()=>n.e(64749).then(n.bind(n,58350)),"@site/versioned_docs/version-6.x/limitations.md",58350],f75590ae:[()=>n.e(56661).then(n.bind(n,6826)),"@site/versioned_docs/version-3.x/stack-navigator.md",6826],f81e0c67:[()=>n.e(93671).then(n.bind(n,14113)),"@site/versioned_docs/version-6.x/navigation-events.md",14113],f82f4518:[()=>Promise.all([n.e(40532),n.e(86019)]).then(n.bind(n,10290)),"@site/versioned_docs/version-7.x/stack-navigator.md",10290],f97eb74e:[()=>n.e(64620).then(n.bind(n,69905)),"@site/versioned_docs/version-2.x/connecting-navigation-prop.md",69905],fa388b7d:[()=>n.e(36814).then(n.bind(n,26397)),"@site/versioned_docs/version-5.x/next-steps.md",26397],fb896c9f:[()=>n.e(44379).then(n.bind(n,978)),"@site/versioned_docs/version-1.x/hello-react-navigation.md",978],fc5e52ef:[()=>n.e(55112).then(n.bind(n,86907)),"@site/versioned_docs/version-2.x/drawer-actions.md",86907],fca5fd4e:[()=>n.e(80387).then(n.bind(n,75684)),"@site/versioned_docs/version-7.x/glossary-of-terms.md",75684],fd014fef:[()=>Promise.all([n.e(40532),n.e(56917)]).then(n.bind(n,39920)),"@site/versioned_docs/version-7.x/stack-actions.md",39920],fdba686e:[()=>n.e(69092).then(n.bind(n,71755)),"@site/versioned_docs/version-6.x/group.md",71755],fdeac899:[()=>n.e(71402).then(n.bind(n,19190)),"@site/versioned_docs/version-5.x/themes.md",19190],fe0c5989:[()=>n.e(18841).then(n.bind(n,53045)),"@site/versioned_docs/version-4.x/next-steps.md",53045],ff57007e:[()=>n.e(12497).then(n.bind(n,66895)),"@site/versioned_docs/version-4.x/handling-iphonex.md",66895],ff849402:[()=>Promise.all([n.e(40532),n.e(71725)]).then(n.bind(n,55607)),"@site/versioned_docs/version-7.x/navigation-lifecycle.md",55607],fffa478c:[()=>Promise.all([n.e(40532),n.e(28234)]).then(n.bind(n,32728)),"@site/versioned_docs/version-7.x/tab-view.md",32728]};var s=n(85893);function c(e){let{error:t,retry:n,pastDelay:o}=e;return t?(0,s.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,s.jsx)("p",{children:String(t)}),(0,s.jsx)("div",{children:(0,s.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):o?(0,s.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,s.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,s.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,s.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,s.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,s.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,s.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var d=n(99670),l=n(30226);function u(e,t){if("*"===e)return a()({loading:c,loader:()=>n.e(51772).then(n.bind(n,51772)),modules:["@theme/NotFound"],webpack:()=>[51772],render(e,t){const n=e.default;return(0,s.jsx)(l.z,{value:{plugin:{name:"native",id:"default"}},children:(0,s.jsx)(n,{...t})})}});const o=r[e+"-"+t],u={},p=[],f=[],m=(0,d.Z)(o);return Object.entries(m).forEach((e=>{let[t,n]=e;const o=i[n];o&&(u[t]=o[0],p.push(o[1]),f.push(o[2]))})),a().Map({loading:c,loader:u,modules:p,webpack:()=>f,render(t,n){const a=JSON.parse(JSON.stringify(o));Object.entries(t).forEach((t=>{let[n,o]=t;const r=o.default;if(!r)throw new Error("The page component at "+e+" doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.");"object"!=typeof r&&"function"!=typeof r||Object.keys(o).filter((e=>"default"!==e)).forEach((e=>{r[e]=o[e]}));let i=a;const s=n.split(".");s.slice(0,-1).forEach((e=>{i=i[e]})),i[s[s.length-1]]=r}));const r=a.__comp;delete a.__comp;const i=a.__context;return delete a.__context,(0,s.jsx)(l.z,{value:i,children:(0,s.jsx)(r,{...a,...n})})}})}const p=[{path:"/blog",component:u("/blog","eae"),exact:!0},{path:"/blog/2018/02/06/react-navigation-1.0",component:u("/blog/2018/02/06/react-navigation-1.0","ddc"),exact:!0},{path:"/blog/2018/04/06/react-navigation-2.0-rc",component:u("/blog/2018/04/06/react-navigation-2.0-rc","521"),exact:!0},{path:"/blog/2018/05/07/react-navigation-2.0",component:u("/blog/2018/05/07/react-navigation-2.0","73b"),exact:!0},{path:"/blog/2018/11/01/react-navigation-3.0-rc",component:u("/blog/2018/11/01/react-navigation-3.0-rc","761"),exact:!0},{path:"/blog/2018/11/17/react-navigation-3.0",component:u("/blog/2018/11/17/react-navigation-3.0","767"),exact:!0},{path:"/blog/2019/09/16/react-navigation-4.0",component:u("/blog/2019/09/16/react-navigation-4.0","4b1"),exact:!0},{path:"/blog/2019/10/17/react-navigation-native",component:u("/blog/2019/10/17/react-navigation-native","202"),exact:!0},{path:"/blog/2019/11/04/using-react-navigation-5-with-ui-kitten",component:u("/blog/2019/11/04/using-react-navigation-5-with-ui-kitten","ee2"),exact:!0},{path:"/blog/2020/01/29/using-react-navigation-5-with-react-native-paper",component:u("/blog/2020/01/29/using-react-navigation-5-with-react-native-paper","281"),exact:!0},{path:"/blog/2020/02/06/react-navigation-5.0",component:u("/blog/2020/02/06/react-navigation-5.0","88a"),exact:!0},{path:"/blog/2020/05/16/web-support",component:u("/blog/2020/05/16/web-support","f3b"),exact:!0},{path:"/blog/2020/05/19/joining-github-sponsors",component:u("/blog/2020/05/19/joining-github-sponsors","f0f"),exact:!0},{path:"/blog/2021/03/12/react-navigation-6.0-next",component:u("/blog/2021/03/12/react-navigation-6.0-next","0f0"),exact:!0},{path:"/blog/2021/08/14/react-navigation-6.0",component:u("/blog/2021/08/14/react-navigation-6.0","5ab"),exact:!0},{path:"/blog/2024/03/25/introducing-static-api",component:u("/blog/2024/03/25/introducing-static-api","4d1"),exact:!0},{path:"/blog/2024/06/27/react-navigation-7.0-rc",component:u("/blog/2024/06/27/react-navigation-7.0-rc","2c5"),exact:!0},{path:"/blog/archive",component:u("/blog/archive","653"),exact:!0},{path:"/blog/page/2",component:u("/blog/page/2","b2e"),exact:!0},{path:"/blog/tags",component:u("/blog/tags","1d9"),exact:!0},{path:"/blog/tags/announcement",component:u("/blog/tags/announcement","b84"),exact:!0},{path:"/blog/tags/announcement/page/2",component:u("/blog/tags/announcement/page/2","975"),exact:!0},{path:"/blog/tags/react-native-paper",component:u("/blog/tags/react-native-paper","ae4"),exact:!0},{path:"/blog/tags/release",component:u("/blog/tags/release","c2d"),exact:!0},{path:"/blog/tags/tutorial",component:u("/blog/tags/tutorial","c9b"),exact:!0},{path:"/blog/tags/ui-kitten",component:u("/blog/tags/ui-kitten","aed"),exact:!0},{path:"/blog/tags/web",component:u("/blog/tags/web","f64"),exact:!0},{path:"/help",component:u("/help","821"),exact:!0},{path:"/home/Features/",component:u("/home/Features/","929"),exact:!0},{path:"/home/Splash/",component:u("/home/Splash/","9fc"),exact:!0},{path:"/home/Splash/SplashLeftIllustration",component:u("/home/Splash/SplashLeftIllustration","ce8"),exact:!0},{path:"/home/Splash/SplashRightIllustration",component:u("/home/Splash/SplashRightIllustration","e0b"),exact:!0},{path:"/home/Sponsors/",component:u("/home/Sponsors/","bc9"),exact:!0},{path:"/search",component:u("/search","cbf"),exact:!0},{path:"/docs",component:u("/docs","17b"),routes:[{path:"/docs/1.x",component:u("/docs/1.x","d11"),routes:[{path:"/docs/1.x",component:u("/docs/1.x","b34"),routes:[{path:"/docs/1.x/alternatives",component:u("/docs/1.x/alternatives","338"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/api-reference",component:u("/docs/1.x/api-reference","481"),exact:!0,sidebar:"api"},{path:"/docs/1.x/auth-flow",component:u("/docs/1.x/auth-flow","452"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/connecting-navigation-prop",component:u("/docs/1.x/connecting-navigation-prop","132"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/contributing",component:u("/docs/1.x/contributing","c63"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/custom-android-back-button-handling",component:u("/docs/1.x/custom-android-back-button-handling","fb0"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/custom-navigator-overview",component:u("/docs/1.x/custom-navigator-overview","aaf"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/custom-navigators",component:u("/docs/1.x/custom-navigators","1dc"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/custom-routers",component:u("/docs/1.x/custom-routers","b6f"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/customize-styles",component:u("/docs/1.x/customize-styles","da5"),exact:!0},{path:"/docs/1.x/deep-linking",component:u("/docs/1.x/deep-linking","ede"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/drawer-based-navigation",component:u("/docs/1.x/drawer-based-navigation","93b"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/drawer-navigator",component:u("/docs/1.x/drawer-navigator","46a"),exact:!0,sidebar:"api"},{path:"/docs/1.x/getting-started",component:u("/docs/1.x/getting-started","346"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/glossary-of-terms",component:u("/docs/1.x/glossary-of-terms","dab"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/handling-iphonex",component:u("/docs/1.x/handling-iphonex","0be"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/header-buttons",component:u("/docs/1.x/header-buttons","e4d"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/headers",component:u("/docs/1.x/headers","0ef"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/hello-react-navigation",component:u("/docs/1.x/hello-react-navigation","40f"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/listen-lifecycle-events",component:u("/docs/1.x/listen-lifecycle-events","65d"),exact:!0},{path:"/docs/1.x/modal",component:u("/docs/1.x/modal","4d8"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/navigating",component:u("/docs/1.x/navigating","979"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/navigating-without-navigation-prop",component:u("/docs/1.x/navigating-without-navigation-prop","4f1"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/navigation-actions",component:u("/docs/1.x/navigation-actions","424"),exact:!0,sidebar:"api"},{path:"/docs/1.x/navigation-options",component:u("/docs/1.x/navigation-options","599"),exact:!0},{path:"/docs/1.x/navigation-prop",component:u("/docs/1.x/navigation-prop","f21"),exact:!0,sidebar:"api"},{path:"/docs/1.x/navigation-views",component:u("/docs/1.x/navigation-views","19a"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/next-steps",component:u("/docs/1.x/next-steps","d6e"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/params",component:u("/docs/1.x/params","0f6"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/partial-overlay",component:u("/docs/1.x/partial-overlay","253"),exact:!0},{path:"/docs/1.x/pitch",component:u("/docs/1.x/pitch","804"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/redux-integration",component:u("/docs/1.x/redux-integration","6ba"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/routers",component:u("/docs/1.x/routers","62d"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/screen-tracking",component:u("/docs/1.x/screen-tracking","895"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/set-params-on-back",component:u("/docs/1.x/set-params-on-back","81a"),exact:!0},{path:"/docs/1.x/stack-navigator",component:u("/docs/1.x/stack-navigator","902"),exact:!0,sidebar:"api"},{path:"/docs/1.x/status-bar",component:u("/docs/1.x/status-bar","53b"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/supported-react-native-versions",component:u("/docs/1.x/supported-react-native-versions","8ff"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/switch-navigator",component:u("/docs/1.x/switch-navigator","7ab"),exact:!0,sidebar:"api"},{path:"/docs/1.x/tab-based-navigation",component:u("/docs/1.x/tab-based-navigation","bfe"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/tab-navigator",component:u("/docs/1.x/tab-navigator","3c4"),exact:!0,sidebar:"api"},{path:"/docs/1.x/transitioner",component:u("/docs/1.x/transitioner","fc2"),exact:!0,sidebar:"docs"},{path:"/docs/1.x/with-navigation",component:u("/docs/1.x/with-navigation","789"),exact:!0,sidebar:"api"},{path:"/docs/1.x/with-navigation-focus",component:u("/docs/1.x/with-navigation-focus","ee8"),exact:!0,sidebar:"api"}]}]},{path:"/docs/2.x",component:u("/docs/2.x","8dd"),routes:[{path:"/docs/2.x",component:u("/docs/2.x","b65"),routes:[{path:"/docs/2.x/alternatives",component:u("/docs/2.x/alternatives","0e1"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/api-reference",component:u("/docs/2.x/api-reference","8dc"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/app-containers",component:u("/docs/2.x/app-containers","8b7"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/auth-flow",component:u("/docs/2.x/auth-flow","63d"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/bottom-tab-navigator",component:u("/docs/2.x/bottom-tab-navigator","53c"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/common-mistakes",component:u("/docs/2.x/common-mistakes","294"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/community-libraries-and-navigators",component:u("/docs/2.x/community-libraries-and-navigators","0f6"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/connecting-navigation-prop",component:u("/docs/2.x/connecting-navigation-prop","e75"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/contributing",component:u("/docs/2.x/contributing","d74"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-android-back-button-handling",component:u("/docs/2.x/custom-android-back-button-handling","643"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-navigator-overview",component:u("/docs/2.x/custom-navigator-overview","c1b"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-navigators",component:u("/docs/2.x/custom-navigators","4a2"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/custom-routers",component:u("/docs/2.x/custom-routers","6d0"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/deep-linking",component:u("/docs/2.x/deep-linking","36b"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/drawer-actions",component:u("/docs/2.x/drawer-actions","020"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/drawer-based-navigation",component:u("/docs/2.x/drawer-based-navigation","e99"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/drawer-navigator",component:u("/docs/2.x/drawer-navigator","e19"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/getting-started",component:u("/docs/2.x/getting-started","1db"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/glossary-of-terms",component:u("/docs/2.x/glossary-of-terms","c76"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/handling-iphonex",component:u("/docs/2.x/handling-iphonex","64d"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/header-buttons",component:u("/docs/2.x/header-buttons","f4e"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/headers",component:u("/docs/2.x/headers","c6f"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/hello-react-navigation",component:u("/docs/2.x/hello-react-navigation","98c"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/limitations",component:u("/docs/2.x/limitations","26e"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/material-bottom-tab-navigator",component:u("/docs/2.x/material-bottom-tab-navigator","b71"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/material-top-tab-navigator",component:u("/docs/2.x/material-top-tab-navigator","1a9"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/modal",component:u("/docs/2.x/modal","4c1"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/more-resources",component:u("/docs/2.x/more-resources","de6"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigating",component:u("/docs/2.x/navigating","f85"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigating-without-navigation-prop",component:u("/docs/2.x/navigating-without-navigation-prop","efa"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-actions",component:u("/docs/2.x/navigation-actions","db8"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/navigation-context",component:u("/docs/2.x/navigation-context","abd"),exact:!0},{path:"/docs/2.x/navigation-events",component:u("/docs/2.x/navigation-events","23b"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/navigation-key",component:u("/docs/2.x/navigation-key","0e2"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-lifecycle",component:u("/docs/2.x/navigation-lifecycle","5cd"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-options-resolution",component:u("/docs/2.x/navigation-options-resolution","ce5"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/navigation-prop",component:u("/docs/2.x/navigation-prop","65d"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/navigation-views",component:u("/docs/2.x/navigation-views","d76"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/next-steps",component:u("/docs/2.x/next-steps","134"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/params",component:u("/docs/2.x/params","935"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/pitch",component:u("/docs/2.x/pitch","00d"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/react-native-screens",component:u("/docs/2.x/react-native-screens","a15"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/redux-integration",component:u("/docs/2.x/redux-integration","0dc"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/routers",component:u("/docs/2.x/routers","c29"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/screen-tracking",component:u("/docs/2.x/screen-tracking","b9d"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/stack-actions",component:u("/docs/2.x/stack-actions","f59"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/stack-navigator",component:u("/docs/2.x/stack-navigator","f8f"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/state-persistence",component:u("/docs/2.x/state-persistence","0a6"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/status-bar",component:u("/docs/2.x/status-bar","b6a"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/supported-react-native-versions",component:u("/docs/2.x/supported-react-native-versions","d2f"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/switch-navigator",component:u("/docs/2.x/switch-navigator","f95"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/tab-based-navigation",component:u("/docs/2.x/tab-based-navigation","d29"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/tab-navigator",component:u("/docs/2.x/tab-navigator","50a"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/transitioner",component:u("/docs/2.x/transitioner","3eb"),exact:!0,sidebar:"version-2.x-docs"},{path:"/docs/2.x/with-navigation",component:u("/docs/2.x/with-navigation","f57"),exact:!0,sidebar:"version-2.x-api"},{path:"/docs/2.x/with-navigation-focus",component:u("/docs/2.x/with-navigation-focus","3ce"),exact:!0,sidebar:"version-2.x-api"}]}]},{path:"/docs/3.x",component:u("/docs/3.x","0ff"),routes:[{path:"/docs/3.x",component:u("/docs/3.x","e02"),routes:[{path:"/docs/3.x/alternatives",component:u("/docs/3.x/alternatives","826"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/animated-switch-navigator",component:u("/docs/3.x/animated-switch-navigator","3e2"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/app-containers",component:u("/docs/3.x/app-containers","ee9"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/auth-flow",component:u("/docs/3.x/auth-flow","0c7"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/bottom-tab-navigator",component:u("/docs/3.x/bottom-tab-navigator","db9"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/common-mistakes",component:u("/docs/3.x/common-mistakes","f79"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/community-libraries-and-navigators",component:u("/docs/3.x/community-libraries-and-navigators","184"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/connecting-navigation-prop",component:u("/docs/3.x/connecting-navigation-prop","c96"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/contributing",component:u("/docs/3.x/contributing","238"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-android-back-button-handling",component:u("/docs/3.x/custom-android-back-button-handling","166"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-navigator-overview",component:u("/docs/3.x/custom-navigator-overview","896"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-navigators",component:u("/docs/3.x/custom-navigators","631"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/custom-routers",component:u("/docs/3.x/custom-routers","2fe"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/deep-linking",component:u("/docs/3.x/deep-linking","d4d"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/drawer-actions",component:u("/docs/3.x/drawer-actions","412"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/drawer-based-navigation",component:u("/docs/3.x/drawer-based-navigation","8af"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/drawer-navigator",component:u("/docs/3.x/drawer-navigator","30e"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/function-after-focusing-screen",component:u("/docs/3.x/function-after-focusing-screen","1e1"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/getting-started",component:u("/docs/3.x/getting-started","8ce"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/glossary-of-terms",component:u("/docs/3.x/glossary-of-terms","e74"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/handling-iphonex",component:u("/docs/3.x/handling-iphonex","f57"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/header-buttons",component:u("/docs/3.x/header-buttons","9b1"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/headers",component:u("/docs/3.x/headers","339"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/hello-react-navigation",component:u("/docs/3.x/hello-react-navigation","fc6"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/limitations",component:u("/docs/3.x/limitations","26f"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/localization",component:u("/docs/3.x/localization","d90"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/material-bottom-tab-navigator",component:u("/docs/3.x/material-bottom-tab-navigator","722"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/material-top-tab-navigator",component:u("/docs/3.x/material-top-tab-navigator","987"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/modal",component:u("/docs/3.x/modal","c22"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/more-resources",component:u("/docs/3.x/more-resources","edf"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/MST-integration",component:u("/docs/3.x/MST-integration","e08"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigating",component:u("/docs/3.x/navigating","92e"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigating-without-navigation-prop",component:u("/docs/3.x/navigating-without-navigation-prop","3ff"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-actions",component:u("/docs/3.x/navigation-actions","8bf"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-context",component:u("/docs/3.x/navigation-context","e13"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-events",component:u("/docs/3.x/navigation-events","287"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-key",component:u("/docs/3.x/navigation-key","027"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-lifecycle",component:u("/docs/3.x/navigation-lifecycle","e2c"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-options-resolution",component:u("/docs/3.x/navigation-options-resolution","212"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-prop",component:u("/docs/3.x/navigation-prop","de8"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/navigation-views",component:u("/docs/3.x/navigation-views","7dd"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/next-steps",component:u("/docs/3.x/next-steps","d60"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/params",component:u("/docs/3.x/params","468"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/pitch",component:u("/docs/3.x/pitch","de8"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/react-native-screens",component:u("/docs/3.x/react-native-screens","110"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/redux-integration",component:u("/docs/3.x/redux-integration","df7"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/routers",component:u("/docs/3.x/routers","34c"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/screen-tracking",component:u("/docs/3.x/screen-tracking","829"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/scrollables",component:u("/docs/3.x/scrollables","ee1"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/stack-actions",component:u("/docs/3.x/stack-actions","dd7"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/stack-navigator",component:u("/docs/3.x/stack-navigator","48b"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/state-persistence",component:u("/docs/3.x/state-persistence","ca8"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/status-bar",component:u("/docs/3.x/status-bar","246"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/supported-react-native-versions",component:u("/docs/3.x/supported-react-native-versions","43e"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/switch-actions",component:u("/docs/3.x/switch-actions","77f"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/switch-navigator",component:u("/docs/3.x/switch-navigator","cf1"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/tab-based-navigation",component:u("/docs/3.x/tab-based-navigation","386"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/tab-navigator",component:u("/docs/3.x/tab-navigator","978"),exact:!0},{path:"/docs/3.x/themes",component:u("/docs/3.x/themes","55f"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/transitioner",component:u("/docs/3.x/transitioner","c35"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/web-support",component:u("/docs/3.x/web-support","8c3"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/with-navigation",component:u("/docs/3.x/with-navigation","a2f"),exact:!0,sidebar:"version-3.x-docs"},{path:"/docs/3.x/with-navigation-focus",component:u("/docs/3.x/with-navigation-focus","dc7"),exact:!0,sidebar:"version-3.x-docs"}]}]},{path:"/docs/4.x",component:u("/docs/4.x","8f5"),routes:[{path:"/docs/4.x",component:u("/docs/4.x","a84"),routes:[{path:"/docs/4.x/alternatives",component:u("/docs/4.x/alternatives","e7e"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/animated-switch-navigator",component:u("/docs/4.x/animated-switch-navigator","36c"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/app-containers",component:u("/docs/4.x/app-containers","50d"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/auth-flow",component:u("/docs/4.x/auth-flow","1bf"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/bottom-tab-navigator",component:u("/docs/4.x/bottom-tab-navigator","ae6"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/common-mistakes",component:u("/docs/4.x/common-mistakes","58b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/community-libraries-and-navigators",component:u("/docs/4.x/community-libraries-and-navigators","f02"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/connecting-navigation-prop",component:u("/docs/4.x/connecting-navigation-prop","e12"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/contributing",component:u("/docs/4.x/contributing","986"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-android-back-button-handling",component:u("/docs/4.x/custom-android-back-button-handling","4fb"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-navigator-overview",component:u("/docs/4.x/custom-navigator-overview","ba3"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-navigators",component:u("/docs/4.x/custom-navigators","f19"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/custom-routers",component:u("/docs/4.x/custom-routers","d8d"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/deep-linking",component:u("/docs/4.x/deep-linking","bcc"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/drawer-actions",component:u("/docs/4.x/drawer-actions","918"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/drawer-based-navigation",component:u("/docs/4.x/drawer-based-navigation","505"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/drawer-navigator",component:u("/docs/4.x/drawer-navigator","451"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/function-after-focusing-screen",component:u("/docs/4.x/function-after-focusing-screen","4f8"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/getting-started",component:u("/docs/4.x/getting-started","021"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/glossary-of-terms",component:u("/docs/4.x/glossary-of-terms","958"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/handling-iphonex",component:u("/docs/4.x/handling-iphonex","693"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/header-buttons",component:u("/docs/4.x/header-buttons","414"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/headers",component:u("/docs/4.x/headers","5b8"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/hello-react-navigation",component:u("/docs/4.x/hello-react-navigation","250"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/limitations",component:u("/docs/4.x/limitations","1bc"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/localization",component:u("/docs/4.x/localization","b24"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/material-bottom-tab-navigator",component:u("/docs/4.x/material-bottom-tab-navigator","a04"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/material-top-tab-navigator",component:u("/docs/4.x/material-top-tab-navigator","427"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/modal",component:u("/docs/4.x/modal","88a"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/more-resources",component:u("/docs/4.x/more-resources","ee9"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/MST-integration",component:u("/docs/4.x/MST-integration","945"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigating",component:u("/docs/4.x/navigating","2c4"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigating-without-navigation-prop",component:u("/docs/4.x/navigating-without-navigation-prop","a01"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-actions",component:u("/docs/4.x/navigation-actions","b20"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-context",component:u("/docs/4.x/navigation-context","51f"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-events",component:u("/docs/4.x/navigation-events","d87"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-key",component:u("/docs/4.x/navigation-key","c4f"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-lifecycle",component:u("/docs/4.x/navigation-lifecycle","fff"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-options-resolution",component:u("/docs/4.x/navigation-options-resolution","dc6"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-prop",component:u("/docs/4.x/navigation-prop","03f"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/navigation-views",component:u("/docs/4.x/navigation-views","d74"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/next-steps",component:u("/docs/4.x/next-steps","1cc"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/params",component:u("/docs/4.x/params","083"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/pitch",component:u("/docs/4.x/pitch","a65"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/react-native-screens",component:u("/docs/4.x/react-native-screens","56d"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/redux-integration",component:u("/docs/4.x/redux-integration","816"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/routers",component:u("/docs/4.x/routers","3d2"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/screen-tracking",component:u("/docs/4.x/screen-tracking","c34"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/scrollables",component:u("/docs/4.x/scrollables","248"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/stack-actions",component:u("/docs/4.x/stack-actions","049"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/stack-navigator",component:u("/docs/4.x/stack-navigator","910"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/stack-navigator-1.0",component:u("/docs/4.x/stack-navigator-1.0","dcb"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/state-persistence",component:u("/docs/4.x/state-persistence","745"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/status-bar",component:u("/docs/4.x/status-bar","40b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/supported-react-native-versions",component:u("/docs/4.x/supported-react-native-versions","2ec"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/switch-actions",component:u("/docs/4.x/switch-actions","727"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/switch-navigator",component:u("/docs/4.x/switch-navigator","4a9"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/tab-based-navigation",component:u("/docs/4.x/tab-based-navigation","91f"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/themes",component:u("/docs/4.x/themes","06b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/troubleshooting",component:u("/docs/4.x/troubleshooting","d9d"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/typescript",component:u("/docs/4.x/typescript","c7b"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/upgrading-from-3.x",component:u("/docs/4.x/upgrading-from-3.x","f58"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/web-support",component:u("/docs/4.x/web-support","ecb"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/with-navigation",component:u("/docs/4.x/with-navigation","449"),exact:!0,sidebar:"version-4.x-docs"},{path:"/docs/4.x/with-navigation-focus",component:u("/docs/4.x/with-navigation-focus","55e"),exact:!0,sidebar:"version-4.x-docs"}]}]},{path:"/docs/5.x",component:u("/docs/5.x","23f"),routes:[{path:"/docs/5.x",component:u("/docs/5.x","fcd"),routes:[{path:"/docs/5.x/alternatives",component:u("/docs/5.x/alternatives","e1b"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/auth-flow",component:u("/docs/5.x/auth-flow","acf"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/bottom-tab-navigator",component:u("/docs/5.x/bottom-tab-navigator","bcd"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/community-libraries-and-navigators",component:u("/docs/5.x/community-libraries-and-navigators","070"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/compatibility",component:u("/docs/5.x/compatibility","f4a"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/configuring-links",component:u("/docs/5.x/configuring-links","de3"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/connecting-navigation-prop",component:u("/docs/5.x/connecting-navigation-prop","20a"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/contributing",component:u("/docs/5.x/contributing","7a4"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/custom-android-back-button-handling",component:u("/docs/5.x/custom-android-back-button-handling","05e"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/custom-navigators",component:u("/docs/5.x/custom-navigators","a3b"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/custom-routers",component:u("/docs/5.x/custom-routers","e0c"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/deep-linking",component:u("/docs/5.x/deep-linking","6b1"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/devtools",component:u("/docs/5.x/devtools","904"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/drawer-actions",component:u("/docs/5.x/drawer-actions","6bd"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/drawer-based-navigation",component:u("/docs/5.x/drawer-based-navigation","e99"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/drawer-navigator",component:u("/docs/5.x/drawer-navigator","429"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/function-after-focusing-screen",component:u("/docs/5.x/function-after-focusing-screen","fa1"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/getting-started",component:u("/docs/5.x/getting-started","bd7"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/glossary-of-terms",component:u("/docs/5.x/glossary-of-terms","1d3"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/handling-safe-area",component:u("/docs/5.x/handling-safe-area","70f"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/header-buttons",component:u("/docs/5.x/header-buttons","eea"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/headers",component:u("/docs/5.x/headers","beb"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/hello-react-navigation",component:u("/docs/5.x/hello-react-navigation","505"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/hiding-tabbar-in-screens",component:u("/docs/5.x/hiding-tabbar-in-screens","4fb"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/limitations",component:u("/docs/5.x/limitations","060"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/link",component:u("/docs/5.x/link","d86"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/material-bottom-tab-navigator",component:u("/docs/5.x/material-bottom-tab-navigator","92f"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/material-top-tab-navigator",component:u("/docs/5.x/material-top-tab-navigator","546"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/modal",component:u("/docs/5.x/modal","6d8"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/more-resources",component:u("/docs/5.x/more-resources","d88"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/MST-integration",component:u("/docs/5.x/MST-integration","9e9"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/native-stack-navigator",component:u("/docs/5.x/native-stack-navigator","a5b"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigating",component:u("/docs/5.x/navigating","9e9"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigating-without-navigation-prop",component:u("/docs/5.x/navigating-without-navigation-prop","891"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigation-actions",component:u("/docs/5.x/navigation-actions","ef3"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigation-container",component:u("/docs/5.x/navigation-container","322"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigation-context",component:u("/docs/5.x/navigation-context","cbc"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigation-events",component:u("/docs/5.x/navigation-events","87d"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigation-lifecycle",component:u("/docs/5.x/navigation-lifecycle","259"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigation-prop",component:u("/docs/5.x/navigation-prop","a85"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/navigation-state",component:u("/docs/5.x/navigation-state","7e0"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/nesting-navigators",component:u("/docs/5.x/nesting-navigators","38e"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/next-steps",component:u("/docs/5.x/next-steps","e5c"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/params",component:u("/docs/5.x/params","9e4"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/pitch",component:u("/docs/5.x/pitch","a7c"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/preventing-going-back",component:u("/docs/5.x/preventing-going-back","34c"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/react-native-screens",component:u("/docs/5.x/react-native-screens","702"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/redux-integration",component:u("/docs/5.x/redux-integration","2f3"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/route-prop",component:u("/docs/5.x/route-prop","9cd"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/screen",component:u("/docs/5.x/screen","1ca"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/screen-options",component:u("/docs/5.x/screen-options","89f"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/screen-options-resolution",component:u("/docs/5.x/screen-options-resolution","697"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/screen-tracking",component:u("/docs/5.x/screen-tracking","e3d"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/server-container",component:u("/docs/5.x/server-container","948"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/server-rendering",component:u("/docs/5.x/server-rendering","8f1"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/stack-actions",component:u("/docs/5.x/stack-actions","1fb"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/stack-navigator",component:u("/docs/5.x/stack-navigator","84d"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/state-persistence",component:u("/docs/5.x/state-persistence","016"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/status-bar",component:u("/docs/5.x/status-bar","4db"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/supported-react-native-versions",component:u("/docs/5.x/supported-react-native-versions","79c"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/tab-actions",component:u("/docs/5.x/tab-actions","e0d"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/tab-based-navigation",component:u("/docs/5.x/tab-based-navigation","0d9"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/testing",component:u("/docs/5.x/testing","e6e"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/themes",component:u("/docs/5.x/themes","40e"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/troubleshooting",component:u("/docs/5.x/troubleshooting","025"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/typescript",component:u("/docs/5.x/typescript","145"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/upgrading-from-4.x",component:u("/docs/5.x/upgrading-from-4.x","ba8"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-focus-effect",component:u("/docs/5.x/use-focus-effect","4c7"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-is-focused",component:u("/docs/5.x/use-is-focused","5a8"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-link-builder",component:u("/docs/5.x/use-link-builder","86b"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-link-props",component:u("/docs/5.x/use-link-props","b91"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-link-to",component:u("/docs/5.x/use-link-to","5d3"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-linking",component:u("/docs/5.x/use-linking","427"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-navigation",component:u("/docs/5.x/use-navigation","d4d"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-navigation-state",component:u("/docs/5.x/use-navigation-state","5bb"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-route",component:u("/docs/5.x/use-route","69e"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-scroll-to-top",component:u("/docs/5.x/use-scroll-to-top","76f"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/use-theme",component:u("/docs/5.x/use-theme","ad3"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/used-by",component:u("/docs/5.x/used-by","e7e"),exact:!0,sidebar:"docs"},{path:"/docs/5.x/web-support",component:u("/docs/5.x/web-support","66d"),exact:!0,sidebar:"docs"}]}]},{path:"/docs/7.x",component:u("/docs/7.x","2cf"),routes:[{path:"/docs/7.x",component:u("/docs/7.x","a7d"),routes:[{path:"/docs/7.x/auth-flow",component:u("/docs/7.x/auth-flow","091"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/bottom-tab-navigator",component:u("/docs/7.x/bottom-tab-navigator","842"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/combine-static-with-dynamic",component:u("/docs/7.x/combine-static-with-dynamic","445"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/configuring-links",component:u("/docs/7.x/configuring-links","028"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/contributing",component:u("/docs/7.x/contributing","185"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/custom-android-back-button-handling",component:u("/docs/7.x/custom-android-back-button-handling","2da"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/custom-navigators",component:u("/docs/7.x/custom-navigators","ee6"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/custom-routers",component:u("/docs/7.x/custom-routers","dd7"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/customizing-tabbar",component:u("/docs/7.x/customizing-tabbar","c0f"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/deep-linking",component:u("/docs/7.x/deep-linking","9c7"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/devtools",component:u("/docs/7.x/devtools","bdd"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/drawer-actions",component:u("/docs/7.x/drawer-actions","4ac"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/drawer-based-navigation",component:u("/docs/7.x/drawer-based-navigation","902"),exact:!0},{path:"/docs/7.x/drawer-layout",component:u("/docs/7.x/drawer-layout","46e"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/drawer-navigator",component:u("/docs/7.x/drawer-navigator","87a"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/elements",component:u("/docs/7.x/elements","174"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/function-after-focusing-screen",component:u("/docs/7.x/function-after-focusing-screen","719"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/getting-started",component:u("/docs/7.x/getting-started","51c"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/glossary-of-terms",component:u("/docs/7.x/glossary-of-terms","6fa"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/group",component:u("/docs/7.x/group","d40"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/handling-safe-area",component:u("/docs/7.x/handling-safe-area","6ef"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/header-buttons",component:u("/docs/7.x/header-buttons","728"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/headers",component:u("/docs/7.x/headers","ecf"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/hello-react-navigation",component:u("/docs/7.x/hello-react-navigation","8a9"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/hiding-tabbar-in-screens",component:u("/docs/7.x/hiding-tabbar-in-screens","87d"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/limitations",component:u("/docs/7.x/limitations","695"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/link",component:u("/docs/7.x/link","db4"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/material-top-tab-navigator",component:u("/docs/7.x/material-top-tab-navigator","6d2"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/migration-guides",component:u("/docs/7.x/migration-guides","611"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/modal",component:u("/docs/7.x/modal","d60"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/more-resources",component:u("/docs/7.x/more-resources","7a2"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/multiple-drawers",component:u("/docs/7.x/multiple-drawers","7e0"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/native-stack-navigator",component:u("/docs/7.x/native-stack-navigator","bc8"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigating",component:u("/docs/7.x/navigating","5ef"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigating-without-navigation-prop",component:u("/docs/7.x/navigating-without-navigation-prop","35b"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-actions",component:u("/docs/7.x/navigation-actions","e97"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-container",component:u("/docs/7.x/navigation-container","543"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-context",component:u("/docs/7.x/navigation-context","842"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-events",component:u("/docs/7.x/navigation-events","a83"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-lifecycle",component:u("/docs/7.x/navigation-lifecycle","00d"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-object",component:u("/docs/7.x/navigation-object","b03"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-solutions-and-community-libraries",component:u("/docs/7.x/navigation-solutions-and-community-libraries","080"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigation-state",component:u("/docs/7.x/navigation-state","a7f"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/navigator",component:u("/docs/7.x/navigator","2b1"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/nesting-navigators",component:u("/docs/7.x/nesting-navigators","1b4"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/next-steps",component:u("/docs/7.x/next-steps","fd1"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/params",component:u("/docs/7.x/params","e4e"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/pitch",component:u("/docs/7.x/pitch","d59"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/preventing-going-back",component:u("/docs/7.x/preventing-going-back","ab4"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/route-object",component:u("/docs/7.x/route-object","c8f"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/screen",component:u("/docs/7.x/screen","bad"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/screen-options",component:u("/docs/7.x/screen-options","45c"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/screen-options-resolution",component:u("/docs/7.x/screen-options-resolution","408"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/screen-tracking",component:u("/docs/7.x/screen-tracking","5c3"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/server-container",component:u("/docs/7.x/server-container","90f"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/server-rendering",component:u("/docs/7.x/server-rendering","b54"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/shared-element-transitions",component:u("/docs/7.x/shared-element-transitions","3c0"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/stack-actions",component:u("/docs/7.x/stack-actions","e43"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/stack-navigator",component:u("/docs/7.x/stack-navigator","8d5"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/state-persistence",component:u("/docs/7.x/state-persistence","8b7"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/static-configuration",component:u("/docs/7.x/static-configuration","f50"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/status-bar",component:u("/docs/7.x/status-bar","e80"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/tab-actions",component:u("/docs/7.x/tab-actions","0d9"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/tab-view",component:u("/docs/7.x/tab-view","acf"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/testing",component:u("/docs/7.x/testing","eb3"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/themes",component:u("/docs/7.x/themes","2f8"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/troubleshooting",component:u("/docs/7.x/troubleshooting","72e"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/typescript",component:u("/docs/7.x/typescript","ec1"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/upgrading-from-6.x",component:u("/docs/7.x/upgrading-from-6.x","835"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-focus-effect",component:u("/docs/7.x/use-focus-effect","cc1"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-is-focused",component:u("/docs/7.x/use-is-focused","cb9"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-link-builder",component:u("/docs/7.x/use-link-builder","889"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-link-props",component:u("/docs/7.x/use-link-props","df0"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-link-to",component:u("/docs/7.x/use-link-to","27e"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-navigation",component:u("/docs/7.x/use-navigation","b43"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-navigation-state",component:u("/docs/7.x/use-navigation-state","204"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-prevent-remove",component:u("/docs/7.x/use-prevent-remove","5c9"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-route",component:u("/docs/7.x/use-route","2a8"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-scroll-to-top",component:u("/docs/7.x/use-scroll-to-top","43b"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/use-theme",component:u("/docs/7.x/use-theme","0e2"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/used-by",component:u("/docs/7.x/used-by","e5e"),exact:!0,sidebar:"docs"},{path:"/docs/7.x/web-support",component:u("/docs/7.x/web-support","477"),exact:!0,sidebar:"docs"}]}]},{path:"/docs",component:u("/docs","5fa"),routes:[{path:"/docs",component:u("/docs","c10"),routes:[{path:"/docs/auth-flow",component:u("/docs/auth-flow","4b2"),exact:!0,sidebar:"docs"},{path:"/docs/bottom-tab-navigator",component:u("/docs/bottom-tab-navigator","337"),exact:!0,sidebar:"docs"},{path:"/docs/configuring-links",component:u("/docs/configuring-links","c08"),exact:!0,sidebar:"docs"},{path:"/docs/connecting-navigation-prop",component:u("/docs/connecting-navigation-prop","d6c"),exact:!0,sidebar:"docs"},{path:"/docs/contributing",component:u("/docs/contributing","4df"),exact:!0,sidebar:"docs"},{path:"/docs/custom-android-back-button-handling",component:u("/docs/custom-android-back-button-handling","0ac"),exact:!0,sidebar:"docs"},{path:"/docs/custom-navigators",component:u("/docs/custom-navigators","78f"),exact:!0,sidebar:"docs"},{path:"/docs/custom-routers",component:u("/docs/custom-routers","8d9"),exact:!0,sidebar:"docs"},{path:"/docs/deep-linking",component:u("/docs/deep-linking","faa"),exact:!0,sidebar:"docs"},{path:"/docs/devtools",component:u("/docs/devtools","745"),exact:!0,sidebar:"docs"},{path:"/docs/drawer-actions",component:u("/docs/drawer-actions","9e3"),exact:!0,sidebar:"docs"},{path:"/docs/drawer-based-navigation",component:u("/docs/drawer-based-navigation","cbf"),exact:!0,sidebar:"docs"},{path:"/docs/drawer-layout",component:u("/docs/drawer-layout","635"),exact:!0,sidebar:"docs"},{path:"/docs/drawer-navigator",component:u("/docs/drawer-navigator","fb7"),exact:!0,sidebar:"docs"},{path:"/docs/elements",component:u("/docs/elements","8cd"),exact:!0,sidebar:"docs"},{path:"/docs/function-after-focusing-screen",component:u("/docs/function-after-focusing-screen","d7a"),exact:!0,sidebar:"docs"},{path:"/docs/getting-started",component:u("/docs/getting-started","45f"),exact:!0,sidebar:"docs"},{path:"/docs/glossary-of-terms",component:u("/docs/glossary-of-terms","98e"),exact:!0,sidebar:"docs"},{path:"/docs/group",component:u("/docs/group","a49"),exact:!0,sidebar:"docs"},{path:"/docs/handling-safe-area",component:u("/docs/handling-safe-area","944"),exact:!0,sidebar:"docs"},{path:"/docs/header-buttons",component:u("/docs/header-buttons","1bd"),exact:!0,sidebar:"docs"},{path:"/docs/headers",component:u("/docs/headers","d5b"),exact:!0,sidebar:"docs"},{path:"/docs/hello-react-navigation",component:u("/docs/hello-react-navigation","252"),exact:!0,sidebar:"docs"},{path:"/docs/hiding-tabbar-in-screens",component:u("/docs/hiding-tabbar-in-screens","902"),exact:!0,sidebar:"docs"},{path:"/docs/limitations",component:u("/docs/limitations","89a"),exact:!0,sidebar:"docs"},{path:"/docs/link",component:u("/docs/link","970"),exact:!0,sidebar:"docs"},{path:"/docs/material-bottom-tab-navigator",component:u("/docs/material-bottom-tab-navigator","a80"),exact:!0,sidebar:"docs"},{path:"/docs/material-top-tab-navigator",component:u("/docs/material-top-tab-navigator","9ee"),exact:!0,sidebar:"docs"},{path:"/docs/migration-guides",component:u("/docs/migration-guides","245"),exact:!0,sidebar:"docs"},{path:"/docs/modal",component:u("/docs/modal","6cd"),exact:!0,sidebar:"docs"},{path:"/docs/more-resources",component:u("/docs/more-resources","e56"),exact:!0,sidebar:"docs"},{path:"/docs/MST-integration",component:u("/docs/MST-integration","fa3"),exact:!0,sidebar:"docs"},{path:"/docs/multiple-drawers",component:u("/docs/multiple-drawers","fd4"),exact:!0,sidebar:"docs"},{path:"/docs/native-stack-navigator",component:u("/docs/native-stack-navigator","ace"),exact:!0,sidebar:"docs"},{path:"/docs/navigating",component:u("/docs/navigating","058"),exact:!0,sidebar:"docs"},{path:"/docs/navigating-without-navigation-prop",component:u("/docs/navigating-without-navigation-prop","e12"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-actions",component:u("/docs/navigation-actions","264"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-container",component:u("/docs/navigation-container","b46"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-context",component:u("/docs/navigation-context","c34"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-events",component:u("/docs/navigation-events","5b1"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-lifecycle",component:u("/docs/navigation-lifecycle","0dc"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-prop",component:u("/docs/navigation-prop","13b"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-solutions-and-community-libraries",component:u("/docs/navigation-solutions-and-community-libraries","e09"),exact:!0,sidebar:"docs"},{path:"/docs/navigation-state",component:u("/docs/navigation-state","2df"),exact:!0,sidebar:"docs"},{path:"/docs/nesting-navigators",component:u("/docs/nesting-navigators","5e7"),exact:!0,sidebar:"docs"},{path:"/docs/next-steps",component:u("/docs/next-steps","e4e"),exact:!0,sidebar:"docs"},{path:"/docs/params",component:u("/docs/params","8f1"),exact:!0,sidebar:"docs"},{path:"/docs/pitch",component:u("/docs/pitch","067"),exact:!0,sidebar:"docs"},{path:"/docs/preventing-going-back",component:u("/docs/preventing-going-back","2f5"),exact:!0,sidebar:"docs"},{path:"/docs/redux-integration",component:u("/docs/redux-integration","bb6"),exact:!0,sidebar:"docs"},{path:"/docs/route-prop",component:u("/docs/route-prop","826"),exact:!0,sidebar:"docs"},{path:"/docs/screen",component:u("/docs/screen","9cd"),exact:!0,sidebar:"docs"},{path:"/docs/screen-options",component:u("/docs/screen-options","cca"),exact:!0,sidebar:"docs"},{path:"/docs/screen-options-resolution",component:u("/docs/screen-options-resolution","6cd"),exact:!0,sidebar:"docs"},{path:"/docs/screen-tracking",component:u("/docs/screen-tracking","844"),exact:!0,sidebar:"docs"},{path:"/docs/server-container",component:u("/docs/server-container","a8b"),exact:!0,sidebar:"docs"},{path:"/docs/server-rendering",component:u("/docs/server-rendering","c49"),exact:!0,sidebar:"docs"},{path:"/docs/shared-element-transitions",component:u("/docs/shared-element-transitions","a1c"),exact:!0,sidebar:"docs"},{path:"/docs/stack-actions",component:u("/docs/stack-actions","986"),exact:!0,sidebar:"docs"},{path:"/docs/stack-navigator",component:u("/docs/stack-navigator","e9b"),exact:!0,sidebar:"docs"},{path:"/docs/state-persistence",component:u("/docs/state-persistence","eae"),exact:!0,sidebar:"docs"},{path:"/docs/status-bar",component:u("/docs/status-bar","7b7"),exact:!0,sidebar:"docs"},{path:"/docs/tab-actions",component:u("/docs/tab-actions","90f"),exact:!0,sidebar:"docs"},{path:"/docs/tab-based-navigation",component:u("/docs/tab-based-navigation","a75"),exact:!0,sidebar:"docs"},{path:"/docs/tab-view",component:u("/docs/tab-view","0d8"),exact:!0,sidebar:"docs"},{path:"/docs/testing",component:u("/docs/testing","c86"),exact:!0,sidebar:"docs"},{path:"/docs/themes",component:u("/docs/themes","76d"),exact:!0,sidebar:"docs"},{path:"/docs/troubleshooting",component:u("/docs/troubleshooting","877"),exact:!0,sidebar:"docs"},{path:"/docs/typescript",component:u("/docs/typescript","5d5"),exact:!0,sidebar:"docs"},{path:"/docs/upgrading-from-5.x",component:u("/docs/upgrading-from-5.x","548"),exact:!0,sidebar:"docs"},{path:"/docs/use-focus-effect",component:u("/docs/use-focus-effect","b15"),exact:!0,sidebar:"docs"},{path:"/docs/use-is-focused",component:u("/docs/use-is-focused","965"),exact:!0,sidebar:"docs"},{path:"/docs/use-link-builder",component:u("/docs/use-link-builder","997"),exact:!0,sidebar:"docs"},{path:"/docs/use-link-props",component:u("/docs/use-link-props","4b6"),exact:!0,sidebar:"docs"},{path:"/docs/use-link-to",component:u("/docs/use-link-to","135"),exact:!0,sidebar:"docs"},{path:"/docs/use-navigation",component:u("/docs/use-navigation","948"),exact:!0,sidebar:"docs"},{path:"/docs/use-navigation-state",component:u("/docs/use-navigation-state","883"),exact:!0,sidebar:"docs"},{path:"/docs/use-route",component:u("/docs/use-route","7e5"),exact:!0,sidebar:"docs"},{path:"/docs/use-scroll-to-top",component:u("/docs/use-scroll-to-top","090"),exact:!0,sidebar:"docs"},{path:"/docs/use-theme",component:u("/docs/use-theme","7f6"),exact:!0,sidebar:"docs"},{path:"/docs/used-by",component:u("/docs/used-by","2a5"),exact:!0,sidebar:"docs"},{path:"/docs/web-support",component:u("/docs/web-support","b9c"),exact:!0,sidebar:"docs"}]}]}]},{path:"/",component:u("/","305"),exact:!0},{path:"*",component:u("*")}]},98934:(e,t,n)=>{"use strict";n.d(t,{_:()=>r,t:()=>i});var o=n(67294),a=n(85893);const r=o.createContext(!1);function i(e){let{children:t}=e;const[n,i]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{i(!0)}),[]),(0,a.jsx)(r.Provider,{value:n,children:t})}},97221:(e,t,n)=>{"use strict";var o=n(67294),a=n(20745),r=n(73727),i=n(70405),s=n(10412);const c=[n(74367),n(32497),n(3310),n(18320),n(52295)];var d=n(723),l=n(16550),u=n(18790),p=n(85893);function f(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var m=n(35742),g=n(52263),h=n(44996),b=n(86668),v=n(10833),x=n(94711),y=n(19727),_=n(43320),w=n(18780),k=n(90197);function S(){const{i18n:{currentLocale:e,defaultLocale:t,localeConfigs:n}}=(0,g.Z)(),o=(0,x.l)(),a=n[e].htmlLang,r=e=>e.replace("-","_");return(0,p.jsxs)(m.Z,{children:[Object.entries(n).map((e=>{let[t,{htmlLang:n}]=e;return(0,p.jsx)("link",{rel:"alternate",href:o.createUrl({locale:t,fullyQualified:!0}),hrefLang:n},t)})),(0,p.jsx)("link",{rel:"alternate",href:o.createUrl({locale:t,fullyQualified:!0}),hrefLang:"x-default"}),(0,p.jsx)("meta",{property:"og:locale",content:r(a)}),Object.values(n).filter((e=>a!==e.htmlLang)).map((e=>(0,p.jsx)("meta",{property:"og:locale:alternate",content:r(e.htmlLang)},"meta-og-"+e.htmlLang)))]})}function E(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,g.Z)(),o=function(){const{siteConfig:{url:e,baseUrl:t,trailingSlash:n}}=(0,g.Z)(),{pathname:o}=(0,l.TH)();return e+(0,w.applyTrailingSlash)((0,h.Z)(o),{trailingSlash:n,baseUrl:t})}(),a=t?""+n+t:o;return(0,p.jsxs)(m.Z,{children:[(0,p.jsx)("meta",{property:"og:url",content:a}),(0,p.jsx)("link",{rel:"canonical",href:a})]})}function C(){const{i18n:{currentLocale:e}}=(0,g.Z)(),{metadata:t,image:n}=(0,b.L)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(m.Z,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:y.h})]}),n&&(0,p.jsx)(v.d,{image:n}),(0,p.jsx)(E,{}),(0,p.jsx)(S,{}),(0,p.jsx)(k.Z,{tag:_.HX,locale:e}),(0,p.jsx)(m.Z,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const T=new Map;function j(e){if(T.has(e.pathname))return{...e,pathname:T.get(e.pathname)};if((0,u.f)(d.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}var P=n(98934),A=n(58940),L=n(20469);function R(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o{var o,a;const r=null!=(o=null==(a=t.default)?void 0:a[e])?o:t[e];return null==r?void 0:r(...n)}));return()=>a.forEach((e=>null==e?void 0:e()))}const N=function(e){let{children:t,location:n,previousLocation:o}=e;return(0,L.Z)((()=>{o!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const o=t.pathname===n.pathname,a=t.hash===n.hash,r=t.search===n.search;if(o&&a&&!r)return;const{hash:i}=t;if(i){const e=decodeURIComponent(i.substring(1)),t=document.getElementById(e);null==t||t.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:o}),R("onRouteDidUpdate",{previousLocation:o,location:n}))}),[o,n]),t};function O(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,u.f)(d.Z,e))).flat();return Promise.all(t.map((e=>null==e.route.component.preload?void 0:e.route.component.preload())))}class I extends o.Component{constructor(e){super(e),this.previousLocation=void 0,this.routeUpdateCleanupCb=void 0,this.previousLocation=null,this.routeUpdateCleanupCb=s.Z.canUseDOM?R("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=R("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),O(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(N,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(l.AW,{location:t,render:()=>e})})}}const D=I,M="__docusaurus-base-url-issue-banner-container",F="__docusaurus-base-url-issue-banner",z="__docusaurus-base-url-issue-banner-suggestion-container";function B(e){return"\ndocument.addEventListener('DOMContentLoaded', function maybeInsertBanner() {\n var shouldInsert = typeof window['docusaurus'] === 'undefined';\n shouldInsert && insertBanner();\n});\n\nfunction insertBanner() {\n var bannerContainer = document.createElement('div');\n bannerContainer.id = '"+M+"';\n var bannerHtml = "+JSON.stringify(function(e){return'\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

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

\n

We suggest trying baseUrl =

\n
\n'}(e)).replace(/{var o,a;if("undefined"==typeof document)return void n();const r=document.createElement("link");r.setAttribute("rel","prefetch"),r.setAttribute("href",e),r.onload=()=>t(),r.onerror=()=>n();const i=null!=(o=document.getElementsByTagName("head")[0])?o:null==(a=document.getElementsByName("script")[0])?void 0:a.parentNode;null==i||i.appendChild(r)}))}:function(e){return new Promise(((t,n)=>{const o=new XMLHttpRequest;o.open("GET",e,!0),o.withCredentials=!0,o.onload=()=>{200===o.status?t():n()},o.send(null)}))};var Q=n(99670);const Y=new Set,X=new Set,J=()=>{var e,t;return(null==(e=navigator.connection)?void 0:e.effectiveType.includes("2g"))||(null==(t=navigator.connection)?void 0:t.saveData)},ee={prefetch(e){if(!(e=>!J()&&!X.has(e)&&!Y.has(e))(e))return!1;Y.add(e);const t=(0,u.f)(d.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(W).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,Q.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?K(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!J()&&!X.has(e))(e)&&(X.add(e),O(e))},te=Object.freeze(ee),ne=Boolean(!0);if(s.Z.canUseDOM){window.docusaurus=te;const e=document.getElementById("__docusaurus"),t=(0,p.jsx)(i.B6,{children:(0,p.jsx)(r.VK,{children:(0,p.jsx)(V,{})})}),n=(e,t)=>{console.error("Docusaurus React Root onRecoverableError:",e,t)},s=()=>{if(ne)o.startTransition((()=>{a.hydrateRoot(e,t,{onRecoverableError:n})}));else{const r=a.createRoot(e,{onRecoverableError:n});o.startTransition((()=>{r.render(t)}))}};O(window.location.pathname).then(s)}},58940:(e,t,n)=>{"use strict";n.d(t,{_:()=>u,M:()=>p});var o=n(67294),a=n(36809);const r=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/docs","versions":[{"name":"7.x","label":"7.x","isLast":false,"path":"/docs/7.x","mainDocId":"getting-started","docs":[{"id":"auth-flow","path":"/docs/7.x/auth-flow","sidebar":"docs"},{"id":"bottom-tab-navigator","path":"/docs/7.x/bottom-tab-navigator","sidebar":"docs"},{"id":"combine-static-with-dynamic","path":"/docs/7.x/combine-static-with-dynamic","sidebar":"docs"},{"id":"configuring-links","path":"/docs/7.x/configuring-links","sidebar":"docs"},{"id":"contributing","path":"/docs/7.x/contributing","sidebar":"docs"},{"id":"custom-android-back-button-handling","path":"/docs/7.x/custom-android-back-button-handling","sidebar":"docs"},{"id":"custom-navigators","path":"/docs/7.x/custom-navigators","sidebar":"docs"},{"id":"custom-routers","path":"/docs/7.x/custom-routers","sidebar":"docs"},{"id":"customizing-tabbar","path":"/docs/7.x/customizing-tabbar","sidebar":"docs"},{"id":"deep-linking","path":"/docs/7.x/deep-linking","sidebar":"docs"},{"id":"devtools","path":"/docs/7.x/devtools","sidebar":"docs"},{"id":"drawer-actions","path":"/docs/7.x/drawer-actions","sidebar":"docs"},{"id":"drawer-based-navigation","path":"/docs/7.x/drawer-based-navigation"},{"id":"drawer-layout","path":"/docs/7.x/drawer-layout","sidebar":"docs"},{"id":"drawer-navigator","path":"/docs/7.x/drawer-navigator","sidebar":"docs"},{"id":"elements","path":"/docs/7.x/elements","sidebar":"docs"},{"id":"function-after-focusing-screen","path":"/docs/7.x/function-after-focusing-screen","sidebar":"docs"},{"id":"getting-started","path":"/docs/7.x/getting-started","sidebar":"docs"},{"id":"glossary-of-terms","path":"/docs/7.x/glossary-of-terms","sidebar":"docs"},{"id":"group","path":"/docs/7.x/group","sidebar":"docs"},{"id":"handling-safe-area","path":"/docs/7.x/handling-safe-area","sidebar":"docs"},{"id":"header-buttons","path":"/docs/7.x/header-buttons","sidebar":"docs"},{"id":"headers","path":"/docs/7.x/headers","sidebar":"docs"},{"id":"hello-react-navigation","path":"/docs/7.x/hello-react-navigation","sidebar":"docs"},{"id":"hiding-tabbar-in-screens","path":"/docs/7.x/hiding-tabbar-in-screens","sidebar":"docs"},{"id":"limitations","path":"/docs/7.x/limitations","sidebar":"docs"},{"id":"link","path":"/docs/7.x/link","sidebar":"docs"},{"id":"material-top-tab-navigator","path":"/docs/7.x/material-top-tab-navigator","sidebar":"docs"},{"id":"migration-guides","path":"/docs/7.x/migration-guides","sidebar":"docs"},{"id":"modal","path":"/docs/7.x/modal","sidebar":"docs"},{"id":"more-resources","path":"/docs/7.x/more-resources","sidebar":"docs"},{"id":"multiple-drawers","path":"/docs/7.x/multiple-drawers","sidebar":"docs"},{"id":"native-stack-navigator","path":"/docs/7.x/native-stack-navigator","sidebar":"docs"},{"id":"navigating","path":"/docs/7.x/navigating","sidebar":"docs"},{"id":"navigating-without-navigation-prop","path":"/docs/7.x/navigating-without-navigation-prop","sidebar":"docs"},{"id":"navigation-actions","path":"/docs/7.x/navigation-actions","sidebar":"docs"},{"id":"navigation-container","path":"/docs/7.x/navigation-container","sidebar":"docs"},{"id":"navigation-context","path":"/docs/7.x/navigation-context","sidebar":"docs"},{"id":"navigation-events","path":"/docs/7.x/navigation-events","sidebar":"docs"},{"id":"navigation-lifecycle","path":"/docs/7.x/navigation-lifecycle","sidebar":"docs"},{"id":"navigation-object","path":"/docs/7.x/navigation-object","sidebar":"docs"},{"id":"navigation-solutions-and-community-libraries","path":"/docs/7.x/navigation-solutions-and-community-libraries","sidebar":"docs"},{"id":"navigation-state","path":"/docs/7.x/navigation-state","sidebar":"docs"},{"id":"navigator","path":"/docs/7.x/navigator","sidebar":"docs"},{"id":"nesting-navigators","path":"/docs/7.x/nesting-navigators","sidebar":"docs"},{"id":"next-steps","path":"/docs/7.x/next-steps","sidebar":"docs"},{"id":"params","path":"/docs/7.x/params","sidebar":"docs"},{"id":"pitch","path":"/docs/7.x/pitch","sidebar":"docs"},{"id":"preventing-going-back","path":"/docs/7.x/preventing-going-back","sidebar":"docs"},{"id":"route-object","path":"/docs/7.x/route-object","sidebar":"docs"},{"id":"screen","path":"/docs/7.x/screen","sidebar":"docs"},{"id":"screen-options","path":"/docs/7.x/screen-options","sidebar":"docs"},{"id":"screen-options-resolution","path":"/docs/7.x/screen-options-resolution","sidebar":"docs"},{"id":"screen-tracking","path":"/docs/7.x/screen-tracking","sidebar":"docs"},{"id":"server-container","path":"/docs/7.x/server-container","sidebar":"docs"},{"id":"server-rendering","path":"/docs/7.x/server-rendering","sidebar":"docs"},{"id":"shared-element-transitions","path":"/docs/7.x/shared-element-transitions","sidebar":"docs"},{"id":"stack-actions","path":"/docs/7.x/stack-actions","sidebar":"docs"},{"id":"stack-navigator","path":"/docs/7.x/stack-navigator","sidebar":"docs"},{"id":"state-persistence","path":"/docs/7.x/state-persistence","sidebar":"docs"},{"id":"static-configuration","path":"/docs/7.x/static-configuration","sidebar":"docs"},{"id":"status-bar","path":"/docs/7.x/status-bar","sidebar":"docs"},{"id":"tab-actions","path":"/docs/7.x/tab-actions","sidebar":"docs"},{"id":"tab-view","path":"/docs/7.x/tab-view","sidebar":"docs"},{"id":"testing","path":"/docs/7.x/testing","sidebar":"docs"},{"id":"themes","path":"/docs/7.x/themes","sidebar":"docs"},{"id":"troubleshooting","path":"/docs/7.x/troubleshooting","sidebar":"docs"},{"id":"typescript","path":"/docs/7.x/typescript","sidebar":"docs"},{"id":"upgrading-from-6.x","path":"/docs/7.x/upgrading-from-6.x","sidebar":"docs"},{"id":"use-focus-effect","path":"/docs/7.x/use-focus-effect","sidebar":"docs"},{"id":"use-is-focused","path":"/docs/7.x/use-is-focused","sidebar":"docs"},{"id":"use-link-builder","path":"/docs/7.x/use-link-builder","sidebar":"docs"},{"id":"use-link-props","path":"/docs/7.x/use-link-props","sidebar":"docs"},{"id":"use-link-to","path":"/docs/7.x/use-link-to","sidebar":"docs"},{"id":"use-navigation","path":"/docs/7.x/use-navigation","sidebar":"docs"},{"id":"use-navigation-state","path":"/docs/7.x/use-navigation-state","sidebar":"docs"},{"id":"use-prevent-remove","path":"/docs/7.x/use-prevent-remove","sidebar":"docs"},{"id":"use-route","path":"/docs/7.x/use-route","sidebar":"docs"},{"id":"use-scroll-to-top","path":"/docs/7.x/use-scroll-to-top","sidebar":"docs"},{"id":"use-theme","path":"/docs/7.x/use-theme","sidebar":"docs"},{"id":"used-by","path":"/docs/7.x/used-by","sidebar":"docs"},{"id":"web-support","path":"/docs/7.x/web-support","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/docs/7.x/getting-started","label":"getting-started"}}}},{"name":"6.x","label":"6.x","isLast":true,"path":"/docs","mainDocId":"getting-started","docs":[{"id":"auth-flow","path":"/docs/auth-flow","sidebar":"docs"},{"id":"bottom-tab-navigator","path":"/docs/bottom-tab-navigator","sidebar":"docs"},{"id":"configuring-links","path":"/docs/configuring-links","sidebar":"docs"},{"id":"connecting-navigation-prop","path":"/docs/connecting-navigation-prop","sidebar":"docs"},{"id":"contributing","path":"/docs/contributing","sidebar":"docs"},{"id":"custom-android-back-button-handling","path":"/docs/custom-android-back-button-handling","sidebar":"docs"},{"id":"custom-navigators","path":"/docs/custom-navigators","sidebar":"docs"},{"id":"custom-routers","path":"/docs/custom-routers","sidebar":"docs"},{"id":"deep-linking","path":"/docs/deep-linking","sidebar":"docs"},{"id":"devtools","path":"/docs/devtools","sidebar":"docs"},{"id":"drawer-actions","path":"/docs/drawer-actions","sidebar":"docs"},{"id":"drawer-based-navigation","path":"/docs/drawer-based-navigation","sidebar":"docs"},{"id":"drawer-layout","path":"/docs/drawer-layout","sidebar":"docs"},{"id":"drawer-navigator","path":"/docs/drawer-navigator","sidebar":"docs"},{"id":"elements","path":"/docs/elements","sidebar":"docs"},{"id":"function-after-focusing-screen","path":"/docs/function-after-focusing-screen","sidebar":"docs"},{"id":"getting-started","path":"/docs/getting-started","sidebar":"docs"},{"id":"glossary-of-terms","path":"/docs/glossary-of-terms","sidebar":"docs"},{"id":"group","path":"/docs/group","sidebar":"docs"},{"id":"handling-safe-area","path":"/docs/handling-safe-area","sidebar":"docs"},{"id":"header-buttons","path":"/docs/header-buttons","sidebar":"docs"},{"id":"headers","path":"/docs/headers","sidebar":"docs"},{"id":"hello-react-navigation","path":"/docs/hello-react-navigation","sidebar":"docs"},{"id":"hiding-tabbar-in-screens","path":"/docs/hiding-tabbar-in-screens","sidebar":"docs"},{"id":"limitations","path":"/docs/limitations","sidebar":"docs"},{"id":"link","path":"/docs/link","sidebar":"docs"},{"id":"material-bottom-tab-navigator","path":"/docs/material-bottom-tab-navigator","sidebar":"docs"},{"id":"material-top-tab-navigator","path":"/docs/material-top-tab-navigator","sidebar":"docs"},{"id":"migration-guides","path":"/docs/migration-guides","sidebar":"docs"},{"id":"modal","path":"/docs/modal","sidebar":"docs"},{"id":"more-resources","path":"/docs/more-resources","sidebar":"docs"},{"id":"MST-integration","path":"/docs/MST-integration","sidebar":"docs"},{"id":"multiple-drawers","path":"/docs/multiple-drawers","sidebar":"docs"},{"id":"native-stack-navigator","path":"/docs/native-stack-navigator","sidebar":"docs"},{"id":"navigating","path":"/docs/navigating","sidebar":"docs"},{"id":"navigating-without-navigation-prop","path":"/docs/navigating-without-navigation-prop","sidebar":"docs"},{"id":"navigation-actions","path":"/docs/navigation-actions","sidebar":"docs"},{"id":"navigation-container","path":"/docs/navigation-container","sidebar":"docs"},{"id":"navigation-context","path":"/docs/navigation-context","sidebar":"docs"},{"id":"navigation-events","path":"/docs/navigation-events","sidebar":"docs"},{"id":"navigation-lifecycle","path":"/docs/navigation-lifecycle","sidebar":"docs"},{"id":"navigation-prop","path":"/docs/navigation-prop","sidebar":"docs"},{"id":"navigation-solutions-and-community-libraries","path":"/docs/navigation-solutions-and-community-libraries","sidebar":"docs"},{"id":"navigation-state","path":"/docs/navigation-state","sidebar":"docs"},{"id":"nesting-navigators","path":"/docs/nesting-navigators","sidebar":"docs"},{"id":"next-steps","path":"/docs/next-steps","sidebar":"docs"},{"id":"params","path":"/docs/params","sidebar":"docs"},{"id":"pitch","path":"/docs/pitch","sidebar":"docs"},{"id":"preventing-going-back","path":"/docs/preventing-going-back","sidebar":"docs"},{"id":"redux-integration","path":"/docs/redux-integration","sidebar":"docs"},{"id":"route-prop","path":"/docs/route-prop","sidebar":"docs"},{"id":"screen","path":"/docs/screen","sidebar":"docs"},{"id":"screen-options","path":"/docs/screen-options","sidebar":"docs"},{"id":"screen-options-resolution","path":"/docs/screen-options-resolution","sidebar":"docs"},{"id":"screen-tracking","path":"/docs/screen-tracking","sidebar":"docs"},{"id":"server-container","path":"/docs/server-container","sidebar":"docs"},{"id":"server-rendering","path":"/docs/server-rendering","sidebar":"docs"},{"id":"shared-element-transitions","path":"/docs/shared-element-transitions","sidebar":"docs"},{"id":"stack-actions","path":"/docs/stack-actions","sidebar":"docs"},{"id":"stack-navigator","path":"/docs/stack-navigator","sidebar":"docs"},{"id":"state-persistence","path":"/docs/state-persistence","sidebar":"docs"},{"id":"status-bar","path":"/docs/status-bar","sidebar":"docs"},{"id":"tab-actions","path":"/docs/tab-actions","sidebar":"docs"},{"id":"tab-based-navigation","path":"/docs/tab-based-navigation","sidebar":"docs"},{"id":"tab-view","path":"/docs/tab-view","sidebar":"docs"},{"id":"testing","path":"/docs/testing","sidebar":"docs"},{"id":"themes","path":"/docs/themes","sidebar":"docs"},{"id":"troubleshooting","path":"/docs/troubleshooting","sidebar":"docs"},{"id":"typescript","path":"/docs/typescript","sidebar":"docs"},{"id":"upgrading-from-5.x","path":"/docs/upgrading-from-5.x","sidebar":"docs"},{"id":"use-focus-effect","path":"/docs/use-focus-effect","sidebar":"docs"},{"id":"use-is-focused","path":"/docs/use-is-focused","sidebar":"docs"},{"id":"use-link-builder","path":"/docs/use-link-builder","sidebar":"docs"},{"id":"use-link-props","path":"/docs/use-link-props","sidebar":"docs"},{"id":"use-link-to","path":"/docs/use-link-to","sidebar":"docs"},{"id":"use-navigation","path":"/docs/use-navigation","sidebar":"docs"},{"id":"use-navigation-state","path":"/docs/use-navigation-state","sidebar":"docs"},{"id":"use-route","path":"/docs/use-route","sidebar":"docs"},{"id":"use-scroll-to-top","path":"/docs/use-scroll-to-top","sidebar":"docs"},{"id":"use-theme","path":"/docs/use-theme","sidebar":"docs"},{"id":"used-by","path":"/docs/used-by","sidebar":"docs"},{"id":"web-support","path":"/docs/web-support","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/docs/getting-started","label":"getting-started"}}}},{"name":"5.x","label":"5.x","isLast":false,"path":"/docs/5.x","mainDocId":"getting-started","docs":[{"id":"alternatives","path":"/docs/5.x/alternatives","sidebar":"docs"},{"id":"auth-flow","path":"/docs/5.x/auth-flow","sidebar":"docs"},{"id":"bottom-tab-navigator","path":"/docs/5.x/bottom-tab-navigator","sidebar":"docs"},{"id":"community-libraries-and-navigators","path":"/docs/5.x/community-libraries-and-navigators","sidebar":"docs"},{"id":"compatibility","path":"/docs/5.x/compatibility","sidebar":"docs"},{"id":"configuring-links","path":"/docs/5.x/configuring-links","sidebar":"docs"},{"id":"connecting-navigation-prop","path":"/docs/5.x/connecting-navigation-prop","sidebar":"docs"},{"id":"contributing","path":"/docs/5.x/contributing","sidebar":"docs"},{"id":"custom-android-back-button-handling","path":"/docs/5.x/custom-android-back-button-handling","sidebar":"docs"},{"id":"custom-navigators","path":"/docs/5.x/custom-navigators","sidebar":"docs"},{"id":"custom-routers","path":"/docs/5.x/custom-routers","sidebar":"docs"},{"id":"deep-linking","path":"/docs/5.x/deep-linking","sidebar":"docs"},{"id":"devtools","path":"/docs/5.x/devtools","sidebar":"docs"},{"id":"drawer-actions","path":"/docs/5.x/drawer-actions","sidebar":"docs"},{"id":"drawer-based-navigation","path":"/docs/5.x/drawer-based-navigation","sidebar":"docs"},{"id":"drawer-navigator","path":"/docs/5.x/drawer-navigator","sidebar":"docs"},{"id":"function-after-focusing-screen","path":"/docs/5.x/function-after-focusing-screen","sidebar":"docs"},{"id":"getting-started","path":"/docs/5.x/getting-started","sidebar":"docs"},{"id":"glossary-of-terms","path":"/docs/5.x/glossary-of-terms","sidebar":"docs"},{"id":"handling-safe-area","path":"/docs/5.x/handling-safe-area","sidebar":"docs"},{"id":"header-buttons","path":"/docs/5.x/header-buttons","sidebar":"docs"},{"id":"headers","path":"/docs/5.x/headers","sidebar":"docs"},{"id":"hello-react-navigation","path":"/docs/5.x/hello-react-navigation","sidebar":"docs"},{"id":"hiding-tabbar-in-screens","path":"/docs/5.x/hiding-tabbar-in-screens","sidebar":"docs"},{"id":"limitations","path":"/docs/5.x/limitations","sidebar":"docs"},{"id":"link","path":"/docs/5.x/link","sidebar":"docs"},{"id":"material-bottom-tab-navigator","path":"/docs/5.x/material-bottom-tab-navigator","sidebar":"docs"},{"id":"material-top-tab-navigator","path":"/docs/5.x/material-top-tab-navigator","sidebar":"docs"},{"id":"modal","path":"/docs/5.x/modal","sidebar":"docs"},{"id":"more-resources","path":"/docs/5.x/more-resources","sidebar":"docs"},{"id":"MST-integration","path":"/docs/5.x/MST-integration","sidebar":"docs"},{"id":"native-stack-navigator","path":"/docs/5.x/native-stack-navigator","sidebar":"docs"},{"id":"navigating","path":"/docs/5.x/navigating","sidebar":"docs"},{"id":"navigating-without-navigation-prop","path":"/docs/5.x/navigating-without-navigation-prop","sidebar":"docs"},{"id":"navigation-actions","path":"/docs/5.x/navigation-actions","sidebar":"docs"},{"id":"navigation-container","path":"/docs/5.x/navigation-container","sidebar":"docs"},{"id":"navigation-context","path":"/docs/5.x/navigation-context","sidebar":"docs"},{"id":"navigation-events","path":"/docs/5.x/navigation-events","sidebar":"docs"},{"id":"navigation-lifecycle","path":"/docs/5.x/navigation-lifecycle","sidebar":"docs"},{"id":"navigation-prop","path":"/docs/5.x/navigation-prop","sidebar":"docs"},{"id":"navigation-state","path":"/docs/5.x/navigation-state","sidebar":"docs"},{"id":"nesting-navigators","path":"/docs/5.x/nesting-navigators","sidebar":"docs"},{"id":"next-steps","path":"/docs/5.x/next-steps","sidebar":"docs"},{"id":"params","path":"/docs/5.x/params","sidebar":"docs"},{"id":"pitch","path":"/docs/5.x/pitch","sidebar":"docs"},{"id":"preventing-going-back","path":"/docs/5.x/preventing-going-back","sidebar":"docs"},{"id":"react-native-screens","path":"/docs/5.x/react-native-screens","sidebar":"docs"},{"id":"redux-integration","path":"/docs/5.x/redux-integration","sidebar":"docs"},{"id":"route-prop","path":"/docs/5.x/route-prop","sidebar":"docs"},{"id":"screen","path":"/docs/5.x/screen","sidebar":"docs"},{"id":"screen-options","path":"/docs/5.x/screen-options","sidebar":"docs"},{"id":"screen-options-resolution","path":"/docs/5.x/screen-options-resolution","sidebar":"docs"},{"id":"screen-tracking","path":"/docs/5.x/screen-tracking","sidebar":"docs"},{"id":"server-container","path":"/docs/5.x/server-container","sidebar":"docs"},{"id":"server-rendering","path":"/docs/5.x/server-rendering","sidebar":"docs"},{"id":"stack-actions","path":"/docs/5.x/stack-actions","sidebar":"docs"},{"id":"stack-navigator","path":"/docs/5.x/stack-navigator","sidebar":"docs"},{"id":"state-persistence","path":"/docs/5.x/state-persistence","sidebar":"docs"},{"id":"status-bar","path":"/docs/5.x/status-bar","sidebar":"docs"},{"id":"supported-react-native-versions","path":"/docs/5.x/supported-react-native-versions","sidebar":"docs"},{"id":"tab-actions","path":"/docs/5.x/tab-actions","sidebar":"docs"},{"id":"tab-based-navigation","path":"/docs/5.x/tab-based-navigation","sidebar":"docs"},{"id":"testing","path":"/docs/5.x/testing","sidebar":"docs"},{"id":"themes","path":"/docs/5.x/themes","sidebar":"docs"},{"id":"troubleshooting","path":"/docs/5.x/troubleshooting","sidebar":"docs"},{"id":"typescript","path":"/docs/5.x/typescript","sidebar":"docs"},{"id":"upgrading-from-4.x","path":"/docs/5.x/upgrading-from-4.x","sidebar":"docs"},{"id":"use-focus-effect","path":"/docs/5.x/use-focus-effect","sidebar":"docs"},{"id":"use-is-focused","path":"/docs/5.x/use-is-focused","sidebar":"docs"},{"id":"use-link-builder","path":"/docs/5.x/use-link-builder","sidebar":"docs"},{"id":"use-link-props","path":"/docs/5.x/use-link-props","sidebar":"docs"},{"id":"use-link-to","path":"/docs/5.x/use-link-to","sidebar":"docs"},{"id":"use-linking","path":"/docs/5.x/use-linking","sidebar":"docs"},{"id":"use-navigation","path":"/docs/5.x/use-navigation","sidebar":"docs"},{"id":"use-navigation-state","path":"/docs/5.x/use-navigation-state","sidebar":"docs"},{"id":"use-route","path":"/docs/5.x/use-route","sidebar":"docs"},{"id":"use-scroll-to-top","path":"/docs/5.x/use-scroll-to-top","sidebar":"docs"},{"id":"use-theme","path":"/docs/5.x/use-theme","sidebar":"docs"},{"id":"used-by","path":"/docs/5.x/used-by","sidebar":"docs"},{"id":"web-support","path":"/docs/5.x/web-support","sidebar":"docs"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/docs/5.x/getting-started","label":"getting-started"}}}},{"name":"4.x","label":"4.x","isLast":false,"path":"/docs/4.x","mainDocId":"getting-started","docs":[{"id":"alternatives","path":"/docs/4.x/alternatives","sidebar":"version-4.x-docs"},{"id":"animated-switch-navigator","path":"/docs/4.x/animated-switch-navigator","sidebar":"version-4.x-docs"},{"id":"app-containers","path":"/docs/4.x/app-containers","sidebar":"version-4.x-docs"},{"id":"auth-flow","path":"/docs/4.x/auth-flow","sidebar":"version-4.x-docs"},{"id":"bottom-tab-navigator","path":"/docs/4.x/bottom-tab-navigator","sidebar":"version-4.x-docs"},{"id":"common-mistakes","path":"/docs/4.x/common-mistakes","sidebar":"version-4.x-docs"},{"id":"community-libraries-and-navigators","path":"/docs/4.x/community-libraries-and-navigators","sidebar":"version-4.x-docs"},{"id":"connecting-navigation-prop","path":"/docs/4.x/connecting-navigation-prop","sidebar":"version-4.x-docs"},{"id":"contributing","path":"/docs/4.x/contributing","sidebar":"version-4.x-docs"},{"id":"custom-android-back-button-handling","path":"/docs/4.x/custom-android-back-button-handling","sidebar":"version-4.x-docs"},{"id":"custom-navigator-overview","path":"/docs/4.x/custom-navigator-overview","sidebar":"version-4.x-docs"},{"id":"custom-navigators","path":"/docs/4.x/custom-navigators","sidebar":"version-4.x-docs"},{"id":"custom-routers","path":"/docs/4.x/custom-routers","sidebar":"version-4.x-docs"},{"id":"deep-linking","path":"/docs/4.x/deep-linking","sidebar":"version-4.x-docs"},{"id":"drawer-actions","path":"/docs/4.x/drawer-actions","sidebar":"version-4.x-docs"},{"id":"drawer-based-navigation","path":"/docs/4.x/drawer-based-navigation","sidebar":"version-4.x-docs"},{"id":"drawer-navigator","path":"/docs/4.x/drawer-navigator","sidebar":"version-4.x-docs"},{"id":"function-after-focusing-screen","path":"/docs/4.x/function-after-focusing-screen","sidebar":"version-4.x-docs"},{"id":"getting-started","path":"/docs/4.x/getting-started","sidebar":"version-4.x-docs"},{"id":"glossary-of-terms","path":"/docs/4.x/glossary-of-terms","sidebar":"version-4.x-docs"},{"id":"handling-iphonex","path":"/docs/4.x/handling-iphonex","sidebar":"version-4.x-docs"},{"id":"header-buttons","path":"/docs/4.x/header-buttons","sidebar":"version-4.x-docs"},{"id":"headers","path":"/docs/4.x/headers","sidebar":"version-4.x-docs"},{"id":"hello-react-navigation","path":"/docs/4.x/hello-react-navigation","sidebar":"version-4.x-docs"},{"id":"limitations","path":"/docs/4.x/limitations","sidebar":"version-4.x-docs"},{"id":"localization","path":"/docs/4.x/localization","sidebar":"version-4.x-docs"},{"id":"material-bottom-tab-navigator","path":"/docs/4.x/material-bottom-tab-navigator","sidebar":"version-4.x-docs"},{"id":"material-top-tab-navigator","path":"/docs/4.x/material-top-tab-navigator","sidebar":"version-4.x-docs"},{"id":"modal","path":"/docs/4.x/modal","sidebar":"version-4.x-docs"},{"id":"more-resources","path":"/docs/4.x/more-resources","sidebar":"version-4.x-docs"},{"id":"MST-integration","path":"/docs/4.x/MST-integration","sidebar":"version-4.x-docs"},{"id":"navigating","path":"/docs/4.x/navigating","sidebar":"version-4.x-docs"},{"id":"navigating-without-navigation-prop","path":"/docs/4.x/navigating-without-navigation-prop","sidebar":"version-4.x-docs"},{"id":"navigation-actions","path":"/docs/4.x/navigation-actions","sidebar":"version-4.x-docs"},{"id":"navigation-context","path":"/docs/4.x/navigation-context","sidebar":"version-4.x-docs"},{"id":"navigation-events","path":"/docs/4.x/navigation-events","sidebar":"version-4.x-docs"},{"id":"navigation-key","path":"/docs/4.x/navigation-key","sidebar":"version-4.x-docs"},{"id":"navigation-lifecycle","path":"/docs/4.x/navigation-lifecycle","sidebar":"version-4.x-docs"},{"id":"navigation-options-resolution","path":"/docs/4.x/navigation-options-resolution","sidebar":"version-4.x-docs"},{"id":"navigation-prop","path":"/docs/4.x/navigation-prop","sidebar":"version-4.x-docs"},{"id":"navigation-views","path":"/docs/4.x/navigation-views","sidebar":"version-4.x-docs"},{"id":"next-steps","path":"/docs/4.x/next-steps","sidebar":"version-4.x-docs"},{"id":"params","path":"/docs/4.x/params","sidebar":"version-4.x-docs"},{"id":"pitch","path":"/docs/4.x/pitch","sidebar":"version-4.x-docs"},{"id":"react-native-screens","path":"/docs/4.x/react-native-screens","sidebar":"version-4.x-docs"},{"id":"redux-integration","path":"/docs/4.x/redux-integration","sidebar":"version-4.x-docs"},{"id":"routers","path":"/docs/4.x/routers","sidebar":"version-4.x-docs"},{"id":"screen-tracking","path":"/docs/4.x/screen-tracking","sidebar":"version-4.x-docs"},{"id":"scrollables","path":"/docs/4.x/scrollables","sidebar":"version-4.x-docs"},{"id":"stack-actions","path":"/docs/4.x/stack-actions","sidebar":"version-4.x-docs"},{"id":"stack-navigator","path":"/docs/4.x/stack-navigator","sidebar":"version-4.x-docs"},{"id":"stack-navigator-1.0","path":"/docs/4.x/stack-navigator-1.0","sidebar":"version-4.x-docs"},{"id":"state-persistence","path":"/docs/4.x/state-persistence","sidebar":"version-4.x-docs"},{"id":"status-bar","path":"/docs/4.x/status-bar","sidebar":"version-4.x-docs"},{"id":"supported-react-native-versions","path":"/docs/4.x/supported-react-native-versions","sidebar":"version-4.x-docs"},{"id":"switch-actions","path":"/docs/4.x/switch-actions","sidebar":"version-4.x-docs"},{"id":"switch-navigator","path":"/docs/4.x/switch-navigator","sidebar":"version-4.x-docs"},{"id":"tab-based-navigation","path":"/docs/4.x/tab-based-navigation","sidebar":"version-4.x-docs"},{"id":"themes","path":"/docs/4.x/themes","sidebar":"version-4.x-docs"},{"id":"troubleshooting","path":"/docs/4.x/troubleshooting","sidebar":"version-4.x-docs"},{"id":"typescript","path":"/docs/4.x/typescript","sidebar":"version-4.x-docs"},{"id":"upgrading-from-3.x","path":"/docs/4.x/upgrading-from-3.x","sidebar":"version-4.x-docs"},{"id":"web-support","path":"/docs/4.x/web-support","sidebar":"version-4.x-docs"},{"id":"with-navigation","path":"/docs/4.x/with-navigation","sidebar":"version-4.x-docs"},{"id":"with-navigation-focus","path":"/docs/4.x/with-navigation-focus","sidebar":"version-4.x-docs"}],"draftIds":[],"sidebars":{"version-4.x-docs":{"link":{"path":"/docs/4.x/getting-started","label":"getting-started"}}}},{"name":"3.x","label":"3.x","isLast":false,"path":"/docs/3.x","mainDocId":"getting-started","docs":[{"id":"alternatives","path":"/docs/3.x/alternatives","sidebar":"version-3.x-docs"},{"id":"animated-switch-navigator","path":"/docs/3.x/animated-switch-navigator","sidebar":"version-3.x-docs"},{"id":"app-containers","path":"/docs/3.x/app-containers","sidebar":"version-3.x-docs"},{"id":"auth-flow","path":"/docs/3.x/auth-flow","sidebar":"version-3.x-docs"},{"id":"bottom-tab-navigator","path":"/docs/3.x/bottom-tab-navigator","sidebar":"version-3.x-docs"},{"id":"common-mistakes","path":"/docs/3.x/common-mistakes","sidebar":"version-3.x-docs"},{"id":"community-libraries-and-navigators","path":"/docs/3.x/community-libraries-and-navigators","sidebar":"version-3.x-docs"},{"id":"connecting-navigation-prop","path":"/docs/3.x/connecting-navigation-prop","sidebar":"version-3.x-docs"},{"id":"contributing","path":"/docs/3.x/contributing","sidebar":"version-3.x-docs"},{"id":"custom-android-back-button-handling","path":"/docs/3.x/custom-android-back-button-handling","sidebar":"version-3.x-docs"},{"id":"custom-navigator-overview","path":"/docs/3.x/custom-navigator-overview","sidebar":"version-3.x-docs"},{"id":"custom-navigators","path":"/docs/3.x/custom-navigators","sidebar":"version-3.x-docs"},{"id":"custom-routers","path":"/docs/3.x/custom-routers","sidebar":"version-3.x-docs"},{"id":"deep-linking","path":"/docs/3.x/deep-linking","sidebar":"version-3.x-docs"},{"id":"drawer-actions","path":"/docs/3.x/drawer-actions","sidebar":"version-3.x-docs"},{"id":"drawer-based-navigation","path":"/docs/3.x/drawer-based-navigation","sidebar":"version-3.x-docs"},{"id":"drawer-navigator","path":"/docs/3.x/drawer-navigator","sidebar":"version-3.x-docs"},{"id":"function-after-focusing-screen","path":"/docs/3.x/function-after-focusing-screen","sidebar":"version-3.x-docs"},{"id":"getting-started","path":"/docs/3.x/getting-started","sidebar":"version-3.x-docs"},{"id":"glossary-of-terms","path":"/docs/3.x/glossary-of-terms","sidebar":"version-3.x-docs"},{"id":"handling-iphonex","path":"/docs/3.x/handling-iphonex","sidebar":"version-3.x-docs"},{"id":"header-buttons","path":"/docs/3.x/header-buttons","sidebar":"version-3.x-docs"},{"id":"headers","path":"/docs/3.x/headers","sidebar":"version-3.x-docs"},{"id":"hello-react-navigation","path":"/docs/3.x/hello-react-navigation","sidebar":"version-3.x-docs"},{"id":"limitations","path":"/docs/3.x/limitations","sidebar":"version-3.x-docs"},{"id":"localization","path":"/docs/3.x/localization","sidebar":"version-3.x-docs"},{"id":"material-bottom-tab-navigator","path":"/docs/3.x/material-bottom-tab-navigator","sidebar":"version-3.x-docs"},{"id":"material-top-tab-navigator","path":"/docs/3.x/material-top-tab-navigator","sidebar":"version-3.x-docs"},{"id":"modal","path":"/docs/3.x/modal","sidebar":"version-3.x-docs"},{"id":"more-resources","path":"/docs/3.x/more-resources","sidebar":"version-3.x-docs"},{"id":"MST-integration","path":"/docs/3.x/MST-integration","sidebar":"version-3.x-docs"},{"id":"navigating","path":"/docs/3.x/navigating","sidebar":"version-3.x-docs"},{"id":"navigating-without-navigation-prop","path":"/docs/3.x/navigating-without-navigation-prop","sidebar":"version-3.x-docs"},{"id":"navigation-actions","path":"/docs/3.x/navigation-actions","sidebar":"version-3.x-docs"},{"id":"navigation-context","path":"/docs/3.x/navigation-context","sidebar":"version-3.x-docs"},{"id":"navigation-events","path":"/docs/3.x/navigation-events","sidebar":"version-3.x-docs"},{"id":"navigation-key","path":"/docs/3.x/navigation-key","sidebar":"version-3.x-docs"},{"id":"navigation-lifecycle","path":"/docs/3.x/navigation-lifecycle","sidebar":"version-3.x-docs"},{"id":"navigation-options-resolution","path":"/docs/3.x/navigation-options-resolution","sidebar":"version-3.x-docs"},{"id":"navigation-prop","path":"/docs/3.x/navigation-prop","sidebar":"version-3.x-docs"},{"id":"navigation-views","path":"/docs/3.x/navigation-views","sidebar":"version-3.x-docs"},{"id":"next-steps","path":"/docs/3.x/next-steps","sidebar":"version-3.x-docs"},{"id":"params","path":"/docs/3.x/params","sidebar":"version-3.x-docs"},{"id":"pitch","path":"/docs/3.x/pitch","sidebar":"version-3.x-docs"},{"id":"react-native-screens","path":"/docs/3.x/react-native-screens","sidebar":"version-3.x-docs"},{"id":"redux-integration","path":"/docs/3.x/redux-integration","sidebar":"version-3.x-docs"},{"id":"routers","path":"/docs/3.x/routers","sidebar":"version-3.x-docs"},{"id":"screen-tracking","path":"/docs/3.x/screen-tracking","sidebar":"version-3.x-docs"},{"id":"scrollables","path":"/docs/3.x/scrollables","sidebar":"version-3.x-docs"},{"id":"stack-actions","path":"/docs/3.x/stack-actions","sidebar":"version-3.x-docs"},{"id":"stack-navigator","path":"/docs/3.x/stack-navigator","sidebar":"version-3.x-docs"},{"id":"state-persistence","path":"/docs/3.x/state-persistence","sidebar":"version-3.x-docs"},{"id":"status-bar","path":"/docs/3.x/status-bar","sidebar":"version-3.x-docs"},{"id":"supported-react-native-versions","path":"/docs/3.x/supported-react-native-versions","sidebar":"version-3.x-docs"},{"id":"switch-actions","path":"/docs/3.x/switch-actions","sidebar":"version-3.x-docs"},{"id":"switch-navigator","path":"/docs/3.x/switch-navigator","sidebar":"version-3.x-docs"},{"id":"tab-based-navigation","path":"/docs/3.x/tab-based-navigation","sidebar":"version-3.x-docs"},{"id":"tab-navigator","path":"/docs/3.x/tab-navigator"},{"id":"themes","path":"/docs/3.x/themes","sidebar":"version-3.x-docs"},{"id":"transitioner","path":"/docs/3.x/transitioner","sidebar":"version-3.x-docs"},{"id":"web-support","path":"/docs/3.x/web-support","sidebar":"version-3.x-docs"},{"id":"with-navigation","path":"/docs/3.x/with-navigation","sidebar":"version-3.x-docs"},{"id":"with-navigation-focus","path":"/docs/3.x/with-navigation-focus","sidebar":"version-3.x-docs"}],"draftIds":[],"sidebars":{"version-3.x-docs":{"link":{"path":"/docs/3.x/getting-started","label":"getting-started"}}}},{"name":"2.x","label":"2.x","isLast":false,"path":"/docs/2.x","mainDocId":"getting-started","docs":[{"id":"alternatives","path":"/docs/2.x/alternatives","sidebar":"version-2.x-docs"},{"id":"api-reference","path":"/docs/2.x/api-reference","sidebar":"version-2.x-api"},{"id":"app-containers","path":"/docs/2.x/app-containers","sidebar":"version-2.x-docs"},{"id":"auth-flow","path":"/docs/2.x/auth-flow","sidebar":"version-2.x-docs"},{"id":"bottom-tab-navigator","path":"/docs/2.x/bottom-tab-navigator","sidebar":"version-2.x-api"},{"id":"common-mistakes","path":"/docs/2.x/common-mistakes","sidebar":"version-2.x-docs"},{"id":"community-libraries-and-navigators","path":"/docs/2.x/community-libraries-and-navigators","sidebar":"version-2.x-docs"},{"id":"connecting-navigation-prop","path":"/docs/2.x/connecting-navigation-prop","sidebar":"version-2.x-docs"},{"id":"contributing","path":"/docs/2.x/contributing","sidebar":"version-2.x-docs"},{"id":"custom-android-back-button-handling","path":"/docs/2.x/custom-android-back-button-handling","sidebar":"version-2.x-docs"},{"id":"custom-navigator-overview","path":"/docs/2.x/custom-navigator-overview","sidebar":"version-2.x-docs"},{"id":"custom-navigators","path":"/docs/2.x/custom-navigators","sidebar":"version-2.x-docs"},{"id":"custom-routers","path":"/docs/2.x/custom-routers","sidebar":"version-2.x-docs"},{"id":"deep-linking","path":"/docs/2.x/deep-linking","sidebar":"version-2.x-docs"},{"id":"drawer-actions","path":"/docs/2.x/drawer-actions","sidebar":"version-2.x-api"},{"id":"drawer-based-navigation","path":"/docs/2.x/drawer-based-navigation","sidebar":"version-2.x-docs"},{"id":"drawer-navigator","path":"/docs/2.x/drawer-navigator","sidebar":"version-2.x-api"},{"id":"getting-started","path":"/docs/2.x/getting-started","sidebar":"version-2.x-docs"},{"id":"glossary-of-terms","path":"/docs/2.x/glossary-of-terms","sidebar":"version-2.x-docs"},{"id":"handling-iphonex","path":"/docs/2.x/handling-iphonex","sidebar":"version-2.x-docs"},{"id":"header-buttons","path":"/docs/2.x/header-buttons","sidebar":"version-2.x-docs"},{"id":"headers","path":"/docs/2.x/headers","sidebar":"version-2.x-docs"},{"id":"hello-react-navigation","path":"/docs/2.x/hello-react-navigation","sidebar":"version-2.x-docs"},{"id":"limitations","path":"/docs/2.x/limitations","sidebar":"version-2.x-docs"},{"id":"material-bottom-tab-navigator","path":"/docs/2.x/material-bottom-tab-navigator","sidebar":"version-2.x-api"},{"id":"material-top-tab-navigator","path":"/docs/2.x/material-top-tab-navigator","sidebar":"version-2.x-api"},{"id":"modal","path":"/docs/2.x/modal","sidebar":"version-2.x-docs"},{"id":"more-resources","path":"/docs/2.x/more-resources","sidebar":"version-2.x-docs"},{"id":"navigating","path":"/docs/2.x/navigating","sidebar":"version-2.x-docs"},{"id":"navigating-without-navigation-prop","path":"/docs/2.x/navigating-without-navigation-prop","sidebar":"version-2.x-docs"},{"id":"navigation-actions","path":"/docs/2.x/navigation-actions","sidebar":"version-2.x-api"},{"id":"navigation-context","path":"/docs/2.x/navigation-context"},{"id":"navigation-events","path":"/docs/2.x/navigation-events","sidebar":"version-2.x-api"},{"id":"navigation-key","path":"/docs/2.x/navigation-key","sidebar":"version-2.x-docs"},{"id":"navigation-lifecycle","path":"/docs/2.x/navigation-lifecycle","sidebar":"version-2.x-docs"},{"id":"navigation-options-resolution","path":"/docs/2.x/navigation-options-resolution","sidebar":"version-2.x-docs"},{"id":"navigation-prop","path":"/docs/2.x/navigation-prop","sidebar":"version-2.x-api"},{"id":"navigation-views","path":"/docs/2.x/navigation-views","sidebar":"version-2.x-docs"},{"id":"next-steps","path":"/docs/2.x/next-steps","sidebar":"version-2.x-docs"},{"id":"params","path":"/docs/2.x/params","sidebar":"version-2.x-docs"},{"id":"pitch","path":"/docs/2.x/pitch","sidebar":"version-2.x-docs"},{"id":"react-native-screens","path":"/docs/2.x/react-native-screens","sidebar":"version-2.x-docs"},{"id":"redux-integration","path":"/docs/2.x/redux-integration","sidebar":"version-2.x-docs"},{"id":"routers","path":"/docs/2.x/routers","sidebar":"version-2.x-docs"},{"id":"screen-tracking","path":"/docs/2.x/screen-tracking","sidebar":"version-2.x-docs"},{"id":"stack-actions","path":"/docs/2.x/stack-actions","sidebar":"version-2.x-api"},{"id":"stack-navigator","path":"/docs/2.x/stack-navigator","sidebar":"version-2.x-api"},{"id":"state-persistence","path":"/docs/2.x/state-persistence","sidebar":"version-2.x-docs"},{"id":"status-bar","path":"/docs/2.x/status-bar","sidebar":"version-2.x-docs"},{"id":"supported-react-native-versions","path":"/docs/2.x/supported-react-native-versions","sidebar":"version-2.x-docs"},{"id":"switch-navigator","path":"/docs/2.x/switch-navigator","sidebar":"version-2.x-api"},{"id":"tab-based-navigation","path":"/docs/2.x/tab-based-navigation","sidebar":"version-2.x-docs"},{"id":"tab-navigator","path":"/docs/2.x/tab-navigator","sidebar":"version-2.x-api"},{"id":"transitioner","path":"/docs/2.x/transitioner","sidebar":"version-2.x-docs"},{"id":"with-navigation","path":"/docs/2.x/with-navigation","sidebar":"version-2.x-api"},{"id":"with-navigation-focus","path":"/docs/2.x/with-navigation-focus","sidebar":"version-2.x-api"}],"draftIds":[],"sidebars":{"version-2.x-docs":{"link":{"path":"/docs/2.x/getting-started","label":"getting-started"}},"version-2.x-api":{"link":{"path":"/docs/2.x/api-reference","label":"api-reference"}}}},{"name":"1.x","label":"1.x","isLast":false,"path":"/docs/1.x","mainDocId":"getting-started","docs":[{"id":"alternatives","path":"/docs/1.x/alternatives","sidebar":"docs"},{"id":"api-reference","path":"/docs/1.x/api-reference","sidebar":"api"},{"id":"auth-flow","path":"/docs/1.x/auth-flow","sidebar":"docs"},{"id":"connecting-navigation-prop","path":"/docs/1.x/connecting-navigation-prop","sidebar":"docs"},{"id":"contributing","path":"/docs/1.x/contributing","sidebar":"docs"},{"id":"custom-android-back-button-handling","path":"/docs/1.x/custom-android-back-button-handling","sidebar":"docs"},{"id":"custom-navigator-overview","path":"/docs/1.x/custom-navigator-overview","sidebar":"docs"},{"id":"custom-navigators","path":"/docs/1.x/custom-navigators","sidebar":"docs"},{"id":"custom-routers","path":"/docs/1.x/custom-routers","sidebar":"docs"},{"id":"customize-styles","path":"/docs/1.x/customize-styles"},{"id":"deep-linking","path":"/docs/1.x/deep-linking","sidebar":"docs"},{"id":"drawer-based-navigation","path":"/docs/1.x/drawer-based-navigation","sidebar":"docs"},{"id":"drawer-navigator","path":"/docs/1.x/drawer-navigator","sidebar":"api"},{"id":"getting-started","path":"/docs/1.x/getting-started","sidebar":"docs"},{"id":"glossary-of-terms","path":"/docs/1.x/glossary-of-terms","sidebar":"docs"},{"id":"handling-iphonex","path":"/docs/1.x/handling-iphonex","sidebar":"docs"},{"id":"header-buttons","path":"/docs/1.x/header-buttons","sidebar":"docs"},{"id":"headers","path":"/docs/1.x/headers","sidebar":"docs"},{"id":"hello-react-navigation","path":"/docs/1.x/hello-react-navigation","sidebar":"docs"},{"id":"listen-lifecycle-events","path":"/docs/1.x/listen-lifecycle-events"},{"id":"modal","path":"/docs/1.x/modal","sidebar":"docs"},{"id":"navigating","path":"/docs/1.x/navigating","sidebar":"docs"},{"id":"navigating-without-navigation-prop","path":"/docs/1.x/navigating-without-navigation-prop","sidebar":"docs"},{"id":"navigation-actions","path":"/docs/1.x/navigation-actions","sidebar":"api"},{"id":"navigation-options","path":"/docs/1.x/navigation-options"},{"id":"navigation-prop","path":"/docs/1.x/navigation-prop","sidebar":"api"},{"id":"navigation-views","path":"/docs/1.x/navigation-views","sidebar":"docs"},{"id":"next-steps","path":"/docs/1.x/next-steps","sidebar":"docs"},{"id":"params","path":"/docs/1.x/params","sidebar":"docs"},{"id":"partial-overlay","path":"/docs/1.x/partial-overlay"},{"id":"pitch","path":"/docs/1.x/pitch","sidebar":"docs"},{"id":"redux-integration","path":"/docs/1.x/redux-integration","sidebar":"docs"},{"id":"routers","path":"/docs/1.x/routers","sidebar":"docs"},{"id":"screen-tracking","path":"/docs/1.x/screen-tracking","sidebar":"docs"},{"id":"set-params-on-back","path":"/docs/1.x/set-params-on-back"},{"id":"stack-navigator","path":"/docs/1.x/stack-navigator","sidebar":"api"},{"id":"status-bar","path":"/docs/1.x/status-bar","sidebar":"docs"},{"id":"supported-react-native-versions","path":"/docs/1.x/supported-react-native-versions","sidebar":"docs"},{"id":"switch-navigator","path":"/docs/1.x/switch-navigator","sidebar":"api"},{"id":"tab-based-navigation","path":"/docs/1.x/tab-based-navigation","sidebar":"docs"},{"id":"tab-navigator","path":"/docs/1.x/tab-navigator","sidebar":"api"},{"id":"transitioner","path":"/docs/1.x/transitioner","sidebar":"docs"},{"id":"with-navigation","path":"/docs/1.x/with-navigation","sidebar":"api"},{"id":"with-navigation-focus","path":"/docs/1.x/with-navigation-focus","sidebar":"api"}],"draftIds":[],"sidebars":{"docs":{"link":{"path":"/docs/1.x/getting-started","label":"getting-started"}},"api":{"link":{"path":"/docs/1.x/api-reference","label":"api-reference"}}}}],"breadcrumbs":false}},"react-navigation-versions":{"default":{"versions":{"7.x":{"@react-navigation/bottom-tabs":["7.0.0-rc.28",{"@react-navigation/native":"*","react":"*","react-native":"*","react-native-safe-area-context":"*","react-native-screens":"*"}],"@react-navigation/core":["7.0.0-rc.13",{"react":"*"}],"@react-navigation/drawer":["7.0.0-rc.27",{"@react-navigation/native":"*","react":"*","react-native":"*","react-native-gesture-handler":"*","react-native-reanimated":"*","react-native-safe-area-context":"*","react-native-screens":"*"}],"@react-navigation/elements":["2.0.0-rc.21",{"@react-native-masked-view/masked-view":"*","@react-navigation/native":"*","react":"*","react-native":"*","react-native-safe-area-context":"*"}],"@react-navigation/material-top-tabs":["7.0.0-rc.22",{"@react-navigation/native":"*","react":"*","react-native":"*","react-native-pager-view":"*"}],"@react-navigation/native-stack":["7.0.0-rc.24",{"@react-navigation/native":"*","react":"*","react-native":"*","react-native-safe-area-context":"*","react-native-screens":"*"}],"@react-navigation/native":["7.0.0-rc.18",{"react":"*","react-native":"*"}],"@react-navigation/routers":["7.0.0-rc.8",{}],"@react-navigation/stack":["7.0.0-rc.23",{"@react-navigation/native":"*","react":"*","react-native":"*","react-native-gesture-handler":"*","react-native-safe-area-context":"*","react-native-screens":"*"}],"react-native-drawer-layout":["4.0.0-rc.10",{"react":"*","react-native":"*","react-native-gesture-handler":"*","react-native-reanimated":"*"}],"react-native-tab-view":["4.0.0-rc.9",{"react":"*","react-native":"*","react-native-pager-view":"*"}]}}}}}'),i=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var s=n(57529);const c=JSON.parse('{"docusaurusVersion":"3.0.0","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"3.0.0"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"3.0.0"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"3.0.0"},"docusaurus-plugin-google-analytics":{"type":"package","name":"@docusaurus/plugin-google-analytics","version":"3.0.0"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"3.0.0"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"3.0.0"},"docusaurus-theme-search-algolia":{"type":"package","name":"@docusaurus/theme-search-algolia","version":"3.0.0"},"react-navigation-versions":{"type":"project"},"docusaurus-plugin-client-redirects":{"type":"package","name":"@docusaurus/plugin-client-redirects","version":"3.0.0"}}}');var d=n(85893);const l={siteConfig:a.default,siteMetadata:c,globalData:r,i18n:i,codeTranslations:s},u=o.createContext(l);function p(e){let{children:t}=e;return(0,d.jsx)(u.Provider,{value:l,children:t})}},44763:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var o=n(67294),a=n(10412),r=n(35742),i=n(18780),s=n(7452),c=n(85893);function d(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"flex-start",minHeight:"100vh",width:"100%",maxWidth:"80ch",fontSize:"20px",margin:"0 auto",padding:"1rem"},children:[(0,c.jsx)("h1",{style:{fontSize:"3rem"},children:"This page crashed"}),(0,c.jsx)("button",{type:"button",onClick:n,style:{margin:"1rem 0",fontSize:"2rem",cursor:"pointer",borderRadius:20,padding:"1rem"},children:"Try again"}),(0,c.jsx)(l,{error:t})]})}function l(e){let{error:t}=e;const n=(0,i.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,c.jsx)("p",{style:{whiteSpace:"pre-wrap"},children:n})}function u(e){let{error:t,tryAgain:n}=e;return(0,c.jsxs)(f,{fallback:()=>(0,c.jsx)(d,{error:t,tryAgain:n}),children:[(0,c.jsx)(r.Z,{children:(0,c.jsx)("title",{children:"Page Error"})}),(0,c.jsx)(s.Z,{children:(0,c.jsx)(d,{error:t,tryAgain:n})})]})}const p=e=>(0,c.jsx)(u,{...e});class f extends o.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){var n;const e={error:t,tryAgain:()=>this.setState({error:null})};return(null!=(n=this.props.fallback)?n:p)(e)}return null!=e?e:null}}},10412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const o="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:o,canUseEventListeners:o&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:o&&"IntersectionObserver"in window,canUseViewport:o&&"screen"in window}},35742:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});n(67294);var o=n(70405),a=n(85893);function r(e){return(0,a.jsx)(o.ql,{...e})}},39960:(e,t,n)=>{"use strict";n.d(t,{Z:()=>f});var o=n(67294),a=n(73727),r=n(18780),i=n(52263),s=n(13919),c=n(10412),d=n(85893);const l=o.createContext({collectLink:()=>{}});var u=n(44996);function p(e,t){var n,p;let{isNavLink:f,to:m,href:g,activeClassName:h,isActive:b,"data-noBrokenLinkCheck":v,autoAddBaseUrl:x=!0,...y}=e;const{siteConfig:{trailingSlash:_,baseUrl:w}}=(0,i.Z)(),{withBaseUrl:k}=(0,u.C)(),S=(0,o.useContext)(l),E=(0,o.useRef)(null);(0,o.useImperativeHandle)(t,(()=>E.current));const C=m||g;const T=(0,s.Z)(C),j=null==C?void 0:C.replace("pathname://","");let P=void 0!==j?(A=j,x&&(e=>e.startsWith("/"))(A)?k(A):A):void 0;var A;P&&T&&(P=(0,r.applyTrailingSlash)(P,{trailingSlash:_,baseUrl:w}));const L=(0,o.useRef)(!1),R=f?a.OL:a.rU,N=c.Z.canUseIntersectionObserver,O=(0,o.useRef)(),I=()=>{L.current||null==P||(window.docusaurus.preload(P),L.current=!0)};(0,o.useEffect)((()=>(!N&&T&&null!=P&&window.docusaurus.prefetch(P),()=>{N&&O.current&&O.current.disconnect()})),[O,P,N,T]);const D=null!=(n=null==(p=P)?void 0:p.startsWith("#"))&&n,M=!P||!T||D;return M||v||S.collectLink(P),M?(0,d.jsx)("a",{ref:E,href:P,...C&&!T&&{target:"_blank",rel:"noopener noreferrer"},...y}):(0,d.jsx)(R,{...y,onMouseEnter:I,onTouchStart:I,innerRef:e=>{E.current=e,N&&e&&T&&(O.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(O.current.unobserve(e),O.current.disconnect(),null!=P&&window.docusaurus.prefetch(P))}))})),O.current.observe(e))},to:P,...f&&{isActive:b,activeClassName:h}})}const f=o.forwardRef(p)},95999:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d,I:()=>c});var o=n(67294),a=n(85893);function r(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=null==t?void 0:t[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,o.isValidElement)(e)))?n.map(((e,t)=>(0,o.isValidElement)(e)?o.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var i=n(57529);function s(e){var t,n;let{id:o,message:a}=e;if(void 0===o&&void 0===a)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return null!=(t=null!=(n=i[null!=o?o:a])?n:a)?t:o}function c(e,t){let{message:n,id:o}=e;return r(s({message:n,id:o}),t)}function d(e){let{children:t,id:n,values:o}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const i=s({message:t,id:n});return(0,a.jsx)(a.Fragment,{children:r(i,o)})}},29935:(e,t,n)=>{"use strict";n.d(t,{m:()=>o});const o="default"},13919:(e,t,n)=>{"use strict";function o(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!o(e)}n.d(t,{Z:()=>a,b:()=>o})},44996:(e,t,n)=>{"use strict";n.d(t,{C:()=>i,Z:()=>s});var o=n(67294),a=n(52263),r=n(13919);function i(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.Z)(),n=(0,o.useCallback)(((n,o)=>function(e,t,n,o){let{forcePrependBaseUrl:a=!1,absolute:i=!1}=void 0===o?{}:o;if(!n||n.startsWith("#")||(0,r.b)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const s=n.startsWith(t)?n:t+n.replace(/^\//,"");return i?e+s:s}(t,e,n,o)),[t,e]);return{withBaseUrl:n}}function s(e,t){void 0===t&&(t={});const{withBaseUrl:n}=i();return n(e,t)}},52263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});var o=n(67294),a=n(58940);function r(){return(0,o.useContext)(a._)}},28084:(e,t,n)=>{"use strict";n.d(t,{OD:()=>r,eZ:()=>i});var o=n(52263),a=n(29935);function r(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,o.Z)();return e}()[e];if(!n&&t.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin.');return n}function i(e,t,n){void 0===t&&(t=a.m),void 0===n&&(n={});const o=r(e),i=null==o?void 0:o[t];if(!i&&n.failfast)throw new Error('Docusaurus plugin global data not found for "'+e+'" plugin with id "'+t+'".');return i}},72389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});var o=n(67294),a=n(98934);function r(){return(0,o.useContext)(a._)}},20469:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});var o=n(67294);const a=n(10412).Z.canUseDOM?o.useLayoutEffect:o.useEffect},99670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const o=e=>"object"==typeof e&&!!e&&Object.keys(e).length>0;function a(e){const t={};return function e(n,a){Object.entries(n).forEach((n=>{let[r,i]=n;const s=a?a+"."+r:r;o(i)?e(i,s):t[s]=i}))}(e),t}},30226:(e,t,n)=>{"use strict";n.d(t,{_:()=>r,z:()=>i});var o=n(67294),a=n(85893);const r=o.createContext(null);function i(e){let{children:t,value:n}=e;const i=o.useContext(r),s=(0,o.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const o={...t.data,...null==n?void 0:n.data};return{plugin:t.plugin,data:o}}({parent:i,value:n})),[i,n]);return(0,a.jsx)(r.Provider,{value:s,children:t})}},94104:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>h,gA:()=>u,WS:()=>p,zu:()=>g,_r:()=>d,Jo:()=>b,zh:()=>l,yW:()=>m,gB:()=>f});var o=n(16550),a=n(28084);const r=e=>e.versions.find((e=>e.isLast));function i(e,t){const n=r(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,o.LX)(t,{path:e.path,exact:!1,strict:!1})))}function s(e,t){const n=i(e,t),a=null==n?void 0:n.docs.find((e=>!!(0,o.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((o=>{o.id===t&&(n[e.name]=o)}))})),n}(a.id):{}}}const c={},d=()=>{var e;return null!=(e=(0,a.OD)("docusaurus-plugin-content-docs"))?e:c},l=e=>(0,a.eZ)("docusaurus-plugin-content-docs",e,{failfast:!0});function u(e){void 0===e&&(e={});const t=d(),{pathname:n}=(0,o.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,o.LX)(t,{path:n.path,exact:!1,strict:!1})})),r=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!r&&n.failfast)throw new Error("Can't find active docs plugin for \""+t+'" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: '+Object.values(e).map((e=>e.path)).join(", "));return r}(t,n,e)}function p(e){void 0===e&&(e={});const t=u(e),{pathname:n}=(0,o.TH)();if(!t)return;return{activePlugin:t,activeVersion:i(t.pluginData,n)}}function f(e){return l(e).versions}function m(e){const t=l(e);return r(t)}function g(e){const t=l(e),{pathname:n}=(0,o.TH)();return i(t,n)}function h(e){const t=l(e),{pathname:n}=(0,o.TH)();return s(t,n)}function b(e){const t=l(e),{pathname:n}=(0,o.TH)();return function(e,t){const n=r(e);return{latestDocSuggestion:s(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},74367:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>o});const o={onRouteDidUpdate(e){let{location:t,previousLocation:n}=e;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||(window.ga("set","page",t.pathname+t.search+t.hash),window.ga("send","pageview"))}}},18320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});var o=n(74865),a=n.n(o);a().configure({showSpinner:!1});const r={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var o=n(14965),a=n(36809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:o}=t;globalThis.Prism=e,o.forEach((e=>{"php"===e&&n(96854),n(6726)("./prism-"+e)})),delete globalThis.Prism}(o.p1)},92503:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});n(67294);var o=n(86010),a=n(95999),r=n(86668),i=n(39960);const s={anchorWithStickyNavbar:"anchorWithStickyNavbar_LWe7",anchorWithHideOnScrollNavbar:"anchorWithHideOnScrollNavbar_WYt5"};var c=n(85893);function d(e){let{as:t,id:n,...d}=e;const{navbar:{hideOnScroll:l}}=(0,r.L)();if("h1"===t||!n)return(0,c.jsx)(t,{...d,id:void 0});const u=(0,a.I)({id:"theme.common.headingLinkTitle",message:"Direct link to {heading}",description:"Title for link to heading"},{heading:"string"==typeof d.children?d.children:n});return(0,c.jsxs)(t,{...d,className:(0,o.Z)("anchor",l?s.anchorWithHideOnScrollNavbar:s.anchorWithStickyNavbar,d.className),id:n,children:[d.children,(0,c.jsx)(i.Z,{className:"hash-link",to:"#"+n,"aria-label":u,title:u,children:"\u200b"})]})}},39471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});n(67294);const o={iconExternalLink:"iconExternalLink_nPIU"};var a=n(85893);function r(e){let{width:t=13.5,height:n=13.5}=e;return(0,a.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:o.iconExternalLink,children:(0,a.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},7452:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Lt});var o=n(67294),a=n(86010),r=n(44763),i=n(10833),s=n(16550),c=n(95999),d=n(85936),l=n(85893);const u="__docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function f(){const e=(0,o.useRef)(null),{action:t}=(0,s.k6)(),n=(0,o.useCallback)((e=>{e.preventDefault();const t=null!=(n=document.querySelector("main:first-of-type"))?n:document.getElementById(u);var n;t&&p(t)}),[]);return(0,d.S)((n=>{let{location:o}=n;e.current&&!o.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const m=(0,c.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function g(e){var t;const n=null!=(t=e.children)?t:m,{containerRef:o,onClick:a}=f();return(0,l.jsx)("div",{ref:o,role:"region","aria-label":m,children:(0,l.jsx)("a",{...e,href:"#"+u,onClick:a,children:n})})}var h=n(35281),b=n(19727);const v={skipToContent:"skipToContent_fXgn"};function x(){return(0,l.jsx)(g,{className:v.skipToContent})}var y=n(86668),_=n(59689);function w(e){let{width:t=21,height:n=21,color:o="currentColor",strokeWidth:a=1.2,className:r,...i}=e;return(0,l.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...i,children:(0,l.jsx)("g",{stroke:o,strokeWidth:a,children:(0,l.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const k={closeButton:"closeButton_CVFx"};function S(e){return(0,l.jsx)("button",{type:"button","aria-label":(0,c.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,a.Z)("clean-btn close",k.closeButton,e.className),children:(0,l.jsx)(w,{width:14,height:14,strokeWidth:3.1})})}const E={content:"content_knG7"};function C(e){const{announcementBar:t}=(0,y.L)(),{content:n}=t;return(0,l.jsx)("div",{...e,className:(0,a.Z)(E.content,e.className),dangerouslySetInnerHTML:{__html:n}})}const T={announcementBar:"announcementBar_mb4j",announcementBarPlaceholder:"announcementBarPlaceholder_vyr4",announcementBarClose:"announcementBarClose_gvF7",announcementBarContent:"announcementBarContent_xLdY"};function j(){const{announcementBar:e}=(0,y.L)(),{isActive:t,close:n}=(0,_.nT)();if(!t)return null;const{backgroundColor:o,textColor:a,isCloseable:r}=e;return(0,l.jsxs)("div",{className:T.announcementBar,style:{backgroundColor:o,color:a},role:"banner",children:[r&&(0,l.jsx)("div",{className:T.announcementBarPlaceholder}),(0,l.jsx)(C,{className:T.announcementBarContent}),r&&(0,l.jsx)(S,{onClick:n,className:T.announcementBarClose})]})}var P=n(93163),A=n(12466);var L=n(902),R=n(13102);const N=o.createContext(null);function O(e){let{children:t}=e;const n=function(){const e=(0,P.e)(),t=(0,R.HY)(),[n,a]=(0,o.useState)(!1),r=null!==t.component,i=(0,L.D9)(r);return(0,o.useEffect)((()=>{r&&!i&&a(!0)}),[r,i]),(0,o.useEffect)((()=>{r?e.shown||a(!0):a(!1)}),[e.shown,r]),(0,o.useMemo)((()=>[n,a]),[n])}();return(0,l.jsx)(N.Provider,{value:n,children:t})}function I(e){if(e.component){const t=e.component;return(0,l.jsx)(t,{...e.props})}}function D(){const e=(0,o.useContext)(N);if(!e)throw new L.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,o.useCallback)((()=>n(!1)),[n]),r=(0,R.HY)();return(0,o.useMemo)((()=>({shown:t,hide:a,content:I(r)})),[a,r,t])}function M(e){let{header:t,primaryMenu:n,secondaryMenu:o}=e;const{shown:r}=D();return(0,l.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,l.jsxs)("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":r}),children:[(0,l.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,l.jsx)("div",{className:"navbar-sidebar__item menu",children:o})]})]})}var F=n(92949),z=n(72389);function B(e){return(0,l.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,l.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function U(e){return(0,l.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,l.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const $={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function q(e){let{className:t,buttonClassName:n,value:o,onChange:r}=e;const i=(0,z.Z)(),s=(0,c.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===o?(0,c.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,c.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,l.jsx)("div",{className:(0,a.Z)($.toggle,t),children:(0,l.jsxs)("button",{className:(0,a.Z)("clean-btn",$.toggleButton,!i&&$.toggleButtonDisabled,n),type:"button",onClick:()=>r("dark"===o?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite",children:[(0,l.jsx)(B,{className:(0,a.Z)($.toggleIcon,$.lightToggleIcon)}),(0,l.jsx)(U,{className:(0,a.Z)($.toggleIcon,$.darkToggleIcon)})]})})}const H=o.memo(q),Z={darkNavbarColorModeToggle:"darkNavbarColorModeToggle_X3D1"};function G(e){let{className:t}=e;const n=(0,y.L)().navbar.style,o=(0,y.L)().colorMode.disableSwitch,{colorMode:a,setColorMode:r}=(0,F.I)();return o?null:(0,l.jsx)(H,{className:t,buttonClassName:"dark"===n?Z.darkNavbarColorModeToggle:void 0,value:a,onChange:r})}var V=n(21327);function W(){return(0,l.jsx)(V.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function K(){const e=(0,P.e)();return(0,l.jsx)("button",{type:"button","aria-label":(0,c.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,l.jsx)(w,{color:"var(--ifm-color-emphasis-600)"})})}function Q(){return(0,l.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,l.jsx)(W,{}),(0,l.jsx)(G,{className:"margin-right--md"}),(0,l.jsx)(K,{})]})}var Y=n(39960),X=n(44996),J=n(13919),ee=n(98022),te=n(39471);function ne(e){let{activeBasePath:t,activeBaseRegex:n,to:o,href:a,label:r,html:i,isDropdownLink:s,prependBaseUrlToHref:c,...d}=e;const u=(0,X.Z)(o),p=(0,X.Z)(t),f=(0,X.Z)(a,{forcePrependBaseUrl:!0}),m=r&&a&&!(0,J.Z)(a),g=i?{dangerouslySetInnerHTML:{__html:i}}:{children:(0,l.jsxs)(l.Fragment,{children:[r,m&&(0,l.jsx)(te.Z,{...s&&{width:12,height:12}})]})};return a?(0,l.jsx)(Y.Z,{href:c?f:a,...d,...g}):(0,l.jsx)(Y.Z,{to:u,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?(0,ee.F)(n,t.pathname):t.pathname.startsWith(p)},...d,...g})}function oe(e){let{className:t,isDropdownItem:n=!1,...o}=e;const r=(0,l.jsx)(ne,{className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...o});return n?(0,l.jsx)("li",{children:r}):r}function ae(e){let{className:t,isDropdownItem:n,...o}=e;return(0,l.jsx)("li",{className:"menu__list-item",children:(0,l.jsx)(ne,{className:(0,a.Z)("menu__link",t),...o})})}function re(e){var t;let{mobile:n=!1,position:o,...a}=e;const r=n?ae:oe;return(0,l.jsx)(r,{...a,activeClassName:null!=(t=a.activeClassName)?t:n?"menu__link--active":"navbar__link--active"})}var ie=n(86043),se=n(48596),ce=n(52263);function de(e,t){return e.some((e=>function(e,t){return!!(0,se.Mg)(e.to,t)||!!(0,ee.F)(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function le(e){var t;let{items:n,position:r,className:i,onClick:s,...c}=e;const d=(0,o.useRef)(null),[u,p]=(0,o.useState)(!1);return(0,o.useEffect)((()=>{const e=e=>{d.current&&!d.current.contains(e.target)&&p(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),document.addEventListener("focusin",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e),document.removeEventListener("focusin",e)}}),[d]),(0,l.jsxs)("div",{ref:d,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===r,"dropdown--show":u}),children:[(0,l.jsx)(ne,{"aria-haspopup":"true","aria-expanded":u,role:"button",href:c.to?void 0:"#",className:(0,a.Z)("navbar__link",i),...c,onClick:c.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),p(!u))},children:null!=(t=c.children)?t:c.label}),(0,l.jsx)("ul",{className:"dropdown__menu",children:n.map(((e,t)=>(0,o.createElement)(qe,{isDropdownItem:!0,activeClassName:"dropdown__link--active",...e,key:t})))})]})}function ue(e){var t;let{items:n,className:r,position:i,onClick:c,...d}=e;const u=function(){const{siteConfig:{baseUrl:e}}=(0,ce.Z)(),{pathname:t}=(0,s.TH)();return t.replace(e,"/")}(),p=de(n,u),{collapsed:f,toggleCollapsed:m,setCollapsed:g}=(0,ie.u)({initialState:()=>!p});return(0,o.useEffect)((()=>{p&&g(!p)}),[u,p,g]),(0,l.jsxs)("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":f}),children:[(0,l.jsx)(ne,{role:"button",className:(0,a.Z)("menu__link menu__link--sublist menu__link--sublist-caret",r),...d,onClick:e=>{e.preventDefault(),m()},children:null!=(t=d.children)?t:d.label}),(0,l.jsx)(ie.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:f,children:n.map(((e,t)=>(0,o.createElement)(qe,{mobile:!0,isDropdownItem:!0,onClick:c,activeClassName:"menu__link--active",...e,key:t})))})]})}function pe(e){let{mobile:t=!1,...n}=e;const o=t?ue:le;return(0,l.jsx)(o,{...n})}var fe=n(94711);function me(e){let{width:t=20,height:n=20,...o}=e;return(0,l.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...o,children:(0,l.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const ge="iconLanguage_nlXk";function he(){return o.createElement("svg",{width:"15",height:"15",className:"DocSearch-Control-Key-Icon"},o.createElement("path",{d:"M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953",strokeWidth:"1.2",stroke:"currentColor",fill:"none",strokeLinecap:"square"}))}var be=n(20830),ve=["translations"];function xe(){return xe=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,o=new Array(t);n=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var ke="Ctrl";var Se=o.forwardRef((function(e,t){var n=e.translations,a=void 0===n?{}:n,r=we(e,ve),i=a.buttonText,s=void 0===i?"Search":i,c=a.buttonAriaLabel,d=void 0===c?"Search":c,l=ye((0,o.useState)(null),2),u=l[0],p=l[1];return(0,o.useEffect)((function(){"undefined"!=typeof navigator&&(/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?p("\u2318"):p(ke))}),[]),o.createElement("button",xe({type:"button",className:"DocSearch DocSearch-Button","aria-label":d},r,{ref:t}),o.createElement("span",{className:"DocSearch-Button-Container"},o.createElement(be.W,null),o.createElement("span",{className:"DocSearch-Button-Placeholder"},s)),o.createElement("span",{className:"DocSearch-Button-Keys"},null!==u&&o.createElement(o.Fragment,null,o.createElement("kbd",{className:"DocSearch-Button-Key"},u===ke?o.createElement(he,null):u),o.createElement("kbd",{className:"DocSearch-Button-Key"},"K"))))})),Ee=n(35742),Ce=n(66177),Te=n(239),je=n(43320);var Pe=n(73935);const Ae={button:{buttonText:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),buttonAriaLabel:(0,c.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"})},modal:{searchBox:{resetButtonTitle:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),resetButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.resetButtonTitle",message:"Clear the query",description:"The label and ARIA label for search box reset button"}),cancelButtonText:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"}),cancelButtonAriaLabel:(0,c.I)({id:"theme.SearchModal.searchBox.cancelButtonText",message:"Cancel",description:"The label and ARIA label for search box cancel button"})},startScreen:{recentSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.recentSearchesTitle",message:"Recent",description:"The title for recent searches"}),noRecentSearchesText:(0,c.I)({id:"theme.SearchModal.startScreen.noRecentSearchesText",message:"No recent searches",description:"The text when no recent searches"}),saveRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.saveRecentSearchButtonTitle",message:"Save this search",description:"The label for save recent search button"}),removeRecentSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeRecentSearchButtonTitle",message:"Remove this search from history",description:"The label for remove recent search button"}),favoriteSearchesTitle:(0,c.I)({id:"theme.SearchModal.startScreen.favoriteSearchesTitle",message:"Favorite",description:"The title for favorite searches"}),removeFavoriteSearchButtonTitle:(0,c.I)({id:"theme.SearchModal.startScreen.removeFavoriteSearchButtonTitle",message:"Remove this search from favorites",description:"The label for remove favorite search button"})},errorScreen:{titleText:(0,c.I)({id:"theme.SearchModal.errorScreen.titleText",message:"Unable to fetch results",description:"The title for error screen of search modal"}),helpText:(0,c.I)({id:"theme.SearchModal.errorScreen.helpText",message:"You might want to check your network connection.",description:"The help text for error screen of search modal"})},footer:{selectText:(0,c.I)({id:"theme.SearchModal.footer.selectText",message:"to select",description:"The explanatory text of the action for the enter key"}),selectKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.selectKeyAriaLabel",message:"Enter key",description:"The ARIA label for the Enter key button that makes the selection"}),navigateText:(0,c.I)({id:"theme.SearchModal.footer.navigateText",message:"to navigate",description:"The explanatory text of the action for the Arrow up and Arrow down key"}),navigateUpKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateUpKeyAriaLabel",message:"Arrow up",description:"The ARIA label for the Arrow up key button that makes the navigation"}),navigateDownKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.navigateDownKeyAriaLabel",message:"Arrow down",description:"The ARIA label for the Arrow down key button that makes the navigation"}),closeText:(0,c.I)({id:"theme.SearchModal.footer.closeText",message:"to close",description:"The explanatory text of the action for Escape key"}),closeKeyAriaLabel:(0,c.I)({id:"theme.SearchModal.footer.closeKeyAriaLabel",message:"Escape key",description:"The ARIA label for the Escape key button that close the modal"}),searchByText:(0,c.I)({id:"theme.SearchModal.footer.searchByText",message:"Search by",description:"The text explain that the search is making by Algolia"})},noResultsScreen:{noResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.noResultsText",message:"No results for",description:"The text explains that there are no results for the following search"}),suggestedQueryText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.suggestedQueryText",message:"Try searching for",description:"The text for the suggested query when no results are found for the following search"}),reportMissingResultsText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsText",message:"Believe this query should return results?",description:"The text for the question where the user thinks there are missing results"}),reportMissingResultsLinkText:(0,c.I)({id:"theme.SearchModal.noResultsScreen.reportMissingResultsLinkText",message:"Let us know.",description:"The text for the link to report missing results"})}},placeholder:(0,c.I)({id:"theme.SearchModal.placeholder",message:"Search docs",description:"The placeholder of the input of the DocSearch pop-up modal"})};let Le=null;function Re(e){let{hit:t,children:n}=e;return(0,l.jsx)(Y.Z,{to:t.url,children:n})}function Ne(e){let{state:t,onClose:n}=e;const o=(0,Ce.M)();return(0,l.jsx)(Y.Z,{to:o(t.query),onClick:n,children:(0,l.jsx)(c.Z,{id:"theme.SearchBar.seeAll",values:{count:t.context.nbHits},children:"See all {count} results"})})}function Oe(e){var t,a;let{contextualSearch:r,externalUrlRegex:i,...c}=e;const{siteMetadata:d}=(0,ce.Z)(),u=(0,Te.l)(),p=function(){const{locale:e,tags:t}=(0,je._q)();return["language:"+e,t.map((e=>"docusaurus_tag:"+e))]}(),f=null!=(t=null==(a=c.searchParameters)?void 0:a.facetFilters)?t:[],m=r?function(e,t){const n=e=>"string"==typeof e?[e]:e;return[...n(e),...n(t)]}(p,f):f,g={...c.searchParameters,facetFilters:m},h=(0,s.k6)(),b=(0,o.useRef)(null),v=(0,o.useRef)(null),[x,y]=(0,o.useState)(!1),[_,w]=(0,o.useState)(void 0),k=(0,o.useCallback)((()=>Le?Promise.resolve():Promise.all([n.e(61426).then(n.bind(n,61426)),Promise.all([n.e(40532),n.e(46945)]).then(n.bind(n,46945)),Promise.all([n.e(40532),n.e(18894)]).then(n.bind(n,18894))]).then((e=>{let[{DocSearchModal:t}]=e;Le=t}))),[]),S=(0,o.useCallback)((()=>{k().then((()=>{b.current=document.createElement("div"),document.body.insertBefore(b.current,document.body.firstChild),y(!0)}))}),[k,y]),E=(0,o.useCallback)((()=>{var e;y(!1),null==(e=b.current)||e.remove()}),[y]),C=(0,o.useCallback)((e=>{k().then((()=>{y(!0),w(e.key)}))}),[k,y,w]),T=(0,o.useRef)({navigate(e){let{itemUrl:t}=e;(0,ee.F)(i,t)?window.location.href=t:h.push(t)}}).current,j=(0,o.useRef)((e=>c.transformItems?c.transformItems(e):e.map((e=>({...e,url:u(e.url)}))))).current,P=(0,o.useMemo)((()=>e=>(0,l.jsx)(Ne,{...e,onClose:E})),[E]),A=(0,o.useCallback)((e=>(e.addAlgoliaAgent("docusaurus",d.docusaurusVersion),e)),[d.docusaurusVersion]);return function(e){var t=e.isOpen,n=e.onOpen,a=e.onClose,r=e.onInput,i=e.searchButtonRef;o.useEffect((function(){function e(e){var o;(27===e.keyCode&&t||"k"===(null===(o=e.key)||void 0===o?void 0:o.toLowerCase())&&(e.metaKey||e.ctrlKey)||!function(e){var t=e.target,n=t.tagName;return t.isContentEditable||"INPUT"===n||"SELECT"===n||"TEXTAREA"===n}(e)&&"/"===e.key&&!t)&&(e.preventDefault(),t?a():document.body.classList.contains("DocSearch--active")||document.body.classList.contains("DocSearch--active")||n()),i&&i.current===document.activeElement&&r&&/[a-zA-Z0-9]/.test(String.fromCharCode(e.keyCode))&&r(e)}return window.addEventListener("keydown",e),function(){window.removeEventListener("keydown",e)}}),[t,n,a,r,i])}({isOpen:x,onOpen:S,onClose:E,onInput:C,searchButtonRef:v}),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(Ee.Z,{children:(0,l.jsx)("link",{rel:"preconnect",href:"https://"+c.appId+"-dsn.algolia.net",crossOrigin:"anonymous"})}),(0,l.jsx)(Se,{onTouchStart:k,onFocus:k,onMouseOver:k,onClick:S,ref:v,translations:Ae.button}),x&&Le&&b.current&&(0,Pe.createPortal)((0,l.jsx)(Le,{onClose:E,initialScrollY:window.scrollY,initialQuery:_,navigator:T,transformItems:j,hitComponent:Re,transformSearchClient:A,...c.searchPagePath&&{resultsFooterComponent:P},...c,searchParameters:g,placeholder:Ae.placeholder,translations:Ae.modal}),b.current)]})}function Ie(){const{siteConfig:e}=(0,ce.Z)();return(0,l.jsx)(Oe,{...e.themeConfig.algolia})}const De={navbarSearchContainer:"navbarSearchContainer_Bca1"};function Me(e){let{children:t,className:n}=e;return(0,l.jsx)("div",{className:(0,a.Z)(n,De.navbarSearchContainer),children:t})}var Fe=n(94104),ze=n(53438);var Be=n(60373);const Ue=e=>e.docs.find((t=>t.id===e.mainDocId));const $e={default:re,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:o,queryString:a="",...r}=e;const{i18n:{currentLocale:i,locales:d,localeConfigs:u}}=(0,ce.Z)(),p=(0,fe.l)(),{search:f,hash:m}=(0,s.TH)(),g=[...n,...d.map((e=>{const n=""+("pathname://"+p.createUrl({locale:e,fullyQualified:!1}))+f+m+a;return{label:u[e].label,lang:u[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...o],h=t?(0,c.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):u[i].label;return(0,l.jsx)(pe,{...r,mobile:t,label:(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(me,{className:ge}),h]}),items:g})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,l.jsx)(Me,{className:n,children:(0,l.jsx)(Ie,{})})},dropdown:pe,html:function(e){let{value:t,className:n,mobile:o=!1,isDropdownItem:r=!1}=e;const i=r?"li":"div";return(0,l.jsx)(i,{className:(0,a.Z)({navbar__item:!o&&!r,"menu__list-item":o},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:o,...a}=e;const{activeDoc:r}=(0,Fe.Iw)(o),i=(0,ze.vY)(t,o),s=(null==r?void 0:r.path)===(null==i?void 0:i.path);return null===i||i.unlisted&&!s?null:(0,l.jsx)(re,{exact:!0,...a,isActive:()=>s||!(null==r||!r.sidebar)&&r.sidebar===i.sidebar,label:null!=n?n:i.id,to:i.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:o,...a}=e;const{activeDoc:r}=(0,Fe.Iw)(o),i=(0,ze.oz)(t,o).link;if(!i)throw new Error('DocSidebarNavbarItem: Sidebar with ID "'+t+"\" doesn't have anything to be linked to.");return(0,l.jsx)(re,{exact:!0,...a,isActive:()=>(null==r?void 0:r.sidebar)===t,label:null!=n?n:i.label,to:i.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:o,...a}=e;const r=(0,ze.lO)(o)[0],i=null!=t?t:r.label,s=null!=n?n:(e=>e.docs.find((t=>t.id===e.mainDocId)))(r).path;return(0,l.jsx)(re,{...a,label:i,to:s})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:o,dropdownItemsBefore:a,dropdownItemsAfter:r,...i}=e;const{search:d,hash:u}=(0,s.TH)(),p=(0,Fe.Iw)(n),f=(0,Fe.gB)(n),{savePreferredVersionName:m}=(0,Be.J)(n),g=[...a,...f.map((e=>{var t;const n=null!=(t=p.alternateDocVersions[e.name])?t:Ue(e);return{label:e.label,to:""+n.path+d+u,isActive:()=>e===p.activeVersion,onClick:()=>m(e.name)}})),...r],h=(0,ze.lO)(n)[0],b=t&&g.length>1?(0,c.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):h.label,v=t&&g.length>1?void 0:Ue(h).path;return g.length<=1?(0,l.jsx)(re,{...i,mobile:t,label:b,to:v,isActive:o?()=>!1:void 0}):(0,l.jsx)(pe,{...i,mobile:t,label:b,to:v,items:g,isActive:o?()=>!1:void 0})}};function qe(e){let{type:t,...n}=e;const o=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),a=$e[o];if(!a)throw new Error('No NavbarItem component found for type "'+t+'".');return(0,l.jsx)(a,{...n})}function He(){const e=(0,P.e)(),t=(0,y.L)().navbar.items;return(0,l.jsx)("ul",{className:"menu__list",children:t.map(((t,n)=>(0,o.createElement)(qe,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})}function Ze(e){return(0,l.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,l.jsx)(c.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function Ge(){const e=0===(0,y.L)().navbar.items.length,t=D();return(0,l.jsxs)(l.Fragment,{children:[!e&&(0,l.jsx)(Ze,{onClick:()=>t.hide()}),t.content]})}function Ve(){const e=(0,P.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,o.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,l.jsx)(M,{header:(0,l.jsx)(Q,{}),primaryMenu:(0,l.jsx)(He,{}),secondaryMenu:(0,l.jsx)(Ge,{})}):null}const We={navbarHideable:"navbarHideable_m1mJ",navbarHidden:"navbarHidden_jGov"};function Ke(e){return(0,l.jsx)("div",{role:"presentation",...e,className:(0,a.Z)("navbar-sidebar__backdrop",e.className)})}function Qe(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:r}}=(0,y.L)(),i=(0,P.e)(),{navbarRef:s,isNavbarVisible:u}=function(e){const[t,n]=(0,o.useState)(e),a=(0,o.useRef)(!1),r=(0,o.useRef)(0),i=(0,o.useCallback)((e=>{null!==e&&(r.current=e.getBoundingClientRect().height)}),[]);return(0,A.RF)(((t,o)=>{let{scrollY:i}=t;if(!e)return;if(i=s?n(!1):i+d{if(!e)return;const o=t.location.hash;if(o?document.getElementById(o.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:i,isNavbarVisible:t}}(n);return(0,l.jsxs)("nav",{ref:s,"aria-label":(0,c.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[We.navbarHideable,!u&&We.navbarHidden],{"navbar--dark":"dark"===r,"navbar--primary":"primary"===r,"navbar-sidebar--show":i.shown}),children:[t,(0,l.jsx)(Ke,{onClick:i.toggle}),(0,l.jsx)(Ve,{})]})}var Ye=n(18780);const Xe={errorBoundaryError:"errorBoundaryError_a6uf",errorBoundaryFallback:"errorBoundaryFallback_VBag"};function Je(e){return(0,l.jsx)("button",{type:"button",...e,children:(0,l.jsx)(c.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again rendering when the React error boundary captures an error",children:"Try again"})})}function et(e){let{error:t}=e;const n=(0,Ye.getErrorCausalChain)(t).map((e=>e.message)).join("\n\nCause:\n");return(0,l.jsx)("p",{className:Xe.errorBoundaryError,children:n})}class tt extends o.Component{componentDidCatch(e,t){throw this.props.onError(e,t)}render(){return this.props.children}}const nt="right";function ot(e){let{width:t=30,height:n=30,className:o,...a}=e;return(0,l.jsx)("svg",{className:o,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...a,children:(0,l.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function at(){const{toggle:e,shown:t}=(0,P.e)();return(0,l.jsx)("button",{onClick:e,"aria-label":(0,c.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,l.jsx)(ot,{})})}const rt={colorModeToggle:"colorModeToggle_DEke"};function it(e){let{items:t}=e;return(0,l.jsx)(l.Fragment,{children:t.map(((e,t)=>(0,l.jsx)(tt,{onError:t=>new Error("A theme navbar item failed to render.\nPlease double-check the following navbar item (themeConfig.navbar.items) of your Docusaurus config:\n"+JSON.stringify(e,null,2),{cause:t}),children:(0,l.jsx)(qe,{...e})},t)))})}function st(e){let{left:t,right:n}=e;return(0,l.jsxs)("div",{className:"navbar__inner",children:[(0,l.jsx)("div",{className:"navbar__items",children:t}),(0,l.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function ct(){const e=(0,P.e)(),t=(0,y.L)().navbar.items,[n,o]=function(e){function t(e){var t;return"left"===(null!=(t=e.position)?t:nt)}return[e.filter(t),e.filter((e=>!t(e)))]}(t),a=t.find((e=>"search"===e.type));return(0,l.jsx)(st,{left:(0,l.jsxs)(l.Fragment,{children:[!e.disabled&&(0,l.jsx)(at,{}),(0,l.jsx)(W,{}),(0,l.jsx)(it,{items:n})]}),right:(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(it,{items:o}),(0,l.jsx)(G,{className:rt.colorModeToggle}),!a&&(0,l.jsx)(Me,{children:(0,l.jsx)(Ie,{})})]})})}function dt(){return(0,l.jsx)(Qe,{children:(0,l.jsx)(ct,{})})}function lt(e){let{item:t}=e;const{to:n,href:o,label:a,prependBaseUrlToHref:r,...i}=t,s=(0,X.Z)(n),c=(0,X.Z)(o,{forcePrependBaseUrl:!0});return(0,l.jsxs)(Y.Z,{className:"footer__link-item",...o?{href:r?c:o}:{to:s},...i,children:[a,o&&!(0,J.Z)(o)&&(0,l.jsx)(te.Z,{})]})}function ut(e){var t;let{item:n}=e;return n.html?(0,l.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:n.html}}):(0,l.jsx)("li",{className:"footer__item",children:(0,l.jsx)(lt,{item:n})},null!=(t=n.href)?t:n.to)}function pt(e){let{column:t}=e;return(0,l.jsxs)("div",{className:"col footer__col",children:[(0,l.jsx)("div",{className:"footer__title",children:t.title}),(0,l.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,l.jsx)(ut,{item:e},t)))})]})}function ft(e){let{columns:t}=e;return(0,l.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,l.jsx)(pt,{column:e},t)))})}function mt(){return(0,l.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function gt(e){let{item:t}=e;return t.html?(0,l.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,l.jsx)(lt,{item:t})}function ht(e){let{links:t}=e;return(0,l.jsx)("div",{className:"footer__links text--center",children:(0,l.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,l.jsxs)(o.Fragment,{children:[(0,l.jsx)(gt,{item:e}),t.length!==n+1&&(0,l.jsx)(mt,{})]},n)))})})}function bt(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,l.jsx)(ft,{columns:t}):(0,l.jsx)(ht,{links:t})}var vt=n(19965);const xt={footerLogoLink:"footerLogoLink_BH7S"};function yt(e){var t;let{logo:n}=e;const{withBaseUrl:o}=(0,X.C)(),r={light:o(n.src),dark:o(null!=(t=n.srcDark)?t:n.src)};return(0,l.jsx)(vt.Z,{className:(0,a.Z)("footer__logo",n.className),alt:n.alt,sources:r,width:n.width,height:n.height,style:n.style})}function _t(e){let{logo:t}=e;return t.href?(0,l.jsx)(Y.Z,{href:t.href,className:xt.footerLogoLink,target:t.target,children:(0,l.jsx)(yt,{logo:t})}):(0,l.jsx)(yt,{logo:t})}function wt(e){let{copyright:t}=e;return(0,l.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function kt(e){let{style:t,links:n,logo:o,copyright:r}=e;return(0,l.jsx)("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t}),children:(0,l.jsxs)("div",{className:"container container-fluid",children:[n,(o||r)&&(0,l.jsxs)("div",{className:"footer__bottom text--center",children:[o&&(0,l.jsx)("div",{className:"margin-bottom--sm",children:o}),r]})]})})}function St(){const{footer:e}=(0,y.L)();if(!e)return null;const{copyright:t,links:n,logo:o,style:a}=e;return(0,l.jsx)(kt,{style:a,links:n&&n.length>0&&(0,l.jsx)(bt,{links:n}),logo:o&&(0,l.jsx)(_t,{logo:o}),copyright:t&&(0,l.jsx)(wt,{copyright:t})})}const Et=o.memo(St),Ct=(0,L.Qc)([F.S,_.pl,A.OC,Be.L5,i.VC,function(e){let{children:t}=e;return(0,l.jsx)(R.n2,{children:(0,l.jsx)(P.M,{children:(0,l.jsx)(O,{children:t})})})}]);function Tt(e){let{children:t}=e;return(0,l.jsx)(Ct,{children:t})}var jt=n(92503);function Pt(e){let{error:t,tryAgain:n}=e;return(0,l.jsx)("main",{className:"container margin-vert--xl",children:(0,l.jsx)("div",{className:"row",children:(0,l.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,l.jsx)(jt.Z,{as:"h1",className:"hero__title",children:(0,l.jsx)(c.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,l.jsx)("div",{className:"margin-vert--lg",children:(0,l.jsx)(Je,{onClick:n,className:"button button--primary shadow--lw"})}),(0,l.jsx)("hr",{}),(0,l.jsx)("div",{className:"margin-vert--md",children:(0,l.jsx)(et,{error:t})})]})})})}const At={mainWrapper:"mainWrapper_z2l0"};function Lt(e){const{children:t,noFooter:n,wrapperClassName:o,title:s,description:c}=e;return(0,b.t)(),(0,l.jsxs)(Tt,{children:[(0,l.jsx)(i.d,{title:s,description:c}),(0,l.jsx)(x,{}),(0,l.jsx)(j,{}),(0,l.jsx)(dt,{}),(0,l.jsx)("div",{id:u,className:(0,a.Z)(h.k.wrapper.main,At.mainWrapper,o),children:(0,l.jsx)(r.Z,{fallback:e=>(0,l.jsx)(Pt,{...e}),children:t})}),!n&&(0,l.jsx)(Et,{})]})}},21327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});n(67294);var o=n(39960),a=n(44996),r=n(52263),i=n(86668),s=n(19965),c=n(85893);function d(e){let{logo:t,alt:n,imageClassName:o}=e;const r={light:(0,a.Z)(t.src),dark:(0,a.Z)(t.srcDark||t.src)},i=(0,c.jsx)(s.Z,{className:t.className,sources:r,height:t.height,width:t.width,alt:n,style:t.style});return o?(0,c.jsx)("div",{className:o,children:i}):i}function l(e){var t;const{siteConfig:{title:n}}=(0,r.Z)(),{navbar:{title:s,logo:l}}=(0,i.L)(),{imageClassName:u,titleClassName:p,...f}=e,m=(0,a.Z)((null==l?void 0:l.href)||"/"),g=s?"":n,h=null!=(t=null==l?void 0:l.alt)?t:g;return(0,c.jsxs)(o.Z,{to:m,...f,...(null==l?void 0:l.target)&&{target:l.target},children:[l&&(0,c.jsx)(d,{logo:l,alt:h,imageClassName:u}),null!=s&&(0,c.jsx)("b",{className:p,children:s})]})}},90197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});n(67294);var o=n(35742),a=n(85893);function r(e){let{locale:t,version:n,tag:r}=e;const i=t;return(0,a.jsxs)(o.Z,{children:[t&&(0,a.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,a.jsx)("meta",{name:"docusaurus_version",content:n}),r&&(0,a.jsx)("meta",{name:"docusaurus_tag",content:r}),i&&(0,a.jsx)("meta",{name:"docsearch:language",content:i}),n&&(0,a.jsx)("meta",{name:"docsearch:version",content:n}),r&&(0,a.jsx)("meta",{name:"docsearch:docusaurus_tag",content:r})]})}},19965:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});var o=n(67294),a=n(86010),r=n(72389),i=n(92949);const s={themedComponent:"themedComponent_mlkZ","themedComponent--light":"themedComponent--light_NVdE","themedComponent--dark":"themedComponent--dark_xIcU"};var c=n(85893);function d(e){let{className:t,children:n}=e;const d=(0,r.Z)(),{colorMode:l}=(0,i.I)();return(0,c.jsx)(c.Fragment,{children:(d?"dark"===l?["dark"]:["light"]:["light","dark"]).map((e=>{const r=n({theme:e,className:(0,a.Z)(t,s.themedComponent,s["themedComponent--"+e])});return(0,c.jsx)(o.Fragment,{children:r},e)}))})}function l(e){const{sources:t,className:n,alt:o,...a}=e;return(0,c.jsx)(d,{className:n,children:e=>{let{theme:n,className:r}=e;return(0,c.jsx)("img",{src:t[n],alt:o,className:r,...a})}})}},86043:(e,t,n)=>{"use strict";n.d(t,{u:()=>d,z:()=>b});var o=n(67294),a=n(10412),r=n(20469),i=n(91442),s=n(85893);const c="ease-in-out";function d(e){let{initialState:t}=e;const[n,a]=(0,o.useState)(null!=t&&t),r=(0,o.useCallback)((()=>{a((e=>!e))}),[]);return{collapsed:n,setCollapsed:a,toggleCollapsed:r}}const l={display:"none",overflow:"hidden",height:"0px"},u={display:"block",overflow:"visible",height:"auto"};function p(e,t){const n=t?l:u;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function f(e){let{collapsibleRef:t,collapsed:n,animation:a}=e;const r=(0,o.useRef)(!1);(0,o.useEffect)((()=>{const e=t.current;function o(){var t,n;const o=e.scrollHeight,r=null!=(t=null==a?void 0:a.duration)?t:function(e){if((0,i.n)())return 1;const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(o);return{transition:"height "+r+"ms "+(null!=(n=null==a?void 0:a.easing)?n:c),height:o+"px"}}function s(){const t=o();e.style.transition=t.transition,e.style.height=t.height}if(!r.current)return p(e,n),void(r.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=l.height,e.style.overflow=l.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,a])}function m(e){if(!a.Z.canUseDOM)return e?l:u}function g(e){let{as:t="div",collapsed:n,children:a,animation:r,onCollapseTransitionEnd:i,className:c,disableSSRStyle:d}=e;const l=(0,o.useRef)(null);return f({collapsibleRef:l,collapsed:n,animation:r}),(0,s.jsx)(t,{ref:l,style:d?void 0:m(n),onTransitionEnd:e=>{"height"===e.propertyName&&(p(l.current,n),null==i||i(n))},className:c,children:a})}function h(e){let{collapsed:t,...n}=e;const[a,i]=(0,o.useState)(!t),[c,d]=(0,o.useState)(t);return(0,r.Z)((()=>{t||i(!0)}),[t]),(0,r.Z)((()=>{a&&d(t)}),[a,t]),a?(0,s.jsx)(g,{...n,collapsed:c}):null}function b(e){let{lazy:t,...n}=e;const o=t?h:g;return(0,s.jsx)(o,{...n})}},59689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>g,pl:()=>m});var o=n(67294),a=n(72389),r=n(50012),i=n(902),s=n(86668),c=n(85893);const d=(0,r.WA)("docusaurus.announcement.dismiss"),l=(0,r.WA)("docusaurus.announcement.id"),u=()=>"true"===d.get(),p=e=>d.set(String(e)),f=o.createContext(null);function m(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,s.L)(),t=(0,a.Z)(),[n,r]=(0,o.useState)((()=>!!t&&u()));(0,o.useEffect)((()=>{r(u())}),[]);const i=(0,o.useCallback)((()=>{p(!0),r(!0)}),[]);return(0,o.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=l.get();"annoucement-bar"===n&&(n="announcement-bar");const o=t!==n;l.set(t),o&&p(!1),!o&&u()||r(!1)}),[e]),(0,o.useMemo)((()=>({isActive:!!e&&!n,close:i})),[e,n,i])}();return(0,c.jsx)(f.Provider,{value:n,children:t})}function g(){const e=(0,o.useContext)(f);if(!e)throw new i.i6("AnnouncementBarProvider");return e}},92949:(e,t,n)=>{"use strict";n.d(t,{I:()=>b,S:()=>h});var o=n(67294),a=n(10412),r=n(902),i=n(50012),s=n(86668),c=n(85893);const d=o.createContext(void 0),l="theme",u=(0,i.WA)(l),p={light:"light",dark:"dark"},f=e=>e===p.dark?p.dark:p.light,m=e=>a.Z.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e),g=e=>{u.set(f(e))};function h(e){let{children:t}=e;const n=function(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,s.L)(),[a,r]=(0,o.useState)(m(e));(0,o.useEffect)((()=>{t&&u.del()}),[t]);const i=(0,o.useCallback)((function(t,o){void 0===o&&(o={});const{persist:a=!0}=o;t?(r(t),a&&g(t)):(r(n?window.matchMedia("(prefers-color-scheme: dark)").matches?p.dark:p.light:e),u.del())}),[n,e]);(0,o.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(a))}),[a]),(0,o.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==l)return;const t=u.get();null!==t&&i(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,i]);const c=(0,o.useRef)(!1);return(0,o.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),o=()=>{window.matchMedia("print").matches||c.current?c.current=window.matchMedia("print").matches:i(null)};return e.addListener(o),()=>e.removeListener(o)}),[i,t,n]),(0,o.useMemo)((()=>({colorMode:a,setColorMode:i,get isDarkTheme(){return a===p.dark},setLightTheme(){i(p.light)},setDarkTheme(){i(p.dark)}})),[a,i])}();return(0,c.jsx)(d.Provider,{value:n,children:t})}function b(){const e=(0,o.useContext)(d);if(null==e)throw new r.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},60373:(e,t,n)=>{"use strict";n.d(t,{J:()=>x,L5:()=>b,Oh:()=>y});var o=n(67294),a=n(94104),r=n(29935),i=n(86668),s=n(53438),c=n(902),d=n(50012),l=n(85893);const u=e=>"docs-preferred-version-"+e,p={save:(e,t,n)=>{(0,d.WA)(u(e),{persistence:t}).set(n)},read:(e,t)=>(0,d.WA)(u(e),{persistence:t}).get(),clear:(e,t)=>{(0,d.WA)(u(e),{persistence:t}).del()}},f=e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}])));const m=o.createContext(null);function g(){const e=(0,a._r)(),t=(0,i.L)().docs.versionPersistence,n=(0,o.useMemo)((()=>Object.keys(e)),[e]),[r,s]=(0,o.useState)((()=>f(n)));(0,o.useEffect)((()=>{s(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:o}=e;function a(e){const t=p.read(e,n);return o[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(p.clear(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[r,(0,o.useMemo)((()=>({savePreferredVersion:function(e,n){p.save(e,t,n),s((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function h(e){let{children:t}=e;const n=g();return(0,l.jsx)(m.Provider,{value:n,children:t})}function b(e){let{children:t}=e;return s.cE?(0,l.jsx)(h,{children:t}):(0,l.jsx)(l.Fragment,{children:t})}function v(){const e=(0,o.useContext)(m);if(!e)throw new c.i6("DocsPreferredVersionContextProvider");return e}function x(e){var t;void 0===e&&(e=r.m);const n=(0,a.zh)(e),[i,s]=v(),{preferredVersionName:c}=i[e];return{preferredVersion:null!=(t=n.versions.find((e=>e.name===c)))?t:null,savePreferredVersionName:(0,o.useCallback)((t=>{s.savePreferredVersion(e,t)}),[s,e])}}function y(){const e=(0,a._r)(),[t]=v();function n(n){var o;const a=e[n],{preferredVersionName:r}=t[n];return null!=(o=a.versions.find((e=>e.name===r)))?o:null}const o=Object.keys(e);return Object.fromEntries(o.map((e=>[e,n(e)])))}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>d,b:()=>c});var o=n(67294),a=n(902),r=n(85893);const i=Symbol("EmptyContext"),s=o.createContext(i);function c(e){let{children:t,name:n,items:a}=e;const i=(0,o.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return(0,r.jsx)(s.Provider,{value:i,children:t})}function d(){const e=(0,o.useContext)(s);if(e===i)throw new a.i6("DocsSidebarProvider");return e}},74477:(e,t,n)=>{"use strict";n.d(t,{E:()=>c,q:()=>s});var o=n(67294),a=n(902),r=n(85893);const i=o.createContext(null);function s(e){let{children:t,version:n}=e;return(0,r.jsx)(i.Provider,{value:n,children:t})}function c(){const e=(0,o.useContext)(i);if(null===e)throw new a.i6("DocsVersionProvider");return e}},93163:(e,t,n)=>{"use strict";n.d(t,{M:()=>p,e:()=>f});var o=n(67294),a=n(13102),r=n(87524),i=n(91980),s=n(86668),c=n(902),d=n(85893);const l=o.createContext(void 0);function u(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,s.L)().navbar;return 0===t.length&&!e.component}(),t=(0,r.i)(),n=!e&&"mobile"===t,[c,d]=(0,o.useState)(!1);(0,i.Rb)((()=>{if(c)return d(!1),!1}));const l=(0,o.useCallback)((()=>{d((e=>!e))}),[]);return(0,o.useEffect)((()=>{"desktop"===t&&d(!1)}),[t]),(0,o.useMemo)((()=>({disabled:e,shouldRender:n,toggle:l,shown:c})),[e,n,l,c])}function p(e){let{children:t}=e;const n=u();return(0,d.jsx)(l.Provider,{value:n,children:t})}function f(){const e=o.useContext(l);if(void 0===e)throw new c.i6("NavbarMobileSidebarProvider");return e}},13102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>c,Zo:()=>d,n2:()=>s});var o=n(67294),a=n(902),r=n(85893);const i=o.createContext(null);function s(e){let{children:t}=e;const n=(0,o.useState)({component:null,props:null});return(0,r.jsx)(i.Provider,{value:n,children:t})}function c(){const e=(0,o.useContext)(i);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function d(e){let{component:t,props:n}=e;const r=(0,o.useContext)(i);if(!r)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,s]=r,c=(0,a.Ql)(n);return(0,o.useEffect)((()=>{s({component:t,props:c})}),[s,t,c]),(0,o.useEffect)((()=>()=>s({component:null,props:null})),[s]),null}},19727:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>r});var o=n(67294);const a="navigation-with-keyboard";function r(){(0,o.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},66177:(e,t,n)=>{"use strict";n.d(t,{K:()=>s,M:()=>c});var o=n(67294),a=n(52263),r=n(91980);const i="q";function s(){return(0,r.Nc)(i)}function c(){const{siteConfig:{baseUrl:e,themeConfig:t}}=(0,a.Z)(),{algolia:{searchPagePath:n}}=t;return(0,o.useCallback)((t=>""+e+n+"?"+i+"="+encodeURIComponent(t)),[e,n])}},87524:(e,t,n)=>{"use strict";n.d(t,{i:()=>s});var o=n(67294),a=n(10412);const r={desktop:"desktop",mobile:"mobile",ssr:"ssr"},i=996;function s(){const[e,t]=(0,o.useState)((()=>"ssr"));return(0,o.useEffect)((()=>{function e(){t(function(){if(!a.Z.canUseDOM)throw new Error("getWindowSize() should only be called after React hydration");return window.innerWidth>i?r.desktop:r.mobile}())}return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),e}},35281:(e,t,n)=>{"use strict";n.d(t,{k:()=>o});const o={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",unlistedBanner:"theme-unlisted-banner",admonitionType:e=>"theme-admonition-"+e},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>"theme-doc-sidebar-item-category-level-"+e,docSidebarItemLinkLevel:e=>"theme-doc-sidebar-item-link-level-"+e},blog:{}}},91442:(e,t,n)=>{"use strict";function o(){return window.matchMedia("(prefers-reduced-motion: reduce)").matches}n.d(t,{n:()=>o})},53438:(e,t,n)=>{"use strict";n.d(t,{LM:()=>f,SN:()=>S,_F:()=>h,cE:()=>p,f:()=>v,lO:()=>_,oz:()=>w,s1:()=>y,vY:()=>k});var o=n(67294),a=n(16550),r=n(18790),i=n(94104),s=n(60373),c=n(74477),d=n(1116),l=n(67392),u=n(48596);const p=!!i._r;function f(e){return"link"!==e.type||e.unlisted?"category"===e.type?function(e){if(e.href&&!e.linkUnlisted)return e.href;for(const t of e.items){const e=f(t);if(e)return e}}(e):void 0:e.href}const m=(e,t)=>void 0!==e&&(0,u.Mg)(e,t),g=(e,t)=>e.some((e=>h(e,t)));function h(e,t){return"link"===e.type?m(e.href,t):"category"===e.type&&(m(e.href,t)||g(e.items,t))}function b(e,t){switch(e.type){case"category":return h(e,t)||e.items.some((e=>b(e,t)));case"link":return!e.unlisted||h(e,t);default:return!1}}function v(e,t){return(0,o.useMemo)((()=>e.filter((e=>b(e,t)))),[e,t])}function x(e){let{sidebarItems:t,pathname:n,onlyCategories:o=!1}=e;const a=[];return function e(t){for(const r of t)if("category"===r.type&&((0,u.Mg)(r.href,n)||e(r.items))||"link"===r.type&&(0,u.Mg)(r.href,n)){return o&&"category"!==r.type||a.unshift(r),!0}return!1}(t),a}function y(){var e;const t=(0,d.V)(),{pathname:n}=(0,a.TH)();return!1!==(null==(e=(0,i.gA)())?void 0:e.pluginData.breadcrumbs)&&t?x({sidebarItems:t.items,pathname:n}):null}function _(e){const{activeVersion:t}=(0,i.Iw)(e),{preferredVersion:n}=(0,s.J)(e),a=(0,i.yW)(e);return(0,o.useMemo)((()=>(0,l.j)([t,n,a].filter(Boolean))),[t,n,a])}function w(e,t){const n=_(t);return(0,o.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),o=t.find((t=>t[0]===e));if(!o)throw new Error("Can't find any sidebar with id \""+e+'" in version'+(n.length>1?"s":"")+" "+n.map((e=>e.name)).join(", ")+'".\nAvailable sidebar ids are:\n- '+t.map((e=>e[0])).join("\n- "));return o[1]}),[e,n])}function k(e,t){const n=_(t);return(0,o.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),o=t.find((t=>t.id===e));if(!o){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error("Couldn't find any doc with id \""+e+'" in version'+(n.length>1?"s":"")+' "'+n.map((e=>e.name)).join(", ")+'".\nAvailable doc ids are:\n- '+(0,l.j)(t.map((e=>e.id))).join("\n- "))}return o}),[e,n])}function S(e){let{route:t}=e;const n=(0,a.TH)(),o=(0,c.E)(),i=t.routes,s=i.find((e=>(0,a.LX)(n.pathname,e)));if(!s)return null;const d=s.sidebar,l=d?o.docsSidebars[d]:void 0;return{docElement:(0,r.H)(i),sidebarName:d,sidebarItems:l}}},82128:(e,t,n)=>{"use strict";n.d(t,{p:()=>a});var o=n(52263);function a(e){const{siteConfig:t}=(0,o.Z)(),{title:n,titleDelimiter:a}=t;return null!=e&&e.trim().length?e.trim()+" "+a+" "+n:n}},91980:(e,t,n)=>{"use strict";n.d(t,{Nc:()=>c,Rb:()=>i,_X:()=>s});var o=n(67294),a=n(16550),r=n(902);function i(e){!function(e){const t=(0,a.k6)(),n=(0,r.zX)(e);(0,o.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}function s(e){return function(e){const t=(0,a.k6)();return(0,o.useSyncExternalStore)(t.listen,(()=>e(t)),(()=>e(t)))}((t=>null===e?null:new URLSearchParams(t.location.search).get(e)))}function c(e){var t;const n=null!=(t=s(e))?t:"",r=function(){const e=(0,a.k6)();return(0,o.useCallback)(((t,n,o)=>{const a=new URLSearchParams(e.location.search);n?a.set(t,n):a.delete(t),(null!=o&&o.push?e.push:e.replace)({search:a.toString()})}),[e])}();return[n,(0,o.useCallback)(((t,n)=>{r(e,t,n)}),[r,e])]}},67392:(e,t,n)=>{"use strict";function o(e,t){return void 0===t&&(t=(e,t)=>e===t),e.filter(((n,o)=>e.findIndex((e=>t(e,n)))!==o))}function a(e){return Array.from(new Set(e))}n.d(t,{j:()=>a,l:()=>o})},10833:(e,t,n)=>{"use strict";n.d(t,{FG:()=>f,d:()=>u,VC:()=>m});var o=n(67294),a=n(86010),r=n(35742),i=n(30226);function s(){const e=o.useContext(i._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var c=n(44996),d=n(82128),l=n(85893);function u(e){let{title:t,description:n,keywords:o,image:a,children:i}=e;const s=(0,d.p)(t),{withBaseUrl:u}=(0,c.C)(),p=a?u(a,{absolute:!0}):void 0;return(0,l.jsxs)(r.Z,{children:[t&&(0,l.jsx)("title",{children:s}),t&&(0,l.jsx)("meta",{property:"og:title",content:s}),n&&(0,l.jsx)("meta",{name:"description",content:n}),n&&(0,l.jsx)("meta",{property:"og:description",content:n}),o&&(0,l.jsx)("meta",{name:"keywords",content:Array.isArray(o)?o.join(","):o}),p&&(0,l.jsx)("meta",{property:"og:image",content:p}),p&&(0,l.jsx)("meta",{name:"twitter:image",content:p}),i]})}const p=o.createContext(void 0);function f(e){let{className:t,children:n}=e;const i=o.useContext(p),s=(0,a.Z)(i,t);return(0,l.jsxs)(p.Provider,{value:s,children:[(0,l.jsx)(r.Z,{children:(0,l.jsx)("html",{className:s})}),n]})}function m(e){let{children:t}=e;const n=s(),o="plugin-"+n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"");const r="plugin-id-"+n.plugin.id;return(0,l.jsx)(f,{className:(0,a.Z)(o,r),children:t})}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>s,Qc:()=>l,Ql:()=>d,i6:()=>c,zX:()=>i});var o=n(67294),a=n(20469),r=n(85893);function i(e){const t=(0,o.useRef)(e);return(0,a.Z)((()=>{t.current=e}),[e]),(0,o.useCallback)((function(){return t.current(...arguments)}),[])}function s(e){const t=(0,o.useRef)();return(0,a.Z)((()=>{t.current=e})),t.current}class c extends Error{constructor(e,t){var n,o;super(),this.name="ReactContextError",this.message="Hook "+(null!=(n=null==(o=this.stack)||null==(o=o.split("\n")[1])||null==(o=o.match(/at (?:\w+\.)?(?\w+)/))?void 0:o.groups.name)?n:"")+" is called outside the <"+e+">. "+(null!=t?t:"")}}function d(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,o.useMemo)((()=>e),t.flat())}function l(e){return t=>{let{children:n}=t;return(0,r.jsx)(r.Fragment,{children:e.reduceRight(((e,t)=>(0,r.jsx)(t,{children:e})),n)})}}},98022:(e,t,n)=>{"use strict";function o(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}n.d(t,{F:()=>o})},48596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>i,Ns:()=>s});var o=n(67294),a=n(723),r=n(52263);function i(e,t){const n=e=>{var t;return null==(t=!e||e.endsWith("/")?e:e+"/")?void 0:t.toLowerCase()};return n(e)===n(t)}function s(){const{baseUrl:e}=(0,r.Z)().siteConfig;return(0,o.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function o(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(o)||e(t.filter(a).flatMap((e=>{var t;return null!=(t=e.routes)?t:[]})))}(n)}({routes:a.Z,baseUrl:e})),[e])}},12466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>g,OC:()=>l,RF:()=>f,o5:()=>m});var o=n(67294),a=n(10412),r=n(72389),i=n(20469),s=n(902),c=n(85893);const d=o.createContext(void 0);function l(e){let{children:t}=e;const n=function(){const e=(0,o.useRef)(!0);return(0,o.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,c.jsx)(d.Provider,{value:n,children:t})}function u(){const e=(0,o.useContext)(d);if(null==e)throw new s.i6("ScrollControllerProvider");return e}const p=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function f(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,o.useRef)(p()),r=(0,s.zX)(e);(0,o.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=p();r(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[r,n,...t])}function m(){const e=u(),t=function(){const e=(0,o.useRef)({elem:null,top:0}),t=(0,o.useCallback)((t=>{e.current={elem:t,top:t.getBoundingClientRect().top}}),[]),n=(0,o.useCallback)((()=>{const{current:{elem:t,top:n}}=e;if(!t)return{restored:!1};const o=t.getBoundingClientRect().top-n;return o&&window.scrollBy({left:0,top:o}),e.current={elem:null,top:0},{restored:0!==o}}),[]);return(0,o.useMemo)((()=>({save:t,restore:n})),[n,t])}(),n=(0,o.useRef)(void 0),a=(0,o.useCallback)((o=>{t.save(o),e.disableScrollEvents(),n.current=()=>{const{restored:o}=t.restore();if(n.current=void 0,o){const t=()=>{e.enableScrollEvents(),window.removeEventListener("scroll",t)};window.addEventListener("scroll",t)}else e.enableScrollEvents()}}),[e,t]);return(0,i.Z)((()=>{queueMicrotask((()=>null==n.current?void 0:n.current()))})),{blockElementScrollPositionUntilNextRender:a}}function g(){const e=(0,o.useRef)(null),t=(0,r.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function o(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>null==e.current?void 0:e.current()}}},43320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>i,_q:()=>c,os:()=>s});var o=n(94104),a=n(52263),r=n(60373);const i="default";function s(e,t){return"docs-"+e+"-"+t}function c(){const{i18n:e}=(0,a.Z)(),t=(0,o._r)(),n=(0,o.WS)(),c=(0,r.Oh)();const d=[i,...Object.keys(t).map((function(e){var o;const a=(null==n?void 0:n.activePlugin.pluginId)===e?n.activeVersion:void 0,r=c[e],i=t[e].versions.find((e=>e.isLast));return s(e,(null!=(o=null!=a?a:r)?o:i).name)}))];return{locale:e.currentLocale,tags:d}}},50012:(e,t,n)=>{"use strict";n.d(t,{Nk:()=>l,WA:()=>d});var o=n(67294);const a="localStorage";function r(e){let{key:t,oldValue:n,newValue:o,storage:a}=e;if(n===o)return;const r=document.createEvent("StorageEvent");r.initStorageEvent("storage",!1,!1,t,n,o,window.location.href,a),window.dispatchEvent(r)}function i(e){if(void 0===e&&(e=a),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,s||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),s=!0),null}var t}let s=!1;const c={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function d(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error('Illegal storage API usage for storage key "'+e+'".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.')}return{get:t,set:t,del:t,listen:t}}(e);const n=i(null==t?void 0:t.persistence);return null===n?c:{get:()=>{try{return n.getItem(e)}catch(t){return console.error("Docusaurus storage error, can't get key="+e,t),null}},set:t=>{try{const o=n.getItem(e);n.setItem(e,t),r({key:e,oldValue:o,newValue:t,storage:n})}catch(o){console.error("Docusaurus storage error, can't set "+e+"="+t,o)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),r({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error("Docusaurus storage error, can't delete key="+e,t)}},listen:t=>{try{const o=o=>{o.storageArea===n&&o.key===e&&t(o)};return window.addEventListener("storage",o),()=>window.removeEventListener("storage",o)}catch(o){return console.error("Docusaurus storage error, can't listen for changes of key="+e,o),()=>{}}}}}function l(e,t){const n=(0,o.useRef)((()=>null===e?c:d(e,t))).current(),a=(0,o.useCallback)((e=>"undefined"==typeof window?()=>{}:n.listen(e)),[n]);return[(0,o.useSyncExternalStore)(a,(()=>"undefined"==typeof window?null:n.get()),(()=>null)),n]}},94711:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var o=n(52263),a=n(16550),r=n(18780);function i(){const{siteConfig:{baseUrl:e,url:t,trailingSlash:n},i18n:{defaultLocale:i,currentLocale:s}}=(0,o.Z)(),{pathname:c}=(0,a.TH)(),d=(0,r.applyTrailingSlash)(c,{trailingSlash:n,baseUrl:e}),l=s===i?e:e.replace("/"+s+"/","/"),u=d.replace(e,"");return{createUrl:function(e){let{locale:n,fullyQualified:o}=e;return""+(o?t:"")+function(e){return e===i?""+l:""+l+e+"/"}(n)+u}}}},85936:(e,t,n)=>{"use strict";n.d(t,{S:()=>i});var o=n(67294),a=n(16550),r=n(902);function i(e){const t=(0,a.TH)(),n=(0,r.D9)(t),i=(0,r.zX)(e);(0,o.useEffect)((()=>{n&&t!==n&&i({location:t,previousLocation:n})}),[i,t,n])}},86668:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var o=n(52263);function a(){return(0,o.Z)().siteConfig.themeConfig}},6278:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var o=n(52263);function a(){const{siteConfig:{themeConfig:e}}=(0,o.Z)();return e}},239:(e,t,n)=>{"use strict";n.d(t,{l:()=>s});var o=n(67294),a=n(98022),r=n(44996),i=n(6278);function s(){const{withBaseUrl:e}=(0,r.C)(),{algolia:{externalUrlRegex:t,replaceSearchResultPathname:n}}=(0,i.L)();return(0,o.useCallback)((o=>{const r=new URL(o);if((0,a.F)(t,r.href))return o;const i=""+(r.pathname+r.hash);return e(function(e,t){return t?e.replaceAll(new RegExp(t.from,"g"),t.to):e}(i,n))}),[e,t,n])}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:o}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),r="/"===a||a===o?a:(i=a,n?function(e){return e.endsWith("/")?e:e+"/"}(i):function(e){return e.endsWith("/")?e.slice(0,-1):e}(i));var i;return e.replace(a,r)}},54143:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=void 0,t.getErrorCausalChain=function e(t){return t.cause?[t,...e(t.cause)]:[t]}},18780:function(e,t,n){"use strict";var o=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.getErrorCausalChain=t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="__blog-post-container";var a=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return o(a).default}});var r=n(54143);Object.defineProperty(t,"getErrorCausalChain",{enumerable:!0,get:function(){return r.getErrorCausalChain}})},86010:(e,t,n)=>{"use strict";function o(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{lX:()=>y,q_:()=>C,ob:()=>f,PP:()=>j,Ep:()=>p});var o=n(87462);function a(e){return"/"===e.charAt(0)}function r(e,t){for(var n=t,o=n+1,a=e.length;o=0;p--){var f=i[p];"."===f?r(i,p):".."===f?(r(i,p),u++):u&&(r(i,p),u--)}if(!d)for(;u--;u)i.unshift("..");!d||""===i[0]||i[0]&&a(i[0])||i.unshift("");var m=i.join("/");return n&&"/"!==m.substr(-1)&&(m+="/"),m};var s=n(38776);function c(e){return"/"===e.charAt(0)?e:"/"+e}function d(e){return"/"===e.charAt(0)?e.substr(1):e}function l(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function u(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,o=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),o&&"#"!==o&&(a+="#"===o.charAt(0)?o:"#"+o),a}function f(e,t,n,a){var r;"string"==typeof e?(r=function(e){var t=e||"/",n="",o="",a=t.indexOf("#");-1!==a&&(o=t.substr(a),t=t.substr(0,a));var r=t.indexOf("?");return-1!==r&&(n=t.substr(r),t=t.substr(0,r)),{pathname:t,search:"?"===n?"":n,hash:"#"===o?"":o}}(e),r.state=t):(void 0===(r=(0,o.Z)({},e)).pathname&&(r.pathname=""),r.search?"?"!==r.search.charAt(0)&&(r.search="?"+r.search):r.search="",r.hash?"#"!==r.hash.charAt(0)&&(r.hash="#"+r.hash):r.hash="",void 0!==t&&void 0===r.state&&(r.state=t));try{r.pathname=decodeURI(r.pathname)}catch(s){throw s instanceof URIError?new URIError('Pathname "'+r.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):s}return n&&(r.key=n),a?r.pathname?"/"!==r.pathname.charAt(0)&&(r.pathname=i(r.pathname,a.pathname)):r.pathname=a.pathname:r.pathname||(r.pathname="/"),r}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,o,a){if(null!=e){var r="function"==typeof e?e(t,n):e;"string"==typeof r?"function"==typeof o?o(r,a):a(!0):a(!1!==r)}else a(!0)},appendListener:function(e){var n=!0;function o(){n&&e.apply(void 0,arguments)}return t.push(o),function(){n=!1,t=t.filter((function(e){return e!==o}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),o=0;ot?n.splice(t,n.length-t,a):n.push(a),u({action:o,location:a,index:t,entries:n})}}))},replace:function(e,t){var o="REPLACE",a=f(e,t,g(),y.location);l.confirmTransitionTo(a,o,n,(function(e){e&&(y.entries[y.index]=a,u({action:o,location:a}))}))},go:x,goBack:function(){x(-1)},goForward:function(){x(1)},canGo:function(e){var t=y.index+e;return t>=0&&t{"use strict";var o=n(59864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},r={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},s={};function c(e){return o.isMemo(e)?i:s[e.$$typeof]||a}s[o.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},s[o.Memo]=i;var d=Object.defineProperty,l=Object.getOwnPropertyNames,u=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,o){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,o)}var i=l(n);u&&(i=i.concat(u(n)));for(var s=c(t),g=c(n),h=0;h{"use strict";e.exports=function(e,t,n,o,a,r,i,s){if(!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var d=[n,o,a,r,i,s],l=0;(c=new Error(t.replace(/%s/g,(function(){return d[l++]})))).name="Invariant Violation"}throw c.framesToPop=1,c}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},32497:(e,t,n)=>{"use strict";n.r(t)},52295:(e,t,n)=>{"use strict";n.r(t)},74865:function(e,t,n){var o,a;o=function(){var e,t,n={version:"0.2.0"},o=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function a(e,t,n){return en?n:e}function r(e){return 100*(-1+e)}function i(e,t,n){var a;return(a="translate3d"===o.positionUsing?{transform:"translate3d("+r(e)+"%,0,0)"}:"translate"===o.positionUsing?{transform:"translate("+r(e)+"%,0)"}:{"margin-left":r(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(o[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,o.minimum,1),n.status=1===e?null:e;var r=n.render(!t),d=r.querySelector(o.barSelector),l=o.speed,u=o.easing;return r.offsetWidth,s((function(t){""===o.positionUsing&&(o.positionUsing=n.getPositioningCSS()),c(d,i(e,l,u)),1===e?(c(r,{transition:"none",opacity:1}),r.offsetWidth,setTimeout((function(){c(r,{transition:"all "+l+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),l)}),l)):setTimeout(t,l)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),o.trickleSpeed)};return o.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*o.trickleRate)},e=0,t=0,n.promise=function(o){return o&&"resolved"!==o.state()?(0===t&&n.start(),e++,t++,o.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");l(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=o.template;var a,i=t.querySelector(o.barSelector),s=e?"-100":r(n.status||0),d=document.querySelector(o.parent);return c(i,{transition:"all 0 linear",transform:"translate3d("+s+"%,0,0)"}),o.showSpinner||(a=t.querySelector(o.spinnerSelector))&&f(a),d!=document.body&&l(d,"nprogress-custom-parent"),d.appendChild(t),t},n.remove=function(){u(document.documentElement,"nprogress-busy"),u(document.querySelector(o.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&f(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var s=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),c=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function o(t){var n=document.body.style;if(t in n)return t;for(var o,a=e.length,r=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((o=e[a]+r)in n)return o;return t}function a(e){return e=n(e),t[e]||(t[e]=o(e))}function r(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,o,a=arguments;if(2==a.length)for(n in t)void 0!==(o=t[n])&&t.hasOwnProperty(n)&&r(e,n,o);else r(e,a[1],a[2])}}();function d(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function l(e,t){var n=p(e),o=n+t;d(n,t)||(e.className=o.substring(1))}function u(e,t){var n,o=p(e);d(e,t)&&(n=o.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function f(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof o?o.call(t,n,t,e):o)||(e.exports=a)},29901:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const o=n(29901),a=n(39642),r=new Set;function i(e){void 0===e?e=Object.keys(o.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...r,...Object.keys(Prism.languages)];a(o,e,t).load((e=>{if(!(e in o.languages))return void(i.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(16500).resolve(t)],delete Prism.languages[e],n(16500)(t),r.add(e)}))}i.silent=!1,e.exports=i},96854:()=>{!function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,o,a,r){if(n.language===o){var i=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof r&&!r(e))return e;for(var a,s=i.length;-1!==n.code.indexOf(a=t(o,s));)++s;return i[s]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,o){if(n.language===o&&n.tokenStack){n.grammar=e.languages[o];var a=0,r=Object.keys(n.tokenStack);!function i(s){for(var c=0;c=r.length);c++){var d=s[c];if("string"==typeof d||d.content&&"string"==typeof d.content){var l=r[a],u=n.tokenStack[l],p="string"==typeof d?d:d.content,f=t(o,l),m=p.indexOf(f);if(m>-1){++a;var g=p.substring(0,m),h=new e.Token(o,e.tokenize(u,n.grammar),"language-"+o,u),b=p.substring(m+f.length),v=[];g&&v.push.apply(v,i([g])),v.push(h),b&&v.push.apply(v,i([b])),"string"==typeof d?s.splice.apply(s,[c,1].concat(v)):d.content=v}}else d.content&&i(d.content)}return s}(n.tokens)}}}})}(Prism)},6726:(e,t,n)=>{var o={"./":2885};function a(e){var t=r(e);return n(t)}function r(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}a.keys=function(){return Object.keys(o)},a.resolve=r,e.exports=a,a.id=6726},16500:(e,t,n)=>{var o={"./":2885};function a(e){var t=r(e);return n(t)}function r(e){if(!n.o(o,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return o[e]}a.keys=function(){return Object.keys(o)},a.resolve=r,e.exports=a,a.id=16500},39642:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,o=e.length;n "));var s={},c=e[o];if(c){function d(t){if(!(t in e))throw new Error(o+" depends on an unknown component "+t);if(!(t in s))for(var i in a(t,r),s[t]=!0,n[t])s[i]=!0}t(c.require,d),t(c.optional,d),t(c.modify,d)}n[o]=s,r.pop()}}return function(e){var t=n[e];return t||(a(e,o),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(r,i,s){var c=function(e){var t={};for(var n in e){var o=e[n];for(var a in o)if("meta"!=a){var r=o[a];t[a]="string"==typeof r?{title:r}:r}}return t}(r),d=function(e){var n;return function(o){if(o in e)return o;if(!n)for(var a in n={},e){var r=e[a];t(r&&r.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[o]||o}}(c);i=i.map(d),s=(s||[]).map(d);var l=n(i),u=n(s);i.forEach((function e(n){var o=c[n];t(o&&o.require,(function(t){t in u||(l[t]=!0,e(t))}))}));for(var p,f=o(c),m=l;a(m);){for(var g in p={},m){var h=c[g];t(h&&h.modify,(function(e){e in u&&(p[e]=!0)}))}for(var b in u)if(!(b in l))for(var v in f(b))if(v in l){p[b]=!0;break}for(var x in m=p)l[x]=!0}var y={getIds:function(){var e=[];return y.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,o,a){var r=a?a.series:void 0,i=a?a.parallel:e,s={},c={};function d(e){if(e in s)return s[e];c[e]=!0;var a,l=[];for(var u in t(e))u in n&&l.push(u);if(0===l.length)a=o(e);else{var p=i(l.map((function(e){var t=d(e);return delete c[e],t})));r?a=r(p,(function(){return o(e)})):o(e)}return s[e]=a}for(var l in n)d(l);var u=[];for(var p in c)u.push(s[p]);return i(u)}(f,l,t,n)}};return y}}();e.exports=t},92703:(e,t,n)=>{"use strict";var o=n(50414);function a(){}function r(){}r.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,r,i){if(i!==o){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:a};return n.PropTypes=n,n}},45697:(e,t,n)=>{e.exports=n(92703)()},50414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},64448:(e,t,n)=>{"use strict";var o=n(67294),a=n(63840);function r(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n