@utilitywarehouse/hearth-react-native 0.15.0 → 0.15.2

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.15.2 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.15.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.15.2 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.15.2
+
+### Patch Changes
+
+- [#771](https://github.com/utilitywarehouse/hearth/pull/771) [`5320be5`](https://github.com/utilitywarehouse/hearth/commit/5320be544992c137e201be7750d30ea098a7d399) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Adds missing `ref` prop to the `CurrencyInput` component
+
+## 0.15.1
+
+### Patch Changes
+
+- [#768](https://github.com/utilitywarehouse/hearth/pull/768) [`570f240`](https://github.com/utilitywarehouse/hearth/commit/570f240a448eae546b893ed3ad69235213ee5fac) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Makes `Modal` footer sticky by default
+
+  This change updates the `Modal` component to have a sticky footer by default, enhancing user experience by keeping action buttons accessible. The `stickyFooter` prop has been added to allow developers to disable this behavior if needed.
+
 ## 0.15.0
 
 ### Minor Changes

package/build/components/BottomSheet/index.d.ts

@@ -1,7 +1,7 @@
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
 export { default as BottomSheet } from './BottomSheet';
-export { default as BottomSheetView } from './BottomSheetView';
-export { default as BottomSheetScrollView } from './BottomSheetScrollView';
-export { default as BottomSheetModal } from './BottomSheetModal';
-export { default as BottomSheetFlatList } from './BottomSheetFlatList';
-export { BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, type BottomSheetBackdropProps, type BottomSheetBackgroundProps, type BottomSheetHandleProps, type BottomSheetModalProps, } from '@gorhom/bottom-sheet';
 export type { default as BottomSheetProps } from './BottomSheet.props';
+export { default as BottomSheetFlatList } from './BottomSheetFlatList';
+export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+export { default as BottomSheetView } from './BottomSheetView';

package/build/components/BottomSheet/index.js

@@ -1,6 +1,6 @@
+export { BottomSheetFlashList, BottomSheetFooter, BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
 export { default as BottomSheet } from './BottomSheet';
-export { default as BottomSheetView } from './BottomSheetView';
-export { default as BottomSheetScrollView } from './BottomSheetScrollView';
-export { default as BottomSheetModal } from './BottomSheetModal';
 export { default as BottomSheetFlatList } from './BottomSheetFlatList';
-export { BottomSheetModalProvider, BottomSheetSectionList, BottomSheetVirtualizedList, useBottomSheet, useBottomSheetModal, } from '@gorhom/bottom-sheet';
+export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+export { default as BottomSheetView } from './BottomSheetView';

package/build/components/CurrencyInput/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 import type CurrencyInputProps from './CurrencyInput.props';
 declare const CurrencyInput: {
-    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ validationStatus, disabled, focused, readonly, placeholder, inBottomSheet, required, disableGroupSeparator, value, onChangeText, ref, ...rest }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default CurrencyInput;

package/build/components/CurrencyInput/CurrencyInput.js

@@ -5,7 +5,7 @@ import { formatThousands } from '../../utils';
 import { DetailText } from '../DetailText';
 import { useFormFieldContext } from '../FormField';
 import { Input, InputField, InputSlot } from '../Input';
-const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ...rest }) => {
+const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readonly, placeholder, inBottomSheet = false, required, disableGroupSeparator = false, value, onChangeText, ref, ...rest }) => {
     const formFieldContext = useFormFieldContext();
     const { disabled: formFieldDisabled } = formFieldContext;
     const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
@@ -21,7 +21,7 @@ const CurrencyInput = ({ validationStatus = 'initial', disabled, focused, readon
         }
     };
     const displayValue = !disableGroupSeparator && typeof value === 'string' ? formatThousands(value) : value;
-    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
+    return (_jsxs(Input, { validationStatus: validationStatusFromContext, disabled: formFieldDisabled ?? disabled, readonly: readonly, focused: focused, style: styles.wrap, children: [_jsx(InputSlot, { children: _jsx(DetailText, { size: "4xl", style: styles.text, accessible: false, children: "\u00A3" }) }), _jsx(InputField, { ref: ref, inputMode: "decimal", inBottomSheet: inBottomSheet, accessibilityHint: 'Enter the amount in pounds and pence, for example "10.99"', ...rest, placeholder: getPlaceholder, keyboardType: "decimal-pad", style: styles.input, value: displayValue, onChangeText: handleChangeText })] }));
 };
 CurrencyInput.displayName = 'CurrencyInput';
 const styles = StyleSheet.create(theme => ({

package/build/components/CurrencyInput/CurrencyInput.props.d.ts

@@ -1,5 +1,7 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 export interface CurrencyInputBaseProps {
+    ref?: Ref<TextInput>;
     disabled?: boolean;
     validationStatus?: 'initial' | 'valid' | 'invalid';
     readonly?: boolean;

package/build/components/Modal/Modal.d.ts

@@ -3,5 +3,5 @@ import ModalProps from './Modal.props';
 type Modal<T = any> = BottomSheetModalMethods<T> & {
     triggerCloseAnimation?: () => void;
 };
-declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { BottomSheetFooter, } from '@gorhom/bottom-sheet';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import { AccessibilityInfo, Platform, View, findNodeHandle } from 'react-native';
@@ -12,7 +13,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -97,9 +98,24 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
             bottomSheetModalRef.current?.dismiss();
         }
     };
-    styles.useVariants({ loading });
-    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: "Loading..." })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, _jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })] })) }));
-    return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.container, ref: scrollViewRef, children: content })] }));
+    const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+    styles.useVariants({
+        loading,
+        bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
+        noButtons,
+        stickyFooter,
+    });
+    const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] }));
+    const content = (_jsx(_Fragment, { children: loading ? (_jsxs(View, { style: styles.loadingContainer, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Loading' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsx(Spinner, { size: "lg" }), _jsx(Heading, { size: "lg", textAlign: "center", children: "Loading..." })] })) : (_jsxs(View, { style: styles.container, accessible: Platform.OS === 'android' ? true : undefined, accessibilityLabel: Platform.OS === 'android' ? 'Modal content' : undefined, screenReaderFocusable: true, ref: viewRef, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTextContent, children: [heading && !image ? (_jsx(Heading, { size: "lg", accessible: true, children: heading })) : null, description && !image ? _jsx(BodyText, { accessible: true, children: description }) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", ...closeButtonProps })) : null] }), image ? (_jsxs(View, { style: styles.imageContainer, children: [image, _jsxs(View, { style: styles.textContent, children: [heading ? (_jsx(Heading, { size: "lg", textAlign: "center", accessible: true, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, children: description })) : null] })] })) : null, children, !stickyFooter && !noButtons ? footer : null] })) }));
+    const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
+        onPressPrimaryButton,
+        primaryButtonText,
+        onPressSecondaryButton,
+        secondaryButtonText,
+        primaryButtonProps,
+        secondaryButtonProps,
+    ]);
+    return inNavModal ? (_jsxs(View, { style: { flex: 1, backgroundColor: theme.color.background.primary }, children: [Platform.OS === 'android' ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle], children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] })) : (_jsxs(BottomSheetModal, { ref: bottomSheetModalRef, enableDynamicSizing: true, snapPoints: image || fullscreen ? ['90%'] : props.snapPoints, showHandle: typeof loading !== 'undefined' && loading ? false : props.showHandle, accessible: false, style: styles.modal, footerComponent: stickyFooter && !noButtons ? renderFooter : undefined, ...props, onChange: handleChange, children: [loading ? _jsx(View, { style: styles.loadingTop }) : null, _jsx(BottomSheetScrollView, { contentContainerStyle: styles.scrollView, ref: scrollViewRef, children: content })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
     modal: {
@@ -116,6 +132,30 @@ const styles = StyleSheet.create((theme, rt) => ({
             },
         },
     },
+    scrollView: {
+        flex: 1,
+        variants: {
+            bothButtons: {
+                true: {
+                    paddingBottom: 166 + rt.insets.bottom - theme.components.modal.padding,
+                },
+                false: {
+                    paddingBottom: 102 + rt.insets.bottom - theme.components.modal.padding,
+                },
+            },
+            noButtons: {
+                true: {
+                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                },
+            },
+            stickyFooter: {
+                true: {},
+                false: {
+                    paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+                },
+            },
+        },
+    },
     header: {
         flexDirection: 'row',
         gap: theme.components.modal.gap,
@@ -149,6 +189,11 @@ const styles = StyleSheet.create((theme, rt) => ({
     footer: {
         gap: theme.components.modal.action.gap,
     },
+    footerWrap: {
+        backgroundColor: theme.color.surface.neutral.strong,
+        paddingHorizontal: theme.components.bottomSheet.padding,
+        paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+    },
     inNavModalContainer: {
         flex: 1,
         ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),

package/build/components/Modal/Modal.props.d.ts

@@ -11,6 +11,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
     description?: string;
     inNavModal?: boolean;
     fullscreen?: boolean;
+    stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.15.0",
+  "version": "0.15.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/components/BottomSheet/index.ts

@@ -1,9 +1,6 @@
-export { default as BottomSheet } from './BottomSheet';
-export { default as BottomSheetView } from './BottomSheetView';
-export { default as BottomSheetScrollView } from './BottomSheetScrollView';
-export { default as BottomSheetModal } from './BottomSheetModal';
-export { default as BottomSheetFlatList } from './BottomSheetFlatList';
 export {
+  BottomSheetFlashList,
+  BottomSheetFooter,
   BottomSheetModalProvider,
   BottomSheetSectionList,
   BottomSheetVirtualizedList,
@@ -14,4 +11,9 @@ export {
   type BottomSheetHandleProps,
   type BottomSheetModalProps,
 } from '@gorhom/bottom-sheet';
+export { default as BottomSheet } from './BottomSheet';
 export type { default as BottomSheetProps } from './BottomSheet.props';
+export { default as BottomSheetFlatList } from './BottomSheetFlatList';
+export { default as BottomSheetModal } from './BottomSheetModal';
+export { default as BottomSheetScrollView } from './BottomSheetScrollView';
+export { default as BottomSheetView } from './BottomSheetView';

package/src/components/CurrencyInput/CurrencyInput.props.ts

@@ -1,6 +1,8 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 
 export interface CurrencyInputBaseProps {
+  ref?: Ref<TextInput>;
   disabled?: boolean;
   validationStatus?: 'initial' | 'valid' | 'invalid';
   readonly?: boolean;

package/src/components/CurrencyInput/CurrencyInput.tsx

@@ -17,6 +17,7 @@ const CurrencyInput = ({
   disableGroupSeparator = false,
   value,
   onChangeText,
+  ref,
   ...rest
 }: CurrencyInputProps) => {
   const formFieldContext = useFormFieldContext();
@@ -52,6 +53,7 @@ const CurrencyInput = ({
         </DetailText>
       </InputSlot>
       <InputField
+        ref={ref as any}
         inputMode="decimal"
         inBottomSheet={inBottomSheet}
         accessibilityHint='Enter the amount in pounds and pence, for example "10.99"'
@@ -67,7 +69,6 @@ const CurrencyInput = ({
 };
 
 CurrencyInput.displayName = 'CurrencyInput';
-
 const styles = StyleSheet.create(theme => ({
   wrap: {
     height: theme.components.input.currency.height,

package/src/components/Modal/Modal.props.ts

@@ -12,6 +12,7 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   description?: string;
   inNavModal?: boolean;
   fullscreen?: boolean;
+  stickyFooter?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,9 @@
-import { BottomSheetScrollViewMethods, SNAP_POINT_TYPE } from '@gorhom/bottom-sheet';
+import {
+  BottomSheetFooter,
+  BottomSheetFooterProps,
+  BottomSheetScrollViewMethods,
+  SNAP_POINT_TYPE,
+} from '@gorhom/bottom-sheet';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
@@ -43,6 +48,7 @@ const Modal = ({
   secondaryButtonProps,
   closeButtonProps,
   inNavModal = false,
+  stickyFooter = true,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -155,7 +161,37 @@ const Modal = ({
     }
   };
 
-  styles.useVariants({ loading });
+  const noButtons = !onPressPrimaryButton && !onPressSecondaryButton;
+
+  styles.useVariants({
+    loading,
+    bothButtons: !!(onPressPrimaryButton && onPressSecondaryButton),
+    noButtons,
+    stickyFooter,
+  });
+
+  const footer = (
+    <View style={styles.footer}>
+      {onPressPrimaryButton && primaryButtonText ? (
+        <Button
+          onPress={handlePrimaryButtonPress}
+          text={primaryButtonText}
+          {...primaryButtonProps}
+          variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
+          colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
+        />
+      ) : null}
+      {onPressSecondaryButton && secondaryButtonText ? (
+        <Button
+          onPress={handleSecondaryButtonPress}
+          text={secondaryButtonText}
+          {...secondaryButtonProps}
+          variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
+          colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
+        />
+      ) : null}
+    </View>
+  );
 
   const content = (
     <>
@@ -216,31 +252,28 @@ const Modal = ({
             </View>
           ) : null}
           {children}
-          <View style={styles.footer}>
-            {onPressPrimaryButton && primaryButtonText ? (
-              <Button
-                onPress={handlePrimaryButtonPress}
-                text={primaryButtonText}
-                {...primaryButtonProps}
-                variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
-                colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
-              />
-            ) : null}
-            {onPressSecondaryButton && secondaryButtonText ? (
-              <Button
-                onPress={handleSecondaryButtonPress}
-                text={secondaryButtonText}
-                {...secondaryButtonProps}
-                variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
-                colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
-              />
-            ) : null}
-          </View>
+          {!stickyFooter && !noButtons ? footer : null}
         </View>
       )}
     </>
   );
 
+  const renderFooter = useCallback(
+    (props: BottomSheetFooterProps) => (
+      <BottomSheetFooter {...props}>
+        <View style={styles.footerWrap}>{footer}</View>
+      </BottomSheetFooter>
+    ),
+    [
+      onPressPrimaryButton,
+      primaryButtonText,
+      onPressSecondaryButton,
+      secondaryButtonText,
+      primaryButtonProps,
+      secondaryButtonProps,
+    ]
+  );
+
   return inNavModal ? (
     <View style={{ flex: 1, backgroundColor: theme.color.background.primary }}>
       {Platform.OS === 'android' ? (
@@ -262,11 +295,12 @@ const Modal = ({
       showHandle={typeof loading !== 'undefined' && loading ? false : props.showHandle}
       accessible={false}
       style={styles.modal}
+      footerComponent={stickyFooter && !noButtons ? renderFooter : undefined}
       {...props}
       onChange={handleChange}
     >
       {loading ? <View style={styles.loadingTop} /> : null}
-      <BottomSheetScrollView contentContainerStyle={styles.container} ref={scrollViewRef}>
+      <BottomSheetScrollView contentContainerStyle={styles.scrollView} ref={scrollViewRef}>
         {content}
       </BottomSheetScrollView>
     </BottomSheetModal>
@@ -288,6 +322,30 @@ const styles = StyleSheet.create((theme, rt) => ({
       },
     },
   },
+  scrollView: {
+    flex: 1,
+    variants: {
+      bothButtons: {
+        true: {
+          paddingBottom: 166 + rt.insets.bottom - theme.components.modal.padding,
+        },
+        false: {
+          paddingBottom: 102 + rt.insets.bottom - theme.components.modal.padding,
+        },
+      },
+      noButtons: {
+        true: {
+          paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+        },
+      },
+      stickyFooter: {
+        true: {},
+        false: {
+          paddingBottom: rt.insets.bottom + theme.components.modal.padding,
+        },
+      },
+    },
+  },
   header: {
     flexDirection: 'row',
     gap: theme.components.modal.gap,
@@ -321,6 +379,11 @@ const styles = StyleSheet.create((theme, rt) => ({
   footer: {
     gap: theme.components.modal.action.gap,
   },
+  footerWrap: {
+    backgroundColor: theme.color.surface.neutral.strong,
+    paddingHorizontal: theme.components.bottomSheet.padding,
+    paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
+  },
   inNavModalContainer: {
     flex: 1,
     ...(Platform.OS === 'ios' ? { backgroundColor: theme.components.overlay.backgroundColor } : {}),