react-native-terra-ui 0.11.5 → 0.11.7

package/lib/typescript/src/components/header/variants/TitleHeader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/TitleHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAKnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAIpF,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,8DAA8D;IAC9D,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACnC,mGAAmG;IACnG,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kCAAkC;IAClC,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,cAAc,EACd,eAAe,EACf,WAAW,EACX,YAAY,EACZ,aAAsB,EACtB,UAAU,EACV,SAAS,EACT,cAAyB,EACzB,UAAU,EACV,EAAE,GACH,EAAE,gBAAgB,+BAoDlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/header/variants/TitleHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA2B,MAAM,OAAO,CAAC;AAKhE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,yBAAsB,CAAC;AAGpF,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gBAAa,CAAC;AAG1D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,sCAAsC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,uCAAuC;IACvC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,sBAAsB,CAAC;IAC1C,8DAA8D;IAC9D,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACnC,mGAAmG;IACnG,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,kCAAkC;IAClC,EAAE,CAAC,EAAE,UAAU,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,cAAc,EACd,eAAe,EACf,WAAW,EACX,YAAY,EACZ,SAAS,EACT,gBAAsB,EACtB,aAAsB,EACtB,UAAU,EACV,SAAS,EACT,cAAyB,EACzB,UAAU,EACV,EAAE,GACH,EAAE,gBAAgB,+BAiElB"}

package/lib/typescript/src/components/screen/ScreenContext.d.ts

@@ -51,6 +51,28 @@ export interface ScreenContextValue {
     margins: ScreenContentPadding;
     /** Whether a `Screen.Header` is present. Used by scroll containers to add top inset. */
     hasHeader: boolean;
+    /**
+     * Measured height (dp) of the pinned accessory a header renders below its bar
+     * — a search field, a tab strip. Zero when there is none.
+     *
+     * The theme header height covers the bar alone, and an accessory is whatever
+     * the caller put there, so scroll containers reserve this on top of it. That
+     * is why it is measured rather than declared: only the accessory knows how
+     * tall it is, and it can change with Dynamic Type or its own content.
+     */
+    headerAccessoryHeight: number;
+    /**
+     * Reports the measured accessory height. Called by the header that owns the
+     * accessory; zero releases the reserved space.
+     */
+    setHeaderAccessoryHeight: (height: number) => void;
+    /**
+     * Primary scroll container's resolved top padding in dp, including header clearance.
+     * Used to position a sticky accessory below the large title at scroll offset zero.
+     */
+    contentTopPadding: number;
+    /** Reported by the primary scroll container from its layout or resolved padding. */
+    setContentTopPadding: (padding: number) => void;
     /** Vertical scroll offset, updated on the UI thread for header animations. */
     scrollY: SharedValue<number>;
     /**

package/lib/typescript/src/components/screen/ScreenContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAC;AAElG,OAAO,QAAQ,EAAE,EACf,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAE/D,yDAAyD;AACzD,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AAEzD,gFAAgF;AAChF,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,cAAc,EAAE,oBAAoB,CAAC;IACrC,6EAA6E;IAC7E,QAAQ,EAAE,cAAc,CAAC;IACzB;;;;;;;;;OASG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC;;;;;;;;;;OAUG;IACH,qBAAqB,EAAE,OAAO,CAAC;IAC/B;;;;;;;;OAQG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC,sCAAsC;IACtC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,wFAAwF;IACxF,SAAS,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACxC,iGAAiG;IACjG,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,SAAS,EAAE,eAAe,CAAC;IAC3B,yDAAyD;IACzD,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/D,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,0FAA0F;IAC1F,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,EAC1B,QAAQ,EACR,cAAsB,EACtB,QAAiB,EACjB,sBAA8B,EAC9B,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAiB,GAClB,EAAE,yBAAyB,+BAwD3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}
+{"version":3,"file":"ScreenContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAC;AAElG,OAAO,QAAQ,EAAE,EACf,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAE/D,yDAAyD;AACzD,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AAEzD,gFAAgF;AAChF,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,cAAc,EAAE,oBAAoB,CAAC;IACrC,6EAA6E;IAC7E,QAAQ,EAAE,cAAc,CAAC;IACzB;;;;;;;;;OASG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC;;;;;;;;;;OAUG;IACH,qBAAqB,EAAE,OAAO,CAAC;IAC/B;;;;;;;;OAQG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC,sCAAsC;IACtC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,wFAAwF;IACxF,SAAS,EAAE,OAAO,CAAC;IACnB;;;;;;;;OAQG;IACH,qBAAqB,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,wBAAwB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oFAAoF;IACpF,oBAAoB,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,8EAA8E;IAC9E,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACxC,iGAAiG;IACjG,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,SAAS,EAAE,eAAe,CAAC;IAC3B,yDAAyD;IACzD,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/D,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,0FAA0F;IAC1F,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,EAC1B,QAAQ,EACR,cAAsB,EACtB,QAAiB,EACjB,sBAA8B,EAC9B,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAiB,GAClB,EAAE,yBAAyB,+BA4E3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}

package/lib/typescript/src/components/screen/ScreenList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScreenList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenList.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/src/components/screen/ScreenScrollView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAmB,KAAK,eAAe,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAa3G,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAG3E,qFAAqF;AACrF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,qBAAqB;IACvG,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,8MA6E5B,CAAC"}
+{"version":3,"file":"ScreenScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAe,MAAM,OAAO,CAAC;AAC7F,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAG3E,qFAAqF;AACrF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,qBAAqB;IACvG,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,8MAoF5B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.11.5",
+  "version": "0.11.7",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/chip/Chip.tsx

@@ -14,6 +14,14 @@ export interface ChipProps extends ViewProps {
   size?: ChipSize;
   variant?: ChipVariant;
   color?: ChipColor;
+  /**
+   * Fill behind the chip, overriding the one its `variant` would paint.
+   *
+   * Only `outline` has a fill worth naming a default for — `'surface.default'`,
+   * so an outlined chip reads as a solid capsule rather than a ring over
+   * whatever it happens to sit on. Pass `'transparent'` to get the ring back.
+   */
+  background?: ColorToken;
   children?: ReactNode;
 }
 
