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

Author: yotam-wix

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>
       );

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]