react-native-terra-ui 0.2.2 → 0.4.0

package/src/components/chip/Chip.tsx

@@ -6,14 +6,19 @@ import {
   type ReactNode,
   useContext,
 } from 'react';
-import { View, type ViewProps } from 'react-native';
+import { Text as RNText, View, type ViewProps } from 'react-native';
 
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import {
+  StyleSheet,
+  useUnistyles,
+  withUnistyles,
+} from 'react-native-unistyles';
 
-import type { ColorToken, TerraIconName, TextVariant } from '#theme/types';
+import type { ColorToken, RoleTextVariant, TerraIconName } from '#theme/types';
+import { resolveThemeColor } from '#utils/resolve-theme-color';
+import { FONT_WEIGHT_VALUE, SYSTEM_FONT } from '#utils/typography';
 
 import { Icon } from '../icon';
-import { Text } from '../text';
 import type { ChipColor, ChipSize, ChipVariant } from './types';
 import { type CustomChipColors, getCustomColorColors } from './utils';
 
@@ -69,6 +74,13 @@ const SCHEME_NAMES = new Set([
 type ChipScheme = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
 type ChipPaintedVariant = Exclude<ChipVariant, 'ghost'>;
 
+// `ghost` is `outline` with its border taken away, so it has no colors of its
+// own — it borrows outline's foreground. Only the *paint* differs, and that
+// comes from the `ghost` style variant, never from here.
+function paintedVariant(variant: ChipVariant): ChipPaintedVariant {
+  return variant === 'ghost' ? 'outline' : variant;
+}
+
 /** Foreground token per (scheme, variant) — mirrors the spec's token table. */
 const FG_TOKEN: Record<ChipScheme, Record<ChipPaintedVariant, ColorToken>> = {
   primary: {
@@ -105,33 +117,47 @@ function resolveForeground(
   customColors: CustomChipColors | null
 ): ColorToken {
   if (customColors) return customColors.fg;
-  if (variant === 'ghost') return 'text.default';
-  return FG_TOKEN[color as ChipScheme][variant];
+  return FG_TOKEN[color as ChipScheme][paintedVariant(variant)];
 }
 
 // ─── Label sub-component ───────────────────────────────────────────────────────
 
-const LABEL_VARIANT: Record<ChipSize, TextVariant> = {
+const LABEL_VARIANT: Record<ChipSize, RoleTextVariant> = {
   sm: 'label-sm',
   md: 'label-md',
   lg: 'label-lg',
 };
 
+// Renders through React Native's `Text` rather than the `Text` primitive: a
+// chip label never needs the primitive's alignment, decoration, or truncation
+// handling, and a list of chips pays for that style assembly on every render.
+// The type scale lives in `styles.label`'s size variants, so unistyles resolves
+// it against the live theme, and the colour is resolved here from the token the
+// root put on the context — keeping the theme-change behaviour the primitive
+// gave us.
 const ChipLabel = ({ children }: { children: ReactNode }) => {
   const { color, size } = useContext(ChipContext);
+  const { theme } = useUnistyles();
+  styles.useVariants({ size });
+
   return (
-    <Text variant={LABEL_VARIANT[size]} weight="semibold" color={color}>
+    <RNText
+      style={[styles.label, { color: resolveThemeColor(color, theme) }]}
+      maxFontSizeMultiplier={
+        theme.typography.variants[LABEL_VARIANT[size]].maxFontSizeMultiplier
+      }
+    >
       {children}
-    </Text>
+    </RNText>
   );
 };
 
 // ─── Icon sub-component ────────────────────────────────────────────────────────
 
 const ICON_SIZE: Record<ChipSize, number> = {
-  sm: 12,
-  md: 14,
-  lg: 16,
+  sm: 16,
+  md: 18,
+  lg: 20,
 };
 
 export interface ChipIconProps extends Omit<ViewProps, 'children'> {
@@ -157,7 +183,7 @@ const ChipIcon = ({
       color={color || contextColor}
       size={sizeProp ?? ICON_SIZE[size]}
       strokeWidth={strokeWidth}
-      style={style}
+      style={[{ marginVertical: -4 }, style]}
       {...rest}
     />
   );
@@ -193,30 +219,27 @@ const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipProps>(function Chip(
   // literal-union type while still comparing against the real value below.
   styles.useVariants({ color: color as ChipScheme, variant, size });
 
-  const isCustomColor = variant !== 'ghost' && !SCHEME_NAMES.has(color);
+  const isCustomColor = !SCHEME_NAMES.has(color);
   const customColors = isCustomColor
-    ? getCustomColorColors(color, variant as 'solid' | 'soft' | 'outline')
+    ? getCustomColorColors(color, paintedVariant(variant))
     : null;
 
   const fg = resolveForeground(color, variant, customColors);
+  // Ghost takes outline's foreground but none of its paint — its transparent
+  // background and absent border come from the `ghost` style variant, so
+  // applying the derived paint here would hand it outline's border back.
+  const customPaint =
+    customColors && variant !== 'ghost'
+      ? {
+          backgroundColor: customColors.bg,
+          borderColor: customColors.border,
+          borderWidth: customColors.borderWidth,
+        }
+      : null;
 
   return (
     <ChipContext.Provider value={{ color: fg, size }}>
-      <View
-        ref={ref}
-        style={[
-          styles.base,
-          customColors
-            ? {
-                backgroundColor: customColors.bg,
-                borderColor: customColors.border,
-                borderWidth: customColors.borderWidth,
-              }
-            : null,
-          style,
-        ]}
-        {...rest}
-      >
+      <View ref={ref} style={[styles.base, customPaint, style]} {...rest}>
         {renderChildren(children)}
       </View>
     </ChipContext.Provider>
@@ -256,8 +279,41 @@ Chip.Icon = ChipIcon;
 // this View, and is handed to them as a token via `FG_TOKEN` / context.
 const styles = StyleSheet.create((theme) => {
   const c = theme.color;
+  // A custom font encodes its weight in the family name, so only the system
+  // font takes a numeric `fontWeight` — the same branch `Text` makes. Inlined
+  // rather than extracted: the unistyles Babel plugin rewrites this factory,
+  // and an imported function called from inside it is not in scope at runtime.
+  const labelFont = theme.typography.fonts.semibold;
+  const isSystemLabelFont = labelFont === SYSTEM_FONT;
 
   return {
+    // Spelled out rather than derived from `LABEL_VARIANT`: the unistyles Babel
+    // plugin reads this object statically, so computed variant keys are not
+    // safe here even though they would resolve correctly under test.
+    label: {
+      paddingHorizontal: 2,
+      fontFamily: isSystemLabelFont ? undefined : labelFont,
+      fontWeight: isSystemLabelFont ? FONT_WEIGHT_VALUE.semibold : undefined,
+      variants: {
+        size: {
+          sm: {
+            fontSize: theme.typography.variants['label-sm'].fontSize,
+            lineHeight: theme.typography.variants['label-sm'].lineHeight,
+            letterSpacing: theme.typography.variants['label-sm'].letterSpacing,
+          },
+          md: {
+            fontSize: theme.typography.variants['label-md'].fontSize,
+            lineHeight: theme.typography.variants['label-md'].lineHeight,
+            letterSpacing: theme.typography.variants['label-md'].letterSpacing,
+          },
+          lg: {
+            fontSize: theme.typography.variants['label-lg'].fontSize,
+            lineHeight: theme.typography.variants['label-lg'].lineHeight,
+            letterSpacing: theme.typography.variants['label-lg'].letterSpacing,
+          },
+        },
+      },
+    },
     base: {
       flexDirection: 'row',
       alignItems: 'center',
@@ -268,19 +324,19 @@ const styles = StyleSheet.create((theme) => {
           sm: {
             minHeight: 24,
             paddingVertical: 6,
-            paddingHorizontal: 12,
+            paddingHorizontal: 8,
             gap: 4,
           },
           md: {
             minHeight: 26,
             paddingVertical: 8,
-            paddingHorizontal: 14,
+            paddingHorizontal: 10,
             gap: 4,
           },
           lg: {
             minHeight: 28,
             paddingVertical: 8,
-            paddingHorizontal: 16,
+            paddingHorizontal: 12,
             gap: 4,
           },
         },
@@ -308,7 +364,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'solid',
           styles: {
             backgroundColor: c['action.bg.primary'],
-            borderColor: c['action.bg.primary'],
             borderWidth: 0,
           },
         },
@@ -317,7 +372,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'soft',
           styles: {
             backgroundColor: c['action.bg.primary.subtle'],
-            borderColor: c['action.bg.primary.subtle'],
             borderWidth: 0,
           },
         },
@@ -326,7 +380,7 @@ const styles = StyleSheet.create((theme) => {
           variant: 'outline',
           styles: {
             backgroundColor: 'transparent',
-            borderColor: c['border.accent'],
+            borderColor: c['action.bg.primary.subtle'],
             borderWidth: 1,
           },
         },
@@ -335,7 +389,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'solid',
           styles: {
             backgroundColor: c['action.bg.secondary'],
-            borderColor: c['action.bg.secondary'],
             borderWidth: 0,
           },
         },
@@ -344,7 +397,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'soft',
           styles: {
             backgroundColor: c['action.bg.secondary.subtle'],
-            borderColor: c['action.bg.secondary.subtle'],
             borderWidth: 0,
           },
         },
@@ -353,7 +405,7 @@ const styles = StyleSheet.create((theme) => {
           variant: 'outline',
           styles: {
             backgroundColor: 'transparent',
-            borderColor: c['border.default'],
+            borderColor: c['action.bg.secondary.subtle'],
             borderWidth: 1,
           },
         },
@@ -362,7 +414,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'solid',
           styles: {
             backgroundColor: c['status.success.bg'],
-            borderColor: c['status.success.bg'],
             borderWidth: 0,
           },
         },
@@ -371,7 +422,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'soft',
           styles: {
             backgroundColor: c['status.success.bg.subtle'],
-            borderColor: c['status.success.bg.subtle'],
             borderWidth: 0,
           },
         },
@@ -380,7 +430,7 @@ const styles = StyleSheet.create((theme) => {
           variant: 'outline',
           styles: {
             backgroundColor: 'transparent',
-            borderColor: c['status.success.border'],
+            borderColor: c['status.success.bg.subtle'],
             borderWidth: 1,
           },
         },
@@ -389,7 +439,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'solid',
           styles: {
             backgroundColor: c['status.warning.bg'],
-            borderColor: c['status.warning.bg'],
             borderWidth: 0,
           },
         },
@@ -398,7 +447,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'soft',
           styles: {
             backgroundColor: c['status.warning.bg.subtle'],
-            borderColor: c['status.warning.bg.subtle'],
             borderWidth: 0,
           },
         },
@@ -407,7 +455,7 @@ const styles = StyleSheet.create((theme) => {
           variant: 'outline',
           styles: {
             backgroundColor: 'transparent',
-            borderColor: c['status.warning.border'],
+            borderColor: c['status.warning.bg.subtle'],
             borderWidth: 1,
           },
         },
@@ -416,7 +464,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'solid',
           styles: {
             backgroundColor: c['status.danger.bg'],
-            borderColor: c['status.danger.bg'],
             borderWidth: 0,
           },
         },
@@ -425,7 +472,6 @@ const styles = StyleSheet.create((theme) => {
           variant: 'soft',
           styles: {
             backgroundColor: c['status.danger.bg.subtle'],
-            borderColor: c['status.danger.bg.subtle'],
             borderWidth: 0,
           },
         },
@@ -434,7 +480,7 @@ const styles = StyleSheet.create((theme) => {
           variant: 'outline',
           styles: {
             backgroundColor: 'transparent',
-            borderColor: c['status.danger.border'],
+            borderColor: c['status.danger.bg.subtle'],
             borderWidth: 1,
           },
         },

package/src/components/chip/utils.ts

@@ -18,8 +18,15 @@ export function getCustomColorColors(
   literal: string,
   variant: 'solid' | 'soft' | 'outline'
 ): CustomChipColors {
+  // Outline borrows the `soft` background as its border, so the two variants
+  // read as the same weight of colour — one filled, one drawn.
   if (variant === 'outline') {
-    return { bg: 'transparent', border: literal, borderWidth: 1, fg: literal };
+    return {
+      bg: 'transparent',
+      border: withAlpha(literal, CUSTOM_COLOR_SOFT_ALPHA),
+      borderWidth: 1,
+      fg: literal,
+    };
   }
   if (variant === 'soft') {
     const bg = withAlpha(literal, CUSTOM_COLOR_SOFT_ALPHA);

package/src/components/header/variants/LargeTitleHeader/index.tsx

@@ -29,17 +29,23 @@ const COMPACT_TITLE_SLIDE_OFFSET = 8;
 const LARGE_TITLE_SLIDE_OFFSET = 6;
 
 export interface LargeTitleHeaderProps extends TitleHeaderProps {
+  /** Optional small line shown above the large title. */
+  overline?: string;
   /** Optional secondary line shown under the large title. */
-  caption?: string;
+  subtitle?: string;
   /** Hide the large title (keeps the compact bar). Defaults to `false`. */
   isLargeTitleHidden?: boolean;
 }
 
 function LargeTitlePortalContent({
   title,
-  caption,
+  overline,
+  subtitle,
   titleAlignment = 'center',
-}: Pick<LargeTitleHeaderProps, 'title' | 'caption' | 'titleAlignment'>) {
+}: Pick<
+  LargeTitleHeaderProps,
+  'title' | 'overline' | 'subtitle' | 'titleAlignment'
+>) {
   const { theme } = useUnistyles();
   const { scrollY } = useScreen();
   styles.useVariants({ titleAlignment });
@@ -69,6 +75,16 @@ function LargeTitlePortalContent({
 
   return (
     <Animated.View style={[styles.portalContent, largeTitleAnimatedStyle]}>
+      {!!overline && (
+        <Text
+          style={styles.overline}
+          maxFontSizeMultiplier={
+            theme.typography.variants['label-sm'].maxFontSizeMultiplier
+          }
+        >
+          {overline}
+        </Text>
+      )}
       <Text
         style={styles.largeTitle}
         maxFontSizeMultiplier={
@@ -77,14 +93,14 @@ function LargeTitlePortalContent({
       >
         {title}
       </Text>
-      {!!caption && (
+      {!!subtitle && (
         <Text
-          style={styles.caption}
+          style={styles.subtitle}
           maxFontSizeMultiplier={
             theme.typography.variants['body-lg'].maxFontSizeMultiplier
           }
         >
-          {caption}
+          {subtitle}
         </Text>
       )}
     </Animated.View>
@@ -103,13 +119,18 @@ function LargeTitlePortalContent({
  * @example
  * ```tsx
  * <Screen.Header>
- *   <Header.LargeTitle title="Meditate" caption="Good morning" />
+ *   <Header.LargeTitle
+ *     overline="Today"
+ *     title="Meditate"
+ *     subtitle="Good morning"
+ *   />
  * </Screen.Header>
  * ```
  */
 export function LargeTitleHeader({
   title,
-  caption,
+  overline,
+  subtitle,
   LeftToolbar,
   RightToolbar,
   dismissAction = 'none',
@@ -181,11 +202,6 @@ export function LargeTitleHeader({
     isLargeTitleHiddenValue.value = isLargeTitleHidden;
   }, [isLargeTitleHidden, isLargeTitleHiddenValue]);
 
-  // // biome-ignore lint/correctness/useExhaustiveDependencies: reset stale collapse height whenever content that resizes the portal (title/caption/visibility) changes, ahead of remeasurement
-  // useEffect(() => {
-  //   setHeaderCollapseHeight(0);
-  // }, [title, caption, isLargeTitleHidden, setHeaderCollapseHeight]);
-
   const leading =
     dismissAction === 'back' ? (
       <>
@@ -220,7 +236,8 @@ export function LargeTitleHeader({
         <Portal hostName={SCREEN_HEADER_PORTAL_HOST}>
           <LargeTitlePortalContent
             title={title}
-            caption={caption}
+            overline={overline}
+            subtitle={subtitle}
             titleAlignment={titleAlignment}
           />
         </Portal>
@@ -288,11 +305,29 @@ const styles = StyleSheet.create((theme, runtime) => ({
     justifyContent: 'flex-end',
   },
   portalContent: {
+    gap: 2,
     minHeight: theme.layout.header.height,
     // paddingTop: theme.spacing['1'],
     paddingBottom: theme.spacing['3'],
     paddingHorizontal: theme.layout.screen.margin.x,
   },
+  overline: {
+    fontSize: theme.typography.variants['label-sm'].fontSize,
+    lineHeight: theme.typography.variants['label-sm'].lineHeight,
+    letterSpacing: theme.typography.variants['label-sm'].letterSpacing,
+    fontWeight:
+      FONT_WEIGHT_VALUE[theme.typography.variants['label-sm'].fontWeight],
+    color:
+      (theme.color as unknown as Record<string, string | undefined>)[
+        'text.subtle'
+      ] ?? '',
+    variants: {
+      titleAlignment: {
+        center: { textAlign: 'center' },
+        left: { textAlign: 'left' },
+      },
+    },
+  },
   largeTitle: {
     fontSize: theme.typography.variants['headline-lg'].fontSize,
     lineHeight: theme.typography.variants['headline-lg'].lineHeight,
@@ -303,8 +338,14 @@ const styles = StyleSheet.create((theme, runtime) => ({
       (theme.color as unknown as Record<string, string | undefined>)[
         'text.default'
       ] ?? '',
+    variants: {
+      titleAlignment: {
+        center: { textAlign: 'center' },
+        left: { textAlign: 'left' },
+      },
+    },
   },
-  caption: {
+  subtitle: {
     fontSize: theme.typography.variants['body-lg'].fontSize,
     lineHeight: theme.typography.variants['body-lg'].lineHeight,
     letterSpacing: theme.typography.variants['body-lg'].letterSpacing,

package/src/components/screen/ScreenFlashList.tsx

@@ -12,6 +12,7 @@ import Animated, {
 
 import { StyleSheet } from 'react-native-unistyles';
 
+import { resolveScreenMargin } from '#theme/screen-margin';
 import { PortalHost } from '../portal';
 import { BottomSafeArea } from './parts/BottomSafeArea';
 import { renderScreenPlaceholder } from './parts/ScreenPlaceholder';
@@ -164,33 +165,39 @@ export function ScreenFlashList<T>({
   );
 }
 
-const styles = StyleSheet.create((theme, runtime) => ({
-  content: (
-    margins: ScreenMargins,
-    hasHeader: boolean,
-    bottomInset: number | undefined
-  ) => {
-    return {
-      flexGrow: 1,
-      // The header is absolutely positioned, so the list reserves its full
-      // height — bar plus top safe area. This assumes the scroll view does not
-      // also get UIKit's automatic inset adjustment: on a native tab screen
-      // that means `disableAutomaticContentInsets` on the tab, or the two
-      // insets are counted twice.
-      paddingTop:
-        (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) +
-        (hasYMargin(margins) ? theme.layout.screen.margin.y : 0),
-      paddingHorizontal: hasXMargin(margins) ? theme.layout.screen.margin.x : 0,
-      // The safe area is `BottomSafeArea`'s job; counting it here as well
-      // would leave a gap the height of the gesture bar.
-      paddingBottom:
-        bottomInset ?? (hasYMargin(margins) ? theme.layout.screen.margin.y : 0),
-    };
-  },
-  safeArea: {
-    height: runtime.insets.top,
-  },
-  headerWrapper: (margins: ScreenMargins) => ({
-    marginHorizontal: hasXMargin(margins) ? -theme.layout.screen.margin.x : 0,
-  }),
-}));
+const styles = StyleSheet.create((theme, runtime) => {
+  const { x: marginX, y: marginY } = resolveScreenMargin(
+    theme,
+    runtime.breakpoint
+  );
+
+  return {
+    content: (
+      margins: ScreenMargins,
+      hasHeader: boolean,
+      bottomInset: number | undefined
+    ) => {
+      return {
+        flexGrow: 1,
+        // The header is absolutely positioned, so the list reserves its full
+        // height — bar plus top safe area. This assumes the scroll view does not
+        // also get UIKit's automatic inset adjustment: on a native tab screen
+        // that means `disableAutomaticContentInsets` on the tab, or the two
+        // insets are counted twice.
+        paddingTop:
+          (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) +
+          (hasYMargin(margins) ? marginY : 0),
+        paddingHorizontal: hasXMargin(margins) ? marginX : 0,
+        // The safe area is `BottomSafeArea`'s job; counting it here as well
+        // would leave a gap the height of the gesture bar.
+        paddingBottom: bottomInset ?? (hasYMargin(margins) ? marginY : 0),
+      };
+    },
+    safeArea: {
+      height: runtime.insets.top,
+    },
+    headerWrapper: (margins: ScreenMargins) => ({
+      marginHorizontal: hasXMargin(margins) ? -marginX : 0,
+    }),
+  };
+});

package/src/components/screen/ScreenFlatList.tsx

@@ -12,6 +12,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 
+import { resolveScreenMargin } from '#theme/screen-margin';
 import { PortalHost } from '../portal';
 import { BottomSafeArea } from './parts/BottomSafeArea';
 import { renderScreenPlaceholder } from './parts/ScreenPlaceholder';
@@ -146,37 +147,43 @@ export function ScreenFlatList<T>({
   );
 }
 
-const styles = StyleSheet.create((theme, runtime) => ({
-  scrollContent: {
-    flexGrow: 1,
-  },
-  content: (
-    margins: ScreenMargins,
-    hasHeader: boolean,
-    bottomInset: number | undefined
-  ) => ({
-    flexGrow: 1,
-    // The header is absolutely positioned, so the list reserves its full
-    // height — bar plus top safe area. This assumes the scroll view does not
-    // also get UIKit's automatic inset adjustment: on a native tab screen
-    // that means `disableAutomaticContentInsets` on the tab, or the two
-    // insets are counted twice.
-    paddingTop:
-      (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) +
-      (hasYMargin(margins) ? theme.layout.screen.margin.y : 0),
-    paddingHorizontal: hasXMargin(margins) ? theme.layout.screen.margin.x : 0,
-    // The safe area is `BottomSafeArea`'s job; counting it here as well would
-    // leave a gap the height of the gesture bar.
-    paddingBottom:
-      bottomInset ?? (hasYMargin(margins) ? theme.layout.screen.margin.y : 0),
-  }),
-  safeArea: {
-    height: runtime.insets.top,
-  },
-  headerWrapper: (margins: ScreenMargins) => ({
-    marginHorizontal: hasXMargin(margins) ? -theme.layout.screen.margin.x : 0,
-  }),
-  header: {
-    height: theme.layout.header.height,
-  },
-}));
+const styles = StyleSheet.create((theme, runtime) => {
+  const { x: marginX, y: marginY } = resolveScreenMargin(
+    theme,
+    runtime.breakpoint
+  );
+
+  return {
+    scrollContent: {
+      flexGrow: 1,
+    },
+    content: (
+      margins: ScreenMargins,
+      hasHeader: boolean,
+      bottomInset: number | undefined
+    ) => ({
+      flexGrow: 1,
+      // The header is absolutely positioned, so the list reserves its full
+      // height — bar plus top safe area. This assumes the scroll view does not
+      // also get UIKit's automatic inset adjustment: on a native tab screen
+      // that means `disableAutomaticContentInsets` on the tab, or the two
+      // insets are counted twice.
+      paddingTop:
+        (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) +
+        (hasYMargin(margins) ? marginY : 0),
+      paddingHorizontal: hasXMargin(margins) ? marginX : 0,
+      // The safe area is `BottomSafeArea`'s job; counting it here as well
+      // would leave a gap the height of the gesture bar.
+      paddingBottom: bottomInset ?? (hasYMargin(margins) ? marginY : 0),
+    }),
+    safeArea: {
+      height: runtime.insets.top,
+    },
+    headerWrapper: (margins: ScreenMargins) => ({
+      marginHorizontal: hasXMargin(margins) ? -marginX : 0,
+    }),
+    header: {
+      height: theme.layout.header.height,
+    },
+  };
+});