From ecac0a5a8c2bbe660088e365781a2f4e97ac2de1 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Mon, 22 Dec 2025 10:23:51 +0200
Subject: [PATCH 01/18] Implemented component first steps - enums, props, basic
 logic layout, basic render function, basic styling

---
 .../src/components/screenFooter/index.tsx     | 192 ++++++++++++++++++
 1 file changed, 192 insertions(+)
 create mode 100644 packages/react-native-ui-lib/src/components/screenFooter/index.tsx

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
new file mode 100644
index 0000000000..3b347dff25
--- /dev/null
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -0,0 +1,192 @@
+//IMPORTS
+import React, { useCallback, useMemo } from 'react';
+import { Image, StyleSheet } from 'react-native';
+import View from '../view';
+import {Colors, Shadows, Spacings} from '../../style';
+import Button, { ButtonProps } from '../button';
+import { render } from '@testing-library/react-native';
+
+
+//ENUMS
+
+export enum ScreenFooterLayouts {
+    HORIZONTAL = 'horizontal',
+    VERTICAL = 'vertical'
+}
+
+export enum ScreenFooterBackgrounds {
+    FADING = 'fading',
+    SOLID = 'solid',
+    //TRANSPARENT?
+}
+
+//CHECK REGARDING A L/R ALLIGNMENT?
+export enum FooterAlignment {
+    START = 'start',
+    CENTER = 'center', 
+    END = 'end'
+}
+
+export enum ItemsDistribution {
+    STACK = 'stack', 
+    SPREAD = 'spread',
+    // SPACE_EVENLY = 'space-evenly', perhaps rely on stretch + gap?
+}
+
+export enum ItemsFit {
+    FIT = 'fit',
+    STRETCH = 'stretch',
+    FIXED = 'fixed'
+}
+
+export enum ScreenFooterPosition {
+    STICKY = 'sticky',
+    HOISTED = 'hoisted'
+}
+
+
+//TYPE
+
+export type ScreenFooterButtonProps = ButtonProps & {
+    stretch?: boolean;
+}
+
+export interface ScreenFooterProps {
+
+    background?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;
+
+    layout?: ScreenFooterLayouts | `${ScreenFooterLayouts}`
+    alignment?: FooterAlignment | `${FooterAlignment}`
+    itemsDistribution?: ItemsDistribution | `${ItemsDistribution}`
+    itemsFit?: ItemsFit | `${ItemsFit}`
+
+    primaryButton?: ScreenFooterButtonProps;
+    secondaryButton?: ScreenFooterButtonProps;
+    tertiaryButton?: ScreenFooterButtonProps;
+
+    //buttonMargin?: number
+
+}
+
+const screenFooter = (props: ScreenFooterProps) => {
+
+    const {
+        layout,
+        alignment,
+        primaryButton, 
+        secondaryButton, 
+        tertiaryButton,
+        background
+
+    } = props;
+
+    // ADD STATE MANAGEMENT
+    //ADD HOOKS
+
+    const isSolid = background === ScreenFooterBackgrounds.SOLID;
+    const isFading = background === ScreenFooterBackgrounds.FADING;
+    const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
+
+    const contentContainerStyle = useMemo(() => {
+
+        return [
+            styles.contentContainer,
+            isHorizontal ? styles.horizontalContainer: styles.verticalContainer
+            //Add alignment logic also        
+        ]
+    }, [layout, alignment]);
+
+
+    const renderBackground = useCallback(() => {
+        
+        if (isSolid) {
+            return <View style={styles.solidBackground}/>
+        }
+
+        else if (isFading) {
+            return (
+                <View style={styles.gradientBackground}>
+                    <Image
+                        source={require('./gradient.png')}
+                        style={styles.gradientImage}
+                        resizeMode='stretch'
+                        tintColor={Colors.$backgroundDefault}
+                    />
+                </View>
+            )
+        }
+
+        return null;
+
+    }, [isSolid, isFading]);
+
+    const renderButton = (props: ScreenFooterButtonProps) => {
+
+        const {stretch, style, ...others} = props;
+
+        return (
+            <Button
+            fullWidth={stretch}
+            style={[style, stretch && {flex: 1}]}
+             {...others}/>
+        )
+
+    }
+
+    return (
+        <View
+          style={[styles.container]}
+        >
+            {renderBackground()}
+            <View style={contentContainerStyle}>
+                {layout === ScreenFooterLayouts.HORIZONTAL ? (
+                    <>
+                    {tertiaryButton && renderButton(tertiaryButton)}
+                    {secondaryButton && renderButton(secondaryButton)}
+                    {primaryButton && renderButton(primaryButton)}
+                    </>
+                ) : (
+                    <>
+                    {primaryButton && renderButton(primaryButton)}
+                    {secondaryButton && renderButton(secondaryButton)}
+                    {tertiaryButton && renderButton(tertiaryButton)} 
+                    </>
+                )}
+            </View>
+            
+        </View>
+    )
+}
+
+
+
+
+const styles = StyleSheet.create({
+    container: {
+
+    },
+    contentContainer: {
+        paddingTop: Spacings.s4,
+        paddingHorizontal: Spacings.s5,
+        paddingBottom: Spacings.s5
+    },
+    horizontalContainer: {
+        flexDirection: 'row',
+        gap: Spacings.s3,
+    },
+    verticalContainer: {
+        flexDirection: 'column',
+        gap: Spacings.s3
+    },
+    solidBackground: {
+        backgroundColor: Colors.$backgroundElevated //maybe elevated light? not sure
+    },
+    gradientBackground: {
+        
+    },
+    gradientImage: {
+
+    }
+});
+
+export default screenFooter; 

From e76bba704ffc49f0af44d1a57d4243ec2f9b52c2 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Sun, 28 Dec 2025 10:50:24 +0200
Subject: [PATCH 02/18] re-construct foundation of component

---
 .../src/components/screenFooter/index.tsx     | 95 +++++--------------
 1 file changed, 22 insertions(+), 73 deletions(-)

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 3b347dff25..1d07342d6d 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -1,11 +1,9 @@
 //IMPORTS
-import React, { useCallback, useMemo } from 'react';
+import React, {PropsWithChildren, useCallback, useMemo} from 'react';
 import { Image, StyleSheet } from 'react-native';
 import View from '../view';
-import {Colors, Shadows, Spacings} from '../../style';
-import Button, { ButtonProps } from '../button';
-import { render } from '@testing-library/react-native';
-
+import {Colors, Spacings} from '../../style';
+import {asBaseComponent} from '../../commons/new';
 
 //ENUMS
 
@@ -17,20 +15,18 @@ export enum ScreenFooterLayouts {
 export enum ScreenFooterBackgrounds {
     FADING = 'fading',
     SOLID = 'solid',
-    //TRANSPARENT?
+    TRANSPARENT = 'transparent'
 }
 
-//CHECK REGARDING A L/R ALLIGNMENT?
 export enum FooterAlignment {
     START = 'start',
     CENTER = 'center', 
     END = 'end'
 }
 
-export enum ItemsDistribution {
+export enum HorizontalItemsDistribution {
     STACK = 'stack', 
     SPREAD = 'spread',
-    // SPACE_EVENLY = 'space-evenly', perhaps rely on stretch + gap?
 }
 
 export enum ItemsFit {
@@ -46,38 +42,23 @@ export enum ScreenFooterPosition {
 
 
 //TYPE
-
-export type ScreenFooterButtonProps = ButtonProps & {
-    stretch?: boolean;
-}
-
-export interface ScreenFooterProps {
+export interface ScreenFooterProps extends PropsWithChildren<{}> {
 
     background?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;
-
     layout?: ScreenFooterLayouts | `${ScreenFooterLayouts}`
     alignment?: FooterAlignment | `${FooterAlignment}`
-    itemsDistribution?: ItemsDistribution | `${ItemsDistribution}`
+    HorizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`
     itemsFit?: ItemsFit | `${ItemsFit}`
 
-    primaryButton?: ScreenFooterButtonProps;
-    secondaryButton?: ScreenFooterButtonProps;
-    tertiaryButton?: ScreenFooterButtonProps;
-
-    //buttonMargin?: number
-
 }
 
-const screenFooter = (props: ScreenFooterProps) => {
+const ScreenFooter = (props: ScreenFooterProps) => {
 
     const {
         layout,
         alignment,
-        primaryButton, 
-        secondaryButton, 
-        tertiaryButton,
-        background
-
+        background,
+        children
     } = props;
 
     // ADD STATE MANAGEMENT
@@ -85,16 +66,17 @@ const screenFooter = (props: ScreenFooterProps) => {
 
     const isSolid = background === ScreenFooterBackgrounds.SOLID;
     const isFading = background === ScreenFooterBackgrounds.FADING;
+    const isTransparent = background === ScreenFooterBackgrounds.TRANSPARENT;
     const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
 
     const contentContainerStyle = useMemo(() => {
 
         return [
             styles.contentContainer,
-            isHorizontal ? styles.horizontalContainer: styles.verticalContainer
+            layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer: styles.verticalContainer
             //Add alignment logic also        
         ]
-    }, [layout, alignment]);
+    }, [layout]);
 
 
     const renderBackground = useCallback(() => {
@@ -120,51 +102,22 @@ const screenFooter = (props: ScreenFooterProps) => {
 
     }, [isSolid, isFading]);
 
-    const renderButton = (props: ScreenFooterButtonProps) => {
-
-        const {stretch, style, ...others} = props;
-
-        return (
-            <Button
-            fullWidth={stretch}
-            style={[style, stretch && {flex: 1}]}
-             {...others}/>
-        )
-
-    }
+    const childrenArray = React.Children.toArray(children).slice(0, 3)
 
     return (
         <View
-          style={[styles.container]}
-        >
+          style={[styles.container]}>
             {renderBackground()}
             <View style={contentContainerStyle}>
-                {layout === ScreenFooterLayouts.HORIZONTAL ? (
-                    <>
-                    {tertiaryButton && renderButton(tertiaryButton)}
-                    {secondaryButton && renderButton(secondaryButton)}
-                    {primaryButton && renderButton(primaryButton)}
-                    </>
-                ) : (
-                    <>
-                    {primaryButton && renderButton(primaryButton)}
-                    {secondaryButton && renderButton(secondaryButton)}
-                    {tertiaryButton && renderButton(tertiaryButton)} 
-                    </>
-                )}
+                {childrenArray}
             </View>
-            
         </View>
-    )
-}
-
-
+    );
+};
 
 
 const styles = StyleSheet.create({
-    container: {
-
-    },
+    container: {},
     contentContainer: {
         paddingTop: Spacings.s4,
         paddingHorizontal: Spacings.s5,
@@ -181,12 +134,8 @@ const styles = StyleSheet.create({
     solidBackground: {
         backgroundColor: Colors.$backgroundElevated //maybe elevated light? not sure
     },
-    gradientBackground: {
-        
-    },
-    gradientImage: {
-
-    }
+    gradientBackground: {},
+    gradientImage: {}
 });
 
-export default screenFooter; 
+export default asBaseComponent<ScreenFooterProps, typeof ScreenFooter>(ScreenFooter);
\ No newline at end of file

From d4f8b928732bcd3455c667e02020c6f4853da195 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Sun, 28 Dec 2025 12:58:42 +0200
Subject: [PATCH 03/18] background prop handling

---
 .../src/components/screenFooter/index.tsx          | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 1d07342d6d..979b5c8560 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -82,12 +82,12 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     const renderBackground = useCallback(() => {
         
         if (isSolid) {
-            return <View style={styles.solidBackground}/>
+            return <View style={[styles.background, styles.solidBackground]} pointerEvents="none"/>
         }
 
         else if (isFading) {
             return (
-                <View style={styles.gradientBackground}>
+                <View style={[styles.background, styles.gradientBackground]} pointerEvents="none">
                     <Image
                         source={require('./gradient.png')}
                         style={styles.gradientImage}
@@ -131,11 +131,19 @@ const styles = StyleSheet.create({
         flexDirection: 'column',
         gap: Spacings.s3
     },
+    background: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: -1
+    },
     solidBackground: {
         backgroundColor: Colors.$backgroundElevated //maybe elevated light? not sure
     },
     gradientBackground: {},
-    gradientImage: {}
+    gradientImage: {
+        flex: 1,
+        width: '100%',
+        height: '100%'
+    }
 });
 
 export default asBaseComponent<ScreenFooterProps, typeof ScreenFooter>(ScreenFooter);
\ No newline at end of file

From e5511bbbb3e7739674a4bdc35446eecc62968cba Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Sun, 28 Dec 2025 14:12:21 +0200
Subject: [PATCH 04/18] added vertical layout alignment support - fix width
 option

---
 .../src/components/screenFooter/index.tsx     | 45 ++++++++++++++++---
 1 file changed, 38 insertions(+), 7 deletions(-)

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 979b5c8560..25e57c473d 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -1,9 +1,10 @@
 //IMPORTS
 import React, {PropsWithChildren, useCallback, useMemo} from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { DimensionValue, Image, StyleSheet } from 'react-native';
 import View from '../view';
 import {Colors, Spacings} from '../../style';
 import {asBaseComponent} from '../../commons/new';
+// import { useKeyboardHeight } from 'hooks';
 
 //ENUMS
 
@@ -49,6 +50,8 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
     alignment?: FooterAlignment | `${FooterAlignment}`
     HorizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`
     itemsFit?: ItemsFit | `${ItemsFit}`
+    position?: ScreenFooterPosition | `${ScreenFooterPosition}`;
+    itemWidth?: DimensionValue;
 
 }
 
@@ -58,7 +61,10 @@ const ScreenFooter = (props: ScreenFooterProps) => {
         layout,
         alignment,
         background,
-        children
+        children,
+        position = ScreenFooterPosition.STICKY,
+        itemsFit,
+        itemWidth
     } = props;
 
     // ADD STATE MANAGEMENT
@@ -66,15 +72,29 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
     const isSolid = background === ScreenFooterBackgrounds.SOLID;
     const isFading = background === ScreenFooterBackgrounds.FADING;
-    const isTransparent = background === ScreenFooterBackgrounds.TRANSPARENT;
     const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
+    // const isHoisted = position === ScreenFooterPosition.HOISTED;
 
-    const contentContainerStyle = useMemo(() => {
+    const alignItems = useMemo(() => {
+
+    if(layout === ScreenFooterLayouts.VERTICAL) {
+        if(itemsFit === ItemsFit.STRETCH) {
+            return 'stretch' as const;
+        }
+        switch (alignment) {
+            case FooterAlignment.START: return 'flex-start' as const;
+            case FooterAlignment.END: return 'flex-end' as const;
+            default: return 'center' as const;
+        }
+    }
+        return 'center';
+    }, [layout, itemsFit, alignment]);
 
+    const contentContainerStyle = useMemo(() => {
         return [
             styles.contentContainer,
-            layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer: styles.verticalContainer
-            //Add alignment logic also        
+            layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer: styles.verticalContainer,
+            {alignItems}        
         ]
     }, [layout]);
 
@@ -102,7 +122,18 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
     }, [isSolid, isFading]);
 
-    const childrenArray = React.Children.toArray(children).slice(0, 3)
+    const renderChild = useCallback((child: React.ReactNode, index: number) => {
+        if (itemsFit === ItemsFit.FIXED && itemWidth && layout === ScreenFooterLayouts.VERTICAL) {
+            return (
+                <View key={index} style={{width: itemWidth}}>
+                    {child}
+                </View>
+            );
+        }
+        return child;
+    }, [itemsFit, itemWidth, isHorizontal]);
+
+    const childrenArray = React.Children.toArray(children).slice(0, 3).map(renderChild);
 
     return (
         <View

From a8df60f7945f0eb660d10af209d42bbb16c812c3 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Sun, 28 Dec 2025 16:37:47 +0200
Subject: [PATCH 05/18] added footerScreen, fixed alignment bugs

---
 demo/src/screens/MenuStructure.js             |   1 +
 .../componentScreens/ScreenFooterScreen.tsx   | 208 ++++++++++++++++++
 demo/src/screens/componentScreens/index.js    |   1 +
 .../src/components/screenFooter/gradient.png  | Bin 0 -> 249 bytes
 .../src/components/screenFooter/index.tsx     |  30 +--
 packages/react-native-ui-lib/src/index.ts     |  10 +
 6 files changed, 235 insertions(+), 15 deletions(-)
 create mode 100644 demo/src/screens/componentScreens/ScreenFooterScreen.tsx
 create mode 100644 packages/react-native-ui-lib/src/components/screenFooter/gradient.png

diff --git a/demo/src/screens/MenuStructure.js b/demo/src/screens/MenuStructure.js
index 852f1c86c0..c664564ebb 100644
--- a/demo/src/screens/MenuStructure.js
+++ b/demo/src/screens/MenuStructure.js
@@ -83,6 +83,7 @@ export const navigationData = {
       {title: 'Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.components.DialogScreen'},
       {title: 'Feature Highlight', tags: 'native feature overlay', screen: 'unicorn.components.FeatureHighlightScreen'},
       {title: 'Floating Button', tags: 'floating button', screen: 'unicorn.components.FloatingButtonScreen'},
+      {title: 'Screen Footer', tags: 'screen footer sticky bottom', screen: 'unicorn.components.ScreenFooterScreen'},
       {title: 'Hint', tags: 'hints tooltip', screen: 'unicorn.components.HintsScreen'},
       {title: 'Toast', tags: 'toast top bottom snackbar', screen: 'unicorn.components.ToastsScreen'}
     ]
diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
new file mode 100644
index 0000000000..a47f992de0
--- /dev/null
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -0,0 +1,208 @@
+import React, {useState, useMemo} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {
+  View,
+  Text,
+  Button,
+  Colors,
+  SegmentedControl,
+  ScreenFooter,
+  ScreenFooterLayouts,
+  ScreenFooterBackgrounds,
+  FooterAlignment,
+  HorizontalItemsDistribution,
+  ItemsFit
+} from 'react-native-ui-lib';
+
+const ITEMS_COUNT_OPTIONS = [
+  {label: '1', value: 1},
+  {label: '2', value: 2},
+  {label: '3', value: 3}
+];
+
+const LAYOUT_OPTIONS = [
+  {label: 'Horizontal', value: ScreenFooterLayouts.HORIZONTAL},
+  {label: 'Vertical', value: ScreenFooterLayouts.VERTICAL}
+];
+
+const BACKGROUND_OPTIONS = [
+  {label: 'Solid', value: ScreenFooterBackgrounds.SOLID},
+  {label: 'Fading', value: ScreenFooterBackgrounds.FADING},
+  {label: 'Transparent', value: ScreenFooterBackgrounds.TRANSPARENT}
+];
+
+const ALIGNMENT_OPTIONS = [
+  {label: 'Start', value: FooterAlignment.START},
+  {label: 'Center', value: FooterAlignment.CENTER},
+  {label: 'End', value: FooterAlignment.END}
+];
+
+const DISTRIBUTION_OPTIONS = [
+  {label: 'Stack', value: HorizontalItemsDistribution.STACK},
+  {label: 'Spread', value: HorizontalItemsDistribution.SPREAD}
+];
+
+const ITEMS_FIT_OPTIONS = [
+  {label: 'Fit', value: ItemsFit.FIT},
+  {label: 'Stretch', value: ItemsFit.STRETCH},
+  {label: 'Fixed', value: ItemsFit.FIXED}
+];
+
+const ScreenFooterScreen = () => {
+  const [itemsCount, setItemsCount] = useState(2);
+  const [layout, setLayout] = useState<ScreenFooterLayouts>(ScreenFooterLayouts.HORIZONTAL);
+  const [background, setBackground] = useState<ScreenFooterBackgrounds>(ScreenFooterBackgrounds.SOLID);
+  const [alignment, setAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
+  const [distribution, setDistribution] = useState<HorizontalItemsDistribution>(HorizontalItemsDistribution.STACK);
+  const [itemsFit, setItemsFit] = useState<ItemsFit>(ItemsFit.FIT);
+
+  const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
+
+  const renderFooterItems = useMemo(() => {
+    const items = [];
+    
+    for (let i = 0; i < itemsCount; i++) {
+      const isPrimary = i === 0;
+      items.push(
+        <Button
+          key={i}
+          label={isPrimary ? 'Primary' : i === 1 ? 'Secondary' : 'Tertiary'}
+          size={Button.sizes.large}
+          backgroundColor={isPrimary ? Colors.$backgroundPrimaryHeavy : undefined}
+          outline={!isPrimary}
+          outlineColor={!isPrimary ? Colors.$outlineDefault : undefined}
+          style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
+        />
+      );
+    }
+    
+    return items;
+  }, [itemsCount, itemsFit, isHorizontal]);
+
+  return (
+    <View flex bg-$backgroundDefault>
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        <Text text60 $textDefault marginB-s4>
+          ScreenFooter Configuration
+        </Text>
+
+        {/* Layout Selection */}
+        <View marginB-s4>
+          <Text text70M $textDefault marginB-s2>
+            Layout
+          </Text>
+          <SegmentedControl
+            segments={LAYOUT_OPTIONS}
+            initialIndex={LAYOUT_OPTIONS.findIndex(opt => opt.value === layout)}
+            onChangeIndex={index => setLayout(LAYOUT_OPTIONS[index].value)}
+          />
+        </View>
+
+        {/* Items Count */}
+        <View marginB-s4>
+          <Text text70M $textDefault marginB-s2>
+            Number of Items
+          </Text>
+          <SegmentedControl
+            segments={ITEMS_COUNT_OPTIONS}
+            initialIndex={ITEMS_COUNT_OPTIONS.findIndex(opt => opt.value === itemsCount)}
+            onChangeIndex={index => setItemsCount(ITEMS_COUNT_OPTIONS[index].value)}
+          />
+        </View>
+
+        {/* Background */}
+        <View marginB-s4>
+          <Text text70M $textDefault marginB-s2>
+            Background
+          </Text>
+          <SegmentedControl
+            segments={BACKGROUND_OPTIONS}
+            initialIndex={BACKGROUND_OPTIONS.findIndex(opt => opt.value === background)}
+            onChangeIndex={index => setBackground(BACKGROUND_OPTIONS[index].value)}
+          />
+        </View>
+
+        {/* Alignment (for Vertical layout) */}
+        {!isHorizontal && (
+          <View marginB-s4>
+            <Text text70M $textDefault marginB-s2>
+              Alignment
+            </Text>
+            <SegmentedControl
+              segments={ALIGNMENT_OPTIONS}
+              initialIndex={ALIGNMENT_OPTIONS.findIndex(opt => opt.value === alignment)}
+              onChangeIndex={index => setAlignment(ALIGNMENT_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
+        {/* Distribution (for Horizontal layout) */}
+        {isHorizontal && (
+          <View marginB-s4>
+            <Text text70M $textDefault marginB-s2>
+              Distribution
+            </Text>
+            <SegmentedControl
+              segments={DISTRIBUTION_OPTIONS}
+              initialIndex={DISTRIBUTION_OPTIONS.findIndex(opt => opt.value === distribution)}
+              onChangeIndex={index => setDistribution(DISTRIBUTION_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
+        {/* Items Fit (for Vertical layout) */}
+        {!isHorizontal && (
+          <View marginB-s4>
+            <Text text70M $textDefault marginB-s2>
+              Items Fit
+            </Text>
+            <SegmentedControl
+              segments={ITEMS_FIT_OPTIONS}
+              initialIndex={ITEMS_FIT_OPTIONS.findIndex(opt => opt.value === itemsFit)}
+              onChangeIndex={index => setItemsFit(ITEMS_FIT_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
+        {/* Spacer for content */}
+        <View marginT-s10>
+          <Text text70 $textDefault style={styles.placeholder}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor 
+            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
+            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          </Text>
+          <Text text70 $textDefault marginT-s4 style={styles.placeholder}>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
+            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
+            culpa qui officia deserunt mollit anim id est laborum.
+          </Text>
+        </View>
+      </ScrollView>
+
+      {/* ScreenFooter Component */}
+      <ScreenFooter
+        layout={layout}
+        backgroundType={background}
+        alignment={alignment}
+        HorizontalItemsDistribution={distribution}
+        itemsFit={itemsFit}
+        itemWidth={150}
+      >
+        {renderFooterItems}
+      </ScreenFooter>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 150
+  },
+  placeholder: {
+    lineHeight: 22
+  }
+});
+
+export default ScreenFooterScreen;
+
diff --git a/demo/src/screens/componentScreens/index.js b/demo/src/screens/componentScreens/index.js
index 926d78c174..49bbda2b86 100644
--- a/demo/src/screens/componentScreens/index.js
+++ b/demo/src/screens/componentScreens/index.js
@@ -21,6 +21,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.DrawerScreen', () => require('./DrawerScreen').default);
   registrar('unicorn.components.ExpandableSectionScreen', () => require('./ExpandableSectionScreen').default);
   registrar('unicorn.components.FloatingButtonScreen', () => require('./FloatingButtonScreen').default);
+  registrar('unicorn.components.ScreenFooterScreen', () => require('./ScreenFooterScreen').default);
   registrar('unicorn.components.HapticScreen', () => require('./HapticScreen').default);
   registrar('unicorn.components.HintsScreen', () => require('./HintsScreen').default);
   registrar('unicorn.components.IconScreen', () => require('./IconScreen').default);
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/gradient.png b/packages/react-native-ui-lib/src/components/screenFooter/gradient.png
new file mode 100644
index 0000000000000000000000000000000000000000..1a2bfde6ddd8e8dd6175f63123a032041e110136
GIT binary patch
literal 249
zcmeAS@N?(olHy`uVBq!ia0vp^j6ht&!3HE(th_Z1NU@|l`Z_W&Z0zU$lgJ9>Tck#K
zruq6ZXaU(A42<oW3@ktvNShQ8GcYhMV1kP<E?|bUYe15>SIpi8q;fo6978ljd;2{3
z4j6D8dGYVR`0_*TQLZkhQcVofIt`EQbU!k+Xt_<jyJwa{c#z;+gLNEp4BEH-N$|I{
zbHB;SA<SJ6d8>CPzl2L?O~#T7i?0OwRmYxsb7)^)+1BUvPcM84R^OwTV|DjB>qjQd
W-<+S@bo@ZpGkCiCxvX<aXaWEtYf3Tz

literal 0
HcmV?d00001

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 25e57c473d..bc6b1e5cac 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -45,7 +45,7 @@ export enum ScreenFooterPosition {
 //TYPE
 export interface ScreenFooterProps extends PropsWithChildren<{}> {
 
-    background?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;
+    backgroundType?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;
     layout?: ScreenFooterLayouts | `${ScreenFooterLayouts}`
     alignment?: FooterAlignment | `${FooterAlignment}`
     HorizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`
@@ -60,7 +60,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     const {
         layout,
         alignment,
-        background,
+        backgroundType,
         children,
         position = ScreenFooterPosition.STICKY,
         itemsFit,
@@ -70,8 +70,8 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     // ADD STATE MANAGEMENT
     //ADD HOOKS
 
-    const isSolid = background === ScreenFooterBackgrounds.SOLID;
-    const isFading = background === ScreenFooterBackgrounds.FADING;
+    const isSolid = backgroundType === ScreenFooterBackgrounds.SOLID;
+    const isFading = backgroundType === ScreenFooterBackgrounds.FADING;
     const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
     // const isHoisted = position === ScreenFooterPosition.HOISTED;
 
@@ -96,7 +96,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
             layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer: styles.verticalContainer,
             {alignItems}        
         ]
-    }, [layout]);
+    }, [layout, alignItems]);
 
 
     const renderBackground = useCallback(() => {
@@ -107,10 +107,10 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
         else if (isFading) {
             return (
-                <View style={[styles.background, styles.gradientBackground]} pointerEvents="none">
+                <View style={styles.background} pointerEvents="none">
                     <Image
                         source={require('./gradient.png')}
-                        style={styles.gradientImage}
+                        style={styles.background}
                         resizeMode='stretch'
                         tintColor={Colors.$backgroundDefault}
                     />
@@ -148,7 +148,12 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
 
 const styles = StyleSheet.create({
-    container: {},
+    container: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0
+    },
     contentContainer: {
         paddingTop: Spacings.s4,
         paddingHorizontal: Spacings.s5,
@@ -164,16 +169,11 @@ const styles = StyleSheet.create({
     },
     background: {
         ...StyleSheet.absoluteFillObject,
-        zIndex: -1
+        width: '100%',
+        height: '100%'
     },
     solidBackground: {
         backgroundColor: Colors.$backgroundElevated //maybe elevated light? not sure
-    },
-    gradientBackground: {},
-    gradientImage: {
-        flex: 1,
-        width: '100%',
-        height: '100%'
     }
 });
 
diff --git a/packages/react-native-ui-lib/src/index.ts b/packages/react-native-ui-lib/src/index.ts
index a84d789b62..83932abc8d 100644
--- a/packages/react-native-ui-lib/src/index.ts
+++ b/packages/react-native-ui-lib/src/index.ts
@@ -70,6 +70,16 @@ export {default as ExpandableSection, ExpandableSectionProps} from './components
 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,
+  ScreenFooterPosition
+} 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';

From c4f2eb517ad224e8a0b27c8b6632f67db8945f73 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Tue, 30 Dec 2025 13:38:52 +0200
Subject: [PATCH 06/18] horizontal alignment sorted, improved screen
 functionality

---
 .../componentScreens/ScreenFooterScreen.tsx   | 234 ++++++++++++++++--
 .../src/components/screenFooter/index.tsx     |  78 ++++--
 2 files changed, 274 insertions(+), 38 deletions(-)

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index a47f992de0..59e045d8c0 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -11,9 +11,22 @@ import {
   ScreenFooterBackgrounds,
   FooterAlignment,
   HorizontalItemsDistribution,
-  ItemsFit
+  ItemsFit,
+  Switch
 } from 'react-native-ui-lib';
 
+enum ButtonType {
+  PRIMARY = 'Primary',
+  SECONDARY = 'Secondary',
+  LINK = 'Link'
+}
+
+enum ItemSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large'
+}
+
 const ITEMS_COUNT_OPTIONS = [
   {label: '1', value: 1},
   {label: '2', value: 2},
@@ -48,36 +61,126 @@ const ITEMS_FIT_OPTIONS = [
   {label: 'Fixed', value: ItemsFit.FIXED}
 ];
 
+const BUTTON_TYPE_OPTIONS = [
+  {label: 'Primary', value: ButtonType.PRIMARY},
+  {label: 'Secondary', value: ButtonType.SECONDARY},
+  {label: 'Link', value: ButtonType.LINK}
+];
+
+const SIZE_OPTIONS = [
+  {label: 'Small', value: ItemSize.SMALL},
+  {label: 'Medium', value: ItemSize.MEDIUM},
+  {label: 'Large', value: ItemSize.LARGE}
+];
+
 const ScreenFooterScreen = () => {
   const [itemsCount, setItemsCount] = useState(2);
   const [layout, setLayout] = useState<ScreenFooterLayouts>(ScreenFooterLayouts.HORIZONTAL);
   const [background, setBackground] = useState<ScreenFooterBackgrounds>(ScreenFooterBackgrounds.SOLID);
   const [alignment, setAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
+  const [horizontalAlignment, setHorizontalAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
   const [distribution, setDistribution] = useState<HorizontalItemsDistribution>(HorizontalItemsDistribution.STACK);
   const [itemsFit, setItemsFit] = useState<ItemsFit>(ItemsFit.FIT);
+  
+  const [button1Type, setButton1Type] = useState<ButtonType>(ButtonType.PRIMARY);
+  const [button2Type, setButton2Type] = useState<ButtonType>(ButtonType.SECONDARY);
+  const [button3Type, setButton3Type] = useState<ButtonType>(ButtonType.LINK);
+  const [buttonSize, setButtonSize] = useState<ItemSize>(ItemSize.MEDIUM);
+  const [showExtraContent, setShowExtraContent] = useState(false);
+  const [extraContentSize, setExtraContentSize] = useState<ItemSize>(ItemSize.MEDIUM);
 
   const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
 
+  const getButtonSize = (size: ItemSize) => {
+    switch (size) {
+      case ItemSize.SMALL: return Button.sizes.small;
+      case ItemSize.MEDIUM: return Button.sizes.medium;
+      case ItemSize.LARGE: return Button.sizes.large;
+    }
+  };
+
+  const getTextPreset = (size: ItemSize): {main: string; sub: string} => {
+    switch (size) {
+      case ItemSize.SMALL: return {main: 'text80', sub: 'text100'};
+      case ItemSize.MEDIUM: return {main: 'text70', sub: 'text90'};
+      case ItemSize.LARGE: return {main: 'text60', sub: 'text80'};
+    }
+  };
+
+  const getButtonProps = (type: ButtonType) => {
+    switch (type) {
+      case ButtonType.PRIMARY:
+        return {
+          backgroundColor: Colors.$backgroundPrimaryHeavy,
+          label: 'Primary'
+        };
+      case ButtonType.SECONDARY:
+        return {
+          backgroundColor: Colors.$backgroundDefault,
+          outline: true,
+          outlineColor: Colors.$backgroundPrimaryHeavy,
+          label: 'Secondary'
+        };
+      case ButtonType.LINK:
+        return {
+          link: true,
+          backgroundColor: undefined,
+          label: 'Link',
+          color: Colors.$backgroundPrimaryHeavy
+        };
+    }
+  };
+
   const renderFooterItems = useMemo(() => {
     const items = [];
+    const textPreset = getTextPreset(extraContentSize);
     
-    for (let i = 0; i < itemsCount; i++) {
-      const isPrimary = i === 0;
+    if (showExtraContent) {
+      items.push(
+        <View key="extra" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal}>
+          <Text {...{[textPreset.main]: true}} $textDefault>
+            Total: <Text {...{[textPreset.main]: true}} $textDefault style={{fontWeight: 'bold'}}>257$</Text>
+          </Text>
+          <Text {...{[textPreset.sub]: true}} $textNeutralLight>Prices are not including VAT.</Text>
+        </View>
+      );
+    }
+
+    if (itemsCount >= 1) {
       items.push(
         <Button
-          key={i}
-          label={isPrimary ? 'Primary' : i === 1 ? 'Secondary' : 'Tertiary'}
-          size={Button.sizes.large}
-          backgroundColor={isPrimary ? Colors.$backgroundPrimaryHeavy : undefined}
-          outline={!isPrimary}
-          outlineColor={!isPrimary ? Colors.$outlineDefault : undefined}
+          key="btn1"
+          size={getButtonSize(buttonSize)}
           style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
+          {...getButtonProps(button1Type)}
+        />
+      );
+    }
+
+    if (itemsCount >= 2) {
+      items.push(
+        <Button
+          key="btn2"
+          size={getButtonSize(buttonSize)}
+          style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
+          {...getButtonProps(button2Type)}
+        />
+      );
+    }
+
+    if (itemsCount >= 3) {
+      items.push(
+        <Button
+          key="btn3"
+          size={getButtonSize(buttonSize)}
+          style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
+          {...getButtonProps(button3Type)}
         />
       );
     }
     
     return items;
-  }, [itemsCount, itemsFit, isHorizontal]);
+  }, [itemsCount, itemsFit, isHorizontal, button1Type, button2Type, button3Type, buttonSize, showExtraContent, extraContentSize]);
 
   return (
     <View flex bg-$backgroundDefault>
@@ -110,32 +213,106 @@ const ScreenFooterScreen = () => {
           />
         </View>
 
-        {/* Background */}
+        {/* Extra Content Toggle */}
+        <View row spread centerV marginB-s4>
+          <Text text70M $textDefault>
+            Show Extra Content (Text/Image)
+          </Text>
+          <Switch value={showExtraContent} onValueChange={setShowExtraContent}/>
+        </View>
+
+        {/* Extra Content Size */}
+        {showExtraContent && (
+          <View marginB-s4>
+            <Text text70M $textDefault marginB-s2>
+              Extra Content Size
+            </Text>
+            <SegmentedControl
+              segments={SIZE_OPTIONS}
+              initialIndex={SIZE_OPTIONS.findIndex(opt => opt.value === extraContentSize)}
+              onChangeIndex={index => setExtraContentSize(SIZE_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
+        {/* Button Size (applies to all buttons) */}
         <View marginB-s4>
           <Text text70M $textDefault marginB-s2>
-            Background
+            Button Size
           </Text>
           <SegmentedControl
-            segments={BACKGROUND_OPTIONS}
-            initialIndex={BACKGROUND_OPTIONS.findIndex(opt => opt.value === background)}
-            onChangeIndex={index => setBackground(BACKGROUND_OPTIONS[index].value)}
+            segments={SIZE_OPTIONS}
+            initialIndex={SIZE_OPTIONS.findIndex(opt => opt.value === buttonSize)}
+            onChangeIndex={index => setButtonSize(SIZE_OPTIONS[index].value)}
           />
         </View>
 
-        {/* Alignment (for Vertical layout) */}
-        {!isHorizontal && (
+        {/* Button 1 Type */}
+        {itemsCount >= 1 && (
           <View marginB-s4>
             <Text text70M $textDefault marginB-s2>
-              Alignment
+              Button 1 Type
             </Text>
             <SegmentedControl
-              segments={ALIGNMENT_OPTIONS}
-              initialIndex={ALIGNMENT_OPTIONS.findIndex(opt => opt.value === alignment)}
-              onChangeIndex={index => setAlignment(ALIGNMENT_OPTIONS[index].value)}
+              segments={BUTTON_TYPE_OPTIONS}
+              initialIndex={BUTTON_TYPE_OPTIONS.findIndex(opt => opt.value === button1Type)}
+              onChangeIndex={index => setButton1Type(BUTTON_TYPE_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
+        {/* Button 2 Type */}
+        {itemsCount >= 2 && (
+          <View marginB-s4>
+            <Text text70M $textDefault marginB-s2>
+              Button 2 Type
+            </Text>
+            <SegmentedControl
+              segments={BUTTON_TYPE_OPTIONS}
+              initialIndex={BUTTON_TYPE_OPTIONS.findIndex(opt => opt.value === button2Type)}
+              onChangeIndex={index => setButton2Type(BUTTON_TYPE_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
+        {/* Button 3 Type */}
+        {itemsCount >= 3 && (
+          <View marginB-s4>
+            <Text text70M $textDefault marginB-s2>
+              Button 3 Type
+            </Text>
+            <SegmentedControl
+              segments={BUTTON_TYPE_OPTIONS}
+              initialIndex={BUTTON_TYPE_OPTIONS.findIndex(opt => opt.value === button3Type)}
+              onChangeIndex={index => setButton3Type(BUTTON_TYPE_OPTIONS[index].value)}
             />
           </View>
         )}
 
+        {/* Background */}
+        <View marginB-s4>
+          <Text text70M $textDefault marginB-s2>
+            Background
+          </Text>
+          <SegmentedControl
+            segments={BACKGROUND_OPTIONS}
+            initialIndex={BACKGROUND_OPTIONS.findIndex(opt => opt.value === background)}
+            onChangeIndex={index => setBackground(BACKGROUND_OPTIONS[index].value)}
+          />
+        </View>
+
+        {/* Alignment (Cross Axis) */}
+        <View marginB-s4>
+          <Text text70M $textDefault marginB-s2>
+            {isHorizontal ? 'Vertical Alignment (Top/Center/Bottom)' : 'Alignment (Left/Center/Right)'}
+          </Text>
+          <SegmentedControl
+            segments={ALIGNMENT_OPTIONS}
+            initialIndex={ALIGNMENT_OPTIONS.findIndex(opt => opt.value === alignment)}
+            onChangeIndex={index => setAlignment(ALIGNMENT_OPTIONS[index].value)}
+          />
+        </View>
+
         {/* Distribution (for Horizontal layout) */}
         {isHorizontal && (
           <View marginB-s4>
@@ -150,6 +327,20 @@ const ScreenFooterScreen = () => {
           </View>
         )}
 
+        {/* Horizontal Alignment (for Horizontal layout + Stack distribution) */}
+        {isHorizontal && distribution === HorizontalItemsDistribution.STACK && (
+          <View marginB-s4>
+            <Text text70M $textDefault marginB-s2>
+              Horizontal Alignment (Left/Center/Right)
+            </Text>
+            <SegmentedControl
+              segments={ALIGNMENT_OPTIONS}
+              initialIndex={ALIGNMENT_OPTIONS.findIndex(opt => opt.value === horizontalAlignment)}
+              onChangeIndex={index => setHorizontalAlignment(ALIGNMENT_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
         {/* Items Fit (for Vertical layout) */}
         {!isHorizontal && (
           <View marginB-s4>
@@ -184,6 +375,7 @@ const ScreenFooterScreen = () => {
         layout={layout}
         backgroundType={background}
         alignment={alignment}
+        horizontalAlignment={horizontalAlignment}
         HorizontalItemsDistribution={distribution}
         itemsFit={itemsFit}
         itemWidth={150}
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index bc6b1e5cac..2400045fe2 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -44,15 +44,41 @@ export enum ScreenFooterPosition {
 
 //TYPE
 export interface ScreenFooterProps extends PropsWithChildren<{}> {
-
+    /**
+     * The background style of the footer
+     */
     backgroundType?: ScreenFooterBackgrounds | `${ScreenFooterBackgrounds}`;
-    layout?: ScreenFooterLayouts | `${ScreenFooterLayouts}`
-    alignment?: FooterAlignment | `${FooterAlignment}`
-    HorizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`
-    itemsFit?: ItemsFit | `${ItemsFit}`
+    /**
+     * 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
+     */
+    HorizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`;
+    /**
+     * How items should fit in vertical layout
+     */
+    itemsFit?: ItemsFit | `${ItemsFit}`;
+    /**
+     * Footer position behavior
+     */
     position?: ScreenFooterPosition | `${ScreenFooterPosition}`;
+    /**
+     * Fixed width for items (used with ItemsFit.FIXED)
+     */
     itemWidth?: DimensionValue;
-
 }
 
 const ScreenFooter = (props: ScreenFooterProps) => {
@@ -60,11 +86,13 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     const {
         layout,
         alignment,
+        horizontalAlignment,
         backgroundType,
         children,
         position = ScreenFooterPosition.STICKY,
         itemsFit,
-        itemWidth
+        itemWidth,
+        HorizontalItemsDistribution: distribution
     } = props;
 
     // ADD STATE MANAGEMENT
@@ -75,28 +103,44 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
     // const isHoisted = position === ScreenFooterPosition.HOISTED;
 
-    const alignItems = useMemo(() => {
+    const justifyContent = useMemo(() => {
+        if (isHorizontal) {
+            // When SPREAD, items are distributed with space-between
+            if (distribution === HorizontalItemsDistribution.SPREAD) {
+                return 'space-between' as const;
+            }
+            // When STACK, horizontalAlignment controls left/center/right positioning
+            switch (horizontalAlignment) {
+                case FooterAlignment.START: return 'flex-start' as const;
+                case FooterAlignment.END: return 'flex-end' as const;
+                default: return 'center' as const;
+            }
+        }
+        return 'flex-start' as const;
+    }, [isHorizontal, distribution, horizontalAlignment]);
 
+    const alignItems = useMemo(() => {
+    
     if(layout === ScreenFooterLayouts.VERTICAL) {
         if(itemsFit === ItemsFit.STRETCH) {
             return 'stretch' as const;
         }
-        switch (alignment) {
-            case FooterAlignment.START: return 'flex-start' as const;
-            case FooterAlignment.END: return 'flex-end' as const;
-            default: return 'center' as const;
-        }
     }
-        return 'center';
+    
+    switch (alignment) {
+        case FooterAlignment.START: return 'flex-start' as const;
+        case FooterAlignment.END: return 'flex-end' as const;
+        default: return 'center' as const;
+    }
     }, [layout, itemsFit, alignment]);
 
     const contentContainerStyle = useMemo(() => {
         return [
             styles.contentContainer,
             layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer: styles.verticalContainer,
-            {alignItems}        
+            {alignItems, justifyContent}        
         ]
-    }, [layout, alignItems]);
+    }, [layout, alignItems, justifyContent]);
 
 
     const renderBackground = useCallback(() => {
@@ -161,7 +205,7 @@ const styles = StyleSheet.create({
     },
     horizontalContainer: {
         flexDirection: 'row',
-        gap: Spacings.s3,
+        gap: Spacings.s5,
     },
     verticalContainer: {
         flexDirection: 'column',

From 01c9a525dbf075833dafde6c1fd396b1ea66f200 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Tue, 30 Dec 2025 16:44:38 +0200
Subject: [PATCH 07/18] added support of sticky vs. hoisted keyboard. fixed
 overflow issues

---
 .../componentScreens/ScreenFooterScreen.tsx   | 78 +++++++++++++++----
 .../src/components/screenFooter/index.tsx     | 20 +++--
 2 files changed, 76 insertions(+), 22 deletions(-)

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index 59e045d8c0..9ffed94f5d 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -9,10 +9,12 @@ import {
   ScreenFooter,
   ScreenFooterLayouts,
   ScreenFooterBackgrounds,
+  ScreenFooterPosition,
   FooterAlignment,
   HorizontalItemsDistribution,
   ItemsFit,
-  Switch
+  Switch,
+  TextField
 } from 'react-native-ui-lib';
 
 enum ButtonType {
@@ -55,6 +57,12 @@ const DISTRIBUTION_OPTIONS = [
   {label: 'Spread', value: HorizontalItemsDistribution.SPREAD}
 ];
 
+const DISTRIBUTION_OPTIONS_SPACED = [
+  {label: 'Stack', value: HorizontalItemsDistribution.STACK},
+  {label: 'Spread', value: HorizontalItemsDistribution.SPREAD},
+  {label: '', value: 'dummy'},
+];
+
 const ITEMS_FIT_OPTIONS = [
   {label: 'Fit', value: ItemsFit.FIT},
   {label: 'Stretch', value: ItemsFit.STRETCH},
@@ -73,10 +81,22 @@ const SIZE_OPTIONS = [
   {label: 'Large', value: ItemSize.LARGE}
 ];
 
+const POSITION_OPTIONS = [
+  {label: 'Sticky', value: ScreenFooterPosition.STICKY},
+  {label: 'Hoisted', value: ScreenFooterPosition.HOISTED}
+];
+
+const POSITION_OPTIONS_SPACED = [
+  {label: 'Sticky', value: ScreenFooterPosition.STICKY},
+  {label: 'Hoisted', value: ScreenFooterPosition.HOISTED},
+  {label: '', value: 'dummy'},
+];
+
 const ScreenFooterScreen = () => {
   const [itemsCount, setItemsCount] = useState(2);
   const [layout, setLayout] = useState<ScreenFooterLayouts>(ScreenFooterLayouts.HORIZONTAL);
   const [background, setBackground] = useState<ScreenFooterBackgrounds>(ScreenFooterBackgrounds.SOLID);
+  const [position, setPosition] = useState<ScreenFooterPosition>(ScreenFooterPosition.STICKY);
   const [alignment, setAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
   const [horizontalAlignment, setHorizontalAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
   const [distribution, setDistribution] = useState<HorizontalItemsDistribution>(HorizontalItemsDistribution.STACK);
@@ -112,7 +132,7 @@ const ScreenFooterScreen = () => {
       case ButtonType.PRIMARY:
         return {
           backgroundColor: Colors.$backgroundPrimaryHeavy,
-          label: 'Primary'
+          label: 'Primary-longtxtlongtxtlongtxtlongtxtlongtxtlongtxt'
         };
       case ButtonType.SECONDARY:
         return {
@@ -137,11 +157,11 @@ const ScreenFooterScreen = () => {
     
     if (showExtraContent) {
       items.push(
-        <View key="extra" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal}>
-          <Text {...{[textPreset.main]: true}} $textDefault>
-            Total: <Text {...{[textPreset.main]: true}} $textDefault style={{fontWeight: 'bold'}}>257$</Text>
+        <View key="extra" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal} style={{flexShrink: 1}}>
+          <Text {...{[textPreset.main]: true}} $textDefault numberOfLines={1}>
+            Total: <Text {...{[textPreset.main]: true}} $textDefault style={{fontWeight: 'bold'}}>257sdsassdadasdsadsadsadsdsadsad$</Text>
           </Text>
-          <Text {...{[textPreset.sub]: true}} $textNeutralLight>Prices are not including VAT.</Text>
+          <Text {...{[textPreset.sub]: true}} $textNeutralLight numberOfLines={1}>Prices are not including VAT.</Text>
         </View>
       );
     }
@@ -151,7 +171,7 @@ const ScreenFooterScreen = () => {
         <Button
           key="btn1"
           size={getButtonSize(buttonSize)}
-          style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
+        //   style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
           {...getButtonProps(button1Type)}
         />
       );
@@ -162,7 +182,7 @@ const ScreenFooterScreen = () => {
         <Button
           key="btn2"
           size={getButtonSize(buttonSize)}
-          style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
+        //   style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
           {...getButtonProps(button2Type)}
         />
       );
@@ -173,7 +193,7 @@ const ScreenFooterScreen = () => {
         <Button
           key="btn3"
           size={getButtonSize(buttonSize)}
-          style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
+        //   style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
           {...getButtonProps(button3Type)}
         />
       );
@@ -189,6 +209,13 @@ const ScreenFooterScreen = () => {
           ScreenFooter Configuration
         </Text>
 
+        <TextField
+          placeholder="Focus me to test keyboard behavior"
+          label="Test Input"
+          floatingPlaceholder
+          containerStyle={{marginBottom: 20}}
+        />
+
         {/* Layout Selection */}
         <View marginB-s4>
           <Text text70M $textDefault marginB-s2>
@@ -301,10 +328,25 @@ const ScreenFooterScreen = () => {
           />
         </View>
 
+        {/* Position */}
+        <View marginB-s4>
+          <Text text70M $textDefault marginB-s2>
+            Position
+          </Text>
+          <View row>
+             <SegmentedControl
+              segments={POSITION_OPTIONS}
+              initialIndex={POSITION_OPTIONS.findIndex(opt => opt.value === position)}
+              onChangeIndex={index => setPosition(POSITION_OPTIONS[index].value)}
+            />
+             <View flex />
+          </View>
+        </View>
+
         {/* Alignment (Cross Axis) */}
         <View marginB-s4>
           <Text text70M $textDefault marginB-s2>
-            {isHorizontal ? 'Vertical Alignment (Top/Center/Bottom)' : 'Alignment (Left/Center/Right)'}
+            {isHorizontal ? 'Vertical Alignment' : 'Alignment'}
           </Text>
           <SegmentedControl
             segments={ALIGNMENT_OPTIONS}
@@ -319,11 +361,14 @@ const ScreenFooterScreen = () => {
             <Text text70M $textDefault marginB-s2>
               Distribution
             </Text>
-            <SegmentedControl
-              segments={DISTRIBUTION_OPTIONS}
-              initialIndex={DISTRIBUTION_OPTIONS.findIndex(opt => opt.value === distribution)}
-              onChangeIndex={index => setDistribution(DISTRIBUTION_OPTIONS[index].value)}
-            />
+            <View row>
+              <SegmentedControl
+                segments={DISTRIBUTION_OPTIONS}
+                initialIndex={DISTRIBUTION_OPTIONS.findIndex(opt => opt.value === distribution)}
+                onChangeIndex={index => setDistribution(DISTRIBUTION_OPTIONS[index].value)}
+              />
+               <View flex />
+            </View>
           </View>
         )}
 
@@ -331,7 +376,7 @@ const ScreenFooterScreen = () => {
         {isHorizontal && distribution === HorizontalItemsDistribution.STACK && (
           <View marginB-s4>
             <Text text70M $textDefault marginB-s2>
-              Horizontal Alignment (Left/Center/Right)
+              Horizontal Alignment
             </Text>
             <SegmentedControl
               segments={ALIGNMENT_OPTIONS}
@@ -374,6 +419,7 @@ const ScreenFooterScreen = () => {
       <ScreenFooter
         layout={layout}
         backgroundType={background}
+        position={position}
         alignment={alignment}
         horizontalAlignment={horizontalAlignment}
         HorizontalItemsDistribution={distribution}
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 2400045fe2..625fb4a3c6 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -1,10 +1,10 @@
 //IMPORTS
 import React, {PropsWithChildren, useCallback, useMemo} from 'react';
-import { DimensionValue, Image, StyleSheet } from 'react-native';
+import {DimensionValue, Image, StyleSheet} from 'react-native';
 import View from '../view';
 import {Colors, Spacings} from '../../style';
 import {asBaseComponent} from '../../commons/new';
-// import { useKeyboardHeight } from 'hooks';
+import {useKeyboardHeight} from '../../hooks';
 
 //ENUMS
 
@@ -95,8 +95,8 @@ const ScreenFooter = (props: ScreenFooterProps) => {
         HorizontalItemsDistribution: distribution
     } = props;
 
-    // ADD STATE MANAGEMENT
-    //ADD HOOKS
+    const keyboardHeight = useKeyboardHeight();
+    const bottom = position === ScreenFooterPosition.HOISTED ? keyboardHeight : 0;
 
     const isSolid = backgroundType === ScreenFooterBackgrounds.SOLID;
     const isFading = backgroundType === ScreenFooterBackgrounds.FADING;
@@ -174,6 +174,14 @@ const ScreenFooter = (props: ScreenFooterProps) => {
                 </View>
             );
         }
+
+        if (isHorizontal && React.isValidElement(child)) {
+             return React.cloneElement(child, {
+                 // @ts-ignore
+                 style: [child.props.style, {flexShrink: 1}]
+             });
+        }
+
         return child;
     }, [itemsFit, itemWidth, isHorizontal]);
 
@@ -181,7 +189,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
     return (
         <View
-          style={[styles.container]}>
+          style={[styles.container, {bottom}]}>
             {renderBackground()}
             <View style={contentContainerStyle}>
                 {childrenArray}
@@ -201,7 +209,7 @@ const styles = StyleSheet.create({
     contentContainer: {
         paddingTop: Spacings.s4,
         paddingHorizontal: Spacings.s5,
-        paddingBottom: Spacings.s5
+        paddingBottom: Spacings.s5,
     },
     horizontalContainer: {
         flexDirection: 'row',

From f4352ea5d1cf0241544746f64a5cb11e412b5c83 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Tue, 30 Dec 2025 17:34:23 +0200
Subject: [PATCH 08/18] added items fit support to both component and screen,
 added image support to screen

---
 .../componentScreens/ScreenFooterScreen.tsx   | 103 ++++++++++++++----
 .../src/components/screenFooter/index.tsx     |  16 ++-
 2 files changed, 92 insertions(+), 27 deletions(-)

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index 9ffed94f5d..536438a88e 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useMemo} from 'react';
-import {StyleSheet, ScrollView} from 'react-native';
+import {StyleSheet, ScrollView, Image} from 'react-native';
 import {
   View,
   Text,
@@ -14,9 +14,13 @@ import {
   HorizontalItemsDistribution,
   ItemsFit,
   Switch,
-  TextField
+  TextField,
+  Slider
 } from 'react-native-ui-lib';
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const basketIcon = require('../../assets/icons/collections.png');
+
 enum ButtonType {
   PRIMARY = 'Primary',
   SECONDARY = 'Secondary',
@@ -106,8 +110,11 @@ const ScreenFooterScreen = () => {
   const [button2Type, setButton2Type] = useState<ButtonType>(ButtonType.SECONDARY);
   const [button3Type, setButton3Type] = useState<ButtonType>(ButtonType.LINK);
   const [buttonSize, setButtonSize] = useState<ItemSize>(ItemSize.MEDIUM);
-  const [showExtraContent, setShowExtraContent] = useState(false);
+  const [showExtraText, setShowExtraText] = useState(false);
+  const [showImage, setShowImage] = useState(false);
   const [extraContentSize, setExtraContentSize] = useState<ItemSize>(ItemSize.MEDIUM);
+  const [useLongButtonText, setUseLongButtonText] = useState(false);
+  const [itemWidth, setItemWidth] = useState(150);
 
   const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
 
@@ -132,7 +139,7 @@ const ScreenFooterScreen = () => {
       case ButtonType.PRIMARY:
         return {
           backgroundColor: Colors.$backgroundPrimaryHeavy,
-          label: 'Primary-longtxtlongtxtlongtxtlongtxtlongtxtlongtxt'
+          label: useLongButtonText ? 'Primary-longtxtlongtxtlongtxtlongtxtlongtxtlongtxt' : 'Checkout'
         };
       case ButtonType.SECONDARY:
         return {
@@ -151,17 +158,39 @@ const ScreenFooterScreen = () => {
     }
   };
 
+  const getImageSize = (size: ItemSize): number => {
+    switch (size) {
+      case ItemSize.SMALL: return 24;
+      case ItemSize.MEDIUM: return 32;
+      case ItemSize.LARGE: return 40;
+    }
+  };
+
   const renderFooterItems = useMemo(() => {
     const items = [];
     const textPreset = getTextPreset(extraContentSize);
+    const imageSize = getImageSize(extraContentSize);
     
-    if (showExtraContent) {
+    // Extra Text (Total price)
+    if (showExtraText) {
       items.push(
-        <View key="extra" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal} style={{flexShrink: 1}}>
+        <View key="extra-text" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal} style={{flexShrink: 1}}>
           <Text {...{[textPreset.main]: true}} $textDefault numberOfLines={1}>
-            Total: <Text {...{[textPreset.main]: true}} $textDefault style={{fontWeight: 'bold'}}>257sdsassdadasdsadsadsadsdsadsad$</Text>
+            Total: <Text {...{[textPreset.main]: true}} $textDefault style={{fontWeight: 'bold'}}>257$</Text>
           </Text>
-          <Text {...{[textPreset.sub]: true}} $textNeutralLight numberOfLines={1}>Prices are not including VAT.</Text>
+          <Text {...{[textPreset.sub]: true}} $textNeutralLight numberOfLines={1}>Including VAT.</Text>
+        </View>
+      );
+    }
+
+    // Image (Basket icon)
+    if (showExtraText && showImage) {
+      items.push(
+        <View key="extra-image" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal}>
+          <Image
+            source={basketIcon}
+            style={{width: imageSize, height: imageSize, tintColor: Colors.$iconDefault}}
+          />
         </View>
       );
     }
@@ -200,7 +229,7 @@ const ScreenFooterScreen = () => {
     }
     
     return items;
-  }, [itemsCount, itemsFit, isHorizontal, button1Type, button2Type, button3Type, buttonSize, showExtraContent, extraContentSize]);
+  }, [itemsCount, itemsFit, isHorizontal, button1Type, button2Type, button3Type, buttonSize, showExtraText, showImage, extraContentSize, useLongButtonText]);
 
   return (
     <View flex bg-$backgroundDefault>
@@ -240,16 +269,26 @@ const ScreenFooterScreen = () => {
           />
         </View>
 
-        {/* Extra Content Toggle */}
+        {/* Extra Text Toggle */}
         <View row spread centerV marginB-s4>
           <Text text70M $textDefault>
-            Show Extra Content (Text/Image)
+            Show Extra Text
           </Text>
-          <Switch value={showExtraContent} onValueChange={setShowExtraContent}/>
+          <Switch value={showExtraText} onValueChange={setShowExtraText}/>
         </View>
 
+        {/* Show Image Toggle (only when Extra Text is shown) */}
+        {showExtraText && (
+          <View row spread centerV marginB-s4 marginL-s4>
+            <Text text70M $textDefault>
+              Show Image
+            </Text>
+            <Switch value={showImage} onValueChange={setShowImage}/>
+          </View>
+        )}
+
         {/* Extra Content Size */}
-        {showExtraContent && (
+        {showExtraText && (
           <View marginB-s4>
             <Text text70M $textDefault marginB-s2>
               Extra Content Size
@@ -274,6 +313,14 @@ const ScreenFooterScreen = () => {
           />
         </View>
 
+        {/* Long Button Text Toggle */}
+        <View row spread centerV marginB-s4>
+          <Text text70M $textDefault>
+            Use Long Button Text
+          </Text>
+          <Switch value={useLongButtonText} onValueChange={setUseLongButtonText}/>
+        </View>
+
         {/* Button 1 Type */}
         {itemsCount >= 1 && (
           <View marginB-s4>
@@ -386,16 +433,30 @@ const ScreenFooterScreen = () => {
           </View>
         )}
 
-        {/* Items Fit (for Vertical layout) */}
-        {!isHorizontal && (
+        {/* Items Fit */}
+        <View marginB-s4>
+          <Text text70M $textDefault marginB-s2>
+            Items Fit
+          </Text>
+          <SegmentedControl
+            segments={ITEMS_FIT_OPTIONS}
+            initialIndex={ITEMS_FIT_OPTIONS.findIndex(opt => opt.value === itemsFit)}
+            onChangeIndex={index => setItemsFit(ITEMS_FIT_OPTIONS[index].value)}
+          />
+        </View>
+
+        {/* Item Width Slider (only when Fixed is selected) */}
+        {itemsFit === ItemsFit.FIXED && (
           <View marginB-s4>
             <Text text70M $textDefault marginB-s2>
-              Items Fit
+              Item Width: {itemWidth}px
             </Text>
-            <SegmentedControl
-              segments={ITEMS_FIT_OPTIONS}
-              initialIndex={ITEMS_FIT_OPTIONS.findIndex(opt => opt.value === itemsFit)}
-              onChangeIndex={index => setItemsFit(ITEMS_FIT_OPTIONS[index].value)}
+            <Slider
+              value={itemWidth}
+              minimumValue={50}
+              maximumValue={300}
+              step={10}
+              onValueChange={setItemWidth}
             />
           </View>
         )}
@@ -424,7 +485,7 @@ const ScreenFooterScreen = () => {
         horizontalAlignment={horizontalAlignment}
         HorizontalItemsDistribution={distribution}
         itemsFit={itemsFit}
-        itemWidth={150}
+        itemWidth={itemWidth}
       >
         {renderFooterItems}
       </ScreenFooter>
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 625fb4a3c6..602f3ae564 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -167,19 +167,23 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     }, [isSolid, isFading]);
 
     const renderChild = useCallback((child: React.ReactNode, index: number) => {
-        if (itemsFit === ItemsFit.FIXED && itemWidth && layout === ScreenFooterLayouts.VERTICAL) {
+        if (itemsFit === ItemsFit.FIXED && itemWidth) {
+            const fixedStyle = isHorizontal 
+                ? {width: itemWidth, flexShrink: 1} 
+                : {width: itemWidth};
             return (
-                <View key={index} style={{width: itemWidth}}>
+                <View key={index} style={fixedStyle}>
                     {child}
                 </View>
             );
         }
 
         if (isHorizontal && React.isValidElement(child)) {
-             return React.cloneElement(child, {
-                 // @ts-ignore
-                 style: [child.props.style, {flexShrink: 1}]
-             });
+            const flexStyle = itemsFit === ItemsFit.STRETCH ? {flex: 1} : {flexShrink: 1};
+            return React.cloneElement<any>(child, {
+                key: index,
+                style: [child.props.style, flexStyle]
+            });
         }
 
         return child;

From a1baac411f7cf017909bae6a540d9a4412c8cdee Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Thu, 1 Jan 2026 14:50:28 +0200
Subject: [PATCH 09/18] Added support of hideOnScroll with new hook -
 useScrollToHide. added hideOnScroll to footerScreen.

---
 .../componentScreens/ScreenFooterScreen.tsx   | 21 +++++-
 .../src/components/screenFooter/index.tsx     | 36 ++++++++--
 .../react-native-ui-lib/src/hooks/index.ts    |  1 +
 .../src/hooks/useScrollToHide/index.ts        | 70 +++++++++++++++++++
 4 files changed, 122 insertions(+), 6 deletions(-)
 create mode 100644 packages/react-native-ui-lib/src/hooks/useScrollToHide/index.ts

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index 536438a88e..1884e65531 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -15,7 +15,8 @@ import {
   ItemsFit,
   Switch,
   TextField,
-  Slider
+  Slider,
+  Hooks
 } from 'react-native-ui-lib';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -115,6 +116,9 @@ const ScreenFooterScreen = () => {
   const [extraContentSize, setExtraContentSize] = useState<ItemSize>(ItemSize.MEDIUM);
   const [useLongButtonText, setUseLongButtonText] = useState(false);
   const [itemWidth, setItemWidth] = useState(150);
+  const [shouldHideOnScroll, setShouldHideOnScroll] = useState(false);
+
+  const {onScroll, visible} = Hooks.useScrollToHide();
 
   const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
 
@@ -233,7 +237,11 @@ const ScreenFooterScreen = () => {
 
   return (
     <View flex bg-$backgroundDefault>
-      <ScrollView contentContainerStyle={styles.scrollContent}>
+      <ScrollView 
+        contentContainerStyle={styles.scrollContent}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+      >
         <Text text60 $textDefault marginB-s4>
           ScreenFooter Configuration
         </Text>
@@ -245,6 +253,14 @@ const ScreenFooterScreen = () => {
           containerStyle={{marginBottom: 20}}
         />
 
+        {/* Hide On Scroll Toggle */}
+        <View row spread centerV marginB-s4>
+          <Text text70M $textDefault>
+            Hide on Scroll
+          </Text>
+          <Switch value={shouldHideOnScroll} onValueChange={setShouldHideOnScroll}/>
+        </View>
+
         {/* Layout Selection */}
         <View marginB-s4>
           <Text text70M $textDefault marginB-s2>
@@ -486,6 +502,7 @@ const ScreenFooterScreen = () => {
         HorizontalItemsDistribution={distribution}
         itemsFit={itemsFit}
         itemWidth={itemWidth}
+        visible={shouldHideOnScroll ? visible : true}
       >
         {renderFooterItems}
       </ScreenFooter>
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 602f3ae564..c7280b88a3 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -1,6 +1,6 @@
 //IMPORTS
-import React, {PropsWithChildren, useCallback, useMemo} from 'react';
-import {DimensionValue, Image, StyleSheet} from 'react-native';
+import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {Animated, DimensionValue, Image, LayoutChangeEvent, StyleSheet} from 'react-native';
 import View from '../view';
 import {Colors, Spacings} from '../../style';
 import {asBaseComponent} from '../../commons/new';
@@ -79,6 +79,15 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * Fixed width for 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;
 }
 
 const ScreenFooter = (props: ScreenFooterProps) => {
@@ -92,11 +101,27 @@ const ScreenFooter = (props: ScreenFooterProps) => {
         position = ScreenFooterPosition.STICKY,
         itemsFit,
         itemWidth,
-        HorizontalItemsDistribution: distribution
+        HorizontalItemsDistribution: distribution,
+        visible = true,
+        animationDuration = 200
     } = props;
 
     const keyboardHeight = useKeyboardHeight();
     const bottom = position === ScreenFooterPosition.HOISTED ? keyboardHeight : 0;
+    const [height, setHeight] = useState(0);
+    const translateY = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        Animated.timing(translateY, {
+            toValue: visible ? 0 : height,
+            duration: animationDuration,
+            useNativeDriver: true
+        }).start();
+    }, [visible, height, animationDuration]);
+
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+        setHeight(event.nativeEvent.layout.height);
+    }, []);
 
     const isSolid = backgroundType === ScreenFooterBackgrounds.SOLID;
     const isFading = backgroundType === ScreenFooterBackgrounds.FADING;
@@ -193,7 +218,10 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
     return (
         <View
-          style={[styles.container, {bottom}]}>
+          animated
+          onLayout={onLayout}
+          style={[styles.container, {bottom, transform: [{translateY}]}]}
+        >
             {renderBackground()}
             <View style={contentContainerStyle}>
                 {childrenArray}
diff --git a/packages/react-native-ui-lib/src/hooks/index.ts b/packages/react-native-ui-lib/src/hooks/index.ts
index 1209e16ee5..863bd6ba27 100644
--- a/packages/react-native-ui-lib/src/hooks/index.ts
+++ b/packages/react-native-ui-lib/src/hooks/index.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';
diff --git a/packages/react-native-ui-lib/src/hooks/useScrollToHide/index.ts b/packages/react-native-ui-lib/src/hooks/useScrollToHide/index.ts
new file mode 100644
index 0000000000..ba6e4fc0d8
--- /dev/null
+++ b/packages/react-native-ui-lib/src/hooks/useScrollToHide/index.ts
@@ -0,0 +1,70 @@
+import {useState, useCallback, useRef} from 'react';
+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();
+ */
+const useScrollToHide = (props: ScrollToHideProps = {}): ScrollToHideResult => {
+  const {scrollingThreshold = 0} = props;
+  const [visible, setVisible] = useState(true);
+  const prevContentOffset = useRef(0);
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      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;
+

From 4af7b9fdad7c9c5caa692cdcada12d4e2c0f3119 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Thu, 1 Jan 2026 16:03:47 +0200
Subject: [PATCH 10/18] added animation support, for keyboard and entrance.
 added safeArea support.

---
 .../componentScreens/ScreenFooterScreen.tsx   | 12 +++-
 .../src/components/screenFooter/index.tsx     | 58 ++++++++++++++-----
 2 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index 1884e65531..5dbfd60ec9 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -117,6 +117,7 @@ const ScreenFooterScreen = () => {
   const [useLongButtonText, setUseLongButtonText] = useState(false);
   const [itemWidth, setItemWidth] = useState(150);
   const [shouldHideOnScroll, setShouldHideOnScroll] = useState(false);
+  const [useSafeArea, setUseSafeArea] = useState(true);
 
   const {onScroll, visible} = Hooks.useScrollToHide();
 
@@ -253,6 +254,14 @@ const ScreenFooterScreen = () => {
           containerStyle={{marginBottom: 20}}
         />
 
+        {/* Safe Area Toggle */}
+        <View row spread centerV marginB-s4>
+          <Text text70M $textDefault>
+            Use Safe Area
+          </Text>
+          <Switch value={useSafeArea} onValueChange={setUseSafeArea}/>
+        </View>
+
         {/* Hide On Scroll Toggle */}
         <View row spread centerV marginB-s4>
           <Text text70M $textDefault>
@@ -499,10 +508,11 @@ const ScreenFooterScreen = () => {
         position={position}
         alignment={alignment}
         horizontalAlignment={horizontalAlignment}
-        HorizontalItemsDistribution={distribution}
+        horizontalItemsDistribution={distribution}
         itemsFit={itemsFit}
         itemWidth={itemWidth}
         visible={shouldHideOnScroll ? visible : true}
+        useSafeArea={useSafeArea}
       >
         {renderFooterItems}
       </ScreenFooter>
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index c7280b88a3..f49698f790 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -1,9 +1,9 @@
 //IMPORTS
 import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Animated, DimensionValue, Image, LayoutChangeEvent, StyleSheet} from 'react-native';
+import {Animated, DimensionValue, Image, LayoutChangeEvent, StyleSheet, StyleProp, ViewStyle} from 'react-native';
 import View from '../view';
 import {Colors, Spacings} from '../../style';
-import {asBaseComponent} from '../../commons/new';
+import {asBaseComponent, Constants} from '../../commons/new';
 import {useKeyboardHeight} from '../../hooks';
 
 //ENUMS
@@ -88,6 +88,10 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * @default 200
      */
     animationDuration?: number;
+    /**
+     * If true, the footer will respect the safe area (add bottom padding)
+     */
+    useSafeArea?: boolean;
 }
 
 const ScreenFooter = (props: ScreenFooterProps) => {
@@ -103,14 +107,26 @@ const ScreenFooter = (props: ScreenFooterProps) => {
         itemWidth,
         HorizontalItemsDistribution: distribution,
         visible = true,
-        animationDuration = 200
+        animationDuration = 200,
+        useSafeArea
     } = props;
 
     const keyboardHeight = useKeyboardHeight();
-    const bottom = position === ScreenFooterPosition.HOISTED ? keyboardHeight : 0;
+    // const bottom = position === ScreenFooterPosition.HOISTED ? keyboardHeight : 0;
+    const bottom = useRef(new Animated.Value(0)).current;
     const [height, setHeight] = useState(0);
     const translateY = useRef(new Animated.Value(0)).current;
 
+    useEffect(() => {
+        const targetBottom = position === ScreenFooterPosition.HOISTED ? keyboardHeight : 0;
+        
+        Animated.timing(bottom, {
+            toValue: targetBottom,
+            duration: animationDuration,
+            useNativeDriver: false // 'bottom' is not supported by native driver
+        }).start();
+    }, [position, keyboardHeight, animationDuration]);
+
     useEffect(() => {
         Animated.timing(translateY, {
             toValue: visible ? 0 : height,
@@ -126,7 +142,6 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     const isSolid = backgroundType === ScreenFooterBackgrounds.SOLID;
     const isFading = backgroundType === ScreenFooterBackgrounds.FADING;
     const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
-    // const isHoisted = position === ScreenFooterPosition.HOISTED;
 
     const justifyContent = useMemo(() => {
         if (isHorizontal) {
@@ -159,13 +174,21 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     }
     }, [layout, itemsFit, alignment]);
 
+    const {bottom: safeAreaBottom} = Constants.getSafeAreaInsets();
+
     const contentContainerStyle = useMemo(() => {
-        return [
+        const style: any[] = [
             styles.contentContainer,
-            layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer: styles.verticalContainer,
-            {alignItems, justifyContent}        
-        ]
-    }, [layout, alignItems, justifyContent]);
+            layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer : styles.verticalContainer,
+            {alignItems, justifyContent}
+        ];
+
+        if (useSafeArea && Constants.isIphoneX) {
+            style.push({paddingBottom: safeAreaBottom });
+        }
+
+        return style;
+    }, [layout, alignItems, justifyContent, useSafeArea, safeAreaBottom]);
 
 
     const renderBackground = useCallback(() => {
@@ -220,11 +243,13 @@ const ScreenFooter = (props: ScreenFooterProps) => {
         <View
           animated
           onLayout={onLayout}
-          style={[styles.container, {bottom, transform: [{translateY}]}]}
+          style={[styles.container, {bottom}]}
         >
-            {renderBackground()}
-            <View style={contentContainerStyle}>
-                {childrenArray}
+            <View animated style={[styles.innerContainer, {transform: [{translateY}]}]}>
+                {renderBackground()}
+                <View style={contentContainerStyle}>
+                    {childrenArray}
+                </View>
             </View>
         </View>
     );
@@ -238,10 +263,13 @@ const styles = StyleSheet.create({
         left: 0,
         right: 0
     },
+    innerContainer: {
+        width: '100%'
+    },
     contentContainer: {
         paddingTop: Spacings.s4,
         paddingHorizontal: Spacings.s5,
-        paddingBottom: Spacings.s5,
+        paddingBottom: Spacings.s4,
     },
     horizontalContainer: {
         flexDirection: 'row',

From 14def43eb92c44970e3e9dd61c57f596afcf1560 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Mon, 5 Jan 2026 10:50:37 +0200
Subject: [PATCH 11/18] switched animations from react animated to reanimated
 for better visuals, added shadow and dividers support

---
 .../componentScreens/ScreenFooterScreen.tsx   |  28 +-
 .../src/components/screenFooter/index.tsx     | 408 +++++++++---------
 2 files changed, 221 insertions(+), 215 deletions(-)

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index 5dbfd60ec9..114220f1b3 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -9,7 +9,7 @@ import {
   ScreenFooter,
   ScreenFooterLayouts,
   ScreenFooterBackgrounds,
-  ScreenFooterPosition,
+  KeyboardBehavior,
   FooterAlignment,
   HorizontalItemsDistribution,
   ItemsFit,
@@ -86,14 +86,14 @@ const SIZE_OPTIONS = [
   {label: 'Large', value: ItemSize.LARGE}
 ];
 
-const POSITION_OPTIONS = [
-  {label: 'Sticky', value: ScreenFooterPosition.STICKY},
-  {label: 'Hoisted', value: ScreenFooterPosition.HOISTED}
+const KEYBOARD_BEHAVIOR_OPTIONS = [
+  {label: 'Sticky', value: KeyboardBehavior.STICKY},
+  {label: 'Hoisted', value: KeyboardBehavior.HOISTED}
 ];
 
-const POSITION_OPTIONS_SPACED = [
-  {label: 'Sticky', value: ScreenFooterPosition.STICKY},
-  {label: 'Hoisted', value: ScreenFooterPosition.HOISTED},
+const KEYBOARD_BEHAVIOR_OPTIONS_SPACED = [
+  {label: 'Sticky', value: KeyboardBehavior.STICKY},
+  {label: 'Hoisted', value: KeyboardBehavior.HOISTED},
   {label: '', value: 'dummy'},
 ];
 
@@ -101,7 +101,7 @@ const ScreenFooterScreen = () => {
   const [itemsCount, setItemsCount] = useState(2);
   const [layout, setLayout] = useState<ScreenFooterLayouts>(ScreenFooterLayouts.HORIZONTAL);
   const [background, setBackground] = useState<ScreenFooterBackgrounds>(ScreenFooterBackgrounds.SOLID);
-  const [position, setPosition] = useState<ScreenFooterPosition>(ScreenFooterPosition.STICKY);
+  const [keyboardBehavior, setKeyboardBehavior] = useState<KeyboardBehavior>(KeyboardBehavior.STICKY);
   const [alignment, setAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
   const [horizontalAlignment, setHorizontalAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
   const [distribution, setDistribution] = useState<HorizontalItemsDistribution>(HorizontalItemsDistribution.STACK);
@@ -403,13 +403,13 @@ const ScreenFooterScreen = () => {
         {/* Position */}
         <View marginB-s4>
           <Text text70M $textDefault marginB-s2>
-            Position
+            Keyboard Behavior
           </Text>
           <View row>
              <SegmentedControl
-              segments={POSITION_OPTIONS}
-              initialIndex={POSITION_OPTIONS.findIndex(opt => opt.value === position)}
-              onChangeIndex={index => setPosition(POSITION_OPTIONS[index].value)}
+              segments={KEYBOARD_BEHAVIOR_OPTIONS}
+              initialIndex={KEYBOARD_BEHAVIOR_OPTIONS.findIndex(opt => opt.value === keyboardBehavior)}
+              onChangeIndex={index => setKeyboardBehavior(KEYBOARD_BEHAVIOR_OPTIONS[index].value)}
             />
              <View flex />
           </View>
@@ -479,7 +479,7 @@ const ScreenFooterScreen = () => {
             <Slider
               value={itemWidth}
               minimumValue={50}
-              maximumValue={300}
+              maximumValue={500}
               step={10}
               onValueChange={setItemWidth}
             />
@@ -505,7 +505,7 @@ const ScreenFooterScreen = () => {
       <ScreenFooter
         layout={layout}
         backgroundType={background}
-        position={position}
+        keyboardBehavior={keyboardBehavior}
         alignment={alignment}
         horizontalAlignment={horizontalAlignment}
         horizontalItemsDistribution={distribution}
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index f49698f790..fbdc3a4ec5 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -1,12 +1,9 @@
-//IMPORTS
-import React, {PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {Animated, DimensionValue, Image, LayoutChangeEvent, StyleSheet, StyleProp, ViewStyle} from 'react-native';
+import React, {PropsWithChildren, useCallback, useEffect, useMemo, useState} from 'react';
+import {DimensionValue, Image, LayoutChangeEvent, StyleSheet} from 'react-native';
+import Animated, {useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import View from '../view';
-import {Colors, Spacings} from '../../style';
+import {Colors, Shadows, Spacings} from '../../style';
 import {asBaseComponent, Constants} from '../../commons/new';
-import {useKeyboardHeight} from '../../hooks';
-
-//ENUMS
 
 export enum ScreenFooterLayouts {
     HORIZONTAL = 'horizontal',
@@ -21,13 +18,13 @@ export enum ScreenFooterBackgrounds {
 
 export enum FooterAlignment {
     START = 'start',
-    CENTER = 'center', 
+    CENTER = 'center',
     END = 'end'
 }
 
 export enum HorizontalItemsDistribution {
-    STACK = 'stack', 
-    SPREAD = 'spread',
+    STACK = 'stack',
+    SPREAD = 'spread'
 }
 
 export enum ItemsFit {
@@ -36,13 +33,17 @@ export enum ItemsFit {
     FIXED = 'fixed'
 }
 
-export enum ScreenFooterPosition {
+export enum KeyboardBehavior {
     STICKY = 'sticky',
     HOISTED = 'hoisted'
 }
 
+export enum ScreenFooterShadow {
+    SH10 = 'sh10',
+    SH20 = 'sh20',
+    SH30 = 'sh30'
+}
 
-//TYPE
 export interface ScreenFooterProps extends PropsWithChildren<{}> {
     /**
      * The background style of the footer
@@ -64,19 +65,21 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      */
     horizontalAlignment?: FooterAlignment | `${FooterAlignment}`;
     /**
-     * Distribution of items in horizontal layout
+     * Distribution of items in horizontal layout (stack/spread)
      */
-    HorizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`;
+    horizontalItemsDistribution?: HorizontalItemsDistribution | `${HorizontalItemsDistribution}`;
     /**
-     * How items should fit in vertical layout
+     * How items should fit in vertical layout (fit/fixed/stretch)
      */
     itemsFit?: ItemsFit | `${ItemsFit}`;
     /**
-     * Footer position behavior
+     * 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.
      */
-    position?: ScreenFooterPosition | `${ScreenFooterPosition}`;
+    keyboardBehavior?: KeyboardBehavior | `${KeyboardBehavior}`;
     /**
-     * Fixed width for items (used with ItemsFit.FIXED)
+     * Fixed width for all items (used with ItemsFit.FIXED)
      */
     itemWidth?: DimensionValue;
     /**
@@ -92,201 +95,204 @@ export interface ScreenFooterProps extends PropsWithChildren<{}> {
      * 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;
 }
 
 const ScreenFooter = (props: ScreenFooterProps) => {
-
-    const {
-        layout,
-        alignment,
-        horizontalAlignment,
-        backgroundType,
-        children,
-        position = ScreenFooterPosition.STICKY,
-        itemsFit,
-        itemWidth,
-        HorizontalItemsDistribution: distribution,
-        visible = true,
-        animationDuration = 200,
-        useSafeArea
-    } = props;
-
-    const keyboardHeight = useKeyboardHeight();
-    // const bottom = position === ScreenFooterPosition.HOISTED ? keyboardHeight : 0;
-    const bottom = useRef(new Animated.Value(0)).current;
-    const [height, setHeight] = useState(0);
-    const translateY = useRef(new Animated.Value(0)).current;
-
-    useEffect(() => {
-        const targetBottom = position === ScreenFooterPosition.HOISTED ? keyboardHeight : 0;
-        
-        Animated.timing(bottom, {
-            toValue: targetBottom,
-            duration: animationDuration,
-            useNativeDriver: false // 'bottom' is not supported by native driver
-        }).start();
-    }, [position, keyboardHeight, animationDuration]);
-
-    useEffect(() => {
-        Animated.timing(translateY, {
-            toValue: visible ? 0 : height,
-            duration: animationDuration,
-            useNativeDriver: true
-        }).start();
-    }, [visible, height, animationDuration]);
-
-    const onLayout = useCallback((event: LayoutChangeEvent) => {
-        setHeight(event.nativeEvent.layout.height);
-    }, []);
-
-    const isSolid = backgroundType === ScreenFooterBackgrounds.SOLID;
-    const isFading = backgroundType === ScreenFooterBackgrounds.FADING;
-    const isHorizontal = layout === ScreenFooterLayouts.HORIZONTAL;
-
-    const justifyContent = useMemo(() => {
-        if (isHorizontal) {
-            // When SPREAD, items are distributed with space-between
-            if (distribution === HorizontalItemsDistribution.SPREAD) {
-                return 'space-between' as const;
-            }
-            // When STACK, horizontalAlignment controls left/center/right positioning
-            switch (horizontalAlignment) {
-                case FooterAlignment.START: return 'flex-start' as const;
-                case FooterAlignment.END: return 'flex-end' as const;
-                default: return 'center' as const;
-            }
-        }
-        return 'flex-start' as const;
-    }, [isHorizontal, distribution, horizontalAlignment]);
-
-    const alignItems = useMemo(() => {
-    
-    if(layout === ScreenFooterLayouts.VERTICAL) {
-        if(itemsFit === ItemsFit.STRETCH) {
-            return 'stretch' as const;
-        }
-    }
-    
-    switch (alignment) {
+  const {
+    layout,
+    alignment,
+    horizontalAlignment,
+    backgroundType,
+    children,
+    keyboardBehavior = KeyboardBehavior.STICKY,
+    itemsFit,
+    itemWidth,
+    horizontalItemsDistribution: distribution,
+    visible = true,
+    animationDuration = 200,
+    useSafeArea,
+    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]);
+
+  // Combine keyboard hoisting + visibility into a single animated style
+  const animatedStyle = useAnimatedStyle(() => {
+    const keyboardTranslateY = keyboardBehavior === KeyboardBehavior.HOISTED ? -keyboard.height.value : 0;
+    return {
+      transform: [{translateY: keyboardTranslateY + visibilityTranslateY.value}]
+    };
+  });
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    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) {
+      // When SPREAD with multiple items, distribute with space-between
+      // When SPREAD with single item, center it (space-between has no effect)
+      if (distribution === HorizontalItemsDistribution.SPREAD) {
+        return childrenCount === 1 ? 'center' as const : 'space-between' as const;
+      }
+      // When STACK, horizontalAlignment controls left/center/right positioning
+      switch (horizontalAlignment) {
         case FooterAlignment.START: return 'flex-start' as const;
         case FooterAlignment.END: return 'flex-end' as const;
         default: return 'center' as const;
+      }
+    }
+    return 'flex-start' as const;
+  }, [isHorizontal, distribution, horizontalAlignment, childrenCount]);
+
+  const alignItems = useMemo(() => {
+    if (layout === ScreenFooterLayouts.VERTICAL) {
+      if (itemsFit === ItemsFit.STRETCH) {
+        return 'stretch' as const;
+      }
     }
-    }, [layout, itemsFit, alignment]);
-
-    const {bottom: safeAreaBottom} = Constants.getSafeAreaInsets();
-
-    const contentContainerStyle = useMemo(() => {
-        const style: any[] = [
-            styles.contentContainer,
-            layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer : styles.verticalContainer,
-            {alignItems, justifyContent}
-        ];
-
-        if (useSafeArea && Constants.isIphoneX) {
-            style.push({paddingBottom: safeAreaBottom });
-        }
-
-        return style;
-    }, [layout, alignItems, justifyContent, useSafeArea, safeAreaBottom]);
-
-
-    const renderBackground = useCallback(() => {
-        
-        if (isSolid) {
-            return <View style={[styles.background, styles.solidBackground]} pointerEvents="none"/>
-        }
-
-        else if (isFading) {
-            return (
-                <View style={styles.background} pointerEvents="none">
-                    <Image
-                        source={require('./gradient.png')}
-                        style={styles.background}
-                        resizeMode='stretch'
-                        tintColor={Colors.$backgroundDefault}
-                    />
-                </View>
-            )
-        }
-
-        return null;
-
-    }, [isSolid, isFading]);
-
-    const renderChild = useCallback((child: React.ReactNode, index: number) => {
-        if (itemsFit === ItemsFit.FIXED && itemWidth) {
-            const fixedStyle = isHorizontal 
-                ? {width: itemWidth, flexShrink: 1} 
-                : {width: itemWidth};
-            return (
-                <View key={index} style={fixedStyle}>
-                    {child}
-                </View>
-            );
-        }
-
-        if (isHorizontal && React.isValidElement(child)) {
-            const flexStyle = itemsFit === ItemsFit.STRETCH ? {flex: 1} : {flexShrink: 1};
-            return React.cloneElement<any>(child, {
-                key: index,
-                style: [child.props.style, flexStyle]
-            });
-        }
-
-        return child;
-    }, [itemsFit, itemWidth, isHorizontal]);
-
-    const childrenArray = React.Children.toArray(children).slice(0, 3).map(renderChild);
-
-    return (
+
+    switch (alignment) {
+      case FooterAlignment.START: return 'flex-start' as const;
+      case FooterAlignment.END: return 'flex-end' as const;
+      default: return 'center' as const;
+    }
+  }, [layout, itemsFit, alignment]);
+
+  const {bottom: safeAreaBottom} = Constants.getSafeAreaInsets();
+
+  const contentContainerStyle = useMemo(() => {
+    const style: any[] = [
+      styles.contentContainer,
+      layout === ScreenFooterLayouts.HORIZONTAL ? styles.horizontalContainer : styles.verticalContainer,
+      {alignItems, justifyContent}
+    ];
+
+    if (useSafeArea && Constants.isIphoneX) {
+      style.push({paddingBottom: safeAreaBottom});
+    }
+
+    return style;
+  }, [layout, alignItems, justifyContent, useSafeArea, safeAreaBottom]);
+
+  const renderBackground = useCallback(() => {
+    if (isSolid) {
+      const shadowStyle = Shadows[shadow]?.top;
+      const dividerStyle = hideDivider ? undefined : {borderTopWidth: 1, borderColor: Colors.$outlineDefault};
+      return (
         <View
-          animated
-          onLayout={onLayout}
-          style={[styles.container, {bottom}]}
-        >
-            <View animated style={[styles.innerContainer, {transform: [{translateY}]}]}>
-                {renderBackground()}
-                <View style={contentContainerStyle}>
-                    {childrenArray}
-                </View>
-            </View>
+          absF
+          bg-$backgroundElevated
+          style={[styles.background, shadowStyle, dividerStyle]}
+          pointerEvents="none"
+        />
+      );
+    }
+
+    if (isFading) {
+      return (
+        <View absF style={styles.background} pointerEvents="none">
+          <Image
+            source={require('./gradient.png')}
+            style={styles.background}
+            resizeMode="stretch"
+            tintColor={Colors.$backgroundDefault}
+          />
+        </View>
+      );
+    }
+
+    return null;
+  }, [isSolid, isFading, shadow, hideDivider]);
+
+  const renderChild = useCallback((child: React.ReactNode, index: number) => {
+    if (itemsFit === ItemsFit.FIXED && itemWidth) {
+      const fixedStyle = isHorizontal
+        ? {width: itemWidth, flexShrink: 1, overflow: 'hidden' as const}
+        : {width: itemWidth, maxWidth: '100%' as const};
+      return (
+        <View key={index} style={fixedStyle}>
+          {child}
         </View>
-    );
+      );
+    }
+
+    if (isHorizontal && React.isValidElement(child)) {
+      const flexStyle = itemsFit === ItemsFit.STRETCH ? {flex: 1} : {flexShrink: 1};
+      return React.cloneElement<any>(child, {
+        key: index,
+        style: [child.props.style, flexStyle]
+      });
+    }
+
+    return child;
+  }, [itemsFit, itemWidth, isHorizontal]);
+
+  const childrenArray = React.Children.toArray(children).slice(0, 3).map(renderChild);
+
+  return (
+    <Animated.View
+      onLayout={onLayout}
+      style={[styles.container, animatedStyle]}
+    >
+      {renderBackground()}
+      <View style={contentContainerStyle}>
+        {childrenArray}
+      </View>
+    </Animated.View>
+  );
 };
 
+ScreenFooter.displayName = 'ScreenFooter';
 
 const styles = StyleSheet.create({
-    container: {
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        right: 0
-    },
-    innerContainer: {
-        width: '100%'
-    },
-    contentContainer: {
-        paddingTop: Spacings.s4,
-        paddingHorizontal: Spacings.s5,
-        paddingBottom: Spacings.s4,
-    },
-    horizontalContainer: {
-        flexDirection: 'row',
-        gap: Spacings.s5,
-    },
-    verticalContainer: {
-        flexDirection: 'column',
-        gap: Spacings.s3
-    },
-    background: {
-        ...StyleSheet.absoluteFillObject,
-        width: '100%',
-        height: '100%'
-    },
-    solidBackground: {
-        backgroundColor: Colors.$backgroundElevated //maybe elevated light? not sure
-    }
+  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<ScreenFooterProps, typeof ScreenFooter>(ScreenFooter);
\ No newline at end of file
+export default asBaseComponent<ScreenFooterProps, typeof ScreenFooter>(ScreenFooter);

From 87848e526c7b961c45c2b7db59fa37e88cef526b Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Thu, 8 Jan 2026 14:39:07 +0200
Subject: [PATCH 12/18] types bug fix

---
 packages/react-native-ui-lib/src/index.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-ui-lib/src/index.ts b/packages/react-native-ui-lib/src/index.ts
index 83932abc8d..0673cae86e 100644
--- a/packages/react-native-ui-lib/src/index.ts
+++ b/packages/react-native-ui-lib/src/index.ts
@@ -78,7 +78,8 @@ export {
   FooterAlignment,
   HorizontalItemsDistribution,
   ItemsFit,
-  ScreenFooterPosition
+  KeyboardBehavior,
+  ScreenFooterShadow
 } from './components/screenFooter';
 export {default as Gradient, GradientProps, GradientTypes} from './components/gradient';
 export {default as Slider} from './components/slider';

From ac69b5d521544f984cbabbb32324f766245b26b3 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Sun, 11 Jan 2026 17:07:59 +0200
Subject: [PATCH 13/18] apply small fixes due to PR comments, move types to
 different file

---
 .../componentScreens/ScreenFooterScreen.tsx   | 213 ++++++++----------
 .../src/components/screenFooter/index.tsx     | 152 ++++---------
 .../src/components/screenFooter/types.ts      | 109 +++++++++
 3 files changed, 242 insertions(+), 232 deletions(-)
 create mode 100644 packages/react-native-ui-lib/src/components/screenFooter/types.ts

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index 114220f1b3..31cb99f77c 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -15,8 +15,8 @@ import {
   ItemsFit,
   Switch,
   TextField,
-  Slider,
-  Hooks
+  Hooks,
+  Incubator
 } from 'react-native-ui-lib';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -62,12 +62,6 @@ const DISTRIBUTION_OPTIONS = [
   {label: 'Spread', value: HorizontalItemsDistribution.SPREAD}
 ];
 
-const DISTRIBUTION_OPTIONS_SPACED = [
-  {label: 'Stack', value: HorizontalItemsDistribution.STACK},
-  {label: 'Spread', value: HorizontalItemsDistribution.SPREAD},
-  {label: '', value: 'dummy'},
-];
-
 const ITEMS_FIT_OPTIONS = [
   {label: 'Fit', value: ItemsFit.FIT},
   {label: 'Stretch', value: ItemsFit.STRETCH},
@@ -94,7 +88,7 @@ const KEYBOARD_BEHAVIOR_OPTIONS = [
 const KEYBOARD_BEHAVIOR_OPTIONS_SPACED = [
   {label: 'Sticky', value: KeyboardBehavior.STICKY},
   {label: 'Hoisted', value: KeyboardBehavior.HOISTED},
-  {label: '', value: 'dummy'},
+  {label: '', value: 'dummy'}
 ];
 
 const ScreenFooterScreen = () => {
@@ -106,7 +100,7 @@ const ScreenFooterScreen = () => {
   const [horizontalAlignment, setHorizontalAlignment] = useState<FooterAlignment>(FooterAlignment.CENTER);
   const [distribution, setDistribution] = useState<HorizontalItemsDistribution>(HorizontalItemsDistribution.STACK);
   const [itemsFit, setItemsFit] = useState<ItemsFit>(ItemsFit.FIT);
-  
+
   const [button1Type, setButton1Type] = useState<ButtonType>(ButtonType.PRIMARY);
   const [button2Type, setButton2Type] = useState<ButtonType>(ButtonType.SECONDARY);
   const [button3Type, setButton3Type] = useState<ButtonType>(ButtonType.LINK);
@@ -125,17 +119,23 @@ const ScreenFooterScreen = () => {
 
   const getButtonSize = (size: ItemSize) => {
     switch (size) {
-      case ItemSize.SMALL: return Button.sizes.small;
-      case ItemSize.MEDIUM: return Button.sizes.medium;
-      case ItemSize.LARGE: return Button.sizes.large;
+      case ItemSize.SMALL:
+        return Button.sizes.small;
+      case ItemSize.MEDIUM:
+        return Button.sizes.medium;
+      case ItemSize.LARGE:
+        return Button.sizes.large;
     }
   };
 
-  const getTextPreset = (size: ItemSize): {main: string; sub: string} => {
+  const getTextPreset = (size: ItemSize): {main: string; subtext: string} => {
     switch (size) {
-      case ItemSize.SMALL: return {main: 'text80', sub: 'text100'};
-      case ItemSize.MEDIUM: return {main: 'text70', sub: 'text90'};
-      case ItemSize.LARGE: return {main: 'text60', sub: 'text80'};
+      case ItemSize.SMALL:
+        return {main: 'text80', subtext: 'text100'};
+      case ItemSize.MEDIUM:
+        return {main: 'text70', subtext: 'text90'};
+      case ItemSize.LARGE:
+        return {main: 'text60', subtext: 'text80'};
     }
   };
 
@@ -165,9 +165,12 @@ const ScreenFooterScreen = () => {
 
   const getImageSize = (size: ItemSize): number => {
     switch (size) {
-      case ItemSize.SMALL: return 24;
-      case ItemSize.MEDIUM: return 32;
-      case ItemSize.LARGE: return 40;
+      case ItemSize.SMALL:
+        return 24;
+      case ItemSize.MEDIUM:
+        return 32;
+      case ItemSize.LARGE:
+        return 40;
     }
   };
 
@@ -175,15 +178,20 @@ const ScreenFooterScreen = () => {
     const items = [];
     const textPreset = getTextPreset(extraContentSize);
     const imageSize = getImageSize(extraContentSize);
-    
+
     // Extra Text (Total price)
     if (showExtraText) {
       items.push(
-        <View key="extra-text" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal} style={{flexShrink: 1}}>
-          <Text {...{[textPreset.main]: true}} $textDefault numberOfLines={1}>
-            Total: <Text {...{[textPreset.main]: true}} $textDefault style={{fontWeight: 'bold'}}>257$</Text>
+        <View key="extra-text" centerV flexS marginR-s4={isHorizontal} marginB-s4={!isHorizontal}>
+          <Text {...{[textPreset.main]: true}} numberOfLines={1}>
+            Total:{' '}
+            <Text {...{[textPreset.main]: true}} style={{fontWeight: 'bold'}}>
+              257$
+            </Text>
+          </Text>
+          <Text {...{[textPreset.subtext]: true}} $textNeutralLight numberOfLines={1}>
+            Including VAT.
           </Text>
-          <Text {...{[textPreset.sub]: true}} $textNeutralLight numberOfLines={1}>Including VAT.</Text>
         </View>
       );
     }
@@ -192,87 +200,62 @@ const ScreenFooterScreen = () => {
     if (showExtraText && showImage) {
       items.push(
         <View key="extra-image" centerV marginR-s4={isHorizontal} marginB-s4={!isHorizontal}>
-          <Image
-            source={basketIcon}
-            style={{width: imageSize, height: imageSize, tintColor: Colors.$iconDefault}}
-          />
+          <Image source={basketIcon} style={{width: imageSize, height: imageSize, tintColor: Colors.$iconDefault}} />
         </View>
       );
     }
 
     if (itemsCount >= 1) {
-      items.push(
-        <Button
-          key="btn1"
-          size={getButtonSize(buttonSize)}
-        //   style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
-          {...getButtonProps(button1Type)}
-        />
-      );
+      items.push(<Button key="btn1" size={getButtonSize(buttonSize)} {...getButtonProps(button1Type)} />);
     }
 
     if (itemsCount >= 2) {
-      items.push(
-        <Button
-          key="btn2"
-          size={getButtonSize(buttonSize)}
-        //   style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
-          {...getButtonProps(button2Type)}
-        />
-      );
+      items.push(<Button key="btn2" size={getButtonSize(buttonSize)} {...getButtonProps(button2Type)} />);
     }
 
     if (itemsCount >= 3) {
-      items.push(
-        <Button
-          key="btn3"
-          size={getButtonSize(buttonSize)}
-        //   style={itemsFit === ItemsFit.STRETCH && !isHorizontal ? {alignSelf: 'stretch'} : undefined}
-          {...getButtonProps(button3Type)}
-        />
-      );
+      items.push(<Button key="btn3" size={getButtonSize(buttonSize)} {...getButtonProps(button3Type)} />);
     }
-    
+
     return items;
-  }, [itemsCount, itemsFit, isHorizontal, button1Type, button2Type, button3Type, buttonSize, showExtraText, showImage, extraContentSize, useLongButtonText]);
+  }, [
+    itemsCount,
+    itemsFit,
+    isHorizontal,
+    button1Type,
+    button2Type,
+    button3Type,
+    buttonSize,
+    showExtraText,
+    showImage,
+    extraContentSize,
+    useLongButtonText
+  ]);
 
   return (
-    <View flex bg-$backgroundDefault>
-      <ScrollView 
-        contentContainerStyle={styles.scrollContent}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
-      >
-        <Text text60 $textDefault marginB-s4>
+    <>
+      <ScrollView contentContainerStyle={styles.scrollContent} onScroll={onScroll} scrollEventThrottle={16}>
+        <Text text60 marginB-s4>
           ScreenFooter Configuration
         </Text>
 
-        <TextField
-          placeholder="Focus me to test keyboard behavior"
-          label="Test Input"
-          floatingPlaceholder
-          containerStyle={{marginBottom: 20}}
-        />
+        <TextField marginB-20 placeholder="Focus me to test keyboard behavior" label="Test Input" floatingPlaceholder />
 
         {/* Safe Area Toggle */}
         <View row spread centerV marginB-s4>
-          <Text text70M $textDefault>
-            Use Safe Area
-          </Text>
-          <Switch value={useSafeArea} onValueChange={setUseSafeArea}/>
+          <Text text70M>Use Safe Area</Text>
+          <Switch value={useSafeArea} onValueChange={setUseSafeArea} />
         </View>
 
         {/* Hide On Scroll Toggle */}
         <View row spread centerV marginB-s4>
-          <Text text70M $textDefault>
-            Hide on Scroll
-          </Text>
-          <Switch value={shouldHideOnScroll} onValueChange={setShouldHideOnScroll}/>
+          <Text text70M>Hide on Scroll</Text>
+          <Switch value={shouldHideOnScroll} onValueChange={setShouldHideOnScroll} />
         </View>
 
         {/* Layout Selection */}
         <View marginB-s4>
-          <Text text70M $textDefault marginB-s2>
+          <Text text70M marginB-s2>
             Layout
           </Text>
           <SegmentedControl
@@ -284,7 +267,7 @@ const ScreenFooterScreen = () => {
 
         {/* Items Count */}
         <View marginB-s4>
-          <Text text70M $textDefault marginB-s2>
+          <Text text70M marginB-s2>
             Number of Items
           </Text>
           <SegmentedControl
@@ -296,26 +279,22 @@ const ScreenFooterScreen = () => {
 
         {/* Extra Text Toggle */}
         <View row spread centerV marginB-s4>
-          <Text text70M $textDefault>
-            Show Extra Text
-          </Text>
-          <Switch value={showExtraText} onValueChange={setShowExtraText}/>
+          <Text text70M>Show Extra Text</Text>
+          <Switch value={showExtraText} onValueChange={setShowExtraText} />
         </View>
 
         {/* Show Image Toggle (only when Extra Text is shown) */}
         {showExtraText && (
           <View row spread centerV marginB-s4 marginL-s4>
-            <Text text70M $textDefault>
-              Show Image
-            </Text>
-            <Switch value={showImage} onValueChange={setShowImage}/>
+            <Text text70M>Show Image</Text>
+            <Switch value={showImage} onValueChange={setShowImage} />
           </View>
         )}
 
         {/* Extra Content Size */}
         {showExtraText && (
           <View marginB-s4>
-            <Text text70M $textDefault marginB-s2>
+            <Text text70M marginB-s2>
               Extra Content Size
             </Text>
             <SegmentedControl
@@ -328,7 +307,7 @@ const ScreenFooterScreen = () => {
 
         {/* Button Size (applies to all buttons) */}
         <View marginB-s4>
-          <Text text70M $textDefault marginB-s2>
+          <Text text70M marginB-s2>
             Button Size
           </Text>
           <SegmentedControl
@@ -340,16 +319,14 @@ const ScreenFooterScreen = () => {
 
         {/* Long Button Text Toggle */}
         <View row spread centerV marginB-s4>
-          <Text text70M $textDefault>
-            Use Long Button Text
-          </Text>
-          <Switch value={useLongButtonText} onValueChange={setUseLongButtonText}/>
+          <Text text70M>Use Long Button Text</Text>
+          <Switch value={useLongButtonText} onValueChange={setUseLongButtonText} />
         </View>
 
         {/* Button 1 Type */}
         {itemsCount >= 1 && (
           <View marginB-s4>
-            <Text text70M $textDefault marginB-s2>
+            <Text text70M marginB-s2>
               Button 1 Type
             </Text>
             <SegmentedControl
@@ -363,7 +340,7 @@ const ScreenFooterScreen = () => {
         {/* Button 2 Type */}
         {itemsCount >= 2 && (
           <View marginB-s4>
-            <Text text70M $textDefault marginB-s2>
+            <Text text70M marginB-s2>
               Button 2 Type
             </Text>
             <SegmentedControl
@@ -377,7 +354,7 @@ const ScreenFooterScreen = () => {
         {/* Button 3 Type */}
         {itemsCount >= 3 && (
           <View marginB-s4>
-            <Text text70M $textDefault marginB-s2>
+            <Text text70M marginB-s2>
               Button 3 Type
             </Text>
             <SegmentedControl
@@ -390,7 +367,7 @@ const ScreenFooterScreen = () => {
 
         {/* Background */}
         <View marginB-s4>
-          <Text text70M $textDefault marginB-s2>
+          <Text text70M marginB-s2>
             Background
           </Text>
           <SegmentedControl
@@ -402,22 +379,22 @@ const ScreenFooterScreen = () => {
 
         {/* Position */}
         <View marginB-s4>
-          <Text text70M $textDefault marginB-s2>
+          <Text text70M marginB-s2>
             Keyboard Behavior
           </Text>
           <View row>
-             <SegmentedControl
+            <SegmentedControl
               segments={KEYBOARD_BEHAVIOR_OPTIONS}
               initialIndex={KEYBOARD_BEHAVIOR_OPTIONS.findIndex(opt => opt.value === keyboardBehavior)}
               onChangeIndex={index => setKeyboardBehavior(KEYBOARD_BEHAVIOR_OPTIONS[index].value)}
             />
-             <View flex />
+            <View flex />
           </View>
         </View>
 
         {/* Alignment (Cross Axis) */}
         <View marginB-s4>
-          <Text text70M $textDefault marginB-s2>
+          <Text text70M marginB-s2>
             {isHorizontal ? 'Vertical Alignment' : 'Alignment'}
           </Text>
           <SegmentedControl
@@ -430,7 +407,7 @@ const ScreenFooterScreen = () => {
         {/* Distribution (for Horizontal layout) */}
         {isHorizontal && (
           <View marginB-s4>
-            <Text text70M $textDefault marginB-s2>
+            <Text text70M marginB-s2>
               Distribution
             </Text>
             <View row>
@@ -439,7 +416,6 @@ const ScreenFooterScreen = () => {
                 initialIndex={DISTRIBUTION_OPTIONS.findIndex(opt => opt.value === distribution)}
                 onChangeIndex={index => setDistribution(DISTRIBUTION_OPTIONS[index].value)}
               />
-               <View flex />
             </View>
           </View>
         )}
@@ -447,7 +423,7 @@ const ScreenFooterScreen = () => {
         {/* Horizontal Alignment (for Horizontal layout + Stack distribution) */}
         {isHorizontal && distribution === HorizontalItemsDistribution.STACK && (
           <View marginB-s4>
-            <Text text70M $textDefault marginB-s2>
+            <Text text70M marginB-s2>
               Horizontal Alignment
             </Text>
             <SegmentedControl
@@ -460,7 +436,7 @@ const ScreenFooterScreen = () => {
 
         {/* Items Fit */}
         <View marginB-s4>
-          <Text text70M $textDefault marginB-s2>
+          <Text text70M marginB-s2>
             Items Fit
           </Text>
           <SegmentedControl
@@ -473,13 +449,13 @@ const ScreenFooterScreen = () => {
         {/* Item Width Slider (only when Fixed is selected) */}
         {itemsFit === ItemsFit.FIXED && (
           <View marginB-s4>
-            <Text text70M $textDefault marginB-s2>
+            <Text text70M marginB-s2>
               Item Width: {itemWidth}px
             </Text>
-            <Slider
+            <Incubator.Slider
               value={itemWidth}
               minimumValue={50}
-              maximumValue={500}
+              maximumValue={250}
               step={10}
               onValueChange={setItemWidth}
             />
@@ -488,20 +464,19 @@ const ScreenFooterScreen = () => {
 
         {/* Spacer for content */}
         <View marginT-s10>
-          <Text text70 $textDefault style={styles.placeholder}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor 
-            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
-            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+          <Text text70>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
           </Text>
-          <Text text70 $textDefault marginT-s4 style={styles.placeholder}>
-            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
-            fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
-            culpa qui officia deserunt mollit anim id est laborum.
+          <Text text70 marginT-s4>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
           </Text>
         </View>
       </ScrollView>
 
-      {/* ScreenFooter Component */}
       <ScreenFooter
         layout={layout}
         backgroundType={background}
@@ -516,7 +491,7 @@ const ScreenFooterScreen = () => {
       >
         {renderFooterItems}
       </ScreenFooter>
-    </View>
+    </>
   );
 };
 
@@ -524,11 +499,7 @@ const styles = StyleSheet.create({
   scrollContent: {
     padding: 20,
     paddingBottom: 150
-  },
-  placeholder: {
-    lineHeight: 22
   }
 });
 
 export default ScreenFooterScreen;
-
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index fbdc3a4ec5..284ab48ad7 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -1,114 +1,35 @@
-import React, {PropsWithChildren, useCallback, useEffect, useMemo, useState} from 'react';
-import {DimensionValue, Image, LayoutChangeEvent, StyleSheet} from 'react-native';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import {LayoutChangeEvent, StyleSheet} from 'react-native';
+import {Image} from 'react-native-ui-lib';
 import Animated, {useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import View from '../view';
 import {Colors, Shadows, Spacings} from '../../style';
 import {asBaseComponent, Constants} from '../../commons/new';
-
-export enum ScreenFooterLayouts {
-    HORIZONTAL = 'horizontal',
-    VERTICAL = 'vertical'
-}
-
-export enum ScreenFooterBackgrounds {
-    FADING = 'fading',
-    SOLID = 'solid',
-    TRANSPARENT = 'transparent'
-}
-
-export enum FooterAlignment {
-    START = 'start',
-    CENTER = 'center',
-    END = 'end'
-}
-
-export enum HorizontalItemsDistribution {
-    STACK = 'stack',
-    SPREAD = 'spread'
-}
-
-export enum ItemsFit {
-    FIT = 'fit',
-    STRETCH = 'stretch',
-    FIXED = 'fixed'
-}
-
-export enum KeyboardBehavior {
-    STICKY = 'sticky',
-    HOISTED = 'hoisted'
-}
-
-export enum ScreenFooterShadow {
-    SH10 = 'sh10',
-    SH20 = 'sh20',
-    SH30 = 'sh30'
-}
-
-export interface ScreenFooterProps extends PropsWithChildren<{}> {
-    /**
-     * 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;
-}
+import {
+  ScreenFooterProps,
+  ScreenFooterLayouts,
+  ScreenFooterBackgrounds,
+  FooterAlignment,
+  HorizontalItemsDistribution,
+  ItemsFit,
+  KeyboardBehavior,
+  ScreenFooterShadow
+} from './types';
+
+export {
+  ScreenFooterProps,
+  ScreenFooterLayouts,
+  ScreenFooterBackgrounds,
+  FooterAlignment,
+  HorizontalItemsDistribution,
+  ItemsFit,
+  KeyboardBehavior,
+  ScreenFooterShadow
+};
 
 const ScreenFooter = (props: ScreenFooterProps) => {
   const {
+    testID,
     layout,
     alignment,
     horizontalAlignment,
@@ -132,7 +53,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
   // Update visibility translation when visible or height changes
   useEffect(() => {
     visibilityTranslateY.value = withTiming(visible ? 0 : height, {duration: animationDuration});
-  }, [visible, height, animationDuration]);
+  }, [visible, height, animationDuration, visibilityTranslateY]);
 
   // Combine keyboard hoisting + visibility into a single animated style
   const animatedStyle = useAnimatedStyle(() => {
@@ -199,15 +120,23 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     return style;
   }, [layout, alignItems, justifyContent, useSafeArea, safeAreaBottom]);
 
+  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) {
-      const shadowStyle = Shadows[shadow]?.top;
-      const dividerStyle = hideDivider ? undefined : {borderTopWidth: 1, borderColor: Colors.$outlineDefault};
       return (
         <View
+          testID={testID ? `${testID}.solidBackground` : undefined}
           absF
           bg-$backgroundElevated
-          style={[styles.background, shadowStyle, dividerStyle]}
+          style={solidBackgroundStyle}
           pointerEvents="none"
         />
       );
@@ -215,7 +144,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
     if (isFading) {
       return (
-        <View absF style={styles.background} pointerEvents="none">
+        <View testID={testID ? `${testID}.fadingBackground` : undefined} absF pointerEvents="none">
           <Image
             source={require('./gradient.png')}
             style={styles.background}
@@ -227,7 +156,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     }
 
     return null;
-  }, [isSolid, isFading, shadow, hideDivider]);
+  }, [testID, isSolid, isFading, solidBackgroundStyle]);
 
   const renderChild = useCallback((child: React.ReactNode, index: number) => {
     if (itemsFit === ItemsFit.FIXED && itemWidth) {
@@ -256,11 +185,12 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
   return (
     <Animated.View
+      testID={testID}
       onLayout={onLayout}
       style={[styles.container, animatedStyle]}
     >
       {renderBackground()}
-      <View style={contentContainerStyle}>
+      <View testID={testID ? `${testID}.content` : undefined} style={contentContainerStyle}>
         {childrenArray}
       </View>
     </Animated.View>
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/types.ts b/packages/react-native-ui-lib/src/components/screenFooter/types.ts
new file mode 100644
index 0000000000..169583b632
--- /dev/null
+++ b/packages/react-native-ui-lib/src/components/screenFooter/types.ts
@@ -0,0 +1,109 @@
+import {PropsWithChildren} from 'react';
+import {DimensionValue} from 'react-native';
+
+export enum ScreenFooterLayouts {
+    HORIZONTAL = 'horizontal',
+    VERTICAL = 'vertical'
+}
+
+export enum ScreenFooterBackgrounds {
+    FADING = 'fading',
+    SOLID = 'solid',
+    TRANSPARENT = 'transparent'
+}
+
+export enum FooterAlignment {
+    START = 'start',
+    CENTER = 'center',
+    END = 'end'
+}
+
+export enum HorizontalItemsDistribution {
+    STACK = 'stack',
+    SPREAD = 'spread'
+}
+
+export enum ItemsFit {
+    FIT = 'fit',
+    STRETCH = 'stretch',
+    FIXED = 'fixed'
+}
+
+export enum KeyboardBehavior {
+    STICKY = 'sticky',
+    HOISTED = 'hoisted'
+}
+
+export 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;
+}
+

From a2c5e702a7f1aea74fedd28e237ef2108f77f047 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Sun, 11 Jan 2026 17:08:18 +0200
Subject: [PATCH 14/18] add docs api json file

---
 .../screenFooter/screenFooter.api.json        | 98 +++++++++++++++++++
 1 file changed, 98 insertions(+)
 create mode 100644 packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json b/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json
new file mode 100644
index 0000000000..e44233fd38
--- /dev/null
+++ b/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json
@@ -0,0 +1,98 @@
+{
+  "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>"
+  ]
+}
+

From faf73741058fa274dcf4315bc9c03a575b9fed9b Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Sun, 11 Jan 2026 17:08:25 +0200
Subject: [PATCH 15/18] add basic render tests

---
 .../screenFooter/__tests__/index.spec.tsx     | 197 ++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 packages/react-native-ui-lib/src/components/screenFooter/__tests__/index.spec.tsx

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/__tests__/index.spec.tsx b/packages/react-native-ui-lib/src/components/screenFooter/__tests__/index.spec.tsx
new file mode 100644
index 0000000000..156016f499
--- /dev/null
+++ b/packages/react-native-ui-lib/src/components/screenFooter/__tests__/index.spec.tsx
@@ -0,0 +1,197 @@
+import React from 'react';
+import {StyleSheet, ViewStyle} from 'react-native';
+import {render} from '@testing-library/react-native';
+import {useComponentDriver, ComponentProps} from '../../../testkit/new/Component.driver';
+import View from '../../view';
+import Button from '../../button';
+import Text from '../../text';
+import ScreenFooter from '../index';
+import {
+  ScreenFooterProps,
+  ScreenFooterLayouts,
+  ScreenFooterBackgrounds,
+  FooterAlignment,
+  HorizontalItemsDistribution
+} from '../types';
+
+const TEST_ID = 'screen-footer';
+
+const ScreenFooterDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver(props);
+  const getStyle = () => driver.getElement().props.style as ViewStyle;
+  return {...driver, getStyle};
+};
+
+const ContentDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver(props);
+  const getStyle = () => StyleSheet.flatten(driver.getElement().props.style) as ViewStyle;
+  return {...driver, getStyle};
+};
+
+const BackgroundDriver = (props: ComponentProps) => {
+  const driver = useComponentDriver(props);
+  return driver;
+};
+
+const TestCase = (props: Partial<ScreenFooterProps>) => {
+  return (
+    <View testID="test-screen">
+      <ScreenFooter testID={TEST_ID} {...props}/>
+    </View>
+  );
+};
+
+describe('ScreenFooter', () => {
+  describe('sanity', () => {
+    it('should render ScreenFooter', () => {
+      const renderTree = render(<TestCase/>);
+      const driver = ScreenFooterDriver({renderTree, testID: TEST_ID});
+      expect(driver.exists()).toBeTruthy();
+    });
+
+    it('should render with children', () => {
+      const renderTree = render(
+        <TestCase>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const driver = ScreenFooterDriver({renderTree, testID: TEST_ID});
+      expect(driver.exists()).toBeTruthy();
+    });
+  });
+
+  describe('layout', () => {
+    it('should apply vertical layout by default (column flexDirection)', () => {
+      const renderTree = render(
+        <TestCase>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const contentDriver = ContentDriver({renderTree, testID: `${TEST_ID}.content`});
+      expect(contentDriver.getStyle().flexDirection).toBe('column');
+    });
+
+    it('should apply horizontal layout when specified (row flexDirection)', () => {
+      const renderTree = render(
+        <TestCase layout={ScreenFooterLayouts.HORIZONTAL}>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const contentDriver = ContentDriver({renderTree, testID: `${TEST_ID}.content`});
+      expect(contentDriver.getStyle().flexDirection).toBe('row');
+    });
+  });
+
+  describe('alignment', () => {
+    it('should align items to center by default', () => {
+      const renderTree = render(
+        <TestCase>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const contentDriver = ContentDriver({renderTree, testID: `${TEST_ID}.content`});
+      expect(contentDriver.getStyle().alignItems).toBe('center');
+    });
+
+    it('should align items to flex-start when FooterAlignment.START', () => {
+      const renderTree = render(
+        <TestCase alignment={FooterAlignment.START}>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const contentDriver = ContentDriver({renderTree, testID: `${TEST_ID}.content`});
+      expect(contentDriver.getStyle().alignItems).toBe('flex-start');
+    });
+  });
+
+  describe('horizontalItemsDistribution', () => {
+    it('should spread multiple items with space-between when SPREAD', () => {
+      const renderTree = render(
+        <TestCase 
+          layout={ScreenFooterLayouts.HORIZONTAL}
+          horizontalItemsDistribution={HorizontalItemsDistribution.SPREAD}
+        >
+          <Button label="Primary"/>
+          <Button label="Secondary"/>
+        </TestCase>
+      );
+      const contentDriver = ContentDriver({renderTree, testID: `${TEST_ID}.content`});
+      expect(contentDriver.getStyle().justifyContent).toBe('space-between');
+    });
+
+    it('should center items by default when STACK', () => {
+      const renderTree = render(
+        <TestCase 
+          layout={ScreenFooterLayouts.HORIZONTAL}
+          horizontalItemsDistribution={HorizontalItemsDistribution.STACK}
+        >
+          <Button label="Primary"/>
+          <Button label="Secondary"/>
+        </TestCase>
+      );
+      const contentDriver = ContentDriver({renderTree, testID: `${TEST_ID}.content`});
+      expect(contentDriver.getStyle().justifyContent).toBe('center');
+    });
+  });
+
+  describe('backgroundType', () => {
+    it('should render solid background when backgroundType is SOLID', () => {
+      const renderTree = render(
+        <TestCase backgroundType={ScreenFooterBackgrounds.SOLID}>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const solidBgDriver = BackgroundDriver({renderTree, testID: `${TEST_ID}.solidBackground`});
+      const fadingBgDriver = BackgroundDriver({renderTree, testID: `${TEST_ID}.fadingBackground`});
+      
+      expect(solidBgDriver.exists()).toBeTruthy();
+      expect(fadingBgDriver.exists()).toBeFalsy();
+    });
+
+    it('should render fading background when backgroundType is FADING', () => {
+      const renderTree = render(
+        <TestCase backgroundType={ScreenFooterBackgrounds.FADING}>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const solidBgDriver = BackgroundDriver({renderTree, testID: `${TEST_ID}.solidBackground`});
+      const fadingBgDriver = BackgroundDriver({renderTree, testID: `${TEST_ID}.fadingBackground`});
+      
+      expect(solidBgDriver.exists()).toBeFalsy();
+      expect(fadingBgDriver.exists()).toBeTruthy();
+    });
+
+    it('should not render any background when backgroundType is TRANSPARENT', () => {
+      const renderTree = render(
+        <TestCase backgroundType={ScreenFooterBackgrounds.TRANSPARENT}>
+          <Button label="Primary"/>
+        </TestCase>
+      );
+      const solidBgDriver = BackgroundDriver({renderTree, testID: `${TEST_ID}.solidBackground`});
+      const fadingBgDriver = BackgroundDriver({renderTree, testID: `${TEST_ID}.fadingBackground`});
+      
+      expect(solidBgDriver.exists()).toBeFalsy();
+      expect(fadingBgDriver.exists()).toBeFalsy();
+    });
+  });
+
+  describe('children', () => {
+    it('should render max 3 children even when more are provided', () => {
+      const renderTree = render(
+        <TestCase>
+          <Text testID="child-1">Child 1</Text>
+          <Text testID="child-2">Child 2</Text>
+          <Text testID="child-3">Child 3</Text>
+          <Text testID="child-4">Child 4</Text>
+          <Text testID="child-5">Child 5</Text>
+        </TestCase>
+      );
+      
+      expect(renderTree.queryByTestId('child-1')).toBeTruthy();
+      expect(renderTree.queryByTestId('child-2')).toBeTruthy();
+      expect(renderTree.queryByTestId('child-3')).toBeTruthy();
+      expect(renderTree.queryByTestId('child-4')).toBeFalsy();
+      expect(renderTree.queryByTestId('child-5')).toBeFalsy();
+    });
+  });
+});

From 461fb7869f484a22cc6715479f816994b8bcf5a2 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Tue, 13 Jan 2026 14:29:37 +0200
Subject: [PATCH 16/18] multiple android bug fixes + keyboardAccessibilityView
 support + better centrization of img component

---
 .../src/components/screenFooter/index.tsx     | 64 +++++++++++++++----
 1 file changed, 53 insertions(+), 11 deletions(-)

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 284ab48ad7..6c913aca42 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -2,6 +2,7 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {LayoutChangeEvent, 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 View from '../view';
 import {Colors, Shadows, Spacings} from '../../style';
 import {asBaseComponent, Constants} from '../../commons/new';
@@ -55,11 +56,18 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     visibilityTranslateY.value = withTiming(visible ? 0 : height, {duration: animationDuration});
   }, [visible, height, animationDuration, visibilityTranslateY]);
 
-  // Combine keyboard hoisting + visibility into a single animated style
-  const animatedStyle = useAnimatedStyle(() => {
-    const keyboardTranslateY = keyboardBehavior === KeyboardBehavior.HOISTED ? -keyboard.height.value : 0;
+  // Animated style for STICKY behavior (counters Android system offset + visibility)
+  const stickyAnimatedStyle = useAnimatedStyle(() => {
+    const counterSystemOffset = Constants.isAndroid ? keyboard.height.value : 0;
     return {
-      transform: [{translateY: keyboardTranslateY + visibilityTranslateY.value}]
+      transform: [{translateY: counterSystemOffset + visibilityTranslateY.value}]
+    };
+  });
+
+  // Animated style for HOISTED behavior (visibility only, keyboard handled by KeyboardAccessoryView)
+  const hoistedAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{translateY: visibilityTranslateY.value}]
     };
   });
 
@@ -117,8 +125,15 @@ const ScreenFooter = (props: ScreenFooterProps) => {
       style.push({paddingBottom: safeAreaBottom});
     }
 
+    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, useSafeArea, safeAreaBottom]);
+  }, [layout, alignItems, justifyContent, useSafeArea, safeAreaBottom, isSolid, shadow]);
 
   const solidBackgroundStyle = useMemo(() => {
     if (!isSolid) {
@@ -171,7 +186,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     }
 
     if (isHorizontal && React.isValidElement(child)) {
-      const flexStyle = itemsFit === ItemsFit.STRETCH ? {flex: 1} : {flexShrink: 1};
+      const flexStyle = itemsFit === ItemsFit.STRETCH ? {flex: 1, alignItems: 'center'} : {flexShrink: 1};
       return React.cloneElement<any>(child, {
         key: index,
         style: [child.props.style, flexStyle]
@@ -183,16 +198,43 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
   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, animatedStyle]}
+      style={[styles.container, stickyAnimatedStyle]}
     >
-      {renderBackground()}
-      <View testID={testID ? `${testID}.content` : undefined} style={contentContainerStyle}>
-        {childrenArray}
-      </View>
+      {renderFooterContent()}
     </Animated.View>
   );
 };

From 9739b2a1758dd9dd08ba36c0508bed81cdb5b05d Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Tue, 13 Jan 2026 16:31:07 +0200
Subject: [PATCH 17/18] added support of 5 sizes to gradient image used in
 fading background

---
 .../internal/images/buttonFloatingOverlay.png     | Bin 0 -> 200 bytes
 .../images/buttonFloatingOverlay@1.5x.png         | Bin 0 -> 297 bytes
 .../internal/images/buttonFloatingOverlay@2x.png  | Bin 0 -> 332 bytes
 .../internal/images/buttonFloatingOverlay@3x.png  | Bin 0 -> 614 bytes
 .../internal/images/buttonFloatingOverlay@4x.png  | Bin 0 -> 977 bytes
 .../src/assets/internal/images/index.js           |   3 +++
 .../src/components/screenFooter/index.tsx         |   3 ++-
 7 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay.png
 create mode 100644 packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@1.5x.png
 create mode 100644 packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@2x.png
 create mode 100644 packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@3x.png
 create mode 100644 packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@4x.png

diff --git a/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay.png b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ee590d6803c1e280d44e95d0bb69e205fee1018
GIT binary patch
literal 200
zcmeAS@N?(olHy`uVBq!ia0vp^j6ht&!3HE(th_Z1NO2Z;L>4nJa0`PlBg3pY5+GH@
zLGDfr>(0r%1aer?9eo`c7&i8E|4C#8@?$++978G?r}hQ%9Z=wK=1!~nFTDATs)WbQ
zFV9<<bPt@F#q@%oZDrLP-<YeP6#95~I;lT%el*o>r`ERRg$r2T7Av?YImv{rZQ${0
s|5Gh|W$`)YCoaq4e${<{m%W=Y^*86|H=K(<04-whboFyt=akR{095ruzW@LL

literal 0
HcmV?d00001

diff --git a/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@1.5x.png b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@1.5x.png
new file mode 100644
index 0000000000000000000000000000000000000000..65cfdfe5ca9798ba60294d27902065d30449d2ec
GIT binary patch
literal 297
zcmeAS@N?(olHy`uVBq!ia0vp^OhCMggAGWw=+ChMQk(@Ik;M!Q0&_r^QSGdi2~d!+
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>j{Y7srqa#;rk&e9Z<NEv0||PtH$bi!9b%
zs%9Mck?$SDYKD+?uS@UVz4tz!!FiUVpDA}w7(Y`bucLa)N`V~pr#ZLw&VLqSfAQv%
zH_K)O_l8XmxqG%-`Fp$Vm6eu@vR&o{uQ?N<+ODf|{pQZi3hP~$zk8Z{LSLzmrM2<U
zt~t!>W>tr-DhZydk-T;dtJWRuwQ5bC?KTQe5)OC?{69U#@i?2`%XpvXmJ5z)Dfg=f
qXK+nyo~+r=6uVu}^6)(4gZ!$eq~CfqKH>-Zgu&C*&t;ucLK6UVM{ha+

literal 0
HcmV?d00001

diff --git a/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@2x.png b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2c97d0e55cd9155d36aa9a156e9d532adfc0565
GIT binary patch
literal 332
zcmeAS@N?(olHy`uVBq!ia0vp^OhEjDgAGU?+ixBXq&N#aB8wRq#8g3;(KATp15l8$
zILO_JVcj{Imp~3nx}&cn1H;CC?mvmFK>kBd7srqa#-+iHyoU`qn2-I}-@Gnplc9CT
zlBrr36AqZIbZa^F^~cwJZV&dWPYluwkh5SFS2if+-^#Y*!DIJ?)u#n@UN5YAl65<-
z-HuJuM7T54e8a=@ci((Y{4XJ^Zq?4WK~1Vk&PVE{%LA3bt8UN54qptAI~8fHV#3AW
zyXwZGiKT0qeIGQ~G4dL!+C24@a#Z#A;W@KJs<Y<e&IMZ5Jl$Gf+WoJqEI&}t*!o2O
z*_jVXE#?O9+5zt*)}6fewDrk@r!V~<hC6M~<y<8au6gv)x%U!mbB^8nBD?gEe(uDm
bGgZucf{kB&nQ`wg(6bDlu6{1-oD!M<F+_sr

literal 0
HcmV?d00001

diff --git a/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@3x.png b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@3x.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b9fdb28740c854060d2af695ac22e55b28d64de
GIT binary patch
literal 614
zcmV-s0-61ZP)<h;3K|Lk000e1NJLTq0009300DFe1^@s6=6Hj000009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0sBcrK~#7FwO7%S
z10e_l+yDRM%k?_d5ffN#dpola76}1@ZXJNz>$yMPHZN|E7k$yUwQl))(0$M?Ek*MV
zG6Q(+Lv%K_wG!HA)?u5cX}1;N9XiY)0JzE&pJYnOA!Sg+X|HY1I&`A9GM|8kx%Eiv
zhB}|nl516cq!3G!%S8@5lk&C5F^j^bMRN;+y{*uLXa{hq#M6ofqCv_wqXkusIOA6W
z2$p8c00wC3!;__<^KCMY&nW~n%G85pD2gnzkT|HRpuU$}?&EnrGAPmUw#T3*8t4q)
zW{bp#j&%mGNy>EY*h*Blge{w*sENurP1Zm+SOS<V6%SKAW?FCW3`VVk&BNi;XC?|t
z8?%KPOaq8?WO$fhVx0BR*5&=)LU#f4wlKk%w^63(3s^NJ&#lBD0OYJCo&2;k8OPGa
z0Uf?_pnQTt!UX@cHHBO|hYPN?9_N`sXcj)<cG^?v6Uqzeqo=WEtrdcGn^{&wn|%l^
z(g_-^Z`#cTU0`GhHMqFmCBS#|MwZbZD&hr${2093Q40E^tXr?ocr)<_S2s(aiKcw=
zx^4Ey)0qPi{aJ|yfIx>wGi7~oqsv<3p2ayG48Ep<MKa(|YJzT;Dg48EJ)W;lFw&s;
zQKQv6>Xx57W>$QH9(*ilQTTN}DDw%>gWDL|U+t51bq&e3^8f$<07*qoM6N<$f_rBV
AiU0rr

literal 0
HcmV?d00001

diff --git a/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@4x.png b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@4x.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb4d504f1ae095ff725c257f76d88fa2dec207ed
GIT binary patch
literal 977
zcmV;?11|iDP)<h;3K|Lk000e1NJLTq000C400Hm_1^@s6frZY+00009a7bBm001mY
z001mY0i`{bsQ>@~0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH17=A?K~#7Ftyl|g
zD=`Sfo814%kC#R@0%ibjnw8qLmKlaW8<E$es%w9)*RM<5^L+il!TSCC=Tq~IRf@c?
zXHdgf4p_$<QmWN`tECRaOzp#AfZFu|=#^}__Kl0#Qv1}qaAgrGZ<Jo=)XzlDK<hB<
z17*eqEr#)MBDEG3;xRem!9iPV7qw;156_ezh}_PP*%l~|Ikmk=T@3(gTs~w99@|wZ
znY!Kw?Mp0(Jf!iMoab2Y!V)7e-557hJ1`B_`Wt%gAnNsti5ylXfIgVDn;3M5Z%m;2
zhVGjmb{Oh)OR4bBJ_sEqu#~Jpl7pyP>**$vL6wSV<^jgZJz|~*7`HqI^@oAN4PnIW
zR_39zgZ^M#NC)5npcaD6^qq-W?R7EGU|i;LW#ir=D#`0`LxhAO9H{4#V=H6yA=qm)
zZnd@qrY6#Qo!_87l`I0rNhbDf3{0u3!YFMy%=I=M)>*=or9O*L>Iw-%{Sn+42B+6j
zW0V6Yfc7FZwY^#m>x#Iy0?<;H=^8s-9fnIzYk##pIan)Mgc4i%#?Pbej0&+0#6s=U
zF!Wh?-ude=ggt8W@E8#6TEsLy^9|?@<pEIFQA9kkRbf~tw-zliyhx~9Tk`yNA#L*8
z!E$0sCy;nCaPqke%LCA&bVdP&cA(mJerk)h#NG#xg-<6>dGHafUaVad1F^8<f))|d
zVJHvD7-ylZ&9}qSACUag9#D_bQV$}bfP8*nyO>u6Umg}HSd65?0H4w+21ST%obFO>
z^7AoY?v@;*J@`vAD07{H;)@mS{H?Y9zzJGFq-RRoCu}GIqcq<RW*(Ax>}L)`?_@h1
z%VSQd{zhLOrP^<d=tb+rW9S&D1<OP`Ukp@)lscXJXa3-OVIX!tVd_<~pD!Q+ptOJj
z##|mcikQlLpyygj456Uqixmxaz$j<sypZ$_7A7IJ<uHTRNWE?22VWt1j5<(2ovsSN
z^j|)>xsZTb$<)_~0mNv#m=h+b6(`2`_0p%H7B&<<8|LQNrln!PtQ3z^PN2SC=8+`#
zsb8H4euq*rwOeE4YA2W5g+664pKq|Ulc~rz+7|WLl9SZtFNyv&0Wj+1FW(z13u$=-
zTfn&UJcTeUN?n9d4@`r|_>BN}a!X8eqhJ34pLX*Bi3y3E00000NkvXXu0mjfsVl)%

literal 0
HcmV?d00001

diff --git a/packages/react-native-ui-lib/src/assets/internal/images/index.js b/packages/react-native-ui-lib/src/assets/internal/images/index.js
index c07cdb9b27..bbcec568d8 100644
--- a/packages/react-native-ui-lib/src/assets/internal/images/index.js
+++ b/packages/react-native-ui-lib/src/assets/internal/images/index.js
@@ -1,4 +1,7 @@
 export const images = {
+  get buttonFloatingOverlay() {
+    return require('./buttonFloatingOverlay.png');
+  },
   get gradient() {
     return require('./gradient.png');
   },
diff --git a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
index 6c913aca42..ac249df400 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -4,6 +4,7 @@ import {Image} from 'react-native-ui-lib';
 import Animated, {useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import {Keyboard} from 'uilib-native';
 import View from '../view';
+import Assets from '../../assets';
 import {Colors, Shadows, Spacings} from '../../style';
 import {asBaseComponent, Constants} from '../../commons/new';
 import {
@@ -161,7 +162,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
       return (
         <View testID={testID ? `${testID}.fadingBackground` : undefined} absF pointerEvents="none">
           <Image
-            source={require('./gradient.png')}
+            source={Assets.internal.images.buttonFloatingOverlay}
             style={styles.background}
             resizeMode="stretch"
             tintColor={Colors.$backgroundDefault}

From 7547d9da3fb9bad5c3a068f69c5cfdf00a4e0250 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Tue, 13 Jan 2026 16:46:58 +0200
Subject: [PATCH 18/18] generated an improve docs, still need to update links
 to wixmp files

---
 .../screenFooter/screenFooter.api.json        | 166 +++++++++++++++++-
 1 file changed, 165 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json b/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json
index e44233fd38..faf4237420 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json
+++ b/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json
@@ -93,6 +93,170 @@
     "    <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."
+          }
+        ]
+      }
+    ]
+  }
 }