jfs-components 0.0.77 → 0.0.79

package/lib/typescript/src/components/SuggestiveSearch/SuggestiveSearch.d.ts

@@ -0,0 +1,123 @@
+import React from 'react';
+import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+export type SuggestiveSearchOptionValue = string | number;
+export type SuggestiveSearchOption = {
+    /** Stable, unique value used to identify the suggestion. */
+    value: SuggestiveSearchOptionValue;
+    /** Human-readable label shown in the suggestion list and the input. */
+    label: string;
+    /** Whether the suggestion is non-selectable. */
+    disabled?: boolean;
+};
+/**
+ * Suggestions accept either a bare string (used as both value and label) or a
+ * full `{ value, label }` option object for richer data.
+ */
+export type SuggestiveSearchItem = string | SuggestiveSearchOption;
+export type SuggestiveSearchProps = {
+    /** Label rendered above the input. */
+    label?: string;
+    /** Placeholder text shown when the query is empty. */
+    placeholder?: string;
+    /**
+     * Suggestions to filter against the current query. May be bare strings or
+     * `{ value, label }` objects.
+     */
+    items?: SuggestiveSearchItem[];
+    /**
+     * Current query text (controlled). When `undefined` the component manages
+     * its own query state internally.
+     */
+    inputValue?: string;
+    /** Initial query text for uncontrolled mode. */
+    defaultInputValue?: string;
+    /** Called whenever the query text changes (typing or selection). */
+    onInputChange?: (text: string) => void;
+    /**
+     * Currently selected suggestion value (controlled). When `undefined` the
+     * component tracks the selection internally.
+     */
+    value?: SuggestiveSearchOptionValue | null;
+    /** Initial selected value for uncontrolled mode. */
+    defaultValue?: SuggestiveSearchOptionValue | null;
+    /** Called when a suggestion is chosen. */
+    onValueChange?: (value: SuggestiveSearchOptionValue | null, option?: SuggestiveSearchOption) => void;
+    /**
+     * Custom predicate deciding whether an option matches the current query.
+     * Defaults to a case-insensitive substring match on the label.
+     */
+    filter?: (query: string, option: SuggestiveSearchOption) => boolean;
+    /**
+     * Minimum number of characters required before suggestions are shown.
+     * @default 1
+     */
+    minChars?: number;
+    /** Caps the number of suggestions rendered. Defaults to no limit. */
+    maxResults?: number;
+    /**
+     * Highlights the matched substring of each suggestion in bold.
+     * @default true
+     */
+    highlightMatch?: boolean;
+    /**
+     * Message shown when the query has matched no suggestions. When omitted,
+     * the dropdown simply stays hidden on an empty result set.
+     */
+    emptyMessage?: string;
+    /** Custom renderer for a suggestion row (overrides the default label). */
+    renderItem?: (option: SuggestiveSearchOption, meta: {
+        query: string;
+        isSelected: boolean;
+    }) => React.ReactNode;
+    /** Controlled open state of the suggestion dropdown. */
+    open?: boolean;
+    /** Initial open state for uncontrolled mode. */
+    defaultOpen?: boolean;
+    /** Called whenever the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Maximum height of the suggestion list before it becomes scrollable.
+     * @default 240
+     */
+    menuMaxHeight?: number;
+    /**
+     * Vertical gap between the input and the suggestion dropdown.
+     * @default 6
+     */
+    menuOffset?: number;
+    /** Renders a required asterisk next to the label. */
+    isRequired?: boolean;
+    /** Disables interaction and dims the field. */
+    isDisabled?: boolean;
+    /** Marks the field as invalid and shows `errorMessage`. */
+    isInvalid?: boolean;
+    /** Renders the field as read-only (non-interactive, not dimmed). */
+    isReadOnly?: boolean;
+    /** Helper text displayed below the input. */
+    supportText?: string;
+    /** Replaces `supportText` when `isInvalid` is true. */
+    errorMessage?: string;
+    /** Modes for design token resolution. */
+    modes?: Record<string, any>;
+    /** Style overrides for the outermost wrapper. */
+    style?: StyleProp<ViewStyle>;
+    /** Style overrides for the input row. */
+    inputStyle?: StyleProp<ViewStyle>;
+    /** Style overrides for the input text. */
+    inputTextStyle?: StyleProp<TextStyle>;
+    /** Style overrides for the suggestion dropdown container. */
+    menuStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label. Defaults to the visible label / placeholder. */
+    accessibilityLabel?: string;
+    /** Accessibility hint. */
+    accessibilityHint?: string;
+    /** Called when the input receives focus. */
+    onFocus?: RNTextInputProps['onFocus'];
+    /** Called when the input loses focus. */
+    onBlur?: RNTextInputProps['onBlur'];
+    /** Test identifier. */
+    testID?: string;
+};
+declare function SuggestiveSearch({ label, placeholder, items, inputValue, defaultInputValue, onInputChange, value, defaultValue, onValueChange, filter, minChars, maxResults, highlightMatch, emptyMessage, renderItem, open, defaultOpen, onOpenChange, menuMaxHeight, menuOffset, isRequired, isDisabled, isInvalid, isReadOnly, supportText, errorMessage, modes: propModes, style, inputStyle, inputTextStyle, menuStyle, accessibilityLabel, accessibilityHint, onFocus, onBlur, testID, }: SuggestiveSearchProps): import("react/jsx-runtime").JSX.Element;
+export default SuggestiveSearch;
+//# sourceMappingURL=SuggestiveSearch.d.ts.map

package/lib/typescript/src/components/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AccountCard, type AccountCardProps, type AccountCardState } from './AccountCard/AccountCard';
 export { default as ActionFooter, type ActionFooterProps } from './ActionFooter/ActionFooter';
+export { default as Attached, type AttachedProps, type AttachedPosition } from './Attached/Attached';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
@@ -24,9 +25,11 @@ export { default as Divider, type DividerProps, type DividerDirection } from './
 export { default as Drawer } from './Drawer/Drawer';
 export { default as Dropdown, DropdownItem, type DropdownProps, type DropdownItemProps } from './Dropdown/Dropdown';
 export { default as DropdownInput, type DropdownInputProps, type DropdownInputOption, type DropdownInputOptionValue } from './DropdownInput/DropdownInput';
+export { default as SuggestiveSearch, type SuggestiveSearchProps, type SuggestiveSearchOption, type SuggestiveSearchOptionValue, type SuggestiveSearchItem } from './SuggestiveSearch/SuggestiveSearch';
 export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA';
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
+export { default as FullscreenModal, type FullscreenModalProps } from './FullscreenModal/FullscreenModal';
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
@@ -51,6 +54,7 @@ export { default as LottiePlayer, type LottiePlayerProps, type LottieAnimationSo
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard, type MediaCardProps } from './MediaCard/MediaCard';
 export { default as MerchantProfile, type MerchantProfileProps } from './MerchantProfile/MerchantProfile';
+export { default as MessageField, type MessageFieldProps, type MessageFieldState } from './MessageField/MessageField';
 export { default as MetricLegendItem, type MetricLegendItemProps } from './MetricLegendItem/MetricLegendItem';
 export { default as MoneyValue } from './MoneyValue/MoneyValue';
 export { default as NoteInput, type NoteInputProps } from './NoteInput/NoteInput';
@@ -60,9 +64,10 @@ export { default as Numpad, type NumpadProps, type NumpadKeyValue } from './Nump
 export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
-export { default as Stepper } from './Stepper/Stepper';
-export { Step } from './Stepper/Step';
-export { StepLabel } from './Stepper/StepLabel';
+export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export { default as Stepper, type StepperProps } from './Stepper/Stepper';
+export { Step, type StepProps, type StepStatus } from './Stepper/Step';
+export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as StatusHero, type StatusHeroProps } from './StatusHero/StatusHero';
 export { default as ThreadHero, type ThreadHeroProps } from './ThreadHero/ThreadHero';
@@ -74,6 +79,7 @@ export { default as UpiHandle } from './UpiHandle/UpiHandle';
 export { default as VStack, type VStackProps } from './VStack/VStack';
 export { default as ChipGroup, type ChipGroupProps } from './ChipGroup/ChipGroup';
 export { default as EmptyState, type EmptyStateProps } from './EmptyState/EmptyState';
+export { default as ExpandableCheckbox, type ExpandableCheckboxProps } from './ExpandableCheckbox/ExpandableCheckbox';
 export { default as Accordion, type AccordionProps } from './Accordion/Accordion';
 export { default as AccordionCheckbox, type AccordionCheckboxProps } from './AccordionCheckbox/AccordionCheckbox';
 export { default as ActionTile, type ActionTileProps } from './ActionTile/ActionTile';
@@ -106,6 +112,7 @@ export { default as AmountInput, type AmountInputProps } from './AmountInput/Amo
 export { default as PageHero, type PageHeroProps } from './PageHero/PageHero';
 export { default as Popup, type PopupProps, type PopupRef } from './Popup/Popup';
 export { default as PortfolioHero, type PortfolioHeroProps } from './PortfolioHero/PortfolioHero';
+export { default as PlanComparisonCard, type PlanComparisonCardProps, type PlanComparisonColumn, type PlanComparisonRow, type PlanComparisonCellValue } from './PlanComparisonCard/PlanComparisonCard';
 export { default as PoweredByLabel, type PoweredByLabelProps } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel, type ProductLabelProps } from './ProductLabel/ProductLabel';
 export { default as ProductOverview, type ProductOverviewProps, type ProductOverviewStat } from './ProductOverview/ProductOverview';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-05-25T10:18:38.037Z
+ * Generated: 2026-05-29T17:01:15.629Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.77",
+  "version": "0.0.79",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import {
   View,
   Text,
@@ -21,9 +21,49 @@ if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental
   UIManager.setLayoutAnimationEnabledExperimental(true)
 }
 
+type AccordionStateMode = 'Idle' | 'Hover' | 'Open' | 'Open Hover' | 'Disabled'
+
+function resolveAccordionStateMode(
+  disabled: boolean,
+  isExpanded: boolean,
+  isHovered: boolean,
+  contained: boolean,
+): AccordionStateMode {
+  if (disabled) return 'Disabled'
+
+  if (contained) {
+    return isExpanded ? 'Open Hover' : 'Hover'
+  }
+
+  if (isExpanded) {
+    return isHovered ? 'Open Hover' : 'Open'
+  }
+
+  return isHovered ? 'Hover' : 'Idle'
+}
+
+function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextStyle['fontWeight'] {
+  if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    if (normalized === 'bold') return '700'
+    if (normalized === 'medium') return '500'
+    if (normalized === 'regular' || normalized === 'normal') return '400'
+    if (/^\d+$/.test(normalized)) return normalized as TextStyle['fontWeight']
+    return value as TextStyle['fontWeight']
+  }
+  return fallback
+}
+
 export type AccordionProps = {
   /** The accordion header title */
   title?: string;
+  /**
+   * When `true`, the header always uses the filled background treatment
+   * (Figma Hover / Open Hover visuals). Defaults to `false` (transparent at
+   * rest, filled only while hovered or pressed).
+   */
+  contained?: boolean;
   /** Initial expanded state. Defaults to false (collapsed) */
   defaultExpanded?: boolean;
   /** Controlled expanded state. When provided, the component becomes controlled */
@@ -51,31 +91,20 @@ export type AccordionProps = {
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *
- * This component supports:
- *  - **Expandable/collapsible content** with smooth animation
- *  - **States**: Idle, Hover, Open, Disabled
- *  - **Slot** for custom content
- *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ * Supports two visual treatments via the `contained` prop:
+ *  - **`contained={false}`** (default) — transparent header at rest; filled
+ *    background on hover / press.
+ *  - **`contained={true}`** — header always uses the filled background.
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "content" → `children`
+ * Interaction states (Idle, Hover, Open, Disabled) are resolved automatically
+ * from `expanded`, `disabled`, hover, and `contained` — consumers should not
+ * pass `'Accordion States'` in `modes`.
  *
  * @component
- * @param {Object} props
- * @param {string} [props.title='Accordion title'] - The accordion header title
- * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
- * @param {boolean} [props.expanded] - Controlled expanded state
- * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
- * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
- * @param {React.ReactNode} [props.children] - Content to display when expanded
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function Accordion({
   title = 'Accordion title',
+  contained = false,
   defaultExpanded = false,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -89,23 +118,31 @@ function Accordion({
   webAccessibilityProps,
   ...rest
 }: AccordionProps) {
-  // Internal state for uncontrolled mode
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
-  
-  // Determine if controlled or uncontrolled
+  const [isHovered, setIsHovered] = useState(false)
+
   const isControlled = controlledExpanded !== undefined
   const isExpanded = isControlled ? controlledExpanded : internalExpanded
-  
-  // Hover state for web
-  const [isHovered, setIsHovered] = useState(false)
-  
-  // Handle toggle
+
+  const resolvedModes = useMemo(() => {
+    const accordionState = resolveAccordionStateMode(
+      disabled,
+      isExpanded,
+      isHovered,
+      contained,
+    )
+
+    return {
+      ...modes,
+      'Accordion States': accordionState,
+    }
+  }, [contained, disabled, isExpanded, isHovered, modes])
+
   const handleToggle = () => {
     if (disabled) return
-    
-    // Animate the layout change
+
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-    
+
     if (isControlled) {
       onExpandedChange?.(!isExpanded)
     } else {
@@ -113,38 +150,45 @@ function Accordion({
       onExpandedChange?.(!isExpanded)
     }
   }
-  
-  // Resolve design tokens
-  const titleColor = disabled
-    ? '#999999'
-    : getVariableByName('accordion/title/color', modes) || '#0d0d0d'
-  const titleFontSize = getVariableByName('accordion/title/fontSize', modes) || 18
-  const titleLineHeight = getVariableByName('accordion/title/lineHeight', modes) || 20
-  const titleFontFamily = getVariableByName('accordion/title/fontFamily', modes) || 'System'
-  
-  const iconColor = getVariableByName('accordion/icon/color', modes) || '#141414'
-  const iconSize = getVariableByName('accordion/icon/size', modes) || 24
-  
-  const headerGap = getVariableByName('accordion/header/gap', modes) || 12
-  const headerPaddingVertical = getVariableByName('accordion/header/padding/vertical', modes) || 24
-  const headerBackground = isHovered && !disabled
-    ? '#f2f2f2'
-    : getVariableByName('accordion/header/background', modes) || 'transparent'
-  
-  const contentGap = getVariableByName('accordion/content/gap', modes) || 12
-  const contentPaddingTop = getVariableByName('accordion/content/padding/top', modes) || 8
-  const contentPaddingBottom = isExpanded
-    ? (getVariableByName('accordion/content/padding/bottom', modes) ?? 24)
-    : 8
-  
-  const borderColor = getVariableByName('accordion/border/color', modes) || '#e6e6e6'
-  
-  // Styles
+
+  const titleColor =
+    (getVariableByName('accordion/title/color', resolvedModes) as string | null) ?? '#0d0d0d'
+  const titleFontSize =
+    (getVariableByName('accordion/title/fontSize', resolvedModes) as number | null) ?? 14
+  const titleLineHeight =
+    (getVariableByName('accordion/title/lineHeight', resolvedModes) as number | null) ?? 20
+  const titleFontFamily =
+    (getVariableByName('accordion/title/fontFamily', resolvedModes) as string | null) ?? 'System'
+  const titleFontWeight = toFontWeight(
+    getVariableByName('accordion/title/fontWeight', resolvedModes),
+    '700',
+  )
+
+  const iconColor =
+    (getVariableByName('accordion/icon/color', resolvedModes) as string | null) ?? '#141414'
+  const iconSize = (getVariableByName('accordion/icon/size', resolvedModes) as number | null) ?? 24
+
+  const headerGap = (getVariableByName('accordion/header/gap', resolvedModes) as number | null) ?? 12
+  const headerPaddingVertical =
+    (getVariableByName('accordion/header/padding/vertical', resolvedModes) as number | null) ?? 8
+  const headerBackground =
+    (getVariableByName('accordion/header/background', resolvedModes) as string | null) ??
+    'transparent'
+
+  const contentGap = (getVariableByName('accordion/content/gap', resolvedModes) as number | null) ?? 12
+  const contentPaddingTop =
+    (getVariableByName('accordion/content/padding/top', resolvedModes) as number | null) ?? 8
+  const contentPaddingBottom =
+    (getVariableByName('accordion/content/padding/bottom', resolvedModes) as number | null) ?? 8
+
+  const borderColor =
+    (getVariableByName('accordion/border/color', resolvedModes) as string | null) ?? '#e6e6e6'
+
   const containerStyle: ViewStyle = {
     borderBottomWidth: 1,
     borderBottomColor: borderColor,
   }
-  
+
   const headerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -154,16 +198,16 @@ function Accordion({
     backgroundColor: headerBackground,
     overflow: 'hidden',
   }
-  
+
   const titleStyle: TextStyle = {
     flex: 1,
     color: titleColor,
     fontSize: titleFontSize,
     lineHeight: titleLineHeight,
     fontFamily: titleFontFamily,
-    fontWeight: '700',
+    fontWeight: titleFontWeight,
   }
-  
+
   const contentStyle: ViewStyle = {
     backgroundColor: 'transparent',
     gap: contentGap,
@@ -172,11 +216,9 @@ function Accordion({
     paddingHorizontal: 0,
     overflow: 'hidden',
   }
-  
-  // Generate default accessibility label
+
   const defaultAccessibilityLabel = accessibilityLabel || title
-  
-  // Web platform support
+
   const webProps = usePressableWebSupport({
     restProps: {},
     onPress: handleToggle,
@@ -184,12 +226,11 @@ function Accordion({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps,
   })
-  
-  // Process children to pass modes
+
   const processedChildren = children
-    ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+    ? cloneChildrenWithModes(React.Children.toArray(children), resolvedModes)
     : null
-  
+
   return (
     <View style={[containerStyle, style]} {...rest}>
       <Pressable
@@ -217,12 +258,12 @@ function Accordion({
         <Icon
           name={isExpanded ? 'ic_minus' : 'ic_add'}
           size={iconSize}
-          color={disabled ? '#999999' : iconColor}
+          color={iconColor}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         />
       </Pressable>
-      
+
       {isExpanded && processedChildren && (
         <View style={contentStyle}>
           {processedChildren}
@@ -233,4 +274,3 @@ function Accordion({
 }
 
 export default Accordion
-

package/src/components/ActionFooter/ActionFooter.tsx

@@ -1,7 +1,10 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import {
+  Animated,
+  Keyboard,
   View,
   Platform,
+  type KeyboardEvent,
   type ViewStyle,
   type StyleProp,
 } from 'react-native'
@@ -133,6 +136,47 @@ function ActionFooter({
   style,
   accessibilityLabel,
 }: ActionFooterProps) {
+  // -------------------------------------------------------------------------
+  // Keep the footer locked in place behind the software keyboard (Android).
+  // -------------------------------------------------------------------------
+  //
+  // The Android activity is configured with `windowSoftInputMode="adjustResize"`,
+  // which shrinks the app window by the keyboard height when the keyboard
+  // opens. A bottom-anchored footer therefore gets lifted UP by the keyboard
+  // height — exactly the jump the design does not want.
+  //
+  // To counteract that, we translate the footer back DOWN by the same keyboard
+  // height so it visually stays exactly where it was (now sitting behind the
+  // keyboard). iOS does not resize the window for the keyboard, so the footer
+  // already stays put there; we only run this on Android to avoid pushing the
+  // footer off-screen on platforms that don't lift it in the first place.
+  const keyboardOffset = useRef(new Animated.Value(0)).current
+  useEffect(() => {
+    if (Platform.OS !== 'android') return undefined
+
+    const animateTo = (toValue: number, duration?: number) => {
+      Animated.timing(keyboardOffset, {
+        toValue,
+        // Match the OS keyboard animation so the resize and our counter-shift
+        // cancel out smoothly with no visible footer movement.
+        duration: typeof duration === 'number' && duration > 0 ? duration : 150,
+        useNativeDriver: true,
+      }).start()
+    }
+
+    const showSub = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) => {
+      animateTo(e?.endCoordinates?.height ?? 0, e?.duration)
+    })
+    const hideSub = Keyboard.addListener('keyboardDidHide', (e: KeyboardEvent) => {
+      animateTo(0, e?.duration)
+    })
+
+    return () => {
+      showSub.remove()
+      hideSub.remove()
+    }
+  }, [keyboardOffset])
+
   // 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.
@@ -192,13 +236,21 @@ function ActionFooter({
   }, [children, modes])
 
   return (
-    <View
-      style={[containerStyle, WEB_SHADOW, style]}
+    <Animated.View
+      style={[
+        containerStyle,
+        WEB_SHADOW,
+        style,
+        // Counter-translate by the keyboard height on Android so `adjustResize`
+        // can't lift the footer above the keyboard (no-op on iOS/web where the
+        // value stays at 0).
+        { transform: [{ translateY: keyboardOffset }] },
+      ]}
       accessibilityRole="toolbar"
       accessibilityLabel={accessibilityLabel}
     >
       <View style={slotStyle}>{enhancedChildren}</View>
-    </View>
+    </Animated.View>
   )
 }