@momo-kits/foundation 0.169.7-beta.1 → 0.169.7-beta.10

package/Application/BottomTab/index.tsx

@@ -1,5 +1,4 @@
 import {
-  BottomTabBarProps,
   BottomTabNavigationOptions,
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs';
@@ -14,7 +13,6 @@ import {
 } from 'react-native';
 import { Icon } from '../../Icon';
 import { BottomTabProps } from '../types';
-import ScaleSizeProvider from '../ScaleSizeProvider';
 import BottomTabBar, { hasCenterAction } from './BottomTabBar';
 import { TabBarMetrics } from './metrics';
 import { getTabBadge } from './TabBarIcon';
@@ -25,8 +23,6 @@ import TabScreen from './TabScreen';
 import { ApplicationContext } from '../../Context';
 import { useScreenLayout } from '../../Layout';
 
-type SceneInterpolator = BottomTabNavigationOptions['sceneStyleInterpolator'];
-
 const Tab = createBottomTabNavigator();
 
 // the tab screens slide in index order over 280ms, CSS `ease`
@@ -36,11 +32,12 @@ const TAB_SWITCH_SPEC = {
 };
 
 /**
- * Tab slide interpolator. Scene progress is -1 for tabs before the active one and 1 for
- * tabs after it, so they wait a full width off screen on their side.
+ * scene progress is -1 for tabs before the active one, 1 for tabs after it: they wait a full
+ * width off screen on their side
  */
-const getTabSlide = (width: number): SceneInterpolator => {
-  return ({ current }) => ({
+const getTabSlide =
+  (width: number): BottomTabNavigationOptions['sceneStyleInterpolator'] =>
+  ({ current }) => ({
     sceneStyle: {
       transform: [
         {
@@ -52,7 +49,6 @@ const getTabSlide = (width: number): SceneInterpolator => {
       ],
     },
   });
-};
 
 /**
  * App tab navigator: the floating bar on phones, the rail or floating bar on
@@ -71,11 +67,11 @@ const BottomTab: React.FC<BottomTabProps> = ({
   const { isIPhoneDuo } = useScreenLayout();
   const { width: windowWidth } = useWindowDimensions();
   const barInset = useDuoTabBarInset();
-  // The center action's button rises above the bar; tab content leaves room for it too.
-  let tabBarInset = barInset;
-  if (barInset && hasCenterAction(floatingButton, tabs.length)) {
-    tabBarInset = barInset + TabBarMetrics.ctaLift;
-  }
+  // the center action's button rises above the bar, tab content leaves room for it too
+  const tabBarInset =
+    barInset && hasCenterAction(floatingButton, tabs.length)
+      ? barInset + TabBarMetrics.ctaLift
+      : barInset;
   const initialIndex = tabs.findIndex(i => i.name === initialRouteName);
   const activeIndex = React.useRef(initialIndex > 0 ? initialIndex : 0);
 
@@ -87,15 +83,15 @@ const BottomTab: React.FC<BottomTabProps> = ({
     });
   }, [navigation]);
 
-  // Focus, not mount/onFocus: popping back from a pushed screen only refocuses BottomTab.
+  // Focus, not mount: pushing a screen from a tab leaves BottomTab mounted but blurred, and
+  // onFocus only fires on tab changes.
   useFocusEffect(
     React.useCallback(() => {
       NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(
         activeIndex.current !== 0,
       );
-      return () => {
+      return () =>
         NativeModules?.MiniAppModule?.setShouldUseFloatingArrowBack?.(false);
-      };
     }, []),
   );
 
@@ -132,21 +128,6 @@ const BottomTab: React.FC<BottomTabProps> = ({
     },
   };
 
-  // One cap for the whole bar (labels, CTA, custom content) so it fits the fixed bar and notch.
-  const renderTabBar = (props: BottomTabBarProps) => {
-    const TabBar = isIPhoneDuo ? DuoTabBar : BottomTabBar;
-    return (
-      <ScaleSizeProvider scaleSizeMaxRate={TabBarMetrics.labelMaxScale}>
-        <TabBar
-          {...props}
-          floatingButton={floatingButton}
-          inactiveTintColor={theme.colors.text.secondary}
-          activeTintColor={theme.colors.primary}
-        />
-      </ScaleSizeProvider>
-    );
-  };
-
   return (
     <DuoBarCompressionProvider
       behavior={compressionBehavior}
@@ -164,7 +145,23 @@ const BottomTab: React.FC<BottomTabProps> = ({
             transitionSpec: TAB_SWITCH_SPEC,
             sceneStyleInterpolator: getTabSlide(windowWidth),
           }}
-          tabBar={renderTabBar}
+          tabBar={props =>
+            isIPhoneDuo ? (
+              <DuoTabBar
+                {...props}
+                floatingButton={floatingButton}
+                inactiveTintColor={theme.colors.text.secondary}
+                activeTintColor={theme.colors.primary}
+              />
+            ) : (
+              <BottomTabBar
+                {...props}
+                floatingButton={floatingButton}
+                inactiveTintColor={theme.colors.text.secondary}
+                activeTintColor={theme.colors.primary}
+              />
+            )
+          }
           initialRouteName={initialRouteName}
         >
           {tabs.map((item, index) => (

package/Application/BottomTab/metrics.ts

@@ -3,41 +3,34 @@ import { Easing } from 'react-native-reanimated';
 import { Colors, Radius, Spacing } from '../../Consts';
 
 /**
- * Navigation bar measurements (Figma "Specs Navigation", DS-984), in sync with momo-native-kits
- * `TabBarMetrics`: the horizontal floating bar (center action in a notch) and the vertical
- * iPhone Duo rail (center action under the container).
+ * Navigation bar measurements (Figma "Specs Navigation", DS-984), kept in sync with
+ * momo-native-kits `TabBarMetrics`
+ * - horizontal: floating container with items split evenly, center action in a notch
+ * - vertical: iPhone Duo rail, center action under the container
  */
 const TabBarMetrics = {
-  height: 60,
+  height: 68,
   margin: Spacing.S,
-  paddingVertical: Spacing.XS,
+  paddingVertical: Spacing.S,
   paddingHorizontal: Spacing.M,
-  itemGap: 1,
-  // gap between the icon slot and the label inside a tab (Figma: none)
-  itemIconLabelGap: 0,
-  // .Nav/Background: no backdrop blur, so use the Figma Blur=Off spec (opacity 95%, no blur) plus the 1px
-  // border — nearly solid, matching the frosted sample; surface keeps dark-mode support
-  backgroundOpacity: 0.95,
-  // white 60% hairline around the center action button (Figma Icon Button border)
-  ctaBorderOpacity: 0.6,
+  itemGap: Spacing.XS,
   iconSize: 24,
   // active indicator behind the icon: 24 icon + XS·M padding
   indicatorPaddingVertical: Spacing.XS,
   indicatorPaddingHorizontal: Spacing.M,
   indicatorRadius: Radius.XL,
   indicatorHeight: 32,
-  labelMaxScale: 1.2,
-  labelHeight: 18,
-  railLabelHeight: 14,
+  // home indicator / gesture bar area under the container
   systemIndicatorHeight: 24,
+  // unfolded foldables (short side from 600, the smallest in the spec) use 65% of the short
+  // side, centered; phones and folded outer displays fill the window
   foldableMinShortSide: 600,
   foldableWidthRatio: 0.65,
-  // a 2-tab bar doesn't stretch to the full width: each item is this fixed width and the bar is
-  // sized to its content, centered (Figma Navigation · 2 Tab: item 100, bar ~225)
-  twoTabItemWidth: 100,
   ctaSlotWidth: 92,
   ctaSize: 48,
+  // the icon sits 10 inside the 48 button (prototype .cta: 28 icon), 12 inside the 52 rail one
   ctaIconSize: 28,
+  // the button rises 22 above the container top edge
   ctaLift: 22,
   ctaLabelGap: Spacing.M,
   ctaLabelHeight: 18,
@@ -58,9 +51,10 @@ const TabBarMetrics = {
 };
 
 /**
- * Navigation bar motion (MoMo Navigation Prototype): the active indicator slides to the
- * selected item with a little overshoot, icon and label tints cross-fade, and the center
- * action shrinks while pressed.
+ * motion of the navigation bar (MoMo Navigation Prototype):
+ * - one active indicator slides to the selected item, overshooting a little
+ * - icons cross-fade and the label color follows
+ * - the center action shrinks while pressed
  */
 const TabBarMotion = {
   indicator: { duration: 550, easing: Easing.bezier(0.34, 1.4, 0.5, 1) },
@@ -91,7 +85,7 @@ const CTA_SHADOW: BoxShadowValue[] = [
 ];
 
 /**
- * Inner light and tint of the active indicator: white 12% from below, primary 12% from above.
+ * inner light and tint of the active indicator: white 12% from below, primary 12% from above
  */
 const getIndicatorShadow = (primary: string): BoxShadowValue[] => [
   {
@@ -105,9 +99,9 @@ const getIndicatorShadow = (primary: string): BoxShadowValue[] => [
 ];
 
 /**
- * Notch dipped into the container top edge under the center action (Figma "Backgroud" path):
+ * notch dipped into the container top edge under the center action (Figma "Backgroud" path):
  * starts NOTCH_HALF_WIDTH left of the center, then cubic segments as [control1, control2, end],
- * each point [dx from the center, dy below the top edge].
+ * each point [dx from the center, dy below the top edge]
  */
 const NOTCH_HALF_WIDTH = 50.758;
 const NOTCH_CURVES: [number, number][][] = [
@@ -134,25 +128,15 @@ const NOTCH_CURVES: [number, number][][] = [
 ];
 
 /**
- * Width of the horizontal bar: 65% of the short side on an unfolded foldable, otherwise the
- * window minus the side safe areas and margins.
+ * width of the horizontal bar: 65% of the short side on an unfolded foldable, otherwise the
+ * window minus the side safe areas and margins
  */
 const getHorizontalBarWidth = (
   width: number,
   height: number,
   insetLeft: number,
   insetRight: number,
-  itemCount: number,
-  hasCta: boolean,
 ) => {
-  // 2 tabs (no center action) stay content-sized and centered instead of filling the window
-  if (itemCount === 2 && !hasCta) {
-    return (
-      TabBarMetrics.twoTabItemWidth * 2 +
-      TabBarMetrics.paddingHorizontal * 2 +
-      TabBarMetrics.itemGap
-    );
-  }
   const shortSide = Math.min(width, height);
   if (shortSide >= TabBarMetrics.foldableMinShortSide) {
     return shortSide * TabBarMetrics.foldableWidthRatio;
@@ -161,16 +145,12 @@ const getHorizontalBarWidth = (
 };
 
 /**
- * Height of the vertical rail container, plus the center action under it.
+ * height of the vertical rail container, plus the center action under it
  */
-const getRailHeight = (tabCount: number, hasCta: boolean) => {
-  const itemsHeight = tabCount * TabBarMetrics.railItemHeight;
-  let ctaHeight = 0;
-  if (hasCta) {
-    ctaHeight = TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight;
-  }
-  return itemsHeight + TabBarMetrics.railPaddingBottom + ctaHeight;
-};
+const getRailHeight = (tabCount: number, hasCta: boolean) =>
+  tabCount * TabBarMetrics.railItemHeight +
+  TabBarMetrics.railPaddingBottom +
+  (hasCta ? TabBarMetrics.railCtaGap + TabBarMetrics.railCtaHeight : 0);
 
 export {
   TabBarMetrics,

package/Application/BottomTab/tabItems.ts

@@ -2,7 +2,7 @@ import { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import { CommonActions, Route } from '@react-navigation/native';
 
 /**
- * Navigation items of the tab bar, with the press handlers of the system tab bar.
+ * navigation items of the tab bar, with the press handlers of the system tab bar
  */
 const getTabItems = ({ state, descriptors, navigation }: BottomTabBarProps) => {
   return state.routes.map((route: Route<string>, index: number) => {

package/Application/BottomTab/usePressLift.ts

@@ -6,11 +6,11 @@ import {
 } from 'react-native-reanimated';
 
 const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the button grows by a tenth while held
 const PRESSED_SCALE = 1.1;
 
 /**
- * Press lift for a single button (e.g. the compressed rail): it scales up while held,
- * unless the OS asks for reduced motion.
+ * lift for a single button, e.g. the compressed rail
  */
 const usePressLift = () => {
   const reduceMotion = useReducedMotion();

package/Application/Components/BackgroundImageView.tsx

@@ -17,10 +17,6 @@ type BackgroundImageViewProps = {
   animatedValue: SharedValue<number>;
 };
 
-/**
- * Header surface (shadow or divider) and image, fading in over the first 52pt of
- * scroll. iOS keeps the surface out of the clipped view so its shadow isn't cut.
- */
 const BackgroundImageView: FC<BackgroundImageViewProps> = ({
   useShadowHeader = true,
   headerBackground = null,

package/Application/Components/DuoGlassBackground.tsx

@@ -30,7 +30,6 @@ const DuoGlassBackground: React.FC<{
   const { headerHeight } = useScreenLayout();
   const sharedValue = useNormalizedSharedValue(animatedValue);
   const fadeStart = Math.max(bannerBottom - headerHeight, 0);
-  const translucentColor = theme.colors.background.surface + TRANSLUCENT_ALPHA;
 
   const fadeStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
@@ -48,7 +47,8 @@ const DuoGlassBackground: React.FC<{
           StyleSheet.absoluteFill,
           styles.translucentBar,
           {
-            backgroundColor: translucentColor,
+            backgroundColor:
+              theme.colors.background.surface + TRANSLUCENT_ALPHA,
             borderBottomColor: theme.colors.border.default,
           },
           fadeStyle,
@@ -59,9 +59,8 @@ const DuoGlassBackground: React.FC<{
 };
 
 /**
- * Header gradient (and theme image) drawn under the content, fading out on scroll:
- * header-high, or 52pt taller and collapsing when `extended`. `followScroll`
- * scrolls it away with the content instead of fading it.
+ * pink header gradient drawn under the content, fading out on scroll as main's extended
+ * header does: header-high for default headers, 52 taller (collapsing) for extended
  */
 const DuoScrollGradient: React.FC<{
   animatedValue?: AnimatedCompatValue;

package/Application/Components/HeaderAnimated.tsx

@@ -19,10 +19,6 @@ const ASPECT_RATIOS: Record<
   '1/1': 1 / 1,
 };
 
-/**
- * Parallax header image (or `children`): stretches when pulled down and fades out
- * as the content scrolls up.
- */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,

package/Application/Components/HeaderBackground.tsx

@@ -9,10 +9,6 @@ import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 import { useNormalizedSharedValue } from '../hooks';
 
-/**
- * Header background: surface and image that fade in on scroll, with an optional
- * gradient (custom or theme) on top. Outlined when `showBaseLineDebug` is on.
- */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useGradient = true,

package/Application/Components/HeaderExtendHeader.tsx

@@ -23,10 +23,6 @@ const SCREEN_PADDING = 12;
 const BACK_WIDTH = 28;
 const TOOLKIT_WIDTH = 73;
 
-/**
- * Extended header background: a gradient that collapses on scroll and, with
- * `inputSearchProps`, a full-width search that slides into the bar beside back/toolkit.
- */
 const HeaderExtendHeader: React.FC<{
   headerType?: HeaderType;
   animatedValue: AnimatedCompatValue;
@@ -68,15 +64,18 @@ const HeaderExtendHeader: React.FC<{
   const contentLeft = layout.insetLeft + SCREEN_PADDING;
   const contentRight = layout.insetLeft + layout.contentWidth;
   // collapsed on the status bar row, the search stays between its clusters
-  const clearanceLeft = layout.statusBarClearance?.left ?? 0;
-  const clearanceRight = layout.statusBarClearance?.right ?? 0;
-  const collapsedLeft = layout.insetLeft + leftPosition + clearanceLeft;
-  const collapsedRight = contentRight - clearanceRight - headerRightWidth;
+  const collapsedLeft =
+    layout.insetLeft + leftPosition + (layout.statusBarClearance?.left ?? 0);
+  const collapsedRight = contentRight - (layout.statusBarClearance?.right ?? 0);
   const searchWidth = layout.contentWidth - SCREEN_PADDING * 2;
-  const collapsedSearchWidth = collapsedRight - collapsedLeft - SCREEN_PADDING;
+  const collapsedSearchWidth =
+    collapsedRight - collapsedLeft - SCREEN_PADDING - headerRightWidth;
   // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
-  const titleRowHeight = layout.headerHeight - layout.headerStatusBarHeight;
-  const collapsedRaise = (titleRowHeight - HeaderMetrics.barHeight) / 2;
+  const collapsedRaise =
+    (layout.headerHeight -
+      layout.headerStatusBarHeight -
+      HeaderMetrics.barHeight) /
+    2;
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {

package/Application/Components/HeaderLeft.tsx

@@ -10,8 +10,7 @@ import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
 
 /**
- * Header back button, also bound to the Android hardware back. `preventBack`
- * confirms in a popup first; the iPhone Duo layouts use the 48pt side bar button.
+ * default header left used for nav
  */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,

package/Application/Components/HeaderRight.tsx

@@ -9,8 +9,7 @@ import { HeaderToolkitAction } from './HeaderToolkitAction';
 import { styles } from './HeaderRight.styles';
 
 /**
- * Header right slot: a custom `headerRight` render function, the onboarding skip
- * button, or the toolkit (stacked vertically in the floating iPhone Duo side bar).
+ * main component for header right
  */
 const HeaderRight: React.FC<any> = props => {
   const { translate } = useContext(ApplicationContext);

package/Application/Components/HeaderTitle.shared.ts

@@ -4,10 +4,6 @@ import { Spacing } from '../../Consts';
 import { isWhiteListDesignSystem } from '../utils';
 import { useScreenLayout } from '../../Layout';
 
-/**
- * Header title font: MoMoTrustDisplay for design-system whitelisted mini apps,
- * SFProText otherwise.
- */
 const useHeaderFontFamily = (): string => {
   const context = useContext<any>(MiniAppContext);
   return isWhiteListDesignSystem(context) ? 'MoMoTrustDisplay' : 'SFProText';
@@ -24,22 +20,24 @@ const HEADER_ACTIONS_WIDTH = 172;
 const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
 
 /**
- * Max header title width. The iPhone Duo side bar takes back and toolkit out of
- * the bar, so the title gets the content width; otherwise it shares the bar with them.
+ * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
  */
 const useTitleMaxWidth = () => {
-  const layout = useScreenLayout();
-  const { width, contentWidth, sideBar, statusBarClearance } = layout;
+  const { width, contentWidth, sideBar, statusBarClearance } =
+    useScreenLayout();
   let clearance = 0;
-  let rowActionsExtra = 0;
   if (statusBarClearance) {
     clearance = statusBarClearance.left + statusBarClearance.right;
-    rowActionsExtra = STATUS_BAR_ROW_ACTIONS_EXTRA;
   }
   if (sideBar) {
     return contentWidth - Spacing.M * 2 - clearance;
   }
-  return width - HEADER_ACTIONS_WIDTH - rowActionsExtra - clearance;
+  return (
+    width -
+    HEADER_ACTIONS_WIDTH -
+    (statusBarClearance ? STATUS_BAR_ROW_ACTIONS_EXTRA : 0) -
+    clearance
+  );
 };
 
 export { useHeaderFontFamily, HEADER_ACTIONS_WIDTH, useTitleMaxWidth };

package/Application/Components/HeaderTitle.tsx

@@ -33,8 +33,7 @@ type HeaderTitleExtraProps = {
 };
 
 /**
- * Default navigation header title. With `animatedValue` its opacity follows the
- * scroll through `interpolate` (0 to 1 over the first 200pt by default).
+ * default header title used for nav
  */
 const HeaderTitle: React.FC<
   HeaderTitleExtraProps & { [key: string]: any }
@@ -101,8 +100,8 @@ const HeaderTitle: React.FC<
 };
 
 /**
- * Header title picked by `type` (user, location or journey) with `data` as its
- * props; an empty view for an unknown type.
+ * Title custom for header
+ * @constructor
  */
 const TitleCustom: React.FC<any> = ({ type, data, ...props }) => {
   switch (type) {

package/Application/Components/HeaderToolkitAction.tsx

@@ -14,8 +14,7 @@ const CLOSE_ICON = '16_navigation_close_circle';
 const HOME_ICON = '16_basic_home';
 
 /**
- * Header toolkit: optional shortcut plus the help center / close capsule. When
- * `vertical` (iPhone Duo side bar) it reports its height and may fold into one button.
+ * Header toolkit action
  */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
@@ -28,9 +27,8 @@ const HeaderToolkitAction: React.FC<any> = ({
   vertical = false,
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const compression = useDuoBarCompression();
-  const { toolbarCompressed, toolbarHidden } = compression;
-  const { expandToolbar, setToolbarHeight } = compression;
+  const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
+    useDuoBarCompression();
   const { statusBarClearance } = useScreenLayout();
   const {
     isLoading,
@@ -58,22 +56,18 @@ const HeaderToolkitAction: React.FC<any> = ({
 
   const useHelpCenter = context.appId !== 'vn.momo.helpcenter';
   const closeIcon = useCloseIcon ? CLOSE_ICON : HOME_ICON;
-  let toolkitWidthStyle: ViewStyle = styles.toolkitNarrow;
-  if (useHelpCenter) {
-    toolkitWidthStyle = styles.toolkitWide;
-  }
 
   const groupCount = useHelpCenter ? 2 : 1;
   let capsuleHeight = DuoMetrics.controlSize;
   if (groupCount > 1) {
     capsuleHeight = groupCount * DuoMetrics.itemPitch;
   }
-  const backSlotHeight = DuoMetrics.controlSize + Spacing.M;
-  let shortcutHeight = 0;
-  if (useShortcut) {
-    shortcutHeight = DuoMetrics.controlSize + Spacing.M;
-  }
-  const fullToolbarHeight = backSlotHeight + shortcutHeight + capsuleHeight;
+  // Back slot, the optional shortcut, then the help/home capsule
+  const fullToolbarHeight =
+    DuoMetrics.controlSize +
+    Spacing.M +
+    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
+    capsuleHeight;
 
   useEffect(() => {
     if (vertical) {
@@ -86,7 +80,8 @@ const HeaderToolkitAction: React.FC<any> = ({
     return null;
   }
 
-  // HIG "Toolbar compressed": a menu icon (not the "more" one) that expands the toolbar
+  // HIG "Toolbar compressed": tools fold into one button; tapping it expands the
+  // toolbar and compresses the tab bar instead. Not the useMore icon, to tell them apart
   if (vertical && toolbarCompressed) {
     return (
       <SideBarButton
@@ -175,7 +170,15 @@ const HeaderToolkitAction: React.FC<any> = ({
           showBadge={showBadge}
         />
       )}
-      <View style={[styles.toolkitContainer, buttonStyle, toolkitWidthStyle]}>
+      <View
+        style={[
+          styles.toolkitContainer,
+          buttonStyle,
+          context.appId !== 'vn.momo.helpcenter'
+            ? styles.toolkitWide
+            : styles.toolkitNarrow,
+        ]}
+      >
         {useHelpCenter && (
           <>
             <TouchableOpacity

package/Application/Components/NavigationButton.tsx

@@ -7,8 +7,7 @@ import { Icon } from '../../Icon';
 import { BadgeDot } from '../../Badge';
 
 /**
- * Round 28pt icon button of the header (back, shortcut) with an optional badge
- * dot; switches to a dark fill under a white tint so the icon stays readable.
+ * default navigation button used header nav
  */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,

package/Application/Components/SearchHeader.tsx

@@ -10,10 +10,6 @@ import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
 import { DuoMetrics } from '../../Layout/utils';
 
-/**
- * Header search bar whose fill turns from surface to default once scrolled, with
- * a cancel button that goes back (or dismisses the mini app) unless `renderButtons`.
- */
 const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
   (
     {
@@ -40,9 +36,9 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
     if (layout.sideBar) {
       searchMaxWidth = layout.contentWidth - Spacing.M * 2 - headerRightWidth;
     }
-    const clearance = layout.statusBarClearance;
-    if (clearance) {
-      searchMaxWidth -= clearance.left + clearance.right;
+    if (layout.statusBarClearance) {
+      searchMaxWidth -=
+        layout.statusBarClearance.left + layout.statusBarClearance.right;
     }
 
     const backgroundStyle = useAnimatedStyle(() => {
@@ -80,15 +76,6 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
 
     const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-    let buttons: React.ReactNode = (
-      <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
-        <Text typography={'action_default_bold'}>{buttonText}</Text>
-      </TouchableOpacity>
-    );
-    if (typeof renderButtons === 'function') {
-      buttons = renderButtons();
-    }
-
     return (
       <View
         style={[styles.container, showBaseLineDebug && styles.debugBaseLine]}
@@ -110,7 +97,13 @@ const SearchHeader = React.forwardRef<InputRef, SearchHeaderProps>(
             />
           </Animated.View>
         </View>
-        {buttons}
+        {renderButtons && typeof renderButtons === 'function' ? (
+          renderButtons()
+        ) : (
+          <TouchableOpacity onPress={goBackSafe} style={styles.searchAction}>
+            <Text typography={'action_default_bold'}>{buttonText}</Text>
+          </TouchableOpacity>
+        )}
       </View>
     );
   },

package/Application/Components/TitleJourney.tsx

@@ -14,8 +14,8 @@ import {
 } from './HeaderTitle.shared';
 
 /**
- * Header title for a journey: `start` and `end` around an icon, with an optional
- * description below; a shimmer while `isLoading`.
+ * Header user title
+ * @constructor
  */
 const TitleJourney: React.FC<TitleJourneyProps> = ({
   start,

package/Application/Components/TitleLocation.tsx

@@ -9,8 +9,8 @@ import { styles } from './HeaderTitle.styles';
 import { useHeaderFontFamily, useTitleMaxWidth } from './HeaderTitle.shared';
 
 /**
- * Header title showing a location with a dropdown chevron and an optional
- * description above it; a shimmer while `isLoading`.
+ * Header user title
+ * @constructor
  */
 const TitleLocation: React.FC<TitleLocationProps> = ({
   tintColor,

package/Application/Components/TitleUser.tsx

@@ -10,8 +10,8 @@ import { styles } from './HeaderTitle.styles';
 import { useHeaderFontFamily, useTitleMaxWidth } from './HeaderTitle.shared';
 
 /**
- * Header title for a user or group: avatar (1 to 4 images, a `+N` stack, or name
- * initials), title with verified icons and subtitle; a shimmer while `isLoading`.
+ * Header user title
+ * @constructor
  */
 const TitleUser: React.FC<TitleUserProps> = ({
   title,