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..31cb99f77c
--- /dev/null
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -0,0 +1,505 @@
+import React, {useState, useMemo} from 'react';
+import {StyleSheet, ScrollView, Image} from 'react-native';
+import {
+  View,
+  Text,
+  Button,
+  Colors,
+  SegmentedControl,
+  ScreenFooter,
+  ScreenFooterLayouts,
+  ScreenFooterBackgrounds,
+  KeyboardBehavior,
+  FooterAlignment,
+  HorizontalItemsDistribution,
+  ItemsFit,
+  Switch,
+  TextField,
+  Hooks,
+  Incubator
+} 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',
+  LINK = 'Link'
+}
+
+enum ItemSize {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large'
+}
+
+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 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 KEYBOARD_BEHAVIOR_OPTIONS = [
+  {label: 'Sticky', value: KeyboardBehavior.STICKY},
+  {label: 'Hoisted', value: KeyboardBehavior.HOISTED}
+];
+
+const KEYBOARD_BEHAVIOR_OPTIONS_SPACED = [
+  {label: 'Sticky', value: KeyboardBehavior.STICKY},
+  {label: 'Hoisted', value: KeyboardBehavior.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 [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);
+  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 [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 [shouldHideOnScroll, setShouldHideOnScroll] = useState(false);
+  const [useSafeArea, setUseSafeArea] = useState(true);
+
+  const {onScroll, visible} = Hooks.useScrollToHide();
+
+  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; subtext: string} => {
+    switch (size) {
+      case ItemSize.SMALL:
+        return {main: 'text80', subtext: 'text100'};
+      case ItemSize.MEDIUM:
+        return {main: 'text70', subtext: 'text90'};
+      case ItemSize.LARGE:
+        return {main: 'text60', subtext: 'text80'};
+    }
+  };
+
+  const getButtonProps = (type: ButtonType) => {
+    switch (type) {
+      case ButtonType.PRIMARY:
+        return {
+          backgroundColor: Colors.$backgroundPrimaryHeavy,
+          label: useLongButtonText ? 'Primary-longtxtlongtxtlongtxtlongtxtlongtxtlongtxt' : 'Checkout'
+        };
+      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 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);
+
+    // Extra Text (Total price)
+    if (showExtraText) {
+      items.push(
+        <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>
+        </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>
+      );
+    }
+
+    if (itemsCount >= 1) {
+      items.push(<Button key="btn1" size={getButtonSize(buttonSize)} {...getButtonProps(button1Type)} />);
+    }
+
+    if (itemsCount >= 2) {
+      items.push(<Button key="btn2" size={getButtonSize(buttonSize)} {...getButtonProps(button2Type)} />);
+    }
+
+    if (itemsCount >= 3) {
+      items.push(<Button key="btn3" size={getButtonSize(buttonSize)} {...getButtonProps(button3Type)} />);
+    }
+
+    return items;
+  }, [
+    itemsCount,
+    itemsFit,
+    isHorizontal,
+    button1Type,
+    button2Type,
+    button3Type,
+    buttonSize,
+    showExtraText,
+    showImage,
+    extraContentSize,
+    useLongButtonText
+  ]);
+
+  return (
+    <>
+      <ScrollView contentContainerStyle={styles.scrollContent} onScroll={onScroll} scrollEventThrottle={16}>
+        <Text text60 marginB-s4>
+          ScreenFooter Configuration
+        </Text>
+
+        <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>Use Safe Area</Text>
+          <Switch value={useSafeArea} onValueChange={setUseSafeArea} />
+        </View>
+
+        {/* Hide On Scroll Toggle */}
+        <View row spread centerV marginB-s4>
+          <Text text70M>Hide on Scroll</Text>
+          <Switch value={shouldHideOnScroll} onValueChange={setShouldHideOnScroll} />
+        </View>
+
+        {/* Layout Selection */}
+        <View marginB-s4>
+          <Text text70M 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 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>
+
+        {/* Extra Text Toggle */}
+        <View row spread centerV marginB-s4>
+          <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>Show Image</Text>
+            <Switch value={showImage} onValueChange={setShowImage} />
+          </View>
+        )}
+
+        {/* Extra Content Size */}
+        {showExtraText && (
+          <View marginB-s4>
+            <Text text70M 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 marginB-s2>
+            Button Size
+          </Text>
+          <SegmentedControl
+            segments={SIZE_OPTIONS}
+            initialIndex={SIZE_OPTIONS.findIndex(opt => opt.value === buttonSize)}
+            onChangeIndex={index => setButtonSize(SIZE_OPTIONS[index].value)}
+          />
+        </View>
+
+        {/* Long Button Text Toggle */}
+        <View row spread centerV marginB-s4>
+          <Text text70M>Use Long Button Text</Text>
+          <Switch value={useLongButtonText} onValueChange={setUseLongButtonText} />
+        </View>
+
+        {/* Button 1 Type */}
+        {itemsCount >= 1 && (
+          <View marginB-s4>
+            <Text text70M marginB-s2>
+              Button 1 Type
+            </Text>
+            <SegmentedControl
+              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 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 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 marginB-s2>
+            Background
+          </Text>
+          <SegmentedControl
+            segments={BACKGROUND_OPTIONS}
+            initialIndex={BACKGROUND_OPTIONS.findIndex(opt => opt.value === background)}
+            onChangeIndex={index => setBackground(BACKGROUND_OPTIONS[index].value)}
+          />
+        </View>
+
+        {/* Position */}
+        <View marginB-s4>
+          <Text text70M marginB-s2>
+            Keyboard Behavior
+          </Text>
+          <View row>
+            <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>
+        </View>
+
+        {/* Alignment (Cross Axis) */}
+        <View marginB-s4>
+          <Text text70M marginB-s2>
+            {isHorizontal ? 'Vertical Alignment' : '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 marginB-s2>
+              Distribution
+            </Text>
+            <View row>
+              <SegmentedControl
+                segments={DISTRIBUTION_OPTIONS}
+                initialIndex={DISTRIBUTION_OPTIONS.findIndex(opt => opt.value === distribution)}
+                onChangeIndex={index => setDistribution(DISTRIBUTION_OPTIONS[index].value)}
+              />
+            </View>
+          </View>
+        )}
+
+        {/* Horizontal Alignment (for Horizontal layout + Stack distribution) */}
+        {isHorizontal && distribution === HorizontalItemsDistribution.STACK && (
+          <View marginB-s4>
+            <Text text70M marginB-s2>
+              Horizontal Alignment
+            </Text>
+            <SegmentedControl
+              segments={ALIGNMENT_OPTIONS}
+              initialIndex={ALIGNMENT_OPTIONS.findIndex(opt => opt.value === horizontalAlignment)}
+              onChangeIndex={index => setHorizontalAlignment(ALIGNMENT_OPTIONS[index].value)}
+            />
+          </View>
+        )}
+
+        {/* Items Fit */}
+        <View marginB-s4>
+          <Text text70M 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 marginB-s2>
+              Item Width: {itemWidth}px
+            </Text>
+            <Incubator.Slider
+              value={itemWidth}
+              minimumValue={50}
+              maximumValue={250}
+              step={10}
+              onValueChange={setItemWidth}
+            />
+          </View>
+        )}
+
+        {/* Spacer for content */}
+        <View marginT-s10>
+          <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 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
+        layout={layout}
+        backgroundType={background}
+        keyboardBehavior={keyboardBehavior}
+        alignment={alignment}
+        horizontalAlignment={horizontalAlignment}
+        horizontalItemsDistribution={distribution}
+        itemsFit={itemsFit}
+        itemWidth={itemWidth}
+        visible={shouldHideOnScroll ? visible : true}
+        useSafeArea={useSafeArea}
+      >
+        {renderFooterItems}
+      </ScreenFooter>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 150
+  }
+});
+
+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/assets/internal/images/buttonFloatingOverlay.png b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay.png
new file mode 100644
index 0000000000..7ee590d680
Binary files /dev/null and b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay.png differ
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 0000000000..65cfdfe5ca
Binary files /dev/null and b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@1.5x.png differ
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 0000000000..a2c97d0e55
Binary files /dev/null and b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@2x.png differ
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 0000000000..4b9fdb2874
Binary files /dev/null and b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@3x.png differ
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 0000000000..fb4d504f1a
Binary files /dev/null and b/packages/react-native-ui-lib/src/assets/internal/images/buttonFloatingOverlay@4x.png differ
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/__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();
+    });
+  });
+});
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 0000000000..1a2bfde6dd
Binary files /dev/null and b/packages/react-native-ui-lib/src/components/screenFooter/gradient.png differ
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..ac249df400
--- /dev/null
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -0,0 +1,271 @@
+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 Assets from '../../assets';
+import {Colors, Shadows, Spacings} from '../../style';
+import {asBaseComponent, Constants} from '../../commons/new';
+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,
+    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, visibilityTranslateY]);
+
+  // Animated style for STICKY behavior (counters Android system offset + visibility)
+  const stickyAnimatedStyle = useAnimatedStyle(() => {
+    const counterSystemOffset = Constants.isAndroid ? keyboard.height.value : 0;
+    return {
+      transform: [{translateY: counterSystemOffset + visibilityTranslateY.value}]
+    };
+  });
+
+  // Animated style for HOISTED behavior (visibility only, keyboard handled by KeyboardAccessoryView)
+  const hoistedAnimatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{translateY: visibilityTranslateY.value}]
+    };
+  });
+
+  const onLayout = useCallback((event: 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;
+      }
+    }
+
+    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});
+    }
+
+    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, isSolid, shadow]);
+
+  const solidBackgroundStyle = useMemo(() => {
+    if (!isSolid) {
+      return undefined;
+    }
+    const shadowStyle = Shadows[shadow]?.top;
+    const dividerStyle = hideDivider ? undefined : {borderTopWidth: 1, borderColor: Colors.$outlineDefault};
+    return [shadowStyle, dividerStyle];
+  }, [isSolid, shadow, hideDivider]);
+
+  const renderBackground = useCallback(() => {
+    if (isSolid) {
+      return (
+        <View
+          testID={testID ? `${testID}.solidBackground` : undefined}
+          absF
+          bg-$backgroundElevated
+          style={solidBackgroundStyle}
+          pointerEvents="none"
+        />
+      );
+    }
+
+    if (isFading) {
+      return (
+        <View testID={testID ? `${testID}.fadingBackground` : undefined} absF pointerEvents="none">
+          <Image
+            source={Assets.internal.images.buttonFloatingOverlay}
+            style={styles.background}
+            resizeMode="stretch"
+            tintColor={Colors.$backgroundDefault}
+          />
+        </View>
+      );
+    }
+
+    return null;
+  }, [testID, isSolid, isFading, solidBackgroundStyle]);
+
+  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, alignItems: 'center'} : {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);
+
+  const renderFooterContent = useCallback(() => {
+    return (
+      <>
+        {renderBackground()}
+        <View testID={testID ? `${testID}.content` : undefined} style={contentContainerStyle}>
+          {childrenArray}
+        </View>
+      </>
+    );
+  }, [renderBackground, testID, contentContainerStyle, childrenArray]);
+
+  if (keyboardBehavior === KeyboardBehavior.HOISTED) {
+    return (
+      <Animated.View
+        style={[styles.container, hoistedAnimatedStyle]}
+        pointerEvents={visible ? 'box-none' : 'none'}
+      >
+        <Keyboard.KeyboardAccessoryView
+          renderContent={renderFooterContent}
+          kbInputRef={undefined}
+          scrollBehavior={Keyboard.KeyboardAccessoryView.scrollBehaviors.FIXED_OFFSET}
+          useSafeArea={false}
+          manageScrollView={false}
+          revealKeyboardInteractive
+          onHeightChanged={setHeight}
+        />
+      </Animated.View>
+    );
+  }
+
+  return (
+    <Animated.View
+      testID={testID}
+      onLayout={onLayout}
+      style={[styles.container, stickyAnimatedStyle]}
+    >
+      {renderFooterContent()}
+    </Animated.View>
+  );
+};
+
+ScreenFooter.displayName = 'ScreenFooter';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
+  },
+  contentContainer: {
+    paddingTop: Spacings.s4,
+    paddingHorizontal: Spacings.s5,
+    paddingBottom: Spacings.s5
+  },
+  horizontalContainer: {
+    flexDirection: 'row',
+    gap: Spacings.s5
+  },
+  verticalContainer: {
+    flexDirection: 'column',
+    gap: Spacings.s3
+  },
+  background: {
+    width: '100%',
+    height: '100%'
+  }
+});
+
+export default asBaseComponent<ScreenFooterProps, typeof ScreenFooter>(ScreenFooter);
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..faf4237420
--- /dev/null
+++ b/packages/react-native-ui-lib/src/components/screenFooter/screenFooter.api.json
@@ -0,0 +1,262 @@
+{
+  "name": "ScreenFooter",
+  "category": "layout",
+  "description": "A flexible footer component that stays at the bottom of the screen with support for various layouts, backgrounds, and keyboard behaviors",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ScreenFooterScreen.tsx",
+  "images": [],
+  "props": [
+    {
+      "name": "backgroundType",
+      "type": "ScreenFooterBackgrounds",
+      "description": "The background style of the footer [fading, solid, transparent]",
+      "default": "'solid'"
+    },
+    {
+      "name": "layout",
+      "type": "ScreenFooterLayouts",
+      "description": "The layout direction of footer items [horizontal, vertical]",
+      "default": "'vertical'"
+    },
+    {
+      "name": "alignment",
+      "type": "FooterAlignment",
+      "description": "Cross-axis alignment [start, center, end]. In vertical layout: controls horizontal position. In horizontal layout: controls vertical position",
+      "default": "'center'"
+    },
+    {
+      "name": "horizontalAlignment",
+      "type": "FooterAlignment",
+      "description": "Main-axis alignment for horizontal layout only when distribution is STACK [start, center, end]",
+      "default": "'center'"
+    },
+    {
+      "name": "horizontalItemsDistribution",
+      "type": "HorizontalItemsDistribution",
+      "description": "Distribution of items in horizontal layout [stack, spread]",
+      "default": "'spread'"
+    },
+    {
+      "name": "itemsFit",
+      "type": "ItemsFit",
+      "description": "How items should fit in vertical layout [fit, fixed, stretch]",
+      "default": "'fit'"
+    },
+    {
+      "name": "keyboardBehavior",
+      "type": "KeyboardBehavior",
+      "description": "The footer's keyboard behavior [sticky, hoisted]. Sticky: stays at bottom when keyboard opens. Hoisted: pushed up when keyboard opens",
+      "default": "'sticky'"
+    },
+    {
+      "name": "itemWidth",
+      "type": "DimensionValue",
+      "description": "Fixed width for all items (used with ItemsFit.FIXED)"
+    },
+    {
+      "name": "visible",
+      "type": "boolean",
+      "description": "If true, the footer is visible. If false, it slides down",
+      "default": "true"
+    },
+    {
+      "name": "animationDuration",
+      "type": "number",
+      "description": "Duration of the show/hide animation in ms",
+      "default": "200"
+    },
+    {
+      "name": "useSafeArea",
+      "type": "boolean",
+      "description": "If true, the footer will respect the safe area (add bottom padding)",
+      "default": "true"
+    },
+    {
+      "name": "shadow",
+      "type": "ScreenFooterShadow",
+      "description": "Shadow preset for solid background [sh10, sh20, sh30]. Only applies when backgroundType is 'solid'",
+      "default": "'sh20'"
+    },
+    {
+      "name": "hideDivider",
+      "type": "boolean",
+      "description": "If true, hides the top divider for solid background. Only applies when backgroundType is 'solid'",
+      "default": "false"
+    }
+  ],
+  "snippet": [
+    "<View flex bg-$backgroundDefault>",
+    "  <ScrollView>",
+    "    {/* Screen content */}",
+    "  </ScrollView>",
+    "  <ScreenFooter>",
+    "    <Button label=\"Primary Action\" />",
+    "    <Button label=\"Secondary Action\" link />",
+    "  </ScreenFooter>",
+    "</View>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "ScreenFooter",
+      "description": "The ScreenFooter component provides a flexible footer that stays at the bottom of the screen with support for various layouts, backgrounds, and keyboard behaviors. It's ideal for forms, checkout flows, and any screen requiring persistent bottom actions.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_overview_preview.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Use Examples",
+            "description": "The ScreenFooter can be used in various scenarios depending on the content and action hierarchy. Each layout type serves different use cases and provides different visual emphasis.",
+            "content": []
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Layout Type",
+              "Use Case",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Horizontal - Spread",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_spread.png"
+                  }
+                ],
+                "description": "Best for two equally important actions positioned at opposite ends. Common in navigation flows or when presenting contrasting choices."
+              },
+              {
+                "title": "Horizontal - Stacked Center",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_stacked.png"
+                  }
+                ],
+                "description": "Ideal for primary and secondary actions of similar importance that should be grouped together in the center."
+              },
+              {
+                "title": "Horizontal - With Content",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_horizontal_content.png"
+                  }
+                ],
+                "description": "Perfect for checkout or summary screens where you need to display information alongside actions. The footer can accommodate text, prices, or other content elements."
+              }
+            ],
+            "title": "Horizontal Layouts",
+            "description": "markdown: Horizontal layouts are best when screen content is abundant and vertical space is limited. They keep actions compact while maintaining good reachability. Use the `layout` prop set to `ScreenFooterLayouts.HORIZONTAL`."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Layout Type",
+              "Use Case",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Vertical - Fit",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_vertical_fit.png"
+                  }
+                ],
+                "description": "Buttons are sized based on their content. Best for clear action hierarchy with a prominent primary button and a subtle secondary link button."
+              },
+              {
+                "title": "Vertical - Stretched",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_vertical_stretched.png"
+                  }
+                ],
+                "description": "Full-width buttons provide maximum tap area and visual prominence. Recommended for forms and high-priority actions where accessibility is crucial."
+              }
+            ],
+            "title": "Vertical Layouts",
+            "description": "markdown: Vertical layouts provide better action prominence and are recommended when a single primary action needs emphasis, or when content can be obscured. Use `itemsFit` prop with `ItemsFit.STRETCH` for full-width buttons or `ItemsFit.FIT` for content-sized buttons."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Background Type",
+              "Visual",
+              "When to Use"
+            ],
+            "items": [
+              {
+                "title": "Solid",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_solid.png"
+                  }
+                ],
+                "description": "Provides clear separation with a solid background and optional shadow. Best for content-heavy screens where the footer needs to stand out."
+              },
+              {
+                "title": "Fading",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_fading.png"
+                  }
+                ],
+                "description": "Creates a subtle gradient overlay that doesn't obscure content completely. Ideal for minimal designs or when content should remain partially visible."
+              },
+              {
+                "title": "Transparent",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_background_transparent.png"
+                  }
+                ],
+                "description": "No background overlay. Use when the screen has minimal content or a solid background color, and separation isn't needed."
+              }
+            ],
+            "title": "Background Types",
+            "description": "markdown: Choose the background type based on your content density and visual hierarchy needs. Set using the `backgroundType` prop."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Behavior",
+              "Description",
+              "Example"
+            ],
+            "items": [
+              {
+                "title": "Sticky",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_behavior_sticky.png"
+                  }
+                ],
+                "description": "The footer remains at the bottom of the screen even when the keyboard is open. Best for short forms or when the footer actions don't relate to keyboard input."
+              },
+              {
+                "title": "Hoisted",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ScreenFooter/screenFooter_behavior_hoisted.png"
+                  }
+                ],
+                "description": "The footer moves up with the keyboard, staying above it. Recommended for forms where users need immediate access to submit actions while typing."
+              }
+            ],
+            "title": "Keyboard Behavior",
+            "description": "markdown: Control how the footer responds to the keyboard using the `keyboardBehavior` prop. Choose `KeyboardBehavior.STICKY` to keep it at the bottom, or `KeyboardBehavior.HOISTED` to move it above the keyboard."
+          }
+        ]
+      }
+    ]
+  }
+}
+
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;
+}
+
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;
+
diff --git a/packages/react-native-ui-lib/src/index.ts b/packages/react-native-ui-lib/src/index.ts
index a84d789b62..0673cae86e 100644
--- a/packages/react-native-ui-lib/src/index.ts
+++ b/packages/react-native-ui-lib/src/index.ts
@@ -70,6 +70,17 @@ 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,
+  KeyboardBehavior,
+  ScreenFooterShadow
+} from './components/screenFooter';
 export {default as Gradient, GradientProps, GradientTypes} from './components/gradient';
 export {default as Slider} from './components/slider';
 export {default as GradientSlider} from './components/slider/GradientSlider';