diff --git a/src/components/Layout/Header/index.tsx b/src/components/Layout/Header/index.tsx
index 171f81df75..1cab3605d2 100644
--- a/src/components/Layout/Header/index.tsx
+++ b/src/components/Layout/Header/index.tsx
@@ -7,13 +7,20 @@ import {useNavigation} from '@react-navigation/native'
import {NavigationProp} from '#/lib/routes/types'
import {isIOS} from '#/platform/detection'
import {useSetDrawerOpen} from '#/state/shell'
-import {atoms as a, useBreakpoints, useGutterStyles, useTheme} from '#/alf'
+import {
+ atoms as a,
+ useBreakpoints,
+ useGutterStyles,
+ useTheme,
+ ViewStyleProp,
+} from '#/alf'
import {Button, ButtonIcon} from '#/components/Button'
import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
import {Text} from '#/components/Typography'
const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
+const BUTTON_SIZE = 34 // small button
export function Outer({children}: {children: React.ReactNode}) {
const t = useTheme()
@@ -31,7 +38,7 @@ export function Outer({children}: {children: React.ReactNode}) {
a.py_sm,
t.atoms.border_contrast_low,
]}>
- {children}
+ {children}
)
}
@@ -39,14 +46,40 @@ export function Outer({children}: {children: React.ReactNode}) {
export function Content({children}: {children: React.ReactNode}) {
return (
+ style={[
+ a.flex_1,
+ a.justify_center,
+ a.py_xs,
+ isIOS && a.align_center,
+ {
+ paddingHorizontal: BUTTON_SIZE + a.gap_sm.gap,
+ minHeight: BUTTON_SIZE,
+ },
+ ]}>
{children}
)
}
-export function Slot({children}: {children: React.ReactNode}) {
- return {children}
+export function Slot({
+ children,
+ style,
+}: {children?: React.ReactNode} & ViewStyleProp) {
+ return (
+
+ {children}
+
+ )
}
export function BackButton() {
@@ -89,7 +122,7 @@ export function MenuButton() {
return gtMobile ? null : (