react-native-ui-lib 8.3.3 → 8.3.4-snapshot.7783

package/src/components/picker/types.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, ReactNode, type JSX } from 'react';
 import { FlatListProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { ExpandableOverlayProps, ExpandableOverlayMethods } from '../../incubator/expandableOverlay';
 import { ModalTopBarProps } from '../modal/TopBar';
@@ -19,7 +19,7 @@ export type PickerSingleValue = string | number;
 export type PickerMultiValue = PickerSingleValue[];
 export type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
 type PickerFilteredItems = ReactNode | Pick<PickerItemProps, 'label' | 'value' | 'disabled'>[] | undefined;
-type RenderPickerOverloads<ValueType> = ValueType extends PickerValue ? (value?: ValueType, label?: string) => React.ReactElement : never;
+type RenderPickerOverloads<ValueType> = ValueType extends PickerValue ? (value?: ValueType, label?: string) => React.ReactElement<any> : never;
 type RenderPicker = RenderPickerOverloads<PickerValue>;
 export type RenderCustomModalProps = {
     visible: boolean;
@@ -55,7 +55,7 @@ type PickerPropsDeprecation = {
     renderCustomDialogHeader?: (callbacks: {
         onDone?: () => void;
         onCancel?: () => void;
-    }) => React.ReactElement;
+    }) => React.ReactElement<any>;
     /**
      * @deprecated
      * Render custom picker input (the value will be passed)
@@ -69,7 +69,7 @@ type PickerPropsDeprecation = {
      * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
      * instead use renderOverlay
      */
-    renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
+    renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement<any>;
     /**
      * @deprecated
      * Pass props to the picker modal
@@ -97,7 +97,7 @@ type PickerSearchProps = {
     /**
      * Render custom search input (only when passing showSearch)
      */
-    renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
+    renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement<any>;
 };
 type PickerListProps = PickerSearchProps & {
     /**
@@ -106,7 +106,7 @@ type PickerListProps = PickerSearchProps & {
     renderHeader?: (callbacks: {
         onDone?: () => void;
         onCancel?: () => void;
-    }) => React.ReactElement;
+    }) => React.ReactElement<any>;
     /**
      * Pass props to the list component that wraps the picker items (allows to control FlatList behavior)
      */
@@ -128,7 +128,7 @@ type PickerExpandableOverlayProps = {
     /**
      * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
      */
-    renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement;
+    renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement<any>;
     /**
      * Add blur effect to picker modal (iOS only)
      */
@@ -213,11 +213,11 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & Picke
     renderItem?: (value: PickerValue, itemProps: PickerItemProps & {
         isSelected: boolean;
         isItemDisabled: boolean;
-    }, label?: string) => React.ReactElement;
+    }, label?: string) => React.ReactElement<any>;
     /**
      * Render custom top element
      */
-    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement<any>;
     /**
      * Selection status bar props
      */

package/src/components/progressBar/index.d.ts

@@ -1,4 +1,4 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, type JSX } from 'react';
 import { Animated, StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
 /**
  * @description: Progress bar
@@ -67,7 +67,7 @@ declare class ProgressBar extends PureComponent<Props, State> {
         borderTopRightRadius: number;
     };
     renderCustomElement(): React.FunctionComponentElement<any> | undefined;
-    render(): React.JSX.Element;
+    render(): JSX.Element;
 }
 export { ProgressBar };
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>> & typeof ProgressBar;

package/src/components/screenFooter/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './types';
+export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow };
+declare const _default: React.ForwardRefExoticComponent<ScreenFooterProps & React.RefAttributes<any>> & {
+    (props: ScreenFooterProps): React.JSX.Element;
+    displayName: string;
+};
+export default _default;

package/src/components/screenFooter/index.js

@@ -0,0 +1,211 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { Image } from 'react-native-ui-lib';
+import Animated, { useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Keyboard } from 'uilib-native';
+import { SafeAreaContextPackage } from "../../optionalDependencies";
+import View from "../view";
+import Assets from "../../assets";
+import { Colors, Shadows, Spacings } from "../../style";
+import { asBaseComponent, Constants } from "../../commons/new";
+import { useKeyboardHeight } from "../../hooks";
+import { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from "./types";
+export { ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow };
+const ScreenFooter = props => {
+  const {
+    testID,
+    layout,
+    alignment,
+    horizontalAlignment,
+    backgroundType,
+    children,
+    keyboardBehavior = KeyboardBehavior.STICKY,
+    itemsFit,
+    itemWidth,
+    horizontalItemsDistribution: distribution,
+    visible = true,
+    animationDuration = 200,
+    shadow = ScreenFooterShadow.SH20,
+    hideDivider = false
+  } = props;
+  const keyboard = useAnimatedKeyboard();
+  const [height, setHeight] = useState(0);
+  const visibilityTranslateY = useSharedValue(0);
+
+  // Update visibility translation when visible or height changes
+  useEffect(() => {
+    visibilityTranslateY.value = withTiming(visible ? 0 : height, {
+      duration: animationDuration
+    });
+  }, [visible, height, animationDuration, visibilityTranslateY]);
+
+  // Animated style for STICKY behavior (counters Android system offset + visibility)
+  const stickyAnimatedStyle = useAnimatedStyle(() => {
+    const counterSystemOffset = Constants.isAndroid ? keyboard.height.value : 0;
+    return {
+      transform: [{
+        translateY: counterSystemOffset + visibilityTranslateY.value
+      }]
+    };
+  });
+
+  // Animated style for HOISTED behavior (visibility only, keyboard handled by KeyboardAccessoryView)
+  const hoistedAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateY: visibilityTranslateY.value
+      }]
+    };
+  });
+  const onLayout = useCallback(event => {
+    setHeight(event.nativeEvent.layout.height);
+  }, []);
+  const isSolid = backgroundType === ScreenFooterBackgrounds.SOLID;
+  const isFading = backgroundType === ScreenFooterBackgrounds.FADING;
+  const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
+  const childrenCount = React.Children.count(children);
+  const justifyContent = useMemo(() => {
+    if (isHorizontal) {
+      if (distribution === HorizontalItemsDistribution.SPREAD) {
+        return childrenCount === 1 ? 'center' : 'space-between';
+      }
+      switch (horizontalAlignment) {
+        case FooterAlignment.START:
+          return 'flex-start';
+        case FooterAlignment.END:
+          return 'flex-end';
+        default:
+          return 'center';
+      }
+    }
+    return 'flex-start';
+  }, [isHorizontal, distribution, horizontalAlignment, childrenCount]);
+  const alignItems = useMemo(() => {
+    if (layout === ScreenFooterLayouts.VERTICAL) {
+      if (itemsFit === ItemsFit.STRETCH) {
+        return 'stretch';
+      }
+    }
+    switch (alignment) {
+      case FooterAlignment.START:
+        return 'flex-start';
+      case FooterAlignment.END:
+        return 'flex-end';
+      default:
+        return 'center';
+    }
+  }, [layout, itemsFit, alignment]);
+  const useSafeAreaInsets = SafeAreaContextPackage?.useSafeAreaInsets ?? (() => Constants.getSafeAreaInsets());
+  const insets = useSafeAreaInsets();
+  const keyboardHeight = useKeyboardHeight();
+  const isKeyboardVisible = keyboardHeight > 0;
+  const contentContainerStyle = useMemo(() => {
+    const style = [styles.contentContainer, layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer : styles.verticalContainer, {
+      alignItems,
+      justifyContent
+    }];
+    if (!isKeyboardVisible) {
+      style.push({
+        paddingBottom: insets.bottom
+      });
+    }
+    if (isSolid) {
+      const shadowStyle = Shadows[shadow]?.top;
+      const backgroundElevation = shadowStyle?.elevation || 0;
+      // When the background has a shadow (elevation on Android), it might render on top of the content
+      style.push({
+        elevation: backgroundElevation + 1
+      });
+    }
+    return style;
+  }, [layout, alignItems, justifyContent, insets.bottom, isSolid, shadow, isKeyboardVisible]);
+  const solidBackgroundStyle = useMemo(() => {
+    if (!isSolid) {
+      return undefined;
+    }
+    const shadowStyle = Shadows[shadow]?.top;
+    const dividerStyle = hideDivider ? undefined : {
+      borderTopWidth: 1,
+      borderColor: Colors.$outlineDefault
+    };
+    return [shadowStyle, dividerStyle];
+  }, [isSolid, shadow, hideDivider]);
+  const renderBackground = useCallback(() => {
+    if (isSolid) {
+      return <View testID={testID ? `${testID}.solidBackground` : undefined} absF bg-$backgroundElevated style={solidBackgroundStyle} pointerEvents="none" />;
+    }
+    if (isFading) {
+      return <View testID={testID ? `${testID}.fadingBackground` : undefined} absF pointerEvents="none">
+          <Image source={Assets.internal.images.bottomGradient} style={styles.background} resizeMode="stretch" tintColor={Colors.$backgroundDefault} />
+        </View>;
+    }
+    return null;
+  }, [testID, isSolid, isFading, solidBackgroundStyle]);
+  const renderChild = useCallback((child, index) => {
+    if (itemsFit === ItemsFit.FIXED && itemWidth) {
+      const fixedStyle = isHorizontal ? {
+        width: itemWidth,
+        flexShrink: 1,
+        overflow: 'hidden',
+        flexDirection: 'row',
+        justifyContent: 'center'
+      } : {
+        width: itemWidth,
+        maxWidth: '100%'
+      };
+      return <View key={index} style={fixedStyle}>
+          {child}
+        </View>;
+    }
+    if (isHorizontal && React.isValidElement(child) && itemsFit === ItemsFit.STRETCH) {
+      return <View flex row centerH key={index}>
+          {child}
+        </View>;
+    }
+    return child;
+  }, [itemsFit, itemWidth, isHorizontal]);
+  const childrenArray = React.Children.toArray(children).slice(0, 3).map(renderChild);
+  const renderFooterContent = useCallback(() => {
+    return <>
+        {renderBackground()}
+        <View testID={testID ? `${testID}.content` : undefined} style={contentContainerStyle}>
+          {childrenArray}
+        </View>
+      </>;
+  }, [renderBackground, testID, contentContainerStyle, childrenArray]);
+  if (keyboardBehavior === KeyboardBehavior.HOISTED) {
+    return <Animated.View style={[styles.container, hoistedAnimatedStyle]} pointerEvents={visible ? 'box-none' : 'none'}>
+        <Keyboard.KeyboardAccessoryView renderContent={renderFooterContent} kbInputRef={undefined} scrollBehavior={Keyboard.KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET} useSafeArea={false} manageScrollView={false} revealKeyboardInteractive onHeightChanged={setHeight} />
+      </Animated.View>;
+  }
+  return <Animated.View testID={testID} onLayout={onLayout} style={[styles.container, stickyAnimatedStyle]}>
+      {renderFooterContent()}
+    </Animated.View>;
+};
+ScreenFooter.displayName = 'ScreenFooter';
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  contentContainer: {
+    paddingTop: Spacings.s4,
+    paddingHorizontal: Spacings.s5,
+    paddingBottom: Spacings.s5
+  },
+  horizontalContainer: {
+    flexDirection: 'row',
+    gap: Spacings.s5
+  },
+  verticalContainer: {
+    flexDirection: 'column',
+    gap: Spacings.s3
+  },
+  background: {
+    width: '100%',
+    height: '100%'
+  }
+});
+export default asBaseComponent(ScreenFooter);

package/src/components/screenFooter/screenFooter.api.json

@@ -0,0 +1,262 @@
+{
+  "name": "ScreenFooter",
+  "category": "layout",
+  "description": "A flexible footer component that stays at the bottom of the screen with support for various layouts, backgrounds, and keyboard behaviors",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ScreenFooterScreen.tsx",
+  "images": [],
+  "props": [
+    {
+      "name": "backgroundType",
+      "type": "ScreenFooterBackgrounds",
+      "description": "The background style of the footer [fading, solid, transparent]",
+      "default": "'solid'"
+    },
+    {
+      "name": "layout",
+      "type": "ScreenFooterLayouts",
+      "description": "The layout direction of footer items [horizontal, vertical]",
+      "default": "'vertical'"
+    },
+    {
+      "name": "alignment",
+      "type": "FooterAlignment",
+      "description": "Cross-axis alignment [start, center, end]. In vertical layout: controls horizontal position. In horizontal layout: controls vertical position",
+      "default": "'center'"
+    },
+    {
+      "name": "horizontalAlignment",
+      "type": "FooterAlignment",
+      "description": "Main-axis alignment for horizontal layout only when distribution is STACK [start, center, end]",
+      "default": "'center'"
+    },
+    {
+      "name": "horizontalItemsDistribution",
+      "type": "HorizontalItemsDistribution",
+      "description": "Distribution of items in horizontal layout [stack, spread]",
+      "default": "'spread'"
+    },
+    {
+      "name": "itemsFit",
+      "type": "ItemsFit",
+      "description": "How items should fit in vertical layout [fit, fixed, stretch]",
+      "default": "'fit'"
+    },
+    {
+      "name": "keyboardBehavior",
+      "type": "KeyboardBehavior",
+      "description": "The footer's keyboard behavior [sticky, hoisted]. Sticky: stays at bottom when keyboard opens. Hoisted: pushed up when keyboard opens",
+      "default": "'sticky'"
+    },
+    {
+      "name": "itemWidth",
+      "type": "DimensionValue",
+      "description": "Fixed width for all items (used with ItemsFit.FIXED)"
+    },
+    {
+      "name": "visible",
+      "type": "boolean",
+      "description": "If true, the footer is visible. If false, it slides down",
+      "default": "true"
+    },
+    {
+      "name": "animationDuration",
+      "type": "number",
+      "description": "Duration of the show/hide animation in ms",
+      "default": "200"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "If true, the footer will respect the safe area (add bottom padding)",
+      "default": "true"
+    },
+    {
+      "name": "shadow",
+      "type": "ScreenFooterShadow",
+      "description": "Shadow preset for solid background [sh10, sh20, sh30]. Only applies when backgroundType is 'solid'",
+      "default": "'sh20'"
+    },
+    {
+      "name": "hideDivider",
+      "type": "boolean",
+      "description": "If true, hides the top divider for solid background. Only applies when backgroundType is 'solid'",
+      "default": "false"
+    }
+  ],
+  "snippet": [
+    "<View flex bg-$backgroundDefault>",
+    "  <ScrollView>",
+    "    {/* Screen content */}",
+    "  </ScrollView>",
+    "  <ScreenFooter>",
+    "    <Button label=\"Primary Action\" />",
+    "    <Button label=\"Secondary Action\" link />",
+    "  </ScreenFooter>",
+    "</View>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "ScreenFooter",
+      "description": "The ScreenFooter component provides a flexible footer that stays at the bottom of the screen with support for various layouts, backgrounds, and keyboard behaviors. It's ideal for forms, checkout flows, and any screen requiring persistent bottom actions.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_overview_preview.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Use Examples",
+            "description": "The ScreenFooter can be used in various scenarios depending on the content and action hierarchy. Each layout type serves different use cases and provides different visual emphasis.",
+            "content": []
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Layout Type",
+              "Use Case",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Horizontal - Spread",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_spread.png"
+                  }
+                ],
+                "description": "Best for two equally important actions positioned at opposite ends. Common in navigation flows or when presenting contrasting choices."
+              },
+              {
+                "title": "Horizontal - Stacked Center",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_stacked.png"
+                  }
+                ],
+                "description": "Ideal for primary and secondary actions of similar importance that should be grouped together in the center."
+              },
+              {
+                "title": "Horizontal - With Content",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_content.png"
+                  }
+                ],
+                "description": "Perfect for checkout or summary screens where you need to display information alongside actions. The footer can accommodate text, prices, or other content elements."
+              }
+            ],
+            "title": "Horizontal Layouts",
+            "description": "markdown: Horizontal layouts are best when screen content is abundant and vertical space is limited. They keep actions compact while maintaining good reachability. Use the `layout` prop set to `ScreenFooterLayouts.HORIZONTAL`."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Layout Type",
+              "Use Case",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Vertical - Fit",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_vertical_fit.png"
+                  }
+                ],
+                "description": "Buttons are sized based on their content. Best for clear action hierarchy with a prominent primary button and a subtle secondary link button."
+              },
+              {
+                "title": "Vertical - Stretched",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_vertical_stretched.png"
+                  }
+                ],
+                "description": "Full-width buttons provide maximum tap area and visual prominence. Recommended for forms and high-priority actions where accessibility is crucial."
+              }
+            ],
+            "title": "Vertical Layouts",
+            "description": "markdown: Vertical layouts provide better action prominence and are recommended when a single primary action needs emphasis, or when content can be obscured. Use `itemsFit` prop with `ItemsFit.STRETCH` for full-width buttons or `ItemsFit.FIT` for content-sized buttons."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Background Type",
+              "Visual",
+              "When to Use"
+            ],
+            "items": [
+              {
+                "title": "Solid",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_solid.png"
+                  }
+                ],
+                "description": "Provides clear separation with a solid background and optional shadow. Best for content-heavy screens where the footer needs to stand out."
+              },
+              {
+                "title": "Fading",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_fading.png"
+                  }
+                ],
+                "description": "Creates a subtle gradient overlay that doesn't obscure content completely. Ideal for minimal designs or when content should remain partially visible."
+              },
+              {
+                "title": "Transparent",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_transparent.png"
+                  }
+                ],
+                "description": "No background overlay. Use when the screen has minimal content or a solid background color, and separation isn't needed."
+              }
+            ],
+            "title": "Background Types",
+            "description": "markdown: Choose the background type based on your content density and visual hierarchy needs. Set using the `backgroundType` prop."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Behavior",
+              "Description",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Sticky",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_behavior_sticky.png"
+                  }
+                ],
+                "description": "The footer remains at the bottom of the screen even when the keyboard is open. Best for short forms or when the footer actions don't relate to keyboard input."
+              },
+              {
+                "title": "Hoisted",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_behavior_hoisted.png"
+                  }
+                ],
+                "description": "The footer moves up with the keyboard, staying above it. Recommended for forms where users need immediate access to submit actions while typing."
+              }
+            ],
+            "title": "Keyboard Behavior",
+            "description": "markdown: Control how the footer responds to the keyboard using the `keyboardBehavior` prop. Choose `KeyboardBehavior.STICKY` to keep it at the bottom, or `KeyboardBehavior.HOISTED` to move it above the keyboard."
+          }
+        ]
+      }
+    ]
+  }
+}
+

package/src/components/screenFooter/types.d.ts

@@ -0,0 +1,100 @@
+import { PropsWithChildren } from 'react';
+import { DimensionValue } from 'react-native';
+export declare enum ScreenFooterLayouts {
+    HORIZONTAL = "horizontal",
+    VERTICAL = "vertical"
+}
+export declare enum ScreenFooterBackgrounds {
+    FADING = "fading",
+    SOLID = "solid",
+    TRANSPARENT = "transparent"
+}
+export declare enum FooterAlignment {
+    START = "start",
+    CENTER = "center",
+    END = "end"
+}
+export declare enum HorizontalItemsDistribution {
+    STACK = "stack",
+    SPREAD = "spread"
+}
+export declare enum ItemsFit {
+    FIT = "fit",
+    STRETCH = "stretch",
+    FIXED = "fixed"
+}
+export declare enum KeyboardBehavior {
+    STICKY = "sticky",
+    HOISTED = "hoisted"
+}
+export declare enum ScreenFooterShadow {
+    SH10 = "sh10",
+    SH20 = "sh20",
+    SH30 = "sh30"
+}
+export interface ScreenFooterProps extends PropsWithChildren<{}> {
+    /**
+     * Used as testing identifier
+     */
+    testID?: string;
+    /**
+     * The background style of the footer
+     */
+    backgroundType?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;
+    /**
+     * The layout direction of footer items
+     */
+    layout?: ScreenFooterLayouts | `${ScreenFooterLayouts}`;
+    /**
+     * Cross-axis alignment:
+     * - Vertical layout: controls horizontal position (left/center/right)
+     * - Horizontal layout: controls vertical position (top/center/bottom)
+     */
+    alignment?: FooterAlignment | `${FooterAlignment}`;
+    /**
+     * Main-axis alignment for horizontal layout only (when distribution is STACK):
+     * Controls horizontal position (left/center/right) of the stacked items
+     */
+    horizontalAlignment?: FooterAlignment | `${FooterAlignment}`;
+    /**
+     * Distribution of items in horizontal layout (stack/spread)
+     */
+    horizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`;
+    /**
+     * How items should fit in vertical layout (fit/fixed/stretch)
+     */
+    itemsFit?: ItemsFit | `${ItemsFit}`;
+    /**
+     * The footer's keyboard behavior.
+     * When STICKY, the footer will stay at the bottom of the screen when keyboard is opened.
+     * When HOISTED, the footer will be pushed up when keyboard is opened.
+     */
+    keyboardBehavior?: KeyboardBehavior | `${KeyboardBehavior}`;
+    /**
+     * Fixed width for all items (used with ItemsFit.FIXED)
+     */
+    itemWidth?: DimensionValue;
+    /**
+     * If true, the footer is visible. If false, it slides down.
+     */
+    visible?: boolean;
+    /**
+     * Duration of the show/hide animation in ms.
+     * @default 200
+     */
+    animationDuration?: number;
+    /**
+     * If true, the footer will respect the safe area (add bottom padding)
+     */
+    useSafeArea?: boolean;
+    /**
+     * Shadow preset for solid background (default: SH20)
+     * Only applies when backgroundType is 'solid'
+     */
+    shadow?: ScreenFooterShadow | `${ScreenFooterShadow}`;
+    /**
+     * If true, hides the top divider for solid background (default: false)
+     * Only applies when backgroundType is 'solid'
+     */
+    hideDivider?: boolean;
+}