diff --git a/404.html b/404.html index a7ce366ba3b..9246a2546be 100644 --- a/404.html +++ b/404.html @@ -14,7 +14,7 @@ - +
diff --git a/assets/js/0cd801b6.768947b9.js b/assets/js/0cd801b6.768947b9.js new file mode 100644 index 00000000000..20737a54bac --- /dev/null +++ b/assets/js/0cd801b6.768947b9.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkreact_navigation_website_next=self.webpackChunkreact_navigation_website_next||[]).push([[44554],{114:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>c,contentTitle:()=>s,default:()=>x,frontMatter:()=>o,metadata:()=>d,toc:()=>h});var r=t(85893),a=t(11151),i=t(74866),l=t(85162);const o={id:"elements",title:"Elements Library",sidebar_label:"Elements"},s=void 0,d={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.",source:"@site/versioned_docs/version-6.x/elements.md",sourceDirName:".",slug:"/elements",permalink:"/docs/elements",draft:!1,unlisted:!1,editUrl:"https://github.com/react-navigation/react-navigation.github.io/edit/main/versioned_docs/version-6.x/elements.md",tags:[],version:"6.x",frontMatter:{id:"elements",title:"Elements Library",sidebar_label:"Elements"},sidebar:"docs",previous:{title:"Developer tools",permalink:"/docs/devtools"},next:{title:"Tab View",permalink:"/docs/tab-view"}},c={},h=[{value:"Installation",id:"installation",level:2},{value:"Components",id:"components",level:2},{value:"Header
",id:"header",level:3},{value:"headerTitle
",id:"headertitle",level:4},{value:"headerTitleAlign
",id:"headertitlealign",level:4},{value:"headerTitleAllowFontScaling
",id:"headertitleallowfontscaling",level:4},{value:"headerLeft
",id:"headerleft",level:4},{value:"headerRight
",id:"headerright",level:4},{value:"headerShadowVisible
",id:"headershadowvisible",level:4},{value:"headerStyle
",id:"headerstyle",level:4},{value:"headerTitleStyle
",id:"headertitlestyle",level:4},{value:"headerLeftContainerStyle
",id:"headerleftcontainerstyle",level:4},{value:"headerRightContainerStyle
",id:"headerrightcontainerstyle",level:4},{value:"headerTitleContainerStyle
",id:"headertitlecontainerstyle",level:4},{value:"headerBackgroundContainerStyle
",id:"headerbackgroundcontainerstyle",level:4},{value:"headerTintColor
",id:"headertintcolor",level:4},{value:"headerPressColor
",id:"headerpresscolor",level:4},{value:"headerPressOpacity
",id:"headerpressopacity",level:4},{value:"headerTransparent
",id:"headertransparent",level:4},{value:"headerBackground
",id:"headerbackground",level:4},{value:"headerStatusBarHeight
",id:"headerstatusbarheight",level:4},{value:"HeaderBackground
",id:"headerbackground-1",level:3},{value:"HeaderTitle
",id:"headertitle-1",level:3},{value:"HeaderBackButton
",id:"headerbackbutton",level:3},{value:"MissingIcon
",id:"missingicon",level:3},{value:"PlatformPressable
",id:"platformpressable",level:3},{value:"ResourceSavingView
",id:"resourcesavingview",level:3},{value:"Utilities",id:"utilities",level:2},{value:"SafeAreaProviderCompat
",id:"safeareaprovidercompat",level:3},{value:"HeaderBackContext
",id:"headerbackcontext",level:3},{value:"HeaderShownContext
",id:"headershowncontext",level:3},{value:"HeaderHeightContext
",id:"headerheightcontext",level:3},{value:"useHeaderHeight
",id:"useheaderheight",level:3},{value:"getDefaultHeaderHeight
",id:"getdefaultheaderheight",level:3},{value:"getHeaderTitle
",id:"getheadertitle",level:3}];function u(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.p,{children:"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."}),"\n",(0,r.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(n.p,{children:["To use this package, ensure that you have ",(0,r.jsxs)(n.a,{href:"/docs/getting-started",children:[(0,r.jsx)(n.code,{children:"@react-navigation/native"})," and its dependencies (follow this guide)"]}),", then install ",(0,r.jsx)(n.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/elements",children:(0,r.jsx)(n.code,{children:"@react-navigation/elements"})}),":"]}),"\n",(0,r.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(l.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/elements\n"})})}),(0,r.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @react-navigation/elements\n"})})}),(0,r.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @react-navigation/elements\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"components",children:"Components"}),"\n",(0,r.jsx)(n.h3,{id:"header",children:(0,r.jsx)(n.code,{children:"Header"})}),"\n",(0,r.jsx)(n.p,{children:"A component that can be used as a header. This is used by all the navigators by default."}),"\n",(0,r.jsx)(n.p,{children:"Usage:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:"import { Header } from '@react-navigation/elements';\n\nfunction MyHeader() {\n return Header
",id:"header",level:3},{value:"headerTitle
",id:"headertitle",level:4},{value:"headerTitleAlign
",id:"headertitlealign",level:4},{value:"headerTitleAllowFontScaling
",id:"headertitleallowfontscaling",level:4},{value:"headerLeft
",id:"headerleft",level:4},{value:"headerRight
",id:"headerright",level:4},{value:"headerShadowVisible
",id:"headershadowvisible",level:4},{value:"headerStyle
",id:"headerstyle",level:4},{value:"headerTitleStyle
",id:"headertitlestyle",level:4},{value:"headerLeftContainerStyle
",id:"headerleftcontainerstyle",level:4},{value:"headerRightContainerStyle
",id:"headerrightcontainerstyle",level:4},{value:"headerTitleContainerStyle
",id:"headertitlecontainerstyle",level:4},{value:"headerBackgroundContainerStyle
",id:"headerbackgroundcontainerstyle",level:4},{value:"headerTintColor
",id:"headertintcolor",level:4},{value:"headerPressColor
",id:"headerpresscolor",level:4},{value:"headerPressOpacity
",id:"headerpressopacity",level:4},{value:"headerTransparent
",id:"headertransparent",level:4},{value:"headerBackground
",id:"headerbackground",level:4},{value:"headerStatusBarHeight
",id:"headerstatusbarheight",level:4},{value:"HeaderBackground
",id:"headerbackground-1",level:3},{value:"HeaderTitle
",id:"headertitle-1",level:3},{value:"HeaderBackButton
",id:"headerbackbutton",level:3},{value:"MissingIcon
",id:"missingicon",level:3},{value:"PlatformPressable
",id:"platformpressable",level:3},{value:"ResourceSavingView
",id:"resourcesavingview",level:3},{value:"Utilities",id:"utilities",level:2},{value:"SafeAreaProviderCompat
",id:"safeareaprovidercompat",level:3},{value:"HeaderBackContext
",id:"headerbackcontext",level:3},{value:"HeaderShownContext
",id:"headershowncontext",level:3},{value:"HeaderHeightContext
",id:"headerheightcontext",level:3},{value:"useHeaderHeight
",id:"useheaderheight",level:3},{value:"getDefaultHeaderHeight
",id:"getdefaultheaderheight",level:3},{value:"getHeaderTitle
",id:"getheadertitle",level:3}];function u(e){const n={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",li:"li",p:"p",pre:"pre",ul:"ul",...(0,a.a)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.p,{children:"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."}),"\n",(0,r.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,r.jsxs)(n.p,{children:["To use this package, ensure that you have ",(0,r.jsxs)(n.a,{href:"/docs/getting-started",children:[(0,r.jsx)(n.code,{children:"@react-navigation/native"})," and its dependencies (follow this guide)"]}),", then install ",(0,r.jsx)(n.a,{href:"https://github.com/react-navigation/react-navigation/tree/main/packages/elements",children:(0,r.jsx)(n.code,{children:"@react-navigation/elements"})}),":"]}),"\n",(0,r.jsxs)(i.Z,{groupId:"npm2yarn",children:[(0,r.jsx)(l.Z,{value:"npm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"npm install @react-navigation/elements\n"})})}),(0,r.jsx)(l.Z,{value:"yarn",label:"Yarn",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"yarn add @react-navigation/elements\n"})})}),(0,r.jsx)(l.Z,{value:"pnpm",label:"pnpm",children:(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-bash",children:"pnpm add @react-navigation/elements\n"})})})]}),"\n",(0,r.jsx)(n.h2,{id:"components",children:"Components"}),"\n",(0,r.jsx)(n.h3,{id:"header",children:(0,r.jsx)(n.code,{children:"Header"})}),"\n",(0,r.jsx)(n.p,{children:"A component that can be used as a header. It accepts the following props:"}),"\n",(0,r.jsx)(n.h4,{id:"headertitle",children:(0,r.jsx)(n.code,{children:"headerTitle"})}),"\n",(0,r.jsxs)(n.p,{children:["String or a function that returns a React Element to be used by the header. Defaults to scene ",(0,r.jsx)(n.code,{children:"title"}),". When a function is specified, it receives an object containing ",(0,r.jsx)(n.code,{children:"allowFontScaling"}),", ",(0,r.jsx)(n.code,{children:"tintColor"}),", ",(0,r.jsx)(n.code,{children:"style"})," and ",(0,r.jsx)(n.code,{children:"children"})," properties. The ",(0,r.jsx)(n.code,{children:"children"})," property contains the title string."]}),"\n",(0,r.jsx)(n.h4,{id:"headertitlealign",children:(0,r.jsx)(n.code,{children:"headerTitleAlign"})}),"\n",(0,r.jsx)(n.p,{children:"How to align the header title. Possible values:"}),"\n",(0,r.jsxs)(n.ul,{children:["\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:"left"})}),"\n",(0,r.jsx)(n.li,{children:(0,r.jsx)(n.code,{children:"center"})}),"\n"]}),"\n",(0,r.jsxs)(n.p,{children:["Defaults to ",(0,r.jsx)(n.code,{children:"center"})," on iOS and ",(0,r.jsx)(n.code,{children:"left"})," on Android."]}),"\n",(0,r.jsx)(n.h4,{id:"headertitleallowfontscaling",children:(0,r.jsx)(n.code,{children:"headerTitleAllowFontScaling"})}),"\n",(0,r.jsx)(n.p,{children:"Whether header title font should scale to respect Text Size accessibility settings. Defaults to false."}),"\n",(0,r.jsx)(n.h4,{id:"headerleft",children:(0,r.jsx)(n.code,{children:"headerLeft"})}),"\n",(0,r.jsx)(n.p,{children:"Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:"}),"\n",(0,r.jsx)(n.pre,{children:(0,r.jsx)(n.code,{className:"language-js",children:'npm install @react-navigation/elements
yarn add @react-navigation/elements
pnpm add @react-navigation/elements
Header
A component that can be used as a header. It accepts the following props:
+A component that can be used as a header. This is used by all the navigators by default.
+Usage:
+import { Header } from '@react-navigation/elements';
function MyHeader() {
return <Header title="My app" />;
}
To use the header in a navigator, you can use the header
option in the screen options:
import { Header, getHeaderTitle } from '@react-navigation/elements';
const Stack = createNativeStackNavigator();
function MyStack() {
return (
<Stack.Navigator
screenOptions={{
header: ({ options, route }) => (
<Header {...options} title={getHeaderTitle(options, route.name)} />
),
}}
>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
);
}
It accepts the following props:
headerTitle
String or a function that returns a React Element to be used by the header. Defaults to scene title
. When a function is specified, it receives an object containing allowFontScaling
, tintColor
, style
and children
properties. The children
property contains the title string.
headerTitleAlign