unicorn-demo-app 8.3.4 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "8.3.4",
+  "version": "8.4.0",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",

package/src/optionalDependencies/SafeAreaContextPackage.tsx

@@ -0,0 +1,6 @@
+let SafeAreaContextPackage;
+try {
+  SafeAreaContextPackage = require('react-native-safe-area-context');
+} catch {}
+
+export default SafeAreaContextPackage;

package/src/optionalDependencies/index.ts

@@ -0,0 +1 @@
+export {default as SafeAreaContextPackage} from './SafeAreaContextPackage';

package/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'}
     ]

package/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, Alert, ScrollView} from 'react-native';
-import {Colors, Text, FloatingButton, FloatingButtonLayouts, Keyboard} from 'react-native-ui-lib';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {Colors, Text, TextField, FloatingButton, FloatingButtonLayouts} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface State {
@@ -8,7 +9,7 @@ interface State {
   showPrimary: boolean;
   showSecondary: boolean;
   showVertical: boolean;
-  withTrackingView: boolean;
+  hoisted: boolean;
 }
 
 export default class FloatingButtonScreen extends Component<{}, State> {
@@ -18,7 +19,7 @@ export default class FloatingButtonScreen extends Component<{}, State> {
     showSecondary: true,
     showVertical: true,
     fullWidth: false,
-    withTrackingView: false
+    hoisted: true
   };
 
   notNow = () => {
@@ -32,72 +33,68 @@ export default class FloatingButtonScreen extends Component<{}, State> {
   };
 
   render() {
-    const {showSecondary, showVertical, withTrackingView} = this.state;
-    const Container = withTrackingView ? Keyboard.KeyboardTrackingView : React.Fragment;
+    const {showSecondary, showVertical, hoisted} = this.state;
     return (
-      <View style={styles.container}>
-        <Text text60 center $textDefault marginB-s4>
-          Trigger Floating Button
-        </Text>
-        {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
-        {renderBooleanOption.call(this, 'Full Width Button', 'fullWidth')}
-        {renderBooleanOption.call(this, 'Show Primary Button', 'showPrimary')}
-        {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
-        {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
-        {renderBooleanOption.call(this, 'With tracking view', 'withTrackingView')}
+      <SafeAreaProvider>
+        <View style={styles.container}>
+          <Text text60 center $textDefault marginB-s4>
+            Trigger Floating Button
+          </Text>
+          {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
+          {renderBooleanOption.call(this, 'Full Width Button', 'fullWidth')}
+          {renderBooleanOption.call(this, 'Show Primary Button', 'showPrimary')}
+          {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
+          {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
+          {renderBooleanOption.call(this, 'Hoisted (keyboard-aware)', 'hoisted')}
 
-        <ScrollView showsVerticalScrollIndicator={false}>
-          <View paddingT-20>
-            <Text text70 $textDefault style={{fontWeight: 'bold'}}>
-              Scroll behind a FloatingButton
-            </Text>
-            <Text text80 $textDefault marginT-10 style={{lineHeight: 24}}>
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-              industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
-              electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
-              of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
-              like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum is not
-              simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
-              years old. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
-              the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-              scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
-              electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
-              of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
-              like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum is not
-              simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000
-              years old.
-            </Text>
-          </View>
-        </ScrollView>
+          <TextField migrate placeholder="Tap to test keyboard hoisting" marginB-s4 />
+
+          <ScrollView
+            showsVerticalScrollIndicator={false}
+            keyboardDismissMode="on-drag"
+            keyboardShouldPersistTaps="handled"
+          >
+            <View paddingT-20>
+              <Text text70 $textDefault style={{fontWeight: 'bold'}}>
+                Scroll behind a FloatingButton
+              </Text>
+              <Text text80 $textDefault marginT-10 style={{lineHeight: 24}}>
+                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
+                industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
+                scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
+                into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
+                release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
+                software like Aldus PageMaker including versions of Lorem Ipsum. Contrary to popular belief, Lorem Ipsum
+                is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it
+                over 2000 years old.
+              </Text>
+            </View>
+          </ScrollView>
 
-        <Container>
           <FloatingButton
             visible={this.state.showButton}
             fullWidth={this.state.fullWidth}
             button={
               this.state.showPrimary
                 ? {
-                  label: 'Approve',
-                  onPress: this.close
-                }
+                    label: 'Approve',
+                    onPress: this.close
+                  }
                 : undefined
             }
             secondaryButton={
               showSecondary
                 ? {
-                  label: 'Not now',
-                  onPress: this.notNow
-                }
+                    label: 'Not now',
+                    onPress: this.notNow
+                  }
                 : undefined
             }
             buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
-            // bottomMargin={80}
-            // hideBackgroundOverlay
-            // withoutAnimation
+            hoisted={hoisted}
           />
-        </Container>
-      </View>
+        </View>
+      </SafeAreaProvider>
     );
   }
 }

package/src/screens/componentScreens/ScreenFooterScreen.tsx

@@ -0,0 +1,512 @@
+import React, {useState} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {
+  View,
+  Text,
+  Button,
+  Colors,
+  SegmentedControl,
+  ScreenFooter,
+  ScreenFooterLayouts,
+  ScreenFooterBackgrounds,
+  KeyboardBehavior,
+  FooterAlignment,
+  HorizontalItemsDistribution,
+  ItemsFit,
+  Switch,
+  TextField,
+  Hooks,
+  Incubator,
+  Icon
+} from 'react-native-ui-lib';
+import {SafeAreaContextPackage} from '../../optionalDependencies';
+const SafeAreaProvider = SafeAreaContextPackage?.SafeAreaProvider;
+
+// 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 MissingDependencyScreen = () => {
+  return (
+    <View flex center padding-s5>
+      <Text text60 $textDangerLight center>
+        Missing Dependency
+      </Text>
+      <Text text70 center marginT-s3>
+        This screen requires react-native-safe-area-context to be installed.
+      </Text>
+      <Text text80 $textNeutral center marginT-s2>
+        Run: npm/yarn install react-native-safe-area-context
+      </Text>
+    </View>
+  );
+};
+
+const ScreenFooterContent = () => {
+  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 {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 = () => {
+    const items = [];
+    const textPreset = getTextPreset(extraContentSize);
+    const imageSize = getImageSize(extraContentSize);
+
+    // Extra Text (Total price)
+    if (showExtraText) {
+      items.push(
+        <View key="extra-text" centerV flexS 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 marginB-s4={!isHorizontal}>
+          <Icon source={basketIcon} size={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;
+  };
+
+  return (
+    <SafeAreaProvider>
+      <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 />
+
+        {/* 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) */}
+        <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)}
+        />
+
+        {/* Long Button Text Toggle */}
+        <View row spread centerV marginB-s4 marginT-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>
+            <SegmentedControl
+              containerStyle={styles.rowContainer}
+              segments={DISTRIBUTION_OPTIONS}
+              initialIndex={DISTRIBUTION_OPTIONS.findIndex(opt => opt.value === distribution)}
+              onChangeIndex={index => setDistribution(DISTRIBUTION_OPTIONS[index].value)}
+            />
+          </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}
+      >
+        {renderFooterItems()}
+      </ScreenFooter>
+    </SafeAreaProvider>
+  );
+};
+
+const ScreenFooterScreen = () => {
+  if (!SafeAreaProvider) {
+    return <MissingDependencyScreen />;
+  }
+
+  return <ScreenFooterContent />;
+};
+
+const styles = StyleSheet.create({
+  scrollContent: {
+    padding: 20,
+    paddingBottom: 150
+  },
+  rowContainer: {
+    flexDirection: 'row'
+  }
+});
+
+export default ScreenFooterScreen;

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