@@ -177,9 +185,10 @@ function renderChildren(children: ReactNode): ReactNode {
 // ─── Component ────────────────────────────────────────────────────────────────
 
 const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipProps>(function Chip(
-  { size = "md", variant = "soft", color = "secondary", children, style, ...rest },
+  { size = "md", variant = "soft", color = "secondary", background, children, style, ...rest },
   ref
 ) {
+  const { theme } = useUnistyles();
   // Compound variants only match the 5 named schemes above — an arbitrary
   // literal never matches one, so it's cast to satisfy `useVariants`'s
   // literal-union type while still comparing against the real value below.
@@ -195,15 +204,20 @@ const ChipRoot = forwardRef<ComponentRef<typeof View>, ChipProps>(function Chip(
   const customPaint =
     customColors && variant !== "ghost"
       ? {
-          backgroundColor: customColors.bg,
+          // Absent for outline, whose fill comes from the `outline` style
+          // variant — spreading `undefined` here would clear it instead.
+          ...(customColors.bg === undefined ? null : { backgroundColor: customColors.bg }),
           borderColor: customColors.border,
           borderWidth: customColors.borderWidth,
         }
       : null;
+  // Last of the paint layers, so an explicit fill beats both the variant's own
+  // and the one derived from a custom color literal.
+  const backgroundPaint = background ? { backgroundColor: resolveThemeColor(background, theme) } : null;
 
   return (
     <ChipContext.Provider value={{ color: fg, size }}>
-      <View ref={ref} style={[styles.base, customPaint, style]} {...rest}>
+      <View ref={ref} style={[styles.base, customPaint, backgroundPaint, style]} {...rest}>
         {renderChildren(children)}
       </View>
     </ChipContext.Provider>
@@ -314,7 +328,11 @@ const styles = StyleSheet.create((theme) => {
         variant: {
           solid: {},
           soft: {},
-          outline: {},
+          // The fill every outlined chip gets, whatever its color — the
+          // compound rows below only add the ring. A named default lives here
+          // rather than in each row so a custom color literal, which matches no
+          // compound row at all, is filled the same way.
+          outline: { backgroundColor: c["surface.default"] },
           ghost: {
             backgroundColor: "transparent",
             borderColor: "transparent",
@@ -343,7 +361,6 @@ const styles = StyleSheet.create((theme) => {
           color: "primary",
           variant: "outline",
           styles: {
-            backgroundColor: "transparent",
             borderColor: c["accent.soft.bg"],
             borderWidth: 1,
           },
@@ -368,7 +385,6 @@ const styles = StyleSheet.create((theme) => {
           color: "secondary",
           variant: "outline",
           styles: {
-            backgroundColor: "transparent",
             borderColor: c["neutral.soft.bg"],
             borderWidth: 1,
           },
@@ -393,7 +409,6 @@ const styles = StyleSheet.create((theme) => {
           color: "success",
           variant: "outline",
           styles: {
-            backgroundColor: "transparent",
             borderColor: c["success.soft.bg"],
             borderWidth: 1,
           },
@@ -418,7 +433,6 @@ const styles = StyleSheet.create((theme) => {
           color: "warning",
           variant: "outline",
           styles: {
-            backgroundColor: "transparent",
             borderColor: c["warning.soft.bg"],
             borderWidth: 1,
           },
@@ -443,7 +457,6 @@ const styles = StyleSheet.create((theme) => {
           color: "danger",
           variant: "outline",
           styles: {
-            backgroundColor: "transparent",
             borderColor: c["danger.soft.bg"],
             borderWidth: 1,
           },

package/src/components/chip/utils.ts

@@ -6,7 +6,12 @@ import { readableOn, withAlpha } from "#utils/color-utils";
 // full color scheme.
 
 export interface CustomChipColors {
-  bg: string;
+  /**
+   * Undefined for `outline`, which takes the fill its style variant paints
+   * rather than deriving one — the outlined chip's fill is a surface, not a
+   * tint of the literal, so there is nothing here to derive it from.
+   */
+  bg: string | undefined;
   border: string;
   borderWidth: number;
   fg: string;
@@ -22,7 +27,7 @@ export function getCustomColorColors(
   // read as the same weight of colour — one filled, one drawn.
   if (variant === "outline") {
     return {
-      bg: "transparent",
+      bg: undefined,
       border: withAlpha(literal, CUSTOM_COLOR_SOFT_ALPHA),
       borderWidth: 1,
       fg: literal,

package/src/components/header/index.ts

@@ -7,6 +7,7 @@ export {
   type HeaderDismissNavigation,
   type HeaderDismissProps,
 } from "./header-buttons";
+export type { HeaderAccessoryBehavior, HeaderAccessoryPadding } from "./types";
 export type { LargeTitleHeaderProps } from "./variants/LargeTitleHeader";
 export { LargeTitleHeader } from "./variants/LargeTitleHeader";
 export type { TitleHeaderProps } from "./variants/TitleHeader";

package/src/components/header/parts/HeaderAccessory.tsx

@@ -0,0 +1,55 @@
+import { type ReactNode, useCallback, useEffect } from "react";
+import { type LayoutChangeEvent, type StyleProp, View, type ViewStyle } from "react-native";
+
+import Animated from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+
+import type { HeaderAccessoryPadding } from "../types";
+
+export interface HeaderAccessoryProps {
+  children: ReactNode;
+  /** Horizontal padding around the accessory. */
+  padding: HeaderAccessoryPadding;
+  /** Reports layout height in dp; reports zero on cleanup to release reserved space. */
+  onHeightChange: (height: number) => void;
+  /** Additional styles for the accessory container. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Measures accessory content so the header can reserve space in the scroll container. */
+export function HeaderAccessory({ children, padding, onHeightChange, style }: HeaderAccessoryProps) {
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      onHeightChange(event.nativeEvent.layout.height);
+    },
+    [onHeightChange]
+  );
+
+  // Release the previous owner’s space when the callback changes or the accessory unmounts.
+  useEffect(() => () => onHeightChange(0), [onHeightChange]);
+
+  styles.useVariants({ padding });
+
+  return (
+    <Animated.View style={[styles.accessory, style]} onLayout={handleLayout}>
+      {children}
+    </Animated.View>
+  );
+}
+
+/** Reserves scroll-content space for the sticky accessory rendered in the header overlay. */
+export function HeaderAccessorySpacer({ height }: { height: number }) {
+  return <View style={styles.spacer(height)} />;
+}
+
+const styles = StyleSheet.create((theme) => ({
+  accessory: {
+    variants: {
+      padding: {
+        x: { paddingHorizontal: theme.layout.screen.padding.x },
+        none: {},
+      },
+    },
+  },
+  spacer: (height: number) => ({ height }),
+}));

package/src/components/header/parts/HeaderSurface.tsx

@@ -0,0 +1,62 @@
+import { View } from "react-native";
+
+import Animated, { type useAnimatedStyle } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+
+import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "./HeaderGradientOverlay";
+
+type HeaderOpacityStyle = ReturnType<typeof useAnimatedStyle<{ opacity: number }>>;
+
+export interface HeaderSurfaceProps {
+  /** Fill color, fading to fully transparent along the bottom edge. */
+  color: string;
+  /** Opacity style for variants that fade the whole surface in as they collapse. */
+  animatedStyle?: HeaderOpacityStyle;
+  /**
+   * Height of the bottom gradient in dp. The region above it uses a solid fill.
+   * @defaultValue The themed bar height plus `HEADER_FADE_EXTENT`.
+   */
+  fadeHeight?: number;
+}
+
+/**
+ * Header background with a solid fill and a bottom gradient.
+ * A fixed gradient height keeps tall accessories from becoming translucent.
+ */
+export function HeaderSurface({ color, animatedStyle, fadeHeight }: HeaderSurfaceProps) {
+  return (
+    <Animated.View style={[styles.surface, animatedStyle]} pointerEvents="none">
+      <View style={styles.fill(color, fadeHeight)} />
+      <View style={styles.fade(fadeHeight)}>
+        <HeaderGradientOverlay color={color} />
+      </View>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create((theme) => ({
+  // Extend the fade below the header's layout bounds.
+  surface: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: -HEADER_FADE_EXTENT,
+  },
+  // Fill the region above the gradient.
+  fill: (color: string, fadeHeight: number | undefined) => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: fadeHeight ?? theme.layout.header.height + HEADER_FADE_EXTENT,
+    backgroundColor: color,
+  }),
+  fade: (fadeHeight: number | undefined) => ({
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: fadeHeight ?? theme.layout.header.height + HEADER_FADE_EXTENT,
+  }),
+}));

package/src/components/header/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Horizontal padding around a header accessory.
+ * - `'x'`: match the header bar's horizontal padding.
+ * - `'none'`: extend to the screen edges, for example for a scrollable tab strip.
+ */
+export type HeaderAccessoryPadding = "x" | "none";
+
+/**
+ * Accessory placement while a large-title header scrolls.
+ * - `'pinned'`: remain directly below the compact bar.
+ * - `'sticky'`: scroll with the large title, then pin below the compact bar.
+ *
+ * Used by `Header.LargeTitle`. A hidden large title always uses pinned placement.
+ */
+export type HeaderAccessoryBehavior = "pinned" | "sticky";

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

@@ -1,5 +1,5 @@
-import { useEffect } from "react";
-import { Text, View } from "react-native";
+import { useCallback, useEffect, useState } from "react";
+import { type LayoutChangeEvent, Text, View } from "react-native";
 
 import Animated, { interpolate, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
 import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -11,7 +11,10 @@ import { useHeaderBackground } from "../../../screen/parts/ScreenHeaderAppearanc
 import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "../../../screen/ScreenContext";
 import { Toolbar } from "../../../toolbar";
 import { HeaderDismissButton } from "../../header-buttons";
-import { HEADER_FADE_EXTENT, HeaderGradientOverlay } from "../../parts/HeaderGradientOverlay";
+import { HeaderAccessory, HeaderAccessorySpacer } from "../../parts/HeaderAccessory";
+import { HEADER_FADE_EXTENT } from "../../parts/HeaderGradientOverlay";
+import { HeaderSurface } from "../../parts/HeaderSurface";
+import type { HeaderAccessoryBehavior } from "../../types";
 import { isCustomTitle, isTextTitle } from "../../utils";
 import type { TitleHeaderProps } from "../TitleHeader";
 
@@ -29,6 +32,12 @@ export interface LargeTitleHeaderProps extends TitleHeaderProps {
   subtitle?: string;
   /** Hide the large title (keeps the compact bar). Defaults to `false`. */
   isLargeTitleHidden?: boolean;
+  /**
+   * How `accessory` moves while scrolling. `'sticky'` starts below the large title
+   * and pins below the compact bar when scrolled up. A hidden large title always pins.
+   * @defaultValue 'pinned'
+   */
+  accessoryBehavior?: HeaderAccessoryBehavior;
   /**
    * Placement of the compact bar title. The large title stack always stays
    * left-aligned. Defaults to `'center'`.
@@ -40,7 +49,11 @@ function LargeTitlePortalContent({
   title,
   overline,
   subtitle,
-}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle">) {
+  onHeightChange,
+}: Pick<LargeTitleHeaderProps, "title" | "overline" | "subtitle"> & {
+  /** Reports the large-title block's layout height in dp. */
+  onHeightChange?: (height: number) => void;
+}) {
   const { theme } = useUnistyles();
   const { scrollY } = useScreen();
 
@@ -62,8 +75,11 @@ function LargeTitlePortalContent({
     };
   });
 
+  // Layout height excludes the collapse transform.
+  const handleLayout = (event: LayoutChangeEvent) => onHeightChange?.(event.nativeEvent.layout.height);
+
   return (
-    <Animated.View style={[styles.portalContent, largeTitleAnimatedStyle]}>
+    <Animated.View style={[styles.portalContent, largeTitleAnimatedStyle]} onLayout={handleLayout}>
       {!!overline && (
         <Text
           style={styles.overline}
@@ -123,6 +139,9 @@ export function LargeTitleHeader({
   trailingActions,
   LeftToolbar,
   RightToolbar,
+  accessory,
+  accessoryPadding = "x",
+  accessoryBehavior = "pinned",
   dismissAction = "none",
   navigation,
   onDismiss,
@@ -133,7 +152,7 @@ export function LargeTitleHeader({
 }: LargeTitleHeaderProps) {
   const { theme } = useUnistyles();
 
-  const { scrollY, background: screenBackground } = useScreen();
+  const { scrollY, background: screenBackground, setHeaderAccessoryHeight, contentTopPadding } = useScreen();
   const colorToken = background ?? bg;
   const bgColor =
     (colorToken ? resolveThemeColor(colorToken, theme) : screenBackground) ?? theme.color["surface.canvas"];
@@ -141,7 +160,39 @@ export function LargeTitleHeader({
   const trailingContent = trailingActions !== undefined ? trailingActions : RightToolbar;
 
   const gradientColor = bgColor;
+  const isSticky = accessoryBehavior === "sticky" && !isLargeTitleHidden;
+  // Sticky accessories reserve space below the large title; pinned ones add top padding.
+  const [stickyAccessoryHeight, setStickyAccessoryHeight] = useState(0);
+  const [largeTitleHeight, setLargeTitleHeight] = useState(0);
   const isLargeTitleHiddenValue = useSharedValue(isLargeTitleHidden);
+
+  const handleAccessoryHeightChange = useCallback(
+    (height: number) => {
+      if (isSticky) setStickyAccessoryHeight(Math.max(0, Math.round(height)));
+      else setHeaderAccessoryHeight(height);
+    },
+    [isSticky, setHeaderAccessoryHeight]
+  );
+
+  const handleLargeTitleHeightChange = useCallback((height: number) => {
+    setLargeTitleHeight(Math.max(0, Math.round(height)));
+  }, []);
+
+  // Rest below the title, including the scroll container's top padding.
+  const stickyAccessoryOffset = Math.max(
+    0,
+    contentTopPadding + largeTitleHeight - theme.layout.header.height
+  );
+
+  // Zero translation places the accessory directly below the compact bar.
+  const stickyAccessoryStyle = useAnimatedStyle(() => {
+    if (isLargeTitleHiddenValue.value) {
+      return { transform: [{ translateY: 0 }] };
+    }
+    return {
+      transform: [{ translateY: Math.max(0, stickyAccessoryOffset - scrollY.value) }],
+    };
+  });
   const headerCollapseHeight = theme.layout.header.height;
   styles.useVariants({ titleAlignment });
 
@@ -209,56 +260,77 @@ export function LargeTitleHeader({
     );
 
   return (
-    <View style={styles.container}>
+    // Let touches in the expanded header's empty space reach the scroll content.
+    <View style={styles.container(isSticky ? stickyAccessoryOffset : 0)} pointerEvents="box-none">
       {!isLargeTitleHidden && (
         <Portal hostName={SCREEN_HEADER_PORTAL_HOST}>
-          <LargeTitlePortalContent title={title} overline={overline} subtitle={subtitle} />
+          <LargeTitlePortalContent
+            title={title}
+            overline={overline}
+            subtitle={subtitle}
+            onHeightChange={isSticky ? handleLargeTitleHeightChange : undefined}
+          />
+          {/* Reserve space for the accessory rendered in the overlay. */}
+          {isSticky && accessory != null && <HeaderAccessorySpacer height={stickyAccessoryHeight} />}
         </Portal>
       )}
-      <View style={styles.bar}>
-        <Animated.View style={[styles.gradient, gradientOpacityStyle]} pointerEvents="none">
-          <HeaderGradientOverlay color={gradientColor} />
-        </Animated.View>
-        {leading != null && <Toolbar>{leading}</Toolbar>}
-        {/* Text can never be the touch target, but custom content may be, so its
-            container passes touches through to it instead of swallowing them. */}
-        <Animated.View
-          style={[styles.titleContainer, compactTitleAnimatedStyle]}
-          pointerEvents={isCustomTitle(title) ? "box-none" : "none"}
-        >
-          {isTextTitle(title) ? (
-            <AnimatedText
-              style={styles.compactTitle}
-              maxFontSizeMultiplier={theme.typography.variants["title-md"].maxFontSizeMultiplier}
-            >
-              {title}
-            </AnimatedText>
-          ) : (
-            title
-          )}
-        </Animated.View>
-        {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
+      {/* Share a background between the bar and a pinned accessory. */}
+      <View style={styles.barGroup}>
+        <HeaderSurface color={gradientColor} animatedStyle={gradientOpacityStyle} />
+        <View style={styles.bar}>
+          {leading != null && <Toolbar>{leading}</Toolbar>}
+          {/* Text can never be the touch target, but custom content may be, so its
+              container passes touches through to it instead of swallowing them. */}
+          <Animated.View
+            style={[styles.titleContainer, compactTitleAnimatedStyle]}
+            pointerEvents={isCustomTitle(title) ? "box-none" : "none"}
+          >
+            {isTextTitle(title) ? (
+              <AnimatedText
+                style={styles.compactTitle}
+                maxFontSizeMultiplier={theme.typography.variants["title-md"].maxFontSizeMultiplier}
+              >
+                {title}
+              </AnimatedText>
+            ) : (
+              title
+            )}
+          </Animated.View>
+          {trailing != null && <Toolbar style={styles.trailing}>{trailing}</Toolbar>}
+        </View>
+        {accessory != null && !isSticky && (
+          <HeaderAccessory padding={accessoryPadding} onHeightChange={handleAccessoryHeightChange}>
+            {accessory}
+          </HeaderAccessory>
+        )}
       </View>
+      {accessory != null && isSticky && (
+        // The background moves with the sticky accessory.
+        <Animated.View style={[styles.stickyAccessory, stickyAccessoryStyle]}>
+          <HeaderSurface color={gradientColor} fadeHeight={HEADER_FADE_EXTENT} />
+          <HeaderAccessory padding={accessoryPadding} onHeightChange={handleAccessoryHeightChange}>
+            {accessory}
+          </HeaderAccessory>
+        </Animated.View>
+      )}
     </View>
   );
 }
 
 const styles = StyleSheet.create((theme) => ({
-  container: {
+  // Include the translated accessory in the parent's touchable bounds.
+  container: (accessoryOffset: number) => ({
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     zIndex: 1000,
-  },
-  // Let the fade extend below the bar without intercepting touches.
-  gradient: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: -HEADER_FADE_EXTENT,
-  },
+    paddingBottom: accessoryOffset,
+  }),
+  // Normal flow places the accessory directly below the bar.
+  stickyAccessory: { position: "relative" },
+  // Anchors the absolutely positioned surface over the bar and the accessory both.
+  barGroup: { position: "relative" },
   bar: {
     height: theme.layout.header.height,
     flexDirection: "row",
@@ -282,7 +354,7 @@ const styles = StyleSheet.create((theme) => ({
   portalContent: {
     gap: 2,
     minHeight: theme.layout.header.height,
-    paddingBottom: theme.spacing["3"],
+    paddingBottom: theme.spacing["1"],
     paddingHorizontal: theme.layout.screen.padding.x,
   },
   overline: {