From 4e852d271736e090e2df906d76fc29eaba1ef4a4 Mon Sep 17 00:00:00 2001
From: yotamts <yotamts@wix.com>
Date: Mon, 23 Mar 2026 11:43:17 +0200
Subject: [PATCH] screenFooter - fix overflow in Fit mode, fix stretching in
 Stretch and Fixed modes

Replace row+centerH wrappers with column-direction wrappers where default
alignItems: 'stretch' handles button stretching. Restore flexShrink
wrapping for horizontal FIT mode lost during prior refactor. Users control
centering via the 'center' modifier on their items.

Made-with: Cursor
---
 .../screens/componentScreens/ScreenFooterScreen.tsx |  4 ++--
 .../src/components/screenFooter/index.tsx           | 13 +++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
index a0e451b935..1fdd00027a 100644
--- a/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
+++ b/demo/src/screens/componentScreens/ScreenFooterScreen.tsx
@@ -200,7 +200,7 @@ const ScreenFooterContent = () => {
     // Extra Text (Total price)
     if (showExtraText) {
       items.push(
-        <View key="extra-text" centerV flexS marginB-s4={!isHorizontal}>
+        <View key="extra-text" center flexS marginB-s4={!isHorizontal}>
           <Text {...{[textPreset.main]: true}} numberOfLines={1}>
             Total:{' '}
             <Text {...{[textPreset.main]: true}} style={{fontWeight: 'bold'}}>
@@ -217,7 +217,7 @@ const ScreenFooterContent = () => {
     // Image (Basket icon)
     if (showExtraText && showImage) {
       items.push(
-        <View key="extra-image" centerV marginB-s4={!isHorizontal}>
+        <View key="extra-image" center marginB-s4={!isHorizontal}>
           <Icon source={basketIcon} size={imageSize} tintColor={Colors.$iconDefault} />
         </View>
       );
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 e976823b86..931901a069 100644
--- a/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
+++ b/packages/react-native-ui-lib/src/components/screenFooter/index.tsx
@@ -199,7 +199,7 @@ const ScreenFooter = (props: ScreenFooterProps) => {
     (child: React.ReactNode, index: number) => {
       if (itemsFit === ItemsFit.FIXED && itemWidth) {
         const fixedStyle: ViewStyle = isHorizontal
-          ? {width: itemWidth, flexShrink: 1, overflow: 'hidden', flexDirection: 'row', justifyContent: 'center'}
+          ? {width: itemWidth, flexShrink: 1, overflow: 'hidden'}
           : {width: itemWidth, maxWidth: '100%'};
         return (
           <View key={index} style={fixedStyle}>
@@ -210,11 +210,20 @@ const ScreenFooter = (props: ScreenFooterProps) => {
 
       if (isHorizontal && React.isValidElement(child) && itemsFit === ItemsFit.STRETCH) {
         return (
-          <View flex row centerH key={index}>
+          <View flex key={index}>
             {child}
           </View>
         );
       }
+
+      if (isHorizontal) {
+        return (
+          <View flexS key={index}>
+            {child}
+          </View>
+        );
+      }
+
       return child;
     },
     [itemsFit, itemWidth, isHorizontal]