react-native-ui-lib 8.3.4 → 8.4.0

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.4",
+  "version": "8.4.0",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

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/floatingButton/floatingButton.api.json

@@ -1,12 +1,8 @@
 {
   "name": "FloatingButton",
   "category": "overlays",
-  "description": "Hovering button with gradient background",
-  "modifiers": [
-    "margin",
-    "background",
-    "color"
-  ],
+  "description": "Hovering button with gradient background, backed by ScreenFooter",
+  "modifiers": ["margin", "background", "color"],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx",
   "images": [
     "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true"
@@ -58,6 +54,12 @@
       "type": "boolean",
       "description": "Whether to show background overlay"
     },
+    {
+      "name": "hoisted",
+      "type": "boolean",
+      "description": "Whether the footer should be hoisted above the keyboard. When true, uses KeyboardAccessoryView for keyboard-aware positioning. When false, uses sticky positioning.",
+      "default": "true"
+    },
     {
       "name": "testID",
       "type": "string",
@@ -96,11 +98,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Property",
-              "Default",
-              "Full Width"
-            ],
+            "columns": ["Property", "Default", "Full Width"],
             "items": [
               {
                 "title": "Main button",
@@ -130,10 +128,7 @@
           },
           {
             "type": "table",
-            "columns": [
-              "Layout",
-              "Component"
-            ],
+            "columns": ["Layout", "Component"],
             "items": [
               {
                 "title": "Horizontal",

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

@@ -1,5 +1,4 @@
-import React, { PropsWithChildren, PureComponent } from 'react';
-import { Animated } from 'react-native';
+import React, { PropsWithChildren } from 'react';
 import { ButtonProps } from '../button';
 export declare enum FloatingButtonLayouts {
     VERTICAL = "Vertical",
@@ -23,7 +22,7 @@ export interface FloatingButtonProps {
      */
     bottomMargin?: number;
     /**
-     * Whether the buttons get the container's full with (vertical layout only)
+     * Whether the buttons get the container's full width (vertical layout only)
      */
     fullWidth?: boolean;
     /**
@@ -42,6 +41,12 @@ export interface FloatingButtonProps {
      * Whether to show background overlay
      */
     hideBackgroundOverlay?: boolean;
+    /**
+     * Whether the footer should be hoisted above the keyboard.
+     * When true (default), uses KeyboardAccessoryView for keyboard-aware positioning.
+     * When false, uses sticky positioning.
+     */
+    hoisted?: boolean;
     /**
      * Used as testing identifier
      * <TestID> - the floatingButton container
@@ -50,40 +55,9 @@ export interface FloatingButtonProps {
      */
     testID?: string;
 }
-/**
- * @description: Hovering button with gradient background
- * @modifiers: margin, background, color
- * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx
- * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true
- */
-declare class FloatingButton extends PureComponent<FloatingButtonProps> {
-    static displayName: string;
-    static floatingButtonLayouts: typeof FloatingButtonLayouts;
-    static defaultProps: {
-        duration: number;
-        buttonLayout: FloatingButtonLayouts;
-    };
-    initialVisibility?: boolean;
-    firstLoad: boolean;
-    visibleAnimated: Animated.Value;
-    constructor(props: FloatingButtonProps);
-    componentDidUpdate(prevProps: FloatingButtonProps): void;
-    getAnimatedStyle: () => {
-        opacity: Animated.Value;
-        transform: {
-            translateY: Animated.AnimatedInterpolation<string | number>;
-        }[];
-    };
-    get isSecondaryOnly(): boolean;
-    get isHorizontalLayout(): boolean;
-    get isSecondaryHorizontal(): boolean | undefined;
-    get isSecondaryVertical(): boolean | undefined;
-    renderButton(): React.JSX.Element | undefined;
-    renderOverlay: () => React.JSX.Element | undefined;
-    renderSecondaryButton(): React.JSX.Element | undefined;
-    renderHorizontalLayout(): React.JSX.Element;
-    renderVerticalLayout(): React.JSX.Element;
-    render(): false | React.JSX.Element | undefined;
-}
-declare const _default: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<any>> & typeof FloatingButton;
+declare const _default: React.ForwardRefExoticComponent<FloatingButtonProps & React.RefAttributes<any>> & {
+    (props: FloatingButtonProps): React.JSX.Element | null;
+    displayName: string;
+    floatingButtonLayouts: typeof FloatingButtonLayouts;
+};
 export default _default;

package/src/components/floatingButton/index.js

@@ -1,190 +1,80 @@
-import React, { PureComponent } from 'react';
-import { StyleSheet, Animated } from 'react-native';
-import { Constants, asBaseComponent } from "../../commons/new";
-import { Colors, Shadows, Spacings } from "../../style";
-import View from "../view";
-import Image from "../image";
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { asBaseComponent } from "../../commons/new";
+import { LogService } from "../../services";
+import { Colors, Shadows } from "../../style";
 import Button from "../button";
+import ScreenFooter, { ScreenFooterLayouts, ScreenFooterBackgrounds, KeyboardBehavior, ItemsFit } from "../screenFooter";
 export let FloatingButtonLayouts = /*#__PURE__*/function (FloatingButtonLayouts) {
   FloatingButtonLayouts["VERTICAL"] = "Vertical";
   FloatingButtonLayouts["HORIZONTAL"] = "Horizontal";
   return FloatingButtonLayouts;
 }({});
-const gradientImage = () => require("./gradient.png");
-
 /**
- * @description: Hovering button with gradient background
+ * @description: Hovering button with gradient background, backed by ScreenFooter
  * @modifiers: margin, background, color
  * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/FloatingButtonScreen.tsx
  * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/FloatingButton/FloatingButton.gif?raw=true
  */
-class FloatingButton extends PureComponent {
-  static displayName = 'FloatingButton';
-  static floatingButtonLayouts = FloatingButtonLayouts;
-  static defaultProps = {
-    duration: 300,
-    buttonLayout: FloatingButtonLayouts.VERTICAL
-  };
-  constructor(props) {
-    super(props);
-    this.initialVisibility = props.visible;
-    this.firstLoad = true;
-    this.visibleAnimated = new Animated.Value(Number(!!props.visible));
-  }
-  componentDidUpdate(prevProps) {
-    const {
-      visible,
-      duration
-    } = this.props;
-    if (prevProps.visible !== visible) {
-      Animated.timing(this.visibleAnimated, {
-        toValue: Number(!!visible),
-        duration,
-        useNativeDriver: true
-      }).start();
-    }
-  }
-  getAnimatedStyle = () => {
-    return {
-      opacity: this.visibleAnimated,
-      transform: [{
-        translateY: this.visibleAnimated.interpolate({
-          inputRange: [0, 1],
-          outputRange: [Constants.screenHeight / 2, 0]
-        })
-      }]
-    };
-  };
-  get isSecondaryOnly() {
-    const {
-      secondaryButton,
-      button
-    } = this.props;
-    return !!secondaryButton && !button;
-  }
-  get isHorizontalLayout() {
-    const {
-      buttonLayout
-    } = this.props;
-    return buttonLayout === FloatingButtonLayouts.HORIZONTAL || this.isSecondaryOnly;
-  }
-  get isSecondaryHorizontal() {
-    const {
-      secondaryButton
-    } = this.props;
-    return secondaryButton && this.isHorizontalLayout;
-  }
-  get isSecondaryVertical() {
-    const {
-      secondaryButton
-    } = this.props;
-    return secondaryButton && !this.isHorizontalLayout;
-  }
-  renderButton() {
-    const {
-      bottomMargin,
-      button,
-      fullWidth,
-      testID
-    } = this.props;
-    if (button) {
-      const shadowStyle = button && !button.outline && !button.link ? styles.shadow : undefined;
-      const marginStyle = {
-        marginTop: Spacings.s4,
-        marginBottom: this.isSecondaryVertical ? Spacings.s4 : bottomMargin || Spacings.s8,
-        marginLeft: this.isSecondaryHorizontal || fullWidth ? Spacings.s4 : undefined,
-        marginRight: this.isSecondaryHorizontal ? Spacings.s5 : fullWidth ? Spacings.s4 : undefined
+const FloatingButton = props => {
+  const {
+    visible = false,
+    button,
+    secondaryButton,
+    bottomMargin,
+    fullWidth,
+    buttonLayout = FloatingButtonLayouts.VERTICAL,
+    duration = 300,
+    withoutAnimation,
+    hideBackgroundOverlay,
+    hoisted = true,
+    testID
+  } = props;
+  useEffect(() => {
+    // eslint-disable-next-line max-len
+    LogService.warn('RNUILib FloatingButton now uses ScreenFooter internally, which requires a SafeAreaProvider. If you experience safe area issues, please wrap your app (or the relevant screen) with <SafeAreaProvider>.');
+  }, []);
+  const footerContentContainerStyle = useMemo(() => {
+    if (bottomMargin !== undefined) {
+      return {
+        paddingBottom: bottomMargin
       };
-      const shouldFlex = this.isSecondaryHorizontal || fullWidth && this.isHorizontalLayout;
-      return <Button size={Button.sizes.large} flex={!!shouldFlex} style={[shadowStyle, marginStyle]} testID={`${testID}.button`} {...button} />;
     }
+    return undefined;
+  }, [bottomMargin]);
+  const isSecondaryOnly = !!secondaryButton && !button;
+  const isHorizontal = buttonLayout === FloatingButtonLayouts.HORIZONTAL || isSecondaryOnly;
+  if (!button && !secondaryButton) {
+    return null;
   }
-  renderOverlay = () => {
-    if (!this.props.hideBackgroundOverlay) {
-      return <View pointerEvents={'none'} style={styles.image}>
-          <Image style={styles.image} source={gradientImage()} resizeMode={'stretch'} tintColor={Colors.$backgroundDefault} />
-        </View>;
+  const renderPrimaryButton = () => {
+    if (!button) {
+      return null;
     }
+    const shadowStyle = !button.outline && !button.link ? styles.shadow : undefined;
+    const shouldFlex = isHorizontal && !!secondaryButton || fullWidth && isHorizontal;
+    return <Button key="primary" size={Button.sizes.large} flex={!!shouldFlex} style={shadowStyle} testID={testID ? `${testID}.button` : undefined} {...button} />;
   };
-  renderSecondaryButton() {
-    const {
-      secondaryButton,
-      bottomMargin,
-      testID,
-      fullWidth,
-      button
-    } = this.props;
-    if (secondaryButton) {
-      const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
-      const shouldFlex = this.isHorizontalLayout && !!button || fullWidth && this.isSecondaryOnly;
-      const buttonStyle = this.isHorizontalLayout ? [styles.shadow, styles.horizontalSecondaryMargin, {
-        backgroundColor: bgColor
-      }] : {
-        marginBottom: bottomMargin || Spacings.s7
-      };
-      return <Button outline={this.isHorizontalLayout} flex={shouldFlex} link={!this.isHorizontalLayout} size={Button.sizes.large} testID={`${testID}.secondaryButton`} {...secondaryButton} style={buttonStyle} enableShadow={false} />;
-    }
-  }
-  renderHorizontalLayout() {
-    return <>
-        {this.renderOverlay()}
-        {this.renderSecondaryButton()}
-        {this.renderButton()}
-      </>;
-  }
-  renderVerticalLayout() {
-    return <>
-        {this.renderOverlay()}
-        {this.renderButton()}
-        {this.renderSecondaryButton()}
-      </>;
-  }
-  render() {
-    // NOTE: keep this.firstLoad as true as long as the visibility changed to true
-    const {
-      withoutAnimation,
-      visible,
-      fullWidth,
-      testID,
-      button,
-      secondaryButton
-    } = this.props;
-    this.firstLoad && !visible ? this.firstLoad = true : this.firstLoad = false;
-
-    // NOTE: On first load, don't show if it should not be visible
-    if (this.firstLoad === true && !this.initialVisibility) {
-      return false;
+  const renderSecondaryButton = () => {
+    if (!secondaryButton) {
+      return null;
     }
-    if (!visible && withoutAnimation) {
-      return false;
-    }
-    if (button || secondaryButton) {
-      const hasBothButtons = !!(button && secondaryButton);
-      const shouldCenter = !fullWidth || this.isHorizontalLayout && hasBothButtons;
-      return <View row={this.isHorizontalLayout} center={shouldCenter} pointerEvents="box-none" animated style={[styles.container, this.getAnimatedStyle()]} testID={testID}>
-          {this.isHorizontalLayout ? this.renderHorizontalLayout() : this.renderVerticalLayout()}
-        </View>;
-    }
-  }
-}
+    const shouldFlex = isHorizontal && !!button || fullWidth && isSecondaryOnly;
+    const bgColor = secondaryButton.backgroundColor || Colors.$backgroundDefault;
+    return <Button key="secondary" outline={isHorizontal} link={!isHorizontal} flex={shouldFlex} size={Button.sizes.large} testID={testID ? `${testID}.secondaryButton` : undefined} {...secondaryButton} style={isHorizontal ? [styles.shadow, {
+      backgroundColor: bgColor
+    }] : undefined} enableShadow={false} />;
+  };
+  const children = isHorizontal ? [renderSecondaryButton(), renderPrimaryButton()] : [renderPrimaryButton(), renderSecondaryButton()];
+  return <ScreenFooter visible={visible} layout={isHorizontal ? ScreenFooterLayouts.HORIZONTAL : ScreenFooterLayouts.VERTICAL} backgroundType={hideBackgroundOverlay ? ScreenFooterBackgrounds.TRANSPARENT : ScreenFooterBackgrounds.FADING} keyboardBehavior={hoisted ? KeyboardBehavior.HOISTED : KeyboardBehavior.STICKY} animationDuration={withoutAnimation ? 0 : duration} itemsFit={fullWidth ? ItemsFit.STRETCH : undefined} contentContainerStyle={footerContentContainerStyle} testID={testID}>
+      {children}
+    </ScreenFooter>;
+};
+FloatingButton.displayName = 'FloatingButton';
+FloatingButton.floatingButtonLayouts = FloatingButtonLayouts;
 const styles = StyleSheet.create({
-  container: {
-    // ...StyleSheet.absoluteFillObject, // TODO: this is breaking scenarios where the FloatingButton is inside a KeyboardTrackingView
-    top: undefined,
-    zIndex: 99
-  },
-  image: {
-    ...StyleSheet.absoluteFillObject,
-    width: '100%',
-    height: '100%'
-  },
   shadow: {
     ...Shadows.sh20.bottom
-  },
-  horizontalSecondaryMargin: {
-    marginTop: Spacings.s4,
-    marginBottom: Spacings.s7,
-    marginLeft: Spacings.s5
   }
 });
 export default asBaseComponent(FloatingButton);

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,214 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import Animated, { useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Keyboard } from 'uilib-native';
+import { SafeAreaContextPackage } from "../../optionalDependencies";
+import View from "../view";
+import Image from "../image";
+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,
+    contentContainerStyle: contentContainerStyleOverride
+  } = 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;
+      style.push({
+        elevation: backgroundElevation + 1
+      });
+    }
+    if (contentContainerStyleOverride) {
+      style.push(contentContainerStyleOverride);
+    }
+    return style;
+  }, [layout, alignItems, justifyContent, insets.bottom, isSolid, shadow, isKeyboardVisible, contentContainerStyleOverride]);
+  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);