jfs-components 0.0.74 → 0.0.77

package/lib/typescript/src/skeleton/shimmer-tokens.d.ts

@@ -0,0 +1,160 @@
+/**
+ * Single source of truth for the skeleton shimmer behaviour spec.
+ *
+ * The two modes mirror the documented design behaviour:
+ *
+ *   Normal:
+ *     - 1.5s linear sawtooth cycle (band sweeps end-to-end then resets)
+ *     - 135° gradient (top-left -> bottom-right), fixed angle on any aspect
+ *       ratio via SVG userSpaceOnUse coordinates
+ *     - Band alpha animates 33% -> 100% -> 33% across the band core;
+ *       transparent fades at the gradient edges hide the sawtooth reset
+ *     - 50–100ms per-item stagger
+ *
+ *   Reduced motion (system-level OS toggle):
+ *     - 3.0s ease-in-out cycle
+ *     - No translation — solid white overlay opacity pulses 33% -> 100% in
+ *       place (`opacityRange` below is consumed in this path)
+ *     - No gradient
+ *     - No stagger
+ *
+ * Centralising the spec here keeps `Skeleton.tsx` purely presentational and
+ * lets us tune the behaviour in one place if design ever updates it.
+ */
+export type SkeletonKind = 'text' | 'image' | 'badge' | 'other';
+export interface ShimmerModeSpec {
+    durationMs: number;
+    /** Per-item delay range. Min/max in milliseconds. */
+    staggerMsRange: readonly [number, number];
+    gradient: boolean;
+    /** Opacity range applied to the moving "blob" overlay. */
+    opacityRange: readonly [number, number];
+}
+export declare const SHIMMER: {
+    readonly normal: {
+        durationMs: number;
+        staggerMsRange: readonly [50, 100];
+        gradient: true;
+        opacityRange: readonly [0.33, 1];
+    };
+    readonly reduced: {
+        durationMs: number;
+        staggerMsRange: readonly [0, 0];
+        gradient: false;
+        opacityRange: readonly [0.33, 1];
+    };
+    /**
+     * Gradient angle in degrees, measured the CSS way: 0deg points "up", 90deg
+     * "right", 135deg therefore points down-right (top-left corner to
+     * bottom-right corner).
+     */
+    readonly gradientAngleDeg: 135;
+    /**
+     * Hard cap on the cumulative stagger delay so very long lists don't drift
+     * out forever; the wave wraps after this many ms.
+     */
+    readonly maxStaggerMs: 600;
+};
+/**
+ * Token names — referenced via `getVariableByName(...)` so the existing
+ * design-token resolver does its job (caching, mode resolution, etc.).
+ *
+ * The four tokens already live in the Figma export at
+ * `src/design-tokens/Coin Variables-variables-full.json`:
+ *
+ *   - `bg/defaultSkeleton`              -> base color for every skeleton block
+ *   - `cornerRadius/defaultSkeleton`    -> text & "other" (pill: 9999)
+ *   - `cornerRadius/imageSkeleton`      -> images (10)
+ *   - `cornerRadius/badgeSkeleton`      -> badges (4)
+ */
+export declare const SKELETON_TOKEN: {
+    readonly background: "bg/defaultSkeleton";
+    readonly radius: {
+        text: string;
+        image: string;
+        badge: string;
+        other: string;
+    };
+};
+/**
+ * Fallback constants used when the token resolver is unavailable (tests,
+ * SSR, etc.). Match the current Figma values.
+ */
+export declare const SKELETON_FALLBACK: {
+    readonly backgroundColor: "rgb(245, 245, 246)";
+    readonly radius: {
+        text: number;
+        image: number;
+        badge: number;
+        other: number;
+    };
+};
+/**
+ * Compute a stable per-item delay from a 0-based registration index.
+ *
+ * We pick the midpoint of the documented range (75ms) so the cascade is
+ * deterministic for snapshot tests and visually identical between renders.
+ * The total delay is then wrapped at `maxStaggerMs` so deep lists don't
+ * drift past the cap.
+ */
+export declare function staggerDelayMs(index: number, mode: ShimmerModeSpec): number;
+/** One stop on the moving shimmer gradient (offset 0–1 along the 135° axis). */
+export interface ShimmerGradientStop {
+    offset: number;
+    opacity: number;
+}
+/**
+ * Gradient stops for the normal-mode moving band. The peak sits at 0.5; fully
+ * transparent tails at 0 and 1. The 0.30 / 0.70 stops mark where the band
+ * reaches the documented 33 % alpha.
+ */
+export declare const SHIMMER_GRADIENT_STOPS: readonly ShimmerGradientStop[];
+/** Offset (0–1) of the brightest point on the gradient line. */
+export declare function gradientPeakOffset(stops?: readonly ShimmerGradientStop[]): number;
+/**
+ * How far the gradient extends from the peak to a fully transparent stop,
+ * expressed as a fraction of the gradient line (0–1). With the default stops
+ * this is 0.5 (peak at 0.5, transparent at 0 and 1).
+ *
+ * This value drives the overshoot: the band must travel this fraction of a
+ * full corner-to-corner sweep *beyond* each corner so the soft transparent
+ * tails fully clear the box before the sawtooth reset.
+ */
+export declare function gradientTransparentExtent(stops?: readonly ShimmerGradientStop[]): number;
+export interface ShimmerMotionGeometry {
+    /** Square overlay side length (gradient is painted on this). */
+    overlaySize: number;
+    /** Padding to centre the overlay on the box. */
+    padX: number;
+    padY: number;
+    /** Translation (k, k) when the band is fully off-screen before entry. */
+    kStart: number;
+    /** Translation (k, k) when the band is fully off-screen after exit. */
+    kEnd: number;
+    /**
+     * Normalised overshoot on each side of the corner-to-corner sweep. A value
+     * of 0.5 means the travel extends 50 % past each corner; at reset the
+     * clock jumps from `1 + overshoot` to `-overshoot` while the box still
+     * shows only the base skeleton colour.
+     */
+    overshootFraction: number;
+    /** k distance from peak-at-TL to peak-at-BR. */
+    cornerTravelK: number;
+    /** k distance from peak to fully transparent tail on the gradient. */
+    fadeBeyondPeakK: number;
+}
+/**
+ * Derive the moving-shimmer geometry from box size, overlay size, and the
+ * gradient stop layout.
+ *
+ * Coordinate model (135° / down-right):
+ *   - Peak stripe world diagonal sum: (W + H) / 2 + 2k
+ *   - Gradient offset 0 → 1 spans 2 × overlaySize in diagonal-sum units
+ *   - Transparent tail beyond peak: fadeExtent × 2 × overlaySize / 2
+ *     = fadeExtent × overlaySize in k units
+ *
+ * The sawtooth clock maps linearly kStart → kEnd so t = 0 and t = 1 both
+ * land with the entire gradient outside the box — no jitter on reset.
+ */
+export declare function computeShimmerMotion(width: number, height: number, overlaySize: number, stops?: readonly ShimmerGradientStop[]): ShimmerMotionGeometry | null;
+//# sourceMappingURL=shimmer-tokens.d.ts.map

package/lib/typescript/src/skeleton/useReducedMotion.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Cross-platform "prefers reduced motion" hook.
+ *
+ *  - Native: reads `AccessibilityInfo.isReduceMotionEnabled()` and subscribes
+ *    to `reduceMotionChanged` events so the value stays live as the user
+ *    toggles the OS setting.
+ *  - Web: uses `window.matchMedia('(prefers-reduced-motion: reduce)')`,
+ *    subscribing to its `change` event.
+ *  - Anywhere either API is missing: returns `false` (no reduction).
+ *
+ * The hook never throws — every native API access is defensively guarded so
+ * the skeleton system stays safe in tests, SSR, and constrained sandboxes.
+ */
+export declare function useReducedMotion(): boolean;
+//# sourceMappingURL=useReducedMotion.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.74",
+  "version": "0.0.77",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -94,9 +94,19 @@
   },
   "peerDependencies": {
     "@react-native-community/blur": ">=4.4.0",
+    "lottie-react": ">=2.4.0",
+    "lottie-react-native": ">=7.0.0",
     "react": "*",
     "react-native": "*"
   },
+  "peerDependenciesMeta": {
+    "lottie-react": {
+      "optional": true
+    },
+    "lottie-react-native": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.28.5",
     "@babel/parser": "^7.28.5",

package/src/components/ActionFooter/ActionFooter.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import {
   View,
+  Platform,
   type ViewStyle,
   type StyleProp,
-  Platform,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
@@ -12,48 +12,118 @@ import IconButton from '../IconButton/IconButton'
 export type ActionFooterProps = {
   /**
    * Content to render inside the action footer slot.
-   * Typically includes IconButton and Button components.
+   * Typically includes `IconButton` and `Button` components.
+   * `IconButton` children keep their intrinsic square size; everything else
+   * is auto-stretched to share the remaining horizontal space equally.
    */
   children?: React.ReactNode
   /**
    * Mode configuration passed to the token resolver.
-   * Pass the same modes to children components for consistent theming.
+   * Automatically merged into every slot child via {@link cloneChildrenWithModes}
+   * so callers don't have to thread modes down by hand.
    */
   modes?: Record<string, any>
   /**
-   * Optional style overrides for the container
+   * Optional style overrides for the outer container.
    */
   style?: StyleProp<ViewStyle>
   /**
-   * Accessibility label for the footer region
+   * Accessibility label for the footer region (announced for the toolbar).
    */
   accessibilityLabel?: string
 }
 
+const IS_WEB = Platform.OS === 'web'
+
+// ---------------------------------------------------------------------------
+// Yoga-safe stretch
+// ---------------------------------------------------------------------------
+//
+// React Native (Yoga) interprets the `flex: 1` shorthand as
+//   { flexGrow: 1, flexShrink: 1, flexBasis: 0 }
+// which is the *equal-share* variant. That is the correct math for what we
+// want here (equal-width action buttons), BUT Yoga has a well-known foot-gun
+// when this child sits inside a parent whose main-axis size hasn't been
+// resolved yet on the first layout pass: the child collapses to 0 and the
+// inner text gets clipped to "" before the parent ever measures.
+//
+// The defensive incantation used elsewhere in this codebase (see
+// `CardCTA.leftWrap` and the `MediaCard.Header` fix in CHANGELOG.md) is to
+// keep the equal-share math but explicitly clamp `minWidth` to 0 so Yoga
+// always allows the child to participate in the shrink algorithm, even when
+// the parent itself is in an undetermined state. Combined with explicit
+// `flexGrow`/`flexShrink`/`flexBasis` (NOT the `flex` shorthand) this
+// renders correctly on iOS, Android, and Web — and crucially never produces
+// the "buttons render as empty pills" failure mode the previous version had
+// on iOS dev clients.
+const STRETCH_STYLE: ViewStyle = {
+  flexGrow: 1,
+  flexShrink: 1,
+  flexBasis: 0,
+  minWidth: 0,
+}
+
+// Platform-specific drop shadow. Web boxShadow can't go through
+// Platform.select (RN's typed surface doesn't include it) so we keep it as a
+// separate constant and append it below.
+const NATIVE_SHADOW = Platform.select<ViewStyle>({
+  ios: {
+    shadowColor: '#0c0d10',
+    shadowOffset: { width: 0, height: -12 },
+    shadowOpacity: 0.16,
+    shadowRadius: 24,
+  },
+  android: {
+    elevation: 16,
+  },
+  default: {},
+}) as ViewStyle
+
+const WEB_SHADOW = IS_WEB
+  ? ({
+      boxShadow:
+        '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)',
+    } as ViewStyle)
+  : null
+
+// The runtime token a slot child must equal (by reference) to be treated as
+// an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
+// element.type identity comparison works for both `<IconButton />` from the
+// same module and any `React.memo`-wrapped re-export. The fallback check
+// (`type.type === IconButton`) catches one extra layer of `forwardRef` /
+// `memo` wrapping which can happen when consumers re-export the component.
+function isIconButtonElement(element: React.ReactElement<any>): boolean {
+  const t: any = element.type
+  if (t === IconButton) return true
+  if (t && typeof t === 'object' && t.type === IconButton) return true
+  return false
+}
+
 /**
- * ActionFooter component that provides a fixed footer container for action buttons.
- * 
- * This component is designed to hold action items like IconButton and Button components
- * at the bottom of a screen. It includes a shadow for visual separation from content above.
- * 
- * The `modes` prop is automatically passed to all slot children. If a child has its own
- * `modes` prop, it will be merged with the parent's modes (child modes take precedence).
- * 
- * @component
- * @param {Object} props - Component props
- * @param {React.ReactNode} [props.children] - Action elements to display (e.g., IconButton, Button)
- * @param {Object} [props.modes={}] - Mode configuration for design tokens (automatically passed to children)
- * @param {Object} [props.style] - Optional style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the footer region
- * 
+ * ActionFooter — a sticky bottom container for primary screen actions.
+ *
+ * Layout contract:
+ *   - The outer container stretches horizontally (`alignSelf: 'stretch'`) so
+ *     it fills the parent regardless of whether the parent is a flex column,
+ *     a ScrollView contentContainer, or a plain View.
+ *   - The inner slot is a single row sized by its tallest child. It does NOT
+ *     use `flex: 1` — that previously caused the row to collapse to zero on
+ *     the first Yoga pass on native, taking the button labels with it.
+ *   - `IconButton` children keep their intrinsic square size.
+ *   - Every other child is auto-stretched with the Yoga-safe stretch style
+ *     above so two `<Button>` siblings render at equal width on iOS, Android,
+ *     and Web.
+ *
+ * The `modes` prop is automatically pushed down to every slot child via
+ * {@link cloneChildrenWithModes}; explicit child-level modes win over the
+ * parent's modes.
+ *
  * @example
  * ```tsx
- * // Basic usage - modes are automatically passed to all children.
- * // Non-IconButton children (e.g., Button) are auto-stretched to fill.
  * <ActionFooter modes={modes}>
  *   <IconButton iconName="ic_split" />
- *   <Button label="Request" />
- *   <Button label="Pay" />
+ *   <Button label="Request" modes={{ AppearanceBrand: 'Secondary' }} />
+ *   <Button label="Pay" modes={{ AppearanceBrand: 'Primary' }} />
  * </ActionFooter>
  * ```
  */
@@ -61,79 +131,75 @@ function ActionFooter({
   children,
   modes = EMPTY_MODES,
   style,
-  accessibilityLabel = undefined,
+  accessibilityLabel,
 }: ActionFooterProps) {
-  // Resolve design tokens
-  const backgroundColor = getVariableByName('actionFooter/background', modes) ?? '#ffffff'
-  const gap = getVariableByName('actionFooter/gap', modes) ?? 8
-  const paddingHorizontal = getVariableByName('actionFooter/padding/horizontal', modes) ?? 16
-  const paddingTop = getVariableByName('actionFooter/padding/top', modes) ?? 10
-  const paddingBottom = getVariableByName('actionFooter/padding/bottom', modes) ?? 41
+  // All token reads collapsed into a single useMemo keyed on `modes`. With
+  // the shared `EMPTY_MODES` default this resolves once for the common path
+  // and never re-allocates the container/slot style objects between renders.
+  const { containerStyle, slotStyle } = useMemo(() => {
+    const backgroundColor =
+      (getVariableByName('actionFooter/background', modes) ?? '#ffffff') as string
+    const gap = (getVariableByName('actionFooter/gap', modes) ?? 8) as number
+    const paddingHorizontal =
+      (getVariableByName('actionFooter/padding/horizontal', modes) ?? 16) as number
+    const paddingTop = (getVariableByName('actionFooter/padding/top', modes) ?? 10) as number
+    const paddingBottom = (getVariableByName('actionFooter/padding/bottom', modes) ?? 41) as number
 
-  // Shadow styles - cross-platform
-  const shadowStyle: ViewStyle = Platform.select({
-    ios: {
-      shadowColor: 'rgba(12, 13, 16, 1)',
-      shadowOffset: { width: 0, height: -12 },
-      shadowOpacity: 0.16,
-      shadowRadius: 24,
-    },
-    android: {
-      elevation: 16,
-    },
-    default: {
-      // Web shadow using boxShadow (RNW supports this)
-    },
-  }) as ViewStyle
+    const container: ViewStyle = {
+      // `alignSelf: 'stretch'` is the cross-platform way to ask "fill the
+      // parent's cross axis" — in the common case (column parent) this gives
+      // us full-width without the caller needing to pass `width: '100%'`.
+      alignSelf: 'stretch',
+      backgroundColor,
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      paddingTop,
+      paddingBottom,
+      ...NATIVE_SHADOW,
+    }
 
-  const containerStyle: ViewStyle = {
-    backgroundColor,
-    paddingLeft: paddingHorizontal,
-    paddingRight: paddingHorizontal,
-    paddingTop,
-    paddingBottom,
-    ...shadowStyle,
-  }
+    const slot: ViewStyle = {
+      flexDirection: 'row',
+      // Vertically center the IconButton against the slightly taller Buttons
+      // so the row reads as a single optical baseline.
+      alignItems: 'center',
+      gap,
+    }
 
-  // Slot container style for horizontal layout of action items
-  const slotStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-    gap,
-    flex: 1,
-  }
+    return { containerStyle: container, slotStyle: slot }
+  }, [modes])
 
-  // Web-specific box-shadow
-  const webShadow = Platform.OS === 'web'
-    ? { boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)' } as any
-    : {}
-
-  const flatChildren = flattenChildren(children)
-  const processedChildren = cloneChildrenWithModes(flatChildren, modes)
-
-  const enhancedChildren = (processedChildren as React.ReactNode[]).map((child, index) => {
-    if (!React.isValidElement(child)) return child
-    const element = child as React.ReactElement<any>
-    const isIconButton = element.type === IconButton
-    const stretchStyle = isIconButton ? undefined : { flex: 1 }
-    return React.cloneElement(element, {
-      key: element.key ?? index,
-      style: [stretchStyle, element.props.style],
+  // Process children once per (children, modes) tuple:
+  //   1. Flatten Fragments so each action is its own keyed sibling.
+  //   2. Push `modes` down so callers don't have to thread it manually.
+  //   3. Auto-stretch every non-IconButton with the Yoga-safe stretch style.
+  //
+  // The result identity is stable across re-renders when the inputs don't
+  // change, which keeps the `React.memo`-wrapped Button/IconButton children
+  // from re-rendering for no reason.
+  const enhancedChildren = useMemo(() => {
+    const flat = flattenChildren(children)
+    const withModes = cloneChildrenWithModes(flat, modes) as React.ReactNode[]
+    return withModes.map((child, index) => {
+      if (!React.isValidElement(child)) return child
+      const element = child as React.ReactElement<any>
+      if (isIconButtonElement(element)) return element
+      return React.cloneElement(element, {
+        key: element.key ?? `action-footer-item-${index}`,
+        style: [STRETCH_STYLE, element.props.style],
+      })
     })
-  })
+  }, [children, modes])
 
   return (
     <View
-      style={[containerStyle, webShadow, style]}
+      style={[containerStyle, WEB_SHADOW, style]}
       accessibilityRole="toolbar"
-      accessibilityLabel={undefined}
+      accessibilityLabel={accessibilityLabel}
     >
-      <View style={slotStyle}>
-        {enhancedChildren}
-      </View>
+      <View style={slotStyle}>{enhancedChildren}</View>
     </View>
   )
 }
 
-export default ActionFooter
-
+export default React.memo(ActionFooter)

package/src/components/Avatar/Avatar.tsx

@@ -14,6 +14,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png')
 
@@ -134,6 +136,12 @@ export type AvatarProps = {
   accessibilityLabel?: string;
   onPress?: () => void;
   disabled?: boolean;
+  /**
+   * Explicit per-instance loading override. When `true`, renders a
+   * same-size circular skeleton instead of the avatar. Defaults to
+   * inheriting from the surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel'>;
 
 function Avatar({
@@ -145,11 +153,17 @@ function Avatar({
   // component intentionally renders `accessibilityLabel={undefined}` on the
   // wrapper (the inner Text/Image carry the label instead).
   accessibilityLabel: _accessibilityLabel,
+  loading,
   ...rest
 }: AvatarProps) {
   const isMonogram = style === 'Monogram'
   const tokens = useMemo(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram])
 
+  // Skeleton context — read unconditionally; the actual short-circuit
+  // happens AFTER all remaining hooks below.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
   // Focus is a sustained visible state — keep mirroring on web; gate the
   // setter so it never fires on native (where focus events don't fire on
   // these elements anyway).
@@ -197,6 +211,18 @@ function Avatar({
     [tokens.containerStyle, isFocused]
   )
 
+  if (isLoading) {
+    const size = tokens.containerStyle.width as number
+    return (
+      <Skeleton
+        kind="other"
+        width={size}
+        height={size}
+        modes={modes}
+      />
+    )
+  }
+
   // The inner content varies; everything else (wrapper, handlers, style) is shared.
   const innerContent = isMonogram ? (
     <View style={monogramContainerStyle}>

package/src/components/Badge/Badge.tsx

@@ -8,6 +8,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 type BadgeProps = {
   /** Visible label text shown inside the badge */
@@ -19,6 +21,12 @@ type BadgeProps = {
   accessibilityLabel?: string
   style?: ViewStyle
   labelStyle?: TextStyle
+  /**
+   * Explicit per-instance loading override. When `true`, renders a
+   * badge-shaped skeleton placeholder instead of the badge. Defaults to
+   * inheriting from the surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel' | 'accessibilityRole'>
 
 function Badge({
@@ -28,6 +36,7 @@ function Badge({
   accessibilityLabel,
   style,
   labelStyle,
+  loading,
   ...rest
 }: BadgeProps) {
   // Resolve token values (fall back to sensible defaults)
@@ -51,6 +60,24 @@ function Badge({
     Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
     Math.round(fontSize * 1.2)
 
+  // Skeleton short-circuit. Size derived from the same tokens the loaded
+  // badge would use so the placeholder occupies the same box.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+  if (isLoading) {
+    const charWidth = fontSize * 0.55
+    const labelWidth = Math.max(label.length, 3) * charWidth
+    return (
+      <Skeleton
+        kind="badge"
+        width={paddingHorizontal * 2 + labelWidth}
+        height={paddingVertical * 2 + lineHeight}
+        style={{ alignSelf: 'flex-start' }}
+        modes={modes}
+      />
+    )
+  }
+
   const Container: any = onPress ? Pressable : View
 
   const containerStyle: ViewStyle = {