@momo-kits/foundation 0.169.8 → 0.169.9

package/Layout/layoutMetrics.ts

@@ -1,57 +1,66 @@
-/**
- * Header geometry
- * - barHeight: navigation bar row below the status bar
- * - iPhoneMinHeight: header never shorter than this on iPhone (landscape, iPhone Duo)
- * - statusBarMinInset: a smaller top inset means the status bar is not on the top edge
- * - largeWidth / largeMargin: @react-navigation/elements Header gives its content row
- *   5pt side margins on iOS from 414pt wide
- */
+/** Header geometry. */
 export const HeaderMetrics = {
+  /** Navigation bar row below the status bar. */
   barHeight: 52,
+  /** Header never shorter than this on iPhone (landscape, iPhone Duo). */
   iPhoneMinHeight: 72,
+  /** A smaller top inset means the status bar is not on the top edge. */
   statusBarMinInset: 20,
+  /**
+   * From this width @react-navigation/elements Header gives its content row
+   * `largeMargin` (5pt) side margins on iOS.
+   */
   largeWidth: 414,
   largeMargin: 5,
 };
 
-/**
- * iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator)
- * - maxAspectRatio: both displays are near 1.42 (inner) and 1.45 (outer), every slab
- *   iPhone is 1.77 or taller
- * - innerMinHeight: window height from which the inner display is in use (outer display
- *   is 466pt tall in landscape, inner display 669pt)
- * - controlSize / itemPitch: vertical bar of 48pt circular controls, item groups as 48pt
- *   wide capsules at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart
- * - firstItemTop: with the status bar in the strip, the first control sits under the
- *   camera, clock and connectivity cluster (cluster ends near y 151 on the outer display,
- *   y 98 on the inner display in landscape)
- * - outerHeaderHeight / outerCameraCenterY: on the outer display in portrait the header
- *   is 4pt taller than iPhoneMinHeight and its title lines up with the camera punchout
- *   (y 24–66 at the top of the strip)
- * - edgeInset: on the outer display in landscape the strip holds no status bar, so its
- *   controls start this far from the top and stay this far above the bottom, unless a
- *   reserved region (the camera at either end) asks for more
- * - innerStatusBarCenterY / innerStatusBarWidth: on the inner display in portrait the
- *   clock and connectivity cluster sits at the top right corner (x 550–643 of 669, clock
- *   digits centered on y 47); its reserved region, when reported, is taller than the glyphs
- * - floatingTabBarHeight / floatingTabBarMargin / floatingTabBarInsetOverlap: the host
- *   app's iOS 26 system tab bar on the inner display in portrait, a 62pt Liquid Glass pill
- *   sized to its tabs with the QR as a pinned 62pt platter beside it, centered and at
- *   least 20pt from the side edges; it overlaps the home indicator inset by 13pt (21pt
- *   above the screen bottom with a 34pt inset)
- */
+/** iPhone Duo geometry, iOS 27.1 (Xcode 27.1 simulator). */
 export const DuoMetrics = {
+  /**
+   * Both displays are near 1.42 (inner) and 1.45 (outer); every slab iPhone is
+   * 1.77 or taller.
+   */
   maxAspectRatio: 1.6,
+  /**
+   * Window height from which the inner display is in use (outer display is
+   * 466pt tall in landscape, inner display 669pt).
+   */
   innerMinHeight: 600,
+  /**
+   * Vertical bar of 48pt circular controls; item groups are 48pt wide capsules
+   * at a 50pt pitch, 12pt from the strip's inner edge and 12pt apart.
+   */
   controlSize: 48,
   itemPitch: 50,
+  /**
+   * With the status bar in the strip, the first control sits under the camera,
+   * clock and connectivity cluster (ends near y 151 outer, y 98 inner
+   * landscape).
+   */
   firstItemTop: 170,
   firstItemTopLandscape: 120,
+  /**
+   * Outer display in portrait: the header is 4pt taller than iPhoneMinHeight
+   * and its title lines up with the camera punchout (y 24–66 at the strip's
+   * top).
+   */
   outerHeaderHeight: 76,
   outerCameraCenterY: 45,
+  /**
+   * Outer display in landscape: no status bar in the strip, so controls keep
+   * this gap from both ends unless a reserved region (the camera) needs more.
+   */
   edgeInset: 24,
+  /**
+   * Inner display in portrait: clock and connectivity cluster at the top right
+   * (x 550–643 of 669, digits on y 47); a reported reserved region is taller.
+   */
   innerStatusBarCenterY: 47,
   innerStatusBarWidth: 120,
+  /**
+   * Host app's iOS 26 tab bar, inner display in portrait: a 62pt Liquid Glass
+   * pill plus 62pt QR platter, ≥ 20pt from the sides, 13pt over the home inset.
+   */
   floatingTabBarHeight: 62,
   floatingTabBarMargin: 20,
   floatingTabBarInsetOverlap: 13,

package/Layout/screenTypes.ts

@@ -59,9 +59,8 @@ export interface ScreenProps extends ViewProps {
 
   /**
    * Optional. If `true`, the footer is inset by the standard horizontal margin
-   * (12pt each side). Set `false` for a footer that should span the full width —
-   * e.g. one that already carries its own horizontal padding.
-   * Defaults to `true`, on every platform.
+   * (12pt each side); `false` spans the full width, e.g. for a footer with its
+   * own horizontal padding. Defaults to `true`, on every platform.
    */
   marginFooter?: boolean;
 

package/Pagination/PaginationScroll.tsx

@@ -13,6 +13,8 @@ import { ApplicationContext, MiniAppContext } from '../Context';
 
 const INDICATOR_WIDTH = 24;
 const INDICATOR_CONTAINER_WIDTH = 72;
+// one frame at 60 fps
+const SCROLL_EVENT_THROTTLE = 16;
 
 /**
  * Horizontal scroll view with a small indicator that tracks the scroll offset.
@@ -31,7 +33,7 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const onScroll = useAnimatedScrollHandler({
+  const handleScroll = useAnimatedScrollHandler({
     onScroll: (event) => {
       left.value = event.contentOffset.x;
     },
@@ -54,8 +56,8 @@ const PaginationScroll: FC<ScrollIndicatorProps> = ({
     return (
       <Animated.ScrollView
         ref={scrollViewRef as any}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
+        onScroll={handleScroll}
+        scrollEventThrottle={SCROLL_EVENT_THROTTLE}
         alwaysBounceHorizontal={false}
         showsHorizontalScrollIndicator={false}
         horizontal

package/Pagination/types.ts

@@ -3,11 +3,9 @@ import {Ref} from 'react';
 
 export type PaginationProps = {
   /**
-   * Optional. Defines the visual style of the Pagination component.
-   * - 'default': Represents the default style.
-   * - 'black_white': Represents dots on a translucent dark background.
-   * - 'number': Represents a style where pages are represented by numbers.
-   * - 'scroll': Rendered as 'default'; use `PaginationScroll` instead.
+   * Optional. Visual style: 'default' dots, 'black_white' dots on a translucent
+   * dark background, 'number' page numbers. 'scroll' renders as 'default'; use
+   * `PaginationScroll` instead.
    */
   type?: 'default' | 'black_white' | 'number' | 'scroll';
 

package/Popup/PopupNotify.tsx

@@ -12,6 +12,9 @@ import { ModalIconButton } from '../Application/ModalIconButton';
 import { splitHighlightText } from './utils';
 
 const MAX_ROW_TITLE_LENGTH = 12;
+const DESCRIPTION_MAX_HEIGHT = 172;
+const MAX_DESCRIPTION_LINES = 8.5;
+const IMAGE_ASPECT_RATIO = 1.7777;
 
 /**
  * Notify popup body: optional image, title, description, error code and one or
@@ -32,10 +35,10 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
 }) => {
   const context = useContext<any>(MiniAppContext);
   const { theme, navigator, translate } = useContext(ApplicationContext);
-  const [scrollContent, setScrollContent] = useState(false);
+  const [isDescriptionScrollable, setIsDescriptionScrollable] = useState(false);
   const { isFoldable, popup } = useModalLayout();
   const { width: popupWidth, maxHeight, radius } = popup;
-  const scaledMaxHeight = useScaleSize(172);
+  const scaledMaxHeight = useScaleSize(DESCRIPTION_MAX_HEIGHT);
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
   const closeAction = useRef('touch_outside');
@@ -45,12 +48,12 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
     // foldables cap the popup height, the description takes what is left
     Description = ScrollView;
     descriptionStyle = styles.shrink;
-  } else if (scrollContent) {
+  } else if (isDescriptionScrollable) {
     Description = ScrollView;
     descriptionStyle = { maxHeight: scaledMaxHeight };
   }
 
-  const onAction = (callback?: () => void) => {
+  const handleAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
     } else {
@@ -72,7 +75,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                   size="medium"
                   onPress={() => {
                     closeAction.current = 'button_action';
-                    onAction(secondary?.onPress);
+                    handleAction(secondary?.onPress);
                   }}
                   accessibilityLabel={'btn_popup_cancel'}
                 />
@@ -86,7 +89,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
               size="medium"
               onPress={() => {
                 closeAction.current = 'button_action';
-                onAction(primary.onPress);
+                handleAction(primary.onPress);
               }}
               accessibilityLabel={'btn_popup_allow'}
             />
@@ -103,7 +106,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
             size="medium"
             onPress={() => {
               closeAction.current = 'button_action';
-              onAction(primary.onPress);
+              handleAction(primary.onPress);
             }}
           />
           {!!secondary?.title && (
@@ -116,7 +119,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
                 size="medium"
                 onPress={() => {
                   closeAction.current = 'button_action';
-                  onAction(secondary?.onPress);
+                  handleAction(secondary?.onPress);
                 }}
               />
             </>
@@ -172,7 +175,7 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         style={styles.iconClose}
         onPress={() => {
           closeAction.current = 'icon_close';
-          onAction(onIconClose);
+          handleAction(onIconClose);
         }}
       />
     );
@@ -189,9 +192,9 @@ const PopupNotify: React.FC<PopupNotifyProps> = ({
         accessibilityLabel={'description_popup_notify'}
         typography={'body_default_regular'}
         onTextLayout={({ nativeEvent: { lines } }) => {
-          const enableScroll = lines.length > 8.5;
-          if (enableScroll !== scrollContent) {
-            setScrollContent(enableScroll);
+          const shouldScroll = lines.length > MAX_DESCRIPTION_LINES;
+          if (shouldScroll !== isDescriptionScrollable) {
+            setIsDescriptionScrollable(shouldScroll);
           }
         }}
       >
@@ -260,7 +263,7 @@ const styles = StyleSheet.create({
   // clips the image and content to the card radius
   card: { overflow: 'hidden' },
   image: {
-    aspectRatio: 1.7777,
+    aspectRatio: IMAGE_ASPECT_RATIO,
   },
   shrink: { flexShrink: 1 },
   content: { padding: Spacing.XL },

package/Popup/PopupPromotion.tsx

@@ -9,6 +9,7 @@ import { useModalLayout } from '../Application/modalLayout';
 
 const ASPECT_RATIO = 0.72;
 const ICON_CLOSE_SIZE = 20;
+const CLOSE_GLYPH_SIZE = 14;
 // close button row under the image: marginTop + vertical padding + icon
 const CLOSE_ROW_HEIGHT = Spacing.S * 3 + ICON_CLOSE_SIZE;
 
@@ -37,7 +38,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
 
   const showBaseLineDebug = context?.features?.showBaseLineDebug ?? false;
 
-  const onAction = (callback?: () => void) => {
+  const handleAction = (callback?: () => void) => {
     if (typeof onRequestClose === 'function') {
       onRequestClose?.(callback);
     } else {
@@ -53,7 +54,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
           accessibilityLabel={'ic_popup_close'}
           onPress={() => {
             closeAction.current = 'icon_close';
-            onAction(onIconClose);
+            handleAction(onIconClose);
           }}
           style={styles.iconButton}
         >
@@ -69,7 +70,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
             <Icon
               source="navigation_close"
               color={theme.colors.background.surface}
-              size={14}
+              size={CLOSE_GLYPH_SIZE}
             />
           </View>
         </TouchableOpacity>
@@ -82,7 +83,7 @@ const PopupPromotion: React.FC<PopupPromotionProps> = ({
       accessibilityLabel={'popup_promotion'}
       style={[{ width: imageWidth }, showBaseLineDebug && styles.debugBaseLine]}
     >
-      <TouchableOpacity onPress={() => onAction(onActionClick)}>
+      <TouchableOpacity onPress={() => handleAction(onActionClick)}>
         <Image
           source={{
             uri: image,

package/Popup/types.ts

@@ -43,10 +43,8 @@ export type PopupNotifyProps = {
   primary: PopupAction;
 
   /**
-   * `buttonDirection`: Optional. Represents the direction in which the action buttons are laid out.
-   * - 'row': Buttons are laid out horizontally.
-   * - 'column': Buttons are laid out vertically.
-   * - 'auto': The layout is automatically determined by title length.
+   * `buttonDirection`: Optional. Layout of the action buttons: 'row' horizontal,
+   * 'column' vertical, 'auto' column only when a title is too long for a row.
    */
   buttonDirection?: PopupActionDirection;
 

package/Skeleton/index.tsx

@@ -21,6 +21,12 @@ import { Colors, Styles } from '../Consts';
 import styles from './styles';
 import { ScreenContext, SkeletonContext } from '../Context';
 
+const PRIMARY_COLOR = Colors.black_05;
+const HIGHLIGHT_COLOR1 = Colors.black_05;
+const HIGHLIGHT_COLOR2 = Colors.black_03;
+const SHIMMER_DURATION = 1000;
+const LAYOUT_ANIMATION_DURATION = 500;
+
 /**
  * Shimmering placeholder that fills its parent. Reports loading to the screen
  * context while mounted.
@@ -28,9 +34,6 @@ import { ScreenContext, SkeletonContext } from '../Context';
 const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   const screen = useContext<any>(ScreenContext);
   const [width, setWidth] = useState(0);
-  const PRIMARY_COLOR = Colors.black_05;
-  const HIGHLIGHT_COLOR1 = Colors.black_05;
-  const HIGHLIGHT_COLOR2 = Colors.black_03;
   const progress = useSharedValue(0);
 
   const shimmerColors = [HIGHLIGHT_COLOR1, HIGHLIGHT_COLOR2, HIGHLIGHT_COLOR1];
@@ -39,7 +42,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
     progress.value = 0;
     progress.value = withRepeat(
       withTiming(1, {
-        duration: 1000,
+        duration: SHIMMER_DURATION,
         easing: Easing.linear,
       }),
       -1,
@@ -57,7 +60,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
     return { transform: [{ translateX }] };
   });
 
-  const onLayout = (newWidth: number) => {
+  const handleLayout = (newWidth: number) => {
     if (newWidth !== width) {
       setWidth(newWidth);
     }
@@ -66,7 +69,7 @@ const Skeleton: React.FC<SkeletonTypes> = ({ style }) => {
   return (
     <View style={[styles.container, style]}>
       <View
-        onLayout={e => onLayout(e.nativeEvent.layout.width)}
+        onLayout={e => handleLayout(e.nativeEvent.layout.width)}
         style={[Styles.flex, { backgroundColor: PRIMARY_COLOR }]}
       >
         <Animated.View style={[styles.shimmer, shimmerStyle]}>
@@ -96,28 +99,28 @@ const SkeletonProvider: React.FC<{ loading: boolean; children: any }> = ({
   loading = true,
   children,
 }) => {
-  const [previous, setPrevious] = useState(loading);
+  const [isLoadingShown, setIsLoadingShown] = useState(loading);
 
   useEffect(() => {
-    if (previous !== loading) {
+    if (isLoadingShown !== loading) {
       if (Platform.OS === 'android') {
         if (UIManager.setLayoutAnimationEnabledExperimental) {
           UIManager.setLayoutAnimationEnabledExperimental(true);
         }
       }
       LayoutAnimation.configureNext({
-        duration: 500,
+        duration: LAYOUT_ANIMATION_DURATION,
         create: {
           type: LayoutAnimation.Types.easeInEaseOut,
           property: LayoutAnimation.Properties.opacity,
         },
       });
-      setPrevious(loading);
+      setIsLoadingShown(loading);
     }
-  }, [loading, previous]);
+  }, [loading, isLoadingShown]);
 
   return (
-    <SkeletonContext.Provider value={{ loading: previous }}>
+    <SkeletonContext.Provider value={{ loading: isLoadingShown }}>
       {children}
     </SkeletonContext.Provider>
   );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@momo-kits/foundation",
-    "version": "0.169.8",
+    "version": "0.169.9",
     "description": "React Native Component Kits",
     "main": "index.ts",
     "scripts": {},

package/Input/common.tsx

@@ -1,257 +0,0 @@
-import React, { FC, ReactNode, useContext } from 'react';
-import {
-  GestureResponderEvent,
-  TouchableOpacity,
-  View,
-  ViewStyle,
-} from 'react-native';
-import { ApplicationContext } from '../Context';
-import { Theme } from '../Application/types';
-import { Styles } from '../Consts';
-import { Icon } from '../Icon';
-import { useScaleSize, Text } from '../Text';
-import styles from './styles';
-import { Loader } from '../Loader';
-import IconSources from '../Assets/icon.json';
-
-type FloatingViewProps = {
-  floatingValue?: string;
-  floatingIconColor?: string;
-  componentId?: string;
-  disabled?: boolean;
-  floatingIcon?: string;
-  required?: boolean;
-  style?: ViewStyle;
-  onPress?: (e: GestureResponderEvent) => void;
-};
-
-type TrailingProps = {
-  loading?: boolean;
-  color?: string;
-  icon?: string;
-  componentId?: string;
-  onPressIcon?: () => void;
-};
-
-export const MAX_LENGTH = 300;
-
-/** Border color by state; priority is disabled > error > focused > default. */
-export const getBorderColor = (
-  theme: Theme,
-  focused: boolean,
-  errorMessage?: string,
-  disabled?: boolean,
-) => {
-  let borderColor = theme.colors.border.default;
-
-  if (focused) {
-    borderColor = theme.colors.primary;
-  }
-
-  if (errorMessage) {
-    borderColor = theme.colors.error.primary;
-  }
-
-  if (disabled) {
-    borderColor = theme.colors.border.disable;
-  }
-
-  return { borderColor };
-};
-
-/**
- * Container style for `size`; multiline uses `height` as minHeight so the
- * field can grow with its content.
- */
-export const getSizeStyle = (
-  size?: 'small' | 'large',
-  multiline: boolean = false,
-  height?: number,
-) => {
-  let scaleStyle: ViewStyle = {};
-  if (height) {
-    scaleStyle = { height };
-  }
-
-  if (multiline) {
-    return [
-      styles.multilineContainer,
-      {
-        minHeight: height,
-      },
-    ];
-  }
-
-  if (size === 'small') {
-    return [styles.smallContainer, scaleStyle];
-  }
-  return [styles.container, scaleStyle];
-};
-
-/**
- * Error or hint row under an input (error wins); with neither, `errorSpacing`
- * keeps an empty row so the layout doesn't jump when an error appears.
- */
-export const ErrorView: FC<{
-  errorMessage?: string;
-  errorSpacing?: boolean;
-  hintText?: string;
-  componentId?: string;
-}> = ({ errorMessage, errorSpacing, hintText, componentId }) => {
-  const { theme } = useContext(ApplicationContext);
-  const errorColor = theme.colors.error.primary;
-  const hintColor = theme.colors.text.hint;
-  const hintTextDefault = hintText ?? 'Không thể chỉnh sửa';
-  const scaledIconSize = useScaleSize(16);
-
-  if (errorMessage || hintText) {
-    const messageColor = errorMessage ? errorColor : hintColor;
-    const messageType = errorMessage ? 'error' : 'hint';
-    return (
-      <View style={styles.errorView}>
-        <View style={styles.errorIcon}>
-          <Icon color={messageColor} source="ic_error" size={scaledIconSize} />
-        </View>
-        <Text
-          accessibilityLabel={`${componentId}|${messageType}-text`}
-          style={Styles.flex}
-          color={messageColor}
-          typography={'description_default_regular'}
-        >
-          {errorMessage ?? hintTextDefault}
-        </Text>
-      </View>
-    );
-  }
-  if (errorSpacing) {
-    return <View style={[styles.errorView, styles.errorSpacing]} />;
-  }
-  return <View />;
-};
-
-/**
- * Floating label on the input's top border with a required `*` and an
- * optional pressable icon; renders nothing without `floatingValue`.
- */
-export const FloatingView: FC<FloatingViewProps> = ({
-  floatingValue,
-  floatingIconColor,
-  disabled,
-  floatingIcon,
-  required,
-  style,
-  onPress,
-  componentId,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  const scaledTop = useScaleSize(10);
-  if (floatingValue) {
-    let floatingTextColor = theme.colors.text.hint;
-    let floatingIconTintColor = floatingIconColor;
-    if (disabled) {
-      floatingTextColor = theme.colors.text.disable;
-      floatingIconTintColor = theme.colors.text.disable;
-    }
-
-    return (
-      <View
-        style={[
-          styles.floatingView,
-          styles.floatingViewLayer,
-          {
-            backgroundColor: theme.colors.background.surface,
-            top: -scaledTop,
-          },
-          style,
-        ]}
-      >
-        <Text
-          color={floatingTextColor}
-          typography={'label_s_medium'}
-          accessibilityLabel={`${componentId}|floating-text`}
-        >
-          {floatingValue}
-          {required && (
-            <Text
-              typography={'label_s_medium'}
-              color={theme.colors.error.primary}
-            >
-              *
-            </Text>
-          )}
-        </Text>
-        {!!floatingIcon && (
-          <TouchableOpacity
-            activeOpacity={onPress ? 0.6 : 1}
-            onPress={onPress}
-            accessibilityLabel={`${componentId}|floating-icon-touch`}
-          >
-            <Icon
-              color={floatingIconTintColor}
-              source={floatingIcon}
-              size={16}
-              style={styles.floatingIcon}
-              accessibilityLabel={`${componentId}|floating-icon`}
-            />
-          </TouchableOpacity>
-        )}
-      </View>
-    );
-  }
-  return null;
-};
-
-/**
- * Trailing slot: spinner while `loading`, an icon when `icon` is a known icon
- * name or URL, otherwise `icon` as a text action (first 15 chars).
- */
-export const RenderTrailing: FC<TrailingProps> = ({
-  loading,
-  color,
-  icon,
-  onPressIcon,
-  componentId,
-}) => {
-  const { theme } = useContext(ApplicationContext);
-  if (loading) {
-    return <Loader type={'spinner'} color={color} style={styles.icon} />;
-  }
-
-  if (icon) {
-    const isIconName = !!(IconSources as any)?.[icon]?.uri;
-    const isIcon = isIconName || icon.includes('http');
-    const renderIconTouchable = (content: ReactNode) => {
-      return (
-        <TouchableOpacity
-          accessibilityLabel={`${componentId}|trailing-touch`}
-          onPress={onPressIcon}
-          style={styles.icon}
-        >
-          {content}
-        </TouchableOpacity>
-      );
-    };
-
-    if (isIcon) {
-      return renderIconTouchable(
-        <Icon
-          color={color}
-          source={icon as string}
-          size={24}
-          accessibilityLabel={`${componentId}|trailing-icon`}
-        />,
-      );
-    }
-    return renderIconTouchable(
-      <Text
-        typography="action_xs_bold"
-        color={color ?? theme.colors.primary}
-        numberOfLines={1}
-        accessibilityLabel={`${componentId}|trailing-text`}
-      >
-        {icon!.substring(0, 15)}
-      </Text>,
-    );
-  }
-  return null;
-};