@momo-kits/foundation 0.169.7-beta.4 → 0.169.7-beta.6

package/Application/Components/HeaderAnimated.tsx

@@ -1,4 +1,5 @@
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
   Extrapolation,
   interpolate,
@@ -9,6 +10,7 @@ import React from 'react';
 import { Image } from '../../Image';
 import { Colors } from '../../Consts';
 import { useNormalizedSharedValue } from '../hooks';
+import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
 const ASPECT_RATIOS: Record<
   NonNullable<HeaderAnimatedProps['aspectRatio']>,
@@ -19,14 +21,21 @@ 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. Wide windows keep it at phone size, centered.
+ */
 const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
   animatedValue,
   image,
   useScale = true,
   aspectRatio = '16/9',
+  bannerBackgroundColor,
   children,
 }) => {
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const { isWide, bannerWidth } = useHeaderLayout();
+  const ratio = ASPECT_RATIOS[aspectRatio];
   const animatedStyle = useAnimatedStyle(() => {
     let scale = 1;
     if (useScale) {
@@ -55,22 +64,36 @@ const HeaderAnimated: React.FC<HeaderAnimatedProps> = ({
     };
   });
 
+  const content = children ?? (
+    <Image
+      source={{
+        uri: image,
+      }}
+      style={styles.full}
+    />
+  );
+
+  if (!isWide) {
+    return (
+      <Animated.View
+        style={[styles.container, { aspectRatio: ratio }, animatedStyle]}
+      >
+        {content}
+      </Animated.View>
+    );
+  }
+
   return (
     <Animated.View
-      style={[
-        styles.container,
-        { aspectRatio: ASPECT_RATIOS[aspectRatio] },
-        animatedStyle,
-      ]}
+      style={[styles.container, { height: bannerWidth / ratio }, animatedStyle]}
     >
-      {children ?? (
-        <Image
-          source={{
-            uri: image,
-          }}
-          style={styles.full}
+      {!!bannerBackgroundColor && (
+        <LinearGradient
+          colors={[bannerBackgroundColor, bannerBackgroundColor + '00']}
+          style={StyleSheet.absoluteFill}
         />
       )}
+      <View style={styles.phoneBanner}>{content}</View>
     </Animated.View>
   );
 };
@@ -86,6 +109,11 @@ const styles = StyleSheet.create({
     alignSelf: 'center',
   },
   full: { width: '100%', height: '100%' },
+  phoneBanner: {
+    width: HeaderBarMetrics.bannerWidth,
+    height: '100%',
+    alignSelf: 'center',
+  },
 });
 
 export { HeaderAnimated };

package/Application/Components/HeaderBackground.tsx

@@ -8,7 +8,13 @@ import { Colors, Styles } from '../../Consts';
 import { Image } from '../../Image';
 import BackgroundImageView from './BackgroundImageView';
 import { useNormalizedSharedValue } from '../hooks';
+import { HeaderBarMetrics, useHeaderLayout } from '../headerLayout';
 
+/**
+ * Header background: surface and image that fade in on scroll, with an optional
+ * gradient (custom or theme) on top, at phone height on wide windows. Outlined
+ * when `showBaseLineDebug` is on.
+ */
 const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   animatedValue,
   useGradient = true,
@@ -21,6 +27,7 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerImage = headerBackground ?? theme.assets?.headerBackground;
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const { isWide } = useHeaderLayout();
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
@@ -34,14 +41,19 @@ const HeaderBackground: React.FC<HeaderBackgroundProps> = ({
       />
       <View style={styles.gradientContainer}>
         {useGradient && !!gradientColor && (
-          <Animated.View style={styles.extendedHeader}>
+          <Animated.View
+            style={[styles.extendedHeader, isWide && styles.phoneHeight]}
+          >
             <LinearGradient
               colors={[gradientColor, gradientColor + '00']}
               style={StyleSheet.absoluteFill}
             >
               {!!headerImage && (
                 <Image
-                  style={styles.headerBackground}
+                  style={[
+                    styles.headerBackground,
+                    isWide && styles.phoneHeight,
+                  ]}
                   source={{ uri: headerImage }}
                   loading={false}
                 />
@@ -71,6 +83,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     aspectRatio: 375 / 154,
   },
+  // wide windows keep the phone gradient height instead of scaling with the width
+  phoneHeight: {
+    aspectRatio: undefined,
+    height: HeaderBarMetrics.gradientHeight,
+  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
 });
 

package/Application/Components/HeaderExtendHeader.tsx

@@ -18,11 +18,20 @@ import { type AnimatedCompatValue } from '../utils';
 import { useNormalizedSharedValue } from '../hooks';
 import { useScreenLayout } from '../../Layout';
 import { DuoMetrics, HeaderMetrics } from '../../Layout/utils';
+import {
+  HeaderBarMetrics,
+  type HeaderContentLayout,
+  useHeaderLayout,
+} from '../headerLayout';
 
-const SCREEN_PADDING = 12;
-const BACK_WIDTH = 28;
-const TOOLKIT_WIDTH = 73;
+const { buttonSize, pillWidth, sidePadding, titleGap } = HeaderBarMetrics;
+const SCREEN_PADDING = sidePadding;
+const TOOLKIT_WIDTH = pillWidth + sidePadding;
 
+/**
+ * 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;
@@ -34,6 +43,7 @@ const HeaderExtendHeader: React.FC<{
   useShadowHeader?: boolean;
   gradientColor?: string;
   headerBackground?: string;
+  contentLayout?: HeaderContentLayout;
 }> = ({
   headerType = 'default',
   animatedValue,
@@ -44,6 +54,7 @@ const HeaderExtendHeader: React.FC<{
   useShadowHeader: useShadowHeaderProp = true,
   gradientColor: customGradientColor,
   headerBackground: customBackground,
+  contentLayout,
 }) => {
   const { theme } = useContext(ApplicationContext);
   const context = useContext<any>(MiniAppContext);
@@ -51,31 +62,39 @@ const HeaderExtendHeader: React.FC<{
   const gradientColor = customGradientColor ?? theme.colors.gradient;
   const headerBackground = customBackground ?? theme.assets?.headerBackground;
   const layout = useScreenLayout();
+  const headerLayout = useHeaderLayout(contentLayout);
+  // the stretch frame pulls the search in from both bar edges
+  const frameShift = headerLayout.frameInset - sidePadding;
 
+  let backWidth = buttonSize;
+  let toolkitWidth = TOOLKIT_WIDTH;
   // the iPhone Duo status bar row keeps side bar sized back and toolkit
-  const isStatusBarRow = !!layout.statusBarClearance;
-  const duoToolkitWidth = DuoMetrics.itemPitch * 2 + SCREEN_PADDING;
-  const backWidth = isStatusBarRow ? DuoMetrics.controlSize : BACK_WIDTH;
-  const toolkitWidth = isStatusBarRow ? duoToolkitWidth : TOOLKIT_WIDTH;
-  const defaultLeft = layout.sideBar ? SCREEN_PADDING : backWidth + 20;
+  if (layout.statusBarClearance) {
+    backWidth = DuoMetrics.controlSize;
+    toolkitWidth = DuoMetrics.itemPitch * 2 + SCREEN_PADDING;
+  }
+  const backLeft = backWidth + sidePadding + titleGap;
+  const defaultLeft = layout.sideBar ? SCREEN_PADDING : backLeft;
   const leftPosition = inputSearchProps?.leftPosition || defaultLeft;
   const defaultRightWidth = layout.sideBar ? 0 : toolkitWidth;
   const headerRightWidth = customHeaderRightWidth ?? defaultRightWidth;
-  const contentLeft = layout.insetLeft + SCREEN_PADDING;
-  const contentRight = layout.insetLeft + layout.contentWidth;
+  const contentLeft = layout.insetLeft + SCREEN_PADDING + frameShift;
+  const contentRight = layout.insetLeft + layout.contentWidth - frameShift;
   // collapsed on the status bar row, the search stays between its clusters
-  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 - headerRightWidth;
+  const clearanceLeft = layout.statusBarClearance?.left ?? 0;
+  const clearanceRight = layout.statusBarClearance?.right ?? 0;
+  const searchLeft = leftPosition + clearanceLeft + frameShift;
+  const collapsedLeft = layout.insetLeft + searchLeft;
+  const collapsedRight = contentRight - clearanceRight - headerRightWidth;
+  const searchWidth = contentRight - contentLeft - SCREEN_PADDING;
+  const collapsedSearchWidth = collapsedRight - collapsedLeft - SCREEN_PADDING;
   // a row taller than barHeight (iPhone Duo) centers the collapsed search on the title
-  const collapsedRaise =
-    (layout.headerHeight -
-      layout.headerStatusBarHeight -
-      HeaderMetrics.barHeight) /
-    2;
+  const titleRowHeight = layout.headerHeight - layout.headerStatusBarHeight;
+  const collapsedRaise = (titleRowHeight - HeaderMetrics.barHeight) / 2;
+
+  // the iPhone Duo side bar and status bar row keep the content search size
+  const isDuoRow = !!layout.sideBar || !!layout.statusBarClearance;
+  const searchSize = isDuoRow ? 'default' : 'header';
 
   let useShadowHeader = useShadowHeaderProp;
   if (inputSearchProps && Platform.OS === 'android') {
@@ -168,6 +187,7 @@ const HeaderExtendHeader: React.FC<{
             <Animated.View
               style={[
                 styles.extendedHeader,
+                headerLayout.isWide && styles.phoneHeight,
                 // fade out within the header box, as DuoScrollGradient does
                 !!layout.sideBar && styles.fillHeaderBox,
                 gradientOpacityStyle,
@@ -179,7 +199,10 @@ const HeaderExtendHeader: React.FC<{
               >
                 {!!theme.assets?.headerBackground && (
                   <Image
-                    style={styles.headerBackground}
+                    style={[
+                      styles.headerBackground,
+                      headerLayout.isWide && styles.phoneHeight,
+                    ]}
                     source={{ uri: theme.assets?.headerBackground }}
                     loading={false}
                   />
@@ -188,9 +211,7 @@ const HeaderExtendHeader: React.FC<{
             </Animated.View>
           )}
         </Animated.View>
-        <Animated.View
-          style={[styles.searchContainer, heightStyle]}
-        >
+        <Animated.View style={[styles.searchContainer, heightStyle]}>
           <Animated.View
             style={[{ marginVertical: Spacing.S }, searchTranslateStyle]}
           >
@@ -200,6 +221,7 @@ const HeaderExtendHeader: React.FC<{
               <InputSearch
                 {...inputSearchProps}
                 ref={inputSearchRef}
+                size={searchSize}
                 backgroundColor={'transparent'}
                 showButtonText={false}
               />
@@ -235,7 +257,10 @@ const HeaderExtendHeader: React.FC<{
             >
               {!!headerBackground && (
                 <Image
-                  style={styles.headerBackground}
+                  style={[
+                    styles.headerBackground,
+                    headerLayout.isWide && styles.phoneHeight,
+                  ]}
                   source={{ uri: headerBackground }}
                   loading={false}
                 />
@@ -263,6 +288,11 @@ const styles = StyleSheet.create({
     position: 'absolute',
     width: '100%',
   },
+  // wide windows keep the phone gradient height instead of scaling with the width
+  phoneHeight: {
+    aspectRatio: undefined,
+    height: HeaderBarMetrics.gradientHeight,
+  },
   fillHeaderBox: {
     aspectRatio: undefined,
     height: '100%',
@@ -272,14 +302,6 @@ const styles = StyleSheet.create({
     position: 'absolute',
     overflow: 'hidden',
   },
-  verifiedDot: {
-    width: 4,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: Colors.green_03,
-    position: 'absolute',
-    alignSelf: 'center',
-  },
   debugBaseLine: { borderWidth: 1, borderColor: Colors.green_06 },
   container: {
     zIndex: 0,

package/Application/Components/HeaderLeft.tsx

@@ -8,9 +8,11 @@ import { SideBarButton } from './SideBarButton';
 import Animated from 'react-native-reanimated';
 import { useScreenLayout, useSideBarItemStyle } from '../../Layout/utils';
 import { useSideBarCounterStyle } from './DuoQuickReturnHeader';
+import { HeaderBarMetrics } from '../headerLayout';
 
 /**
- * default header left used for nav
+ * 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.
  */
 const HeaderLeft: React.FC<HeaderBackProps> = ({
   tintColor,
@@ -124,7 +126,7 @@ const HeaderLeft: React.FC<HeaderBackProps> = ({
 
 const styles = StyleSheet.create({
   headerLeft: {
-    marginLeft: 12,
+    marginLeft: HeaderBarMetrics.sidePadding,
   },
 });
 

package/Application/Components/HeaderRight.styles.ts

@@ -1,11 +1,14 @@
 import { Platform, StyleSheet } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
+import { HeaderBarMetrics } from '../headerLayout';
+
+const { buttonSize, pillWidth, pillHeight, sidePadding } = HeaderBarMetrics;
 
 export const styles = StyleSheet.create({
   navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: Colors.black_01 + '99',
@@ -45,11 +48,11 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: Spacing.M,
+    paddingRight: sidePadding,
   },
   toolkitContainer: {
-    height: 28,
-    borderRadius: 14,
+    height: pillHeight,
+    borderRadius: pillHeight / 2,
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
@@ -59,7 +62,10 @@ export const styles = StyleSheet.create({
     marginLeft: Spacing.S,
   },
   toolkitButton: {
-    padding: 4,
+    flex: 1,
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   divider: {
     width: 0.5,
@@ -136,9 +142,9 @@ export const styles = StyleSheet.create({
     marginRight: Spacing.M,
   },
   toolkitWide: {
-    width: 65,
+    width: pillWidth,
   },
   toolkitNarrow: {
-    width: 28,
+    width: buttonSize,
   },
 });

package/Application/Components/HeaderRight.tsx

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

package/Application/Components/HeaderTitle.shared.ts

@@ -3,41 +3,48 @@ import { MiniAppContext } from '../../Context';
 import { Spacing } from '../../Consts';
 import { isWhiteListDesignSystem } from '../utils';
 import { useScreenLayout } from '../../Layout';
+import { HeaderBarMetrics } from '../headerLayout';
 
+const { sidePadding, buttonSize, titleGap, clusterWidth } = HeaderBarMetrics;
+
+/**
+ * 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';
 };
 
 /**
- * back button and toolkit sharing the navigation bar with the title
+ * side paddings, back button, title gaps and right cluster sharing the
+ * navigation bar with the title
  */
-const HEADER_ACTIONS_WIDTH = 172;
+const HEADER_ACTIONS_WIDTH =
+  sidePadding * 2 + buttonSize + titleGap * 2 + clusterWidth;
 
 /**
  * extra width the 48pt back and toolkit take on the iPhone Duo status bar row
  */
-const STATUS_BAR_ROW_ACTIONS_EXTRA = 55;
+const STATUS_BAR_ROW_ACTIONS_EXTRA = 43;
 
 /**
- * max title width, the iPhone Duo side bar takes back and toolkit out of the bar
+ * 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.
  */
 const useTitleMaxWidth = () => {
-  const { width, contentWidth, sideBar, statusBarClearance } =
-    useScreenLayout();
+  const layout = useScreenLayout();
+  const { width, contentWidth, sideBar, statusBarClearance } = layout;
   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 -
-    (statusBarClearance ? STATUS_BAR_ROW_ACTIONS_EXTRA : 0) -
-    clearance
-  );
+  return width - HEADER_ACTIONS_WIDTH - rowActionsExtra - clearance;
 };
 
 export { useHeaderFontFamily, HEADER_ACTIONS_WIDTH, useTitleMaxWidth };

package/Application/Components/HeaderTitle.tsx

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

package/Application/Components/HeaderToolkitAction.tsx

@@ -9,12 +9,14 @@ import { SideBarButton, SideBarGroup, SideBarGroupItem } from './SideBarButton';
 import { useDuoBarCompression } from '../BottomTab/DuoBarCompression';
 import { styles } from './HeaderRight.styles';
 import { useToolkitActions } from './useToolkitActions';
+import { HeaderBarMetrics } from '../headerLayout';
 
 const CLOSE_ICON = '16_navigation_close_circle';
 const HOME_ICON = '16_basic_home';
 
 /**
- * Header toolkit action
+ * 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.
  */
 const HeaderToolkitAction: React.FC<any> = ({
   tintColor,
@@ -27,8 +29,9 @@ const HeaderToolkitAction: React.FC<any> = ({
   vertical = false,
 }) => {
   const context = useContext<any>(MiniAppContext);
-  const { toolbarCompressed, toolbarHidden, expandToolbar, setToolbarHeight } =
-    useDuoBarCompression();
+  const compression = useDuoBarCompression();
+  const { toolbarCompressed, toolbarHidden } = compression;
+  const { expandToolbar, setToolbarHeight } = compression;
   const { statusBarClearance } = useScreenLayout();
   const {
     isLoading,
@@ -56,18 +59,22 @@ 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;
   }
-  // Back slot, the optional shortcut, then the help/home capsule
-  const fullToolbarHeight =
-    DuoMetrics.controlSize +
-    Spacing.M +
-    (useShortcut ? DuoMetrics.controlSize + Spacing.M : 0) +
-    capsuleHeight;
+  const backSlotHeight = DuoMetrics.controlSize + Spacing.M;
+  let shortcutHeight = 0;
+  if (useShortcut) {
+    shortcutHeight = DuoMetrics.controlSize + Spacing.M;
+  }
+  const fullToolbarHeight = backSlotHeight + shortcutHeight + capsuleHeight;
 
   useEffect(() => {
     if (vertical) {
@@ -80,8 +87,7 @@ const HeaderToolkitAction: React.FC<any> = ({
     return null;
   }
 
-  // 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
+  // HIG "Toolbar compressed": a menu icon (not the "more" one) that expands the toolbar
   if (vertical && toolbarCompressed) {
     return (
       <SideBarButton
@@ -170,15 +176,7 @@ const HeaderToolkitAction: React.FC<any> = ({
           showBadge={showBadge}
         />
       )}
-      <View
-        style={[
-          styles.toolkitContainer,
-          buttonStyle,
-          context.appId !== 'vn.momo.helpcenter'
-            ? styles.toolkitWide
-            : styles.toolkitNarrow,
-        ]}
-      >
+      <View style={[styles.toolkitContainer, buttonStyle, toolkitWidthStyle]}>
         {useHelpCenter && (
           <>
             <TouchableOpacity
@@ -187,7 +185,11 @@ const HeaderToolkitAction: React.FC<any> = ({
               onPress={onPressHelpCenter}
               hitSlop={{ top: 7, bottom: 7, left: 7, right: 0 }}
             >
-              <Icon color={tintColor} source={'help_center'} size={20} />
+              <Icon
+                color={tintColor}
+                source={'help_center'}
+                size={HeaderBarMetrics.iconSize}
+              />
             </TouchableOpacity>
             <View style={[styles.divider, { backgroundColor: tintColor }]} />
           </>
@@ -198,7 +200,11 @@ const HeaderToolkitAction: React.FC<any> = ({
           style={styles.toolkitButton}
           hitSlop={{ top: 7, bottom: 7, left: 0, right: 7 }}
         >
-          <Icon color={tintColor} source={closeIcon} size={20} />
+          <Icon
+            color={tintColor}
+            source={closeIcon}
+            size={HeaderBarMetrics.iconSize}
+          />
         </TouchableOpacity>
       </View>
     </View>

package/Application/Components/NavigationButton.tsx

@@ -5,9 +5,13 @@ import { StyleSheet, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { Colors, Spacing } from '../../Consts';
 import { Icon } from '../../Icon';
 import { BadgeDot } from '../../Badge';
+import { HeaderBarMetrics } from '../headerLayout';
+
+const { buttonSize, iconSize } = HeaderBarMetrics;
 
 /**
- * default navigation button used header nav
+ * Round 32pt 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.
  */
 const NavigationButton: React.FC<NavigationButtonProps> = ({
   icon,
@@ -34,7 +38,7 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
         <Icon
           source={icon}
           color={tintColor ?? theme.colors.text.default}
-          size={20}
+          size={iconSize}
         />
       </TouchableOpacity>
       {showBadge && <BadgeDot size={'small'} style={styles.badgeDot} />}
@@ -44,12 +48,12 @@ const NavigationButton: React.FC<NavigationButtonProps> = ({
 
 const styles = StyleSheet.create({
   container: {
-    width: 28,
+    width: buttonSize,
   },
   navigationButton: {
-    height: 28,
-    width: 28,
-    borderRadius: 14,
+    height: buttonSize,
+    width: buttonSize,
+    borderRadius: buttonSize / 2,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: Colors.black_01 + '99',