@oxyhq/bloom 0.46.0 → 0.49.0

package/src/dialog/DialogBottomSheet.tsx

@@ -6,12 +6,25 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { View, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
 import { DialogBody } from './DialogContent';
+import {
+  DIALOG_NAV_BAR_HEIGHT,
+  DialogHeaderProvider,
+  DialogLargeTitle,
+  DialogNavHeader,
+  useDialogHeaderController,
+} from './DialogHeader';
+import { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
@@ -43,15 +56,19 @@ import type { DialogControlProps, DialogProps } from './types';
 export function DialogBottomSheet({
   control,
   open: controlledOpen,
+  startOpen,
   onClose,
   testID,
   title,
   description,
   actions,
+  header,
   maxHeightRatio = DEFAULT_MAX_HEIGHT_RATIO,
   showHandle = true,
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
+  scrollable,
+  morph,
   style,
   panelStyle,
   panelClassName,
@@ -62,10 +79,12 @@ export function DialogBottomSheet({
 }: DialogBottomSheetProps) {
   const isControlled = controlledOpen !== undefined;
   const theme = useTheme();
+  const { height: viewportHeight } = useWindowDimensions();
   const ref = useRef<BottomSheetRef>(null);
   const closeCallbacks = useRef<(() => void)[]>([]);
   const titleId = useId();
   const descriptionId = useId();
+  const headerController = useDialogHeaderController();
 
   // Read the latest controlled flag / `onClose` inside stable callbacks without
   // re-binding them (the context + imperative handle depend on `close` staying
@@ -144,6 +163,19 @@ export function DialogBottomSheet({
     [dismissOnBackdrop],
   );
 
+  const scrollableResolved = scrollable ?? true;
+
+  // Size morphing across an in-place content swap. The sheet is anchored at the
+  // bottom, so animating its height makes it grow/shrink from that edge; its
+  // width is fixed by the placement. The sheet's own `maxHeight` (the ratio
+  // percentage + the safe-area clamp inside `BottomSheet`) does the exact
+  // capping — the viewport is just the bound the reshape may not exceed.
+  const morphState = useDialogMorph({
+    enabled: morph !== false,
+    measurable: scrollableResolved,
+    maxHeight: viewportHeight,
+  });
+
   // `panelStyle` paints the sheet surface (e.g. a brand background). It composes
   // AFTER the BottomSheet's internal background so a host palette wins; the
   // shape (radius, max height) is supplied here and remains overridable.
@@ -157,48 +189,105 @@ export function DialogBottomSheet({
         maxHeight: maxHeightPercent,
       },
       panelStyle,
+      // Drives the card's `height` only while a morph is in flight; at rest it
+      // resolves to `height: 'auto'` — the sheet's normal content sizing.
+      morphState.panelStyle,
     ];
-  }, [theme.colors.background, maxHeightRatio, panelStyle]);
+  }, [theme.colors.background, maxHeightRatio, panelStyle, morphState.panelStyle]);
 
   // Does this dialog render bloom's declarative chrome (title / description /
-  // actions), or is it pure custom `children`? Pure custom children own their
-  // own layout and scrolling, so we render them through a NON-scrollable
-  // BottomSheet body — otherwise the sheet's internal ScrollView would wrap a
-  // child that already contains its own scroller, producing a scroll-in-scroll
-  // (double scroll container). Declarative dialogs are short and keep the
-  // sheet's default scrollable body so they degrade gracefully on small
-  // viewports. This only changes what `DialogBottomSheet` passes to
-  // `BottomSheet`; the standalone `BottomSheet` API and its `scrollable` default
-  // are unchanged for direct consumers.
+  // actions)? This no longer gates the SCROLL decision (that is now the explicit
+  // `scrollable` prop below) — it only opts declarative dialogs into the
+  // gorhom-style pan coordination for their internal ScrollView. A declarative
+  // dialog overflowing on a small viewport needs the coordinated pan so the body
+  // scrolls instead of the drag stealing every vertical gesture; pure-custom
+  // children keep the legacy always-active pan.
   const hasDeclarativeChrome =
     title !== undefined ||
     description !== undefined ||
     (actions !== undefined && actions.length > 0);
 
+  const dialogBody = (
+    <DialogBody
+      titleId={titleId}
+      descriptionId={descriptionId}
+      title={title}
+      description={description}
+      actions={actions}
+    >
+      {children}
+    </DialogBody>
+  );
+
+  // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
+  // collapsing title over the sheet's OWN scroll content. The bar floats via the
+  // BottomSheet `headerOverlay` slot; the sheet's scroll offset feeds the shared
+  // controller (`scrollY`) that drives the small-title cross-fade. `contentPadding`
+  // is dropped (the large title + screens own their padding).
+  const headerBody = header ? (
+    scrollableResolved ? (
+      <>
+        <DialogLargeTitle controller={headerController} header={header} />
+        <DialogHeaderProvider controller={headerController}>{dialogBody}</DialogHeaderProvider>
+      </>
+    ) : (
+      <>
+        <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
+        <DialogHeaderProvider controller={headerController}>{dialogBody}</DialogHeaderProvider>
+      </>
+    )
+  ) : null;
+
   return (
     <BottomSheet
       ref={ref}
+      // Seed the sheet's open state so a fresh mount that should be open renders
+      // visible on its FIRST commit instead of relying on a present()-in-effect
+      // that races the mount and flashes blank. In controlled mode that seed is
+      // `controlledOpen`; in imperative mode it is the surface's `startOpen`
+      // intent — which is what lets a responsive Dialog survive a resize
+      // placement swap (centered card → bottom sheet) STILL OPEN.
+      open={isControlled ? controlledOpen : startOpen}
       onDismiss={handleDismiss}
       onDismissAttempt={onDismissAttempt}
       enablePanDownToClose
-      showHandle={showHandle}
-      // Pure custom children own scrolling → opt OUT of BottomSheet's internal
-      // ScrollView so there is exactly ONE scroll container (no scroll-in-scroll).
-      scrollable={hasDeclarativeChrome}
-      // Declarative dialogs (title/description/actions) that overflow render a
-      // tall body inside BottomSheet's internal ScrollView. Opt those sheets into
+      // Nav-header mode hides the drag handle (the nav bar sits at the very top);
+      // drag-to-dismiss still works via the coordinated body pan.
+      showHandle={header ? false : showHandle}
+      // Content scrolls inside the sheet's internal ScrollView by default; the
+      // Dialog owns the scroll boundary. A surface whose content owns its own
+      // scroller (a FlatList / VirtualizedList) passes `scrollable={false}` to
+      // opt OUT so there is exactly ONE scroll container (no scroll-in-scroll,
+      // no "VirtualizedList inside a plain ScrollView" warning).
+      scrollable={scrollableResolved}
+      // Declarative dialogs (title/description/actions) that overflow — AND every
+      // nav-header page (its scroll content overflows by design) — need
       // gorhom-style pan coordination: the drag-to-dismiss pan only activates
       // when the ScrollView is at the top AND the finger moves down >8dp —
       // otherwise the ScrollView owns the touch. Without this the always-active
       // legacy body-pan steals vertical drags and a tall body cannot scroll
       // (dragging up dismisses the sheet / bleeds into the parent instead). The
       // standalone `BottomSheet` API keeps its legacy `manualActivation={false}`
-      // default, so direct consumers are unaffected. Gated on the same flag as
-      // `scrollable` because only the internal-ScrollView path needs it.
-      manualActivation={hasDeclarativeChrome}
+      // default, so direct consumers are unaffected.
+      manualActivation={header ? scrollableResolved : hasDeclarativeChrome}
+      // Feed the sheet's scroll offset into the nav header's collapse controller.
+      scrollY={header ? headerController.scrollY : undefined}
+      // Float the sticky nav bar over the scroll body (clipped to the sheet top).
+      headerOverlay={
+        header ? (
+          <DialogNavHeader
+            controller={headerController}
+            header={header}
+            onDismiss={close}
+            collapse={scrollableResolved}
+          />
+        ) : undefined
+      }
       // Stronger dim than a lone sheet so an underlying sheet's handle/content
       // doesn't bleed through when a Dialog is stacked over one.
       backdropOpacity={SHEET_BACKDROP_OPACITY + 0.3}
+      // Measures the sheet card — the size a morph starts from.
+      onLayout={morphState.onPanelLayout}
       style={sheetStyle}
     >
       <Context.Provider value={context}>
@@ -210,7 +299,9 @@ export function DialogBottomSheet({
           {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
           {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
           style={[
-            { padding: contentPadding },
+            // Nav-header mode: the large title + screens own their padding, so the
+            // wrapper adds none. Otherwise the Dialog's uniform content padding.
+            header ? null : { padding: contentPadding },
             // `containerStyle` carries the host's CSS-var theme scope; it wraps
             // the content subtree so descendants read the scoped palette.
             containerStyle,
@@ -218,15 +309,12 @@ export function DialogBottomSheet({
             panelStyle,
           ]}
         >
-          <DialogBody
-            titleId={titleId}
-            descriptionId={descriptionId}
-            title={title}
-            description={description}
-            actions={actions}
-          >
-            {children}
-          </DialogBody>
+          {/* The morph layer is its own node INSIDE the class-name'd container:
+              a className'd component's `onLayout` never fires on web, and this
+              one has to measure the incoming frame. */}
+          <DialogMorphContent morph={morphState}>
+            {header ? headerBody : dialogBody}
+          </DialogMorphContent>
         </View>
       </Context.Provider>
     </BottomSheet>
@@ -242,15 +330,19 @@ export type DialogBottomSheetProps = Pick<
   DialogProps,
   | 'control'
   | 'open'
+  | 'startOpen'
   | 'onClose'
   | 'testID'
   | 'title'
   | 'description'
   | 'actions'
+  | 'header'
   | 'maxHeightRatio'
   | 'showHandle'
   | 'dismissOnBackdrop'
   | 'contentPadding'
+  | 'scrollable'
+  | 'morph'
   | 'style'
   | 'panelStyle'
   | 'panelClassName'

package/src/dialog/DialogHeader.tsx

@@ -0,0 +1,429 @@
+import React, {
+  createContext,
+  memo,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useSyncExternalStore,
+} from 'react';
+import {
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+import {
+  ChevronLeft_Stroke2_Corner0_Rounded,
+  TimesLarge_Stroke2_Corner0_Rounded,
+} from '../icons';
+import { FrostedIconButton } from '../frosted-icon-button';
+import { useTheme } from '../theme/use-theme';
+import { H1, Text } from '../typography';
+import type { DialogHeaderConfig } from './types';
+
+export type { DialogHeaderConfig } from './types';
+
+// ---------------------------------------------------------------------------
+//  Dialog-owned navigation header (iOS large-title collapse).
+//
+//  This is a DISTINCT surface mode from the declarative
+//  `title`/`description`/`actions` centered-heading path: it turns the Dialog
+//  into a scrolling page with a sticky, gradient top bar (left + right slots)
+//  and a large collapsing title that lives in the Dialog's OWN scroll content.
+//  As the large title scrolls under the bar, a small title cross-fades into the
+//  bar center.
+//
+//  Screens render NO header of their own — they declare their title/subtitle
+//  (via the surface registry) or contribute runtime slots (a Save action, a
+//  dynamic title) through {@link useDialogHeader}.
+// ---------------------------------------------------------------------------
+
+/** Interactive nav-bar row height (px). Buttons + collapsed title live here. */
+export const DIALOG_NAV_BAR_HEIGHT = 52;
+
+/** Extra gradient tail (px) below the bar, over which scrolled content fades. */
+const GRADIENT_FADE = 20;
+
+/** Total gradient overlay height (bar + fade tail). */
+export const DIALOG_HEADER_OVERLAY_HEIGHT = DIALOG_NAV_BAR_HEIGHT + GRADIENT_FADE;
+
+/**
+ * Top inset applied to the Dialog's scroll content so the large title starts
+ * BELOW the whole gradient overlay (fully clear at rest, then scrolls under it).
+ */
+export const DIALOG_HEADER_CONTENT_TOP = DIALOG_HEADER_OVERLAY_HEIGHT;
+
+/** Horizontal gutter — matches the `screen-margin` (20px) SDK screens use. */
+const HEADER_H_PADDING = 20;
+
+/** Circular icon-button diameter for the default back / close affordances. */
+const NAV_BUTTON_SIZE = 36;
+
+// --- Runtime override store (child screen → nav bar / large title) ----------
+//
+// The nav bar overlay and the in-content large title live in DIFFERENT subtrees
+// (the bar is a sibling ABOVE the scroller; the large title + the screen are
+// inside it), so a plain React ancestor context cannot bridge a screen's runtime
+// contribution up to the bar. We use a tiny external store instead: the screen
+// writes its override through {@link useDialogHeader}; the bar and large title
+// read it via `useSyncExternalStore`. Only those two re-render — never the
+// screen subtree — and there is no shared-ancestor constraint.
+
+interface HeaderStore {
+  getSnapshot: () => DialogHeaderConfig | null;
+  setOverride: (next: DialogHeaderConfig | null) => void;
+  subscribe: (listener: () => void) => () => void;
+}
+
+function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return (
+    a.title === b.title &&
+    a.titleContent === b.titleContent &&
+    a.subtitle === b.subtitle &&
+    a.largeTitle === b.largeTitle &&
+    a.left === b.left &&
+    a.right === b.right &&
+    a.onBack === b.onBack &&
+    a.showClose === b.showClose
+  );
+}
+
+function createHeaderStore(): HeaderStore {
+  let override: DialogHeaderConfig | null = null;
+  const listeners = new Set<() => void>();
+  return {
+    getSnapshot: () => override,
+    setOverride: (next) => {
+      if (configsEqual(override, next)) return;
+      override = next;
+      for (const l of listeners) l();
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+  };
+}
+
+/**
+ * The per-surface header controller — the scroll offset + measured large-title
+ * height shared values plus the runtime-override store. Created once per Dialog
+ * (via {@link useDialogHeaderController}) and threaded into the scroller (writes
+ * `scrollY`), the nav bar, the large title, and the child provider.
+ */
+export interface DialogHeaderController {
+  scrollY: SharedValue<number>;
+  largeTitleHeight: SharedValue<number>;
+  store: HeaderStore;
+}
+
+/** Create the header controller for one Dialog. Stable for the Dialog's life. */
+export function useDialogHeaderController(): DialogHeaderController {
+  const scrollY = useSharedValue(0);
+  const largeTitleHeight = useSharedValue(0);
+  const store = useMemo(() => createHeaderStore(), []);
+  return useMemo(
+    () => ({ scrollY, largeTitleHeight, store }),
+    [scrollY, largeTitleHeight, store],
+  );
+}
+
+const DialogHeaderContext = createContext<DialogHeaderController | null>(null);
+
+/**
+ * Wraps the Dialog's scroll content so a mounted screen can contribute header
+ * slots via {@link useDialogHeader}. Only the child subtree needs this — the nav
+ * bar and large title read the same controller directly.
+ */
+export function DialogHeaderProvider({
+  controller,
+  children,
+}: {
+  controller: DialogHeaderController;
+  children: React.ReactNode;
+}): React.ReactElement {
+  return (
+    <DialogHeaderContext.Provider value={controller}>
+      {children}
+    </DialogHeaderContext.Provider>
+  );
+}
+
+/**
+ * Contribute header content from within a Dialog surface — a dynamic title, a
+ * Save action, custom slots. Merges over the surface's static (registry) header
+ * config; unmounting clears the contribution. Slot nodes (`left`/`right`) MUST
+ * be referentially stable (memoize them) so the effect does not thrash.
+ *
+ * No-op outside a header-mode Dialog (e.g. a confirm dialog), so a screen can
+ * call it unconditionally.
+ */
+export function useDialogHeader(config: DialogHeaderConfig | null | undefined): void {
+  const controller = useContext(DialogHeaderContext);
+  const store = controller?.store;
+  // Set synchronously in the commit's layout phase so the bar/title fill in
+  // BEFORE the browser paints — no first-frame flash of an empty bar.
+  useLayoutEffect(() => {
+    if (!store) return;
+    store.setOverride(config ?? null);
+    return () => store.setOverride(null);
+    // Slot nodes are compared by identity; callers memoize them.
+  }, [
+    store,
+    config?.title,
+    config?.titleContent,
+    config?.subtitle,
+    config?.largeTitle,
+    config?.left,
+    config?.right,
+    config?.onBack,
+    config?.showClose,
+  ]);
+}
+
+/** Read the merged (base + runtime-override) header config, reactively. */
+function useMergedHeaderConfig(
+  base: DialogHeaderConfig,
+  store: HeaderStore,
+): DialogHeaderConfig {
+  const override = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return useMemo(() => (override ? { ...base, ...override } : base), [base, override]);
+}
+
+// --- Nav bar overlay --------------------------------------------------------
+
+/**
+ * The sticky nav bar: gradient background + left / center (collapsing title) /
+ * right slots. Absolutely positioned at the top of the Dialog surface, painted
+ * ABOVE the scroll content. Reads the scroll offset to cross-fade the small
+ * title in as the large title scrolls under it.
+ *
+ * `onDismiss` is the Dialog's own close (the default right-slot close button
+ * calls it) — passed explicitly rather than read from the dialog context because
+ * the bar is rendered as a sibling of the scroller, outside that context on the
+ * bottom-sheet path.
+ */
+export const DialogNavHeader = memo(function DialogNavHeader({
+  controller,
+  header,
+  onDismiss,
+  collapse = true,
+  style,
+}: {
+  controller: DialogHeaderController;
+  header: DialogHeaderConfig;
+  onDismiss: () => void;
+  /**
+   * Whether the small title cross-fades in on scroll (paired with an in-content
+   * {@link DialogLargeTitle}). Defaults to `true`. Set `false` for a surface
+   * whose content owns its own scroller (no Dialog scroll offset to drive the
+   * collapse): the small title is then always visible — a plain titled nav bar.
+   */
+  collapse?: boolean;
+  style?: StyleProp<ViewStyle>;
+}) {
+  const theme = useTheme();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const { scrollY, largeTitleHeight } = controller;
+
+  // A branded `titleContent` owns the bar centre outright: it is always visible,
+  // so there is nothing to collapse and no large in-content title to collapse under.
+  const hasLargeTitle =
+    collapse && !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+
+  const titleStyle = useAnimatedStyle(() => {
+    // When there is no large title to collapse under, the bar title is always
+    // shown (a plain, non-collapsing nav bar). Otherwise it cross-fades in as the
+    // large title scrolls up under the bar.
+    if (!hasLargeTitle) return { opacity: 1, transform: [{ translateY: 0 }] };
+    const threshold = largeTitleHeight.value > 0 ? largeTitleHeight.value : 44;
+    const start = threshold * 0.35;
+    const end = threshold * 0.9;
+    return {
+      opacity: interpolate(scrollY.value, [start, end], [0, 1], Extrapolation.CLAMP),
+      transform: [
+        { translateY: interpolate(scrollY.value, [start, end], [10, 0], Extrapolation.CLAMP) },
+      ],
+    };
+    // Reanimated on RN-Web has no worklets plugin: every shared value the mapper
+    // reads MUST be in the deps array or it freezes on the first frame.
+  }, [scrollY, largeTitleHeight, hasLargeTitle]);
+
+  const left =
+    config.left ??
+    (config.onBack ? (
+      <FrostedIconButton
+        onPress={config.onBack}
+        accessibilityLabel="Go back"
+        icon={<ChevronLeft_Stroke2_Corner0_Rounded size="md" />}
+      />
+    ) : null);
+
+  const right =
+    config.right ??
+    (config.showClose !== false ? (
+      <FrostedIconButton
+        onPress={onDismiss}
+        accessibilityLabel="Close"
+        icon={<TimesLarge_Stroke2_Corner0_Rounded size="md" />}
+      />
+    ) : null);
+
+  return (
+    <View
+      pointerEvents="box-none"
+      style={[styles.overlay, style]}
+    >
+      {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
+          content fades out under the bar. Pure NativeWind — no SVG dependency. */}
+      <View
+        pointerEvents="none"
+        className="bg-gradient-to-b from-bg to-transparent"
+        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT }]}
+      />
+      <View pointerEvents="box-none" style={styles.navRow}>
+        <View style={styles.side}>{left}</View>
+        <Animated.View
+          pointerEvents="none"
+          testID="dialog-nav-title"
+          style={[styles.centerTitle, titleStyle]}
+        >
+          {config.titleContent ?? null}
+          {!config.titleContent && config.title ? (
+            <Text numberOfLines={1} style={[styles.smallTitle, { color: theme.colors.text }]}>
+              {config.title}
+            </Text>
+          ) : null}
+          {/* The subtitle rides along ONLY in the static (non-collapsing) bar —
+              own-scroller screens whose subtitle is a short count. A large-title
+              screen keeps a clean single-line collapsed title, and a branded
+              `titleContent` bar carries no supporting copy at all. */}
+          {!hasLargeTitle && !config.titleContent && config.subtitle ? (
+            <Text
+              numberOfLines={1}
+              style={[styles.smallSubtitle, { color: theme.colors.textSecondary }]}
+            >
+              {config.subtitle}
+            </Text>
+          ) : null}
+        </Animated.View>
+        <View style={[styles.side, styles.sideRight]}>{right}</View>
+      </View>
+    </View>
+  );
+});
+
+// --- In-content large title -------------------------------------------------
+
+/**
+ * The large collapsing title, rendered at the TOP of the Dialog's scroll content
+ * (before the screen body). Owns the content top inset (so the title starts
+ * below the gradient overlay) and measures its own text height into the
+ * controller so the nav bar knows when to cross-fade the small title in.
+ */
+export const DialogLargeTitle = memo(function DialogLargeTitle({
+  controller,
+  header,
+}: {
+  controller: DialogHeaderController;
+  header: DialogHeaderConfig;
+}) {
+  const theme = useTheme();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const { largeTitleHeight } = controller;
+
+  // A branded `titleContent` lives in the bar and never collapses, so the
+  // surface starts flush under the bar with no large title above it.
+  const hasLargeTitle = !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    largeTitleHeight.value = e.nativeEvent.layout.height;
+  };
+
+  if (!hasLargeTitle) {
+    // No large title: just inset the content below the nav bar.
+    return <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
+  }
+
+  return (
+    <>
+      <View style={{ height: DIALOG_HEADER_CONTENT_TOP }} />
+      <View onLayout={onLayout} testID="dialog-large-title" style={styles.largeTitleBlock}>
+        <H1 style={[styles.largeTitle, { color: theme.colors.text }]}>{config.title}</H1>
+        {config.subtitle ? (
+          <Text style={[styles.largeSubtitle, { color: theme.colors.textSecondary }]}>
+            {config.subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </>
+  );
+});
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: DIALOG_HEADER_OVERLAY_HEIGHT,
+    zIndex: 10,
+  },
+  navRow: {
+    height: DIALOG_NAV_BAR_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: HEADER_H_PADDING - 4,
+  },
+  side: {
+    minWidth: NAV_BUTTON_SIZE,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sideRight: {
+    justifyContent: 'flex-end',
+  },
+  centerTitle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  smallTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    lineHeight: 20,
+  },
+  smallSubtitle: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 14,
+  },
+  largeTitleBlock: {
+    paddingHorizontal: HEADER_H_PADDING,
+    paddingBottom: 4,
+  },
+  largeTitle: {
+    fontSize: 32,
+    lineHeight: 38,
+    letterSpacing: -0.5,
+    fontWeight: '700',
+  },
+  largeSubtitle: {
+    fontSize: 16,
+    lineHeight: 22,
+    marginTop: 4,
+  },
+});