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

package/lib/android/build.gradle

@@ -1,10 +1,10 @@
 apply plugin: 'com.android.library'
 
 project.ext {
-    buildToolsVersion = rootProject.ext.has("buildToolsVersion") ? rootProject.ext.buildToolsVersion : '35.0.0'
+    buildToolsVersion = rootProject.ext.has("buildToolsVersion") ? rootProject.ext.buildToolsVersion : '36.0.0'
     minSdkVersion = rootProject.ext.has("minSdkVersion") ? rootProject.ext.minSdkVersion : 24
-    compileSdkVersion = rootProject.ext.has("compileSdkVersion") ? rootProject.ext.compileSdkVersion : 35
-    targetSdkVersion = rootProject.ext.has("targetSdkVersion") ? rootProject.ext.targetSdkVersion : 34
+    compileSdkVersion = rootProject.ext.has("compileSdkVersion") ? rootProject.ext.compileSdkVersion : 36
+    targetSdkVersion = rootProject.ext.has("targetSdkVersion") ? rootProject.ext.targetSdkVersion : 36
     supportLibVersion = rootProject.ext.has("supportLibVersion") ? rootProject.ext.supportLibVersion  : '28.0.0'
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "8.3.3",
+  "version": "8.3.4-snapshot.7772",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -112,7 +112,6 @@
     "react-native": ">=0.77.3",
     "react-native-gesture-handler": ">=2.24.0",
     "react-native-reanimated": ">=3.17.5",
-    "react-native-safe-area-context": ">=5.6.2",
     "uilib-native": "^5.0.1"
   },
   "jest": {

package/screenFooter.d.ts

@@ -0,0 +1,2 @@
+import {ScreenFooter} from './src';
+export default ScreenFooter;

package/screenFooter.js

@@ -0,0 +1 @@
+module.exports = require('./src/components/screenFooter').default;

package/scripts/release/prReleaseNotesCommon.js

@@ -9,6 +9,7 @@ const BRANCH_CATEGORIES = [
   {name: 'fixes', branch: 'fix/', title: ':wrench: Fixes'},
   {name: 'infra', branch: 'infra/', title: ':gear: Maintenance & Infra'}
 ];
+const SILENT_PRS = ['none', 'n/a', 'na'];
 
 function getBranchPrefixes() {
   return BRANCH_CATEGORIES.map(category => category.branch);
@@ -95,7 +96,7 @@ function isSilent(pr) {
     return true;
   } else {
     const changelog = pr.info.changelog.toLowerCase();
-    if (changelog === 'none' || changelog === 'n/a') {
+    if (SILENT_PRS.includes(changelog)) {
       return true;
     }
   }

package/src/assets/internal/images/index.js

@@ -1,4 +1,7 @@
 export const images = {
+  get bottomGradient() {
+    return require('./bottomGradient.png');
+  },
   get gradient() {
     return require('./gradient.png');
   },

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;
+}

package/src/components/screenFooter/types.js

@@ -0,0 +1,39 @@
+export let ScreenFooterLayouts = /*#__PURE__*/function (ScreenFooterLayouts) {
+  ScreenFooterLayouts["HORIZONTAL"] = "horizontal";
+  ScreenFooterLayouts["VERTICAL"] = "vertical";
+  return ScreenFooterLayouts;
+}({});
+export let ScreenFooterBackgrounds = /*#__PURE__*/function (ScreenFooterBackgrounds) {
+  ScreenFooterBackgrounds["FADING"] = "fading";
+  ScreenFooterBackgrounds["SOLID"] = "solid";
+  ScreenFooterBackgrounds["TRANSPARENT"] = "transparent";
+  return ScreenFooterBackgrounds;
+}({});
+export let FooterAlignment = /*#__PURE__*/function (FooterAlignment) {
+  FooterAlignment["START"] = "start";
+  FooterAlignment["CENTER"] = "center";
+  FooterAlignment["END"] = "end";
+  return FooterAlignment;
+}({});
+export let HorizontalItemsDistribution = /*#__PURE__*/function (HorizontalItemsDistribution) {
+  HorizontalItemsDistribution["STACK"] = "stack";
+  HorizontalItemsDistribution["SPREAD"] = "spread";
+  return HorizontalItemsDistribution;
+}({});
+export let ItemsFit = /*#__PURE__*/function (ItemsFit) {
+  ItemsFit["FIT"] = "fit";
+  ItemsFit["STRETCH"] = "stretch";
+  ItemsFit["FIXED"] = "fixed";
+  return ItemsFit;
+}({});
+export let KeyboardBehavior = /*#__PURE__*/function (KeyboardBehavior) {
+  KeyboardBehavior["STICKY"] = "sticky";
+  KeyboardBehavior["HOISTED"] = "hoisted";
+  return KeyboardBehavior;
+}({});
+export let ScreenFooterShadow = /*#__PURE__*/function (ScreenFooterShadow) {
+  ScreenFooterShadow["SH10"] = "sh10";
+  ScreenFooterShadow["SH20"] = "sh20";
+  ScreenFooterShadow["SH30"] = "sh30";
+  return ScreenFooterShadow;
+}({});

package/src/components/view/index.js

@@ -2,6 +2,7 @@ import { useModifiers, useThemeProps } from "../../hooks";
 import React, { useEffect, useMemo, useState } from 'react';
 import { View as RNView, SafeAreaView, Animated } from 'react-native';
 import { Constants } from "../../commons/new";
+import { SafeAreaContextPackage } from "../../optionalDependencies";
 
 /**
  * Extra props when using reanimated (only non experimental props)
@@ -65,7 +66,12 @@ function View(props, ref) {
     }
   }, []);
   const ViewContainer = useMemo(() => {
-    const container = useSafeArea && Constants.isIOS ? SafeAreaView : RNView;
+    let container = RNView;
+    if (useSafeArea && SafeAreaContextPackage?.SafeAreaView) {
+      container = SafeAreaContextPackage.SafeAreaView;
+    } else if (useSafeArea && Constants.isIOS) {
+      container = SafeAreaView;
+    }
     if (reanimated) {
       const {
         default: Reanimated
@@ -89,11 +95,8 @@ function View(props, ref) {
   if (!ready) {
     return null;
   }
-  return (
-    //@ts-expect-error
-    <ViewContainer accessibilityElementsHidden={inaccessible} importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined} fsTagName={recorderTag} {...others} style={_style} ref={ref}>
+  return <ViewContainer accessibilityElementsHidden={inaccessible} importantForAccessibility={inaccessible ? 'no-hide-descendants' : undefined} fsTagName={recorderTag} {...others} style={_style} ref={ref}>
       {children}
-    </ViewContainer>
-  );
+    </ViewContainer>;
 }
 export default React.forwardRef(View);

package/src/hooks/index.d.ts

@@ -6,6 +6,7 @@ export { default as useModifiers } from './useModifiers';
 export { default as useOrientation } from './useOrientation';
 export { default as useScrollEnabler } from './useScrollEnabler';
 export { default as useScrollReached } from './useScrollReached';
+export { default as useScrollToHide } from './useScrollToHide';
 export { default as useScrollToItem } from './useScrollToItem';
 export { default as useScrollTo } from './useScrollTo';
 export { default as useThemeProps } from './useThemeProps';

package/src/hooks/index.js

@@ -6,6 +6,7 @@ export { default as useModifiers } from "./useModifiers";
 export { default as useOrientation } from "./useOrientation";
 export { default as useScrollEnabler } from "./useScrollEnabler";
 export { default as useScrollReached } from "./useScrollReached";
+export { default as useScrollToHide } from "./useScrollToHide";
 export { default as useScrollToItem } from "./useScrollToItem";
 export { default as useScrollTo } from "./useScrollTo";
 export { default as useThemeProps } from "./useThemeProps";

package/src/hooks/useScrollToHide/index.d.ts

@@ -0,0 +1,24 @@
+import { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+export type ScrollToHideProps = {
+    /**
+     * The threshold (in pixels) to ignore small scroll movements before updating visibility.
+     * Defaults to 0 (immediate reaction).
+     */
+    scrollingThreshold?: number;
+};
+export type ScrollToHideResult = {
+    /**
+     * onScroll callback (should be passed to your ScrollView/FlatList onScroll prop).
+     */
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Whether the footer should be visible based on scroll direction.
+     */
+    visible: boolean;
+};
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+declare const useScrollToHide: (props?: ScrollToHideProps) => ScrollToHideResult;
+export default useScrollToHide;

package/src/hooks/useScrollToHide/index.js

@@ -0,0 +1,48 @@
+import { useState, useCallback, useRef } from 'react';
+/**
+ * @description: A hook that tracks scroll direction to toggle visibility (e.g., for hiding a footer on scroll).
+ * @example: const {onScroll, visible} = useScrollToHide();
+ */
+const useScrollToHide = (props = {}) => {
+  const {
+    scrollingThreshold = 0
+  } = props;
+  const [visible, setVisible] = useState(true);
+  const prevContentOffset = useRef(0);
+  const onScroll = useCallback(event => {
+    const {
+      nativeEvent: {
+        contentOffset: {
+          y: currentOffset
+        },
+        contentSize: {
+          height: contentHeight
+        },
+        layoutMeasurement: {
+          height: layoutHeight
+        }
+      }
+    } = event;
+
+    // Ignore bounces (iOS)
+    if (currentOffset < 0 || currentOffset > contentHeight - layoutHeight) {
+      return;
+    }
+    const diff = currentOffset - prevContentOffset.current;
+    if (Math.abs(diff) > scrollingThreshold) {
+      if (diff > 0 && visible) {
+        // Scrolling Down -> Hide
+        setVisible(false);
+      } else if (diff < 0 && !visible) {
+        // Scrolling Up -> Show
+        setVisible(true);
+      }
+      prevContentOffset.current = currentOffset;
+    }
+  }, [visible, scrollingThreshold]);
+  return {
+    onScroll,
+    visible
+  };
+};
+export default useScrollToHide;

package/src/incubator/expandableOverlay/index.js

@@ -33,11 +33,15 @@ const ExpandableOverlay = (props, ref) => {
     setExpandableVisible(true);
     onPress?.(props);
   }, [onPress, customValue]);
-  const closeExpandable = useCallback(() => {
+  const dismissOverlay = useCallback(() => {
     setExpandableVisible(false);
     focusAccessibility();
+  }, [focusAccessibility]);
+  const closeExpandable = useCallback(() => {
+    dismissOverlay();
     useDialog ? dialogProps?.onDismiss?.() : modalProps?.onDismiss?.();
-  }, [useDialog, dialogProps?.onDismiss, modalProps?.onDismiss, focusAccessibility]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dismissOverlay, dialogProps?.onDismiss, modalProps?.onDismiss]);
   const toggleExpandable = useCallback(() => visible ? closeExpandable() : openExpandable(), [visible, openExpandable, closeExpandable]);
   useImperativeHandle(ref, () => ({
     openExpandable,
@@ -45,7 +49,7 @@ const ExpandableOverlay = (props, ref) => {
     toggleExpandable
   }));
   const renderModal = () => {
-    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={closeExpandable} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
+    return <Modal testID={`${testID}.overlay`} overlayBackgroundColor={Colors.$backgroundDefault} {...modalProps} visible={visible} onDismiss={dismissOverlay} onRequestClose={closeExpandable} onBackgroundPress={closeExpandable}>
         {showTopBar && <Modal.TopBar onDone={closeExpandable} {...topBarProps} />}
         {expandableContent}
       </Modal>;

package/src/index.d.ts

@@ -38,6 +38,7 @@ export { default as ExpandableSection, ExpandableSectionProps } from './componen
 export { default as Fader, FaderProps, FaderPosition } from './components/fader';
 export { default as FeatureHighlight, FeatureHighlightProps } from './components/featureHighlight';
 export { default as FloatingButton, FloatingButtonProps, FloatingButtonLayouts } from './components/floatingButton';
+export { default as ScreenFooter, ScreenFooterProps, ScreenFooterLayouts, ScreenFooterBackgrounds, FooterAlignment, HorizontalItemsDistribution, ItemsFit, KeyboardBehavior, ScreenFooterShadow } from './components/screenFooter';
 export { default as Gradient, GradientProps, GradientTypes } from './components/gradient';
 export { default as Slider } from './components/slider';
 export { default as GradientSlider } from './components/slider/GradientSlider';

package/src/index.js

@@ -99,6 +99,15 @@ var _exportNames = {
   FloatingButton: true,
   FloatingButtonProps: true,
   FloatingButtonLayouts: true,
+  ScreenFooter: true,
+  ScreenFooterProps: true,
+  ScreenFooterLayouts: true,
+  ScreenFooterBackgrounds: true,
+  FooterAlignment: true,
+  HorizontalItemsDistribution: true,
+  ItemsFit: true,
+  KeyboardBehavior: true,
+  ScreenFooterShadow: true,
   Gradient: true,
   GradientProps: true,
   GradientTypes: true,
@@ -699,6 +708,12 @@ Object.defineProperty(exports, "FloatingButtonProps", {
     return _floatingButton().FloatingButtonProps;
   }
 });
+Object.defineProperty(exports, "FooterAlignment", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().FooterAlignment;
+  }
+});
 Object.defineProperty(exports, "ForwardRefInjectedProps", {
   enumerable: true,
   get: function () {
@@ -790,6 +805,12 @@ Object.defineProperty(exports, "HintProps", {
   }
 });
 exports.Hooks = void 0;
+Object.defineProperty(exports, "HorizontalItemsDistribution", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().HorizontalItemsDistribution;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function () {
@@ -815,6 +836,12 @@ Object.defineProperty(exports, "ImageProps", {
   }
 });
 exports.Incubator = void 0;
+Object.defineProperty(exports, "ItemsFit", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ItemsFit;
+  }
+});
 Object.defineProperty(exports, "KeyboardAwareFlatList", {
   enumerable: true,
   get: function () {
@@ -827,6 +854,12 @@ Object.defineProperty(exports, "KeyboardAwareScrollView", {
     return _KeyboardAwareScrollView().default;
   }
 });
+Object.defineProperty(exports, "KeyboardBehavior", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().KeyboardBehavior;
+  }
+});
 Object.defineProperty(exports, "ListItem", {
   enumerable: true,
   get: function () {
@@ -1146,6 +1179,36 @@ Object.defineProperty(exports, "RenderCustomModalProps", {
     return _picker().RenderCustomModalProps;
   }
 });
+Object.defineProperty(exports, "ScreenFooter", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().default;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterBackgrounds", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterBackgrounds;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterLayouts", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterLayouts;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterProps", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterProps;
+  }
+});
+Object.defineProperty(exports, "ScreenFooterShadow", {
+  enumerable: true,
+  get: function () {
+    return _screenFooter().ScreenFooterShadow;
+  }
+});
 Object.defineProperty(exports, "ScrollBar", {
   enumerable: true,
   get: function () {
@@ -1906,6 +1969,13 @@ function _floatingButton() {
   };
   return data;
 }
+function _screenFooter() {
+  const data = _interopRequireWildcard(require("./components/screenFooter"));
+  _screenFooter = function () {
+    return data;
+  };
+  return data;
+}
 function _gradient() {
   const data = _interopRequireWildcard(require("./components/gradient"));
   _gradient = function () {