diff --git a/404.html b/404.html index f97f1c4569c..bd2ef84f566 100644 --- a/404.html +++ b/404.html @@ -14,7 +14,7 @@ - +
diff --git a/assets/js/f171b4fe.7fd2b5e0.js b/assets/js/f171b4fe.7fd2b5e0.js deleted file mode 100644 index 9ba9c6d8937..00000000000 --- a/assets/js/f171b4fe.7fd2b5e0.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),o=t(11151),i=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:"Drawer",permalink:"/docs/7.x/drawer-navigator"},next:{title:"Material Top Tabs",permalink:"/docs/7.x/material-top-tab-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:"id
",id:"id",level:4},{value:"initialRouteName
",id:"initialroutename",level:4},{value:"screenOptions
",id:"screenoptions",level:4},{value:"backBehavior
",id:"backbehavior",level:4},{value:"detachInactiveScreens
",id:"detachinactivescreens",level:4},{value:"sceneContainerStyle
",id:"scenecontainerstyle",level:4},{value:"tabBar
",id:"tabbar",level:4},{value:"Options",id:"options",level:3},{value:"title
",id:"title",level:4},{value:"tabBarLabel
",id:"tabbarlabel",level:4},{value:"tabBarShowLabel
",id:"tabbarshowlabel",level:4},{value:"tabBarLabelPosition
",id:"tabbarlabelposition",level:4},{value:"tabBarLabelStyle
",id:"tabbarlabelstyle",level:4},{value:"tabBarIcon
",id:"tabbaricon",level:4},{value:"tabBarIconStyle
",id:"tabbariconstyle",level:4},{value:"tabBarBadge
",id:"tabbarbadge",level:4},{value:"tabBarBadgeStyle
",id:"tabbarbadgestyle",level:4},{value:"tabBarAccessibilityLabel
",id:"tabbaraccessibilitylabel",level:4},{value:"tabBarTestID
",id:"tabbartestid",level:4},{value:"tabBarButton
",id:"tabbarbutton",level:4},{value:"tabBarActiveTintColor
",id:"tabbaractivetintcolor",level:4},{value:"tabBarInactiveTintColor
",id:"tabbarinactivetintcolor",level:4},{value:"tabBarActiveBackgroundColor
",id:"tabbaractivebackgroundcolor",level:4},{value:"tabBarInactiveBackgroundColor
",id:"tabbarinactivebackgroundcolor",level:4},{value:"tabBarHideOnKeyboard
",id:"tabbarhideonkeyboard",level:4},{value:"tabBarItemStyle
",id:"tabbaritemstyle",level:4},{value:"tabBarStyle
",id:"tabbarstyle",level:4},{value:"tabBarBackground
",id:"tabbarbackground",level:4},{value:"lazy
",id:"lazy",level:4},{value:"unmountOnBlur
",id:"unmountonblur",level:4},{value:"freezeOnBlur
",id:"freezeonblur",level:4},{value:"Header related options",id:"header-related-options",level:3},{value:"header
",id:"header",level:4},{value:"Specify a height
in headerStyle
",id:"specify-a-height-in-headerstyle",level:5},{value:"headerShown
",id:"headershown",level:4},{value:"Events",id:"events",level:3},{value:"tabPress
",id:"tabpress",level:4},{value:"tabLongPress
",id:"tablongpress",level:4},{value:"Helpers",id:"helpers",level:3},{value:"jumpTo
",id:"jumpto",level:4},{value:"Example",id:"example",level:2}];function u(e){const n={a:"a",admonition:"admonition",code:"code",em:"em",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,o.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/navigators/tabs/bottom-tabs-demo.mov"})}),"\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)(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:"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)(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":"Bottom Tab Navigator","data-snack":"true","data-version":"7",children:(0,a.jsx)(n.code,{className:"language-js",metastring:'name="Bottom Tab Navigator" snack version=7',children:"import * as React from 'react';\nimport { Text, View, Button } from 'react-native';\nimport {\n createStaticNavigation,\n useNavigation,\n} from '@react-navigation/native';\n// codeblock-focus-start\nimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';\n\n// codeblock-focus-end\nfunction HomeScreen() {\n const navigation = useNavigation();\n\n return (\n