@utilitywarehouse/hearth-react-native 0.25.0 → 0.26.0

package/.turbo/turbo-build.log

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

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.25.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.26.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -31,8 +31,8 @@
   78:8  warning  React Hook useEffect has a missing dependency: 'formFieldContext'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.tsx
-   75:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
-  291:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
+   86:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
+  313:5  warning  React Hook useCallback has a missing dependency: 'footer'. Either include it or remove the dependency array                                                                                                                                   react-hooks/exhaustive-deps
 
 /home/runner/work/hearth/hearth/packages/react-native/src/components/Modal/Modal.web.tsx
   66:6  warning  React Hook useCallback has an unnecessary dependency: 'Platform.OS'. Either exclude it or remove the dependency array. Outer scope values like 'Platform.OS' aren't valid dependencies because mutating them doesn't re-render the component  react-hooks/exhaustive-deps
@@ -60,13 +60,13 @@
 
 Rule                                      | Time (ms) | Relative
 :-----------------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars         |  1535.077 |    58.6%
-react-hooks/exhaustive-deps               |   186.011 |     7.1%
-no-global-assign                          |    92.645 |     3.5%
-react-hooks/rules-of-hooks                |    90.323 |     3.4%
-no-misleading-character-class             |    64.601 |     2.5%
-no-unexpected-multiline                   |    47.391 |     1.8%
-@typescript-eslint/ban-ts-comment         |    39.233 |     1.5%
-@typescript-eslint/triple-slash-reference |    36.020 |     1.4%
-no-useless-escape                         |    31.051 |     1.2%
-@typescript-eslint/no-unused-expressions  |    28.768 |     1.1%
+@typescript-eslint/no-unused-vars         |  1316.387 |    59.6%
+react-hooks/exhaustive-deps               |    96.698 |     4.4%
+no-global-assign                          |    93.436 |     4.2%
+react-hooks/rules-of-hooks                |    81.760 |     3.7%
+no-unexpected-multiline                   |    47.972 |     2.2%
+no-misleading-character-class             |    43.286 |     2.0%
+@typescript-eslint/triple-slash-reference |    33.417 |     1.5%
+@typescript-eslint/ban-ts-comment         |    32.258 |     1.5%
+no-regex-spaces                           |    29.418 |     1.3%
+no-loss-of-precision                      |    25.945 |     1.2%

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.26.0
+
+### Minor Changes
+
+- [#981](https://github.com/utilitywarehouse/hearth/pull/981) [`df56387`](https://github.com/utilitywarehouse/hearth/commit/df563872e6bf040d419f6c7fce2343ebe560edb9) Thanks [@declanelcocks](https://github.com/declanelcocks)! - 🌟 [ENHANCEMENT]: Improve `Modal` behaviour when used inside a React Navigation modal (`inNavModal`).
+
+  The following improvements have been made to the `Modal` component when used in a navigation context with `inNavModal={true}`:
+  - **`scrollable` prop**: Content is now rendered inside a `ScrollView` by default. Set `scrollable={false}` to opt out, for example when you need to centre content or use a custom layout.
+  - **`stickyFooter` support**: The `stickyFooter` prop now works correctly in `inNavModal` mode.
+  - **Auto full-screen detection**: When the modal fills the entire screen (e.g. with `presentation: 'fullScreenModal'`), the `fullscreen` style is applied automatically. The `fullscreen` prop is no longer available when `inNavModal` is `true`.
+
+  **Components affected**:
+  - `Modal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. If you were passing `fullscreen` alongside `inNavModal={true}`, remove the `fullscreen` prop — full-screen styling is now detected automatically:
+
+  ```diff
+  - <Modal inNavModal fullscreen>
+  + <Modal inNavModal>
+  ```
+
+  To disable the default `ScrollView` wrapping in `inNavModal` mode:
+
+  ```tsx
+  <Modal inNavModal scrollable={false}>
+    {/* custom layout */}
+  </Modal>
+  ```
+
 ## 0.25.0
 
 ### Minor Changes

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, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const Modal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress, closeOnSecondaryButtonPress, loading, loadingHeading, fullscreen, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal, stickyFooter, background, scrollable, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
 export default Modal;

package/build/components/Modal/Modal.js

@@ -1,8 +1,8 @@
 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, ScrollView, View, findNodeHandle } from 'react-native';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
@@ -13,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, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', ...props }) => {
+const Modal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, closeOnPrimaryButtonPress = true, closeOnSecondaryButtonPress = true, loading, loadingHeading = 'Loading...', fullscreen = false, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, inNavModal = false, stickyFooter = true, background = 'default', scrollable = true, ...props }) => {
     const bottomSheetModalRef = useRef(null);
     const viewRef = useRef(null);
     const scrollViewRef = useRef(null);
@@ -21,6 +21,13 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
     const isBrandBackground = background === 'brand';
+    const [inNavModalHeight, setInNavModalHeight] = useState();
+    const isNavModalFullScreen = useMemo(() => {
+        if (!inNavModalHeight || !inNavModal)
+            return false;
+        const screenHeight = Dimensions.get('window').height;
+        return inNavModalHeight >= screenHeight;
+    }, [inNavModalHeight, inNavModal]);
     const triggerCloseAnimation = useCallback(() => {
         if (Platform.OS === 'android' && inNavModal) {
             pretendContentTranslateY.value = withTiming(20, {
@@ -107,9 +114,13 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         stickyFooter,
         showHandle: props.showHandle,
         background: isBrandBackground ? 'brand' : 'primary',
+        ...(inNavModal && {
+            fullscreen: isNavModalFullScreen,
+        }),
     });
     const footer = (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground && inNavModal, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground && inNavModal, ...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", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal ? _jsx(ScrollView, { style: { flex: 1 }, children: children }) : children, (!stickyFooter || inNavModal) && !noButtons ? footer : null] })) }));
+    const InNavModalContainer = scrollable ? ScrollView : View;
+    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", color: isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined }), _jsx(Heading, { size: "lg", textAlign: "center", inverted: isBrandBackground && inNavModal, children: loadingHeading })] })) : (_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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description && !image ? (_jsx(BodyText, { accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] }), showCloseButton ? (_jsx(UnstyledIconButton, { icon: CloseMediumIcon, onPress: handleCloseButtonPress, accessibilityLabel: "Close modal", inverted: isBrandBackground && inNavModal, ...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, inverted: isBrandBackground && inNavModal, children: heading })) : null, description ? (_jsx(BodyText, { textAlign: "center", accessible: true, inverted: isBrandBackground && inNavModal, children: description })) : null] })] })) : null, inNavModal && (_jsxs(InNavModalContainer, { style: { flexGrow: stickyFooter ? 1 : 0 }, children: [children, !stickyFooter ? _jsx(View, { style: styles.inNavModalFooterContainer, children: footer }) : null] })), !inNavModal && children, ((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null] })) }));
     const renderFooter = useCallback((props) => (_jsx(BottomSheetFooter, { ...props, children: _jsx(View, { style: styles.footerWrap, children: footer }) })), [
         onPressPrimaryButton,
         primaryButtonText,
@@ -118,7 +129,9 @@ const Modal = ({ ref, children, heading, description, showCloseButton = true, pr
         primaryButtonProps,
         secondaryButtonProps,
     ]);
-    return inNavModal ? (_jsxs(View, { style: {
+    return inNavModal ? (_jsxs(View, { onLayout: (e) => {
+            setInNavModalHeight(e.nativeEvent.layout.height);
+        }, style: {
             flex: 1,
             backgroundColor: theme.color.background[isBrandBackground ? 'brand' : '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 })] }));
@@ -227,8 +240,6 @@ const styles = StyleSheet.create((theme, rt) => ({
         borderTopLeftRadius: theme.components.modal.borderRadius,
         borderTopRightRadius: theme.components.modal.borderRadius,
         backgroundColor: theme.color.surface.neutral.strong,
-        gap: theme.components.modal.gap,
-        padding: theme.components.modal.padding,
         paddingBottom: theme.components.modal.padding + rt.insets.bottom,
         variants: {
             background: {
@@ -237,8 +248,20 @@ const styles = StyleSheet.create((theme, rt) => ({
                     backgroundColor: theme.color.background.brand,
                 },
             },
+            fullscreen: {
+                true: {
+                    padding: theme.components.modal.padding,
+                    paddingTop: rt.insets.top,
+                },
+                false: {
+                    padding: theme.components.modal.padding,
+                }
+            }
         },
     },
+    inNavModalFooterContainer: {
+        paddingTop: theme.components.modal.padding,
+    },
     androidContainer: {
         height: rt.insets.top + 18,
         paddingLeft: theme.components.modal.padding,

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

@@ -11,6 +11,7 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
     loadingHeading?: string;
     description?: string;
     fullscreen?: boolean;
+    stickyFooter?: boolean;
     children?: ViewProps['children'];
     onPressPrimaryButton?: () => void;
     primaryButtonText?: string;
@@ -25,11 +26,12 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
 }
 type ModalProps = (ModalPropsBase & {
     inNavModal?: false | undefined;
-    stickyFooter?: boolean;
+    scrollable?: never;
     background?: never;
 }) | (ModalPropsBase & {
     inNavModal: true;
-    stickyFooter?: never;
+    fullscreen?: never;
+    scrollable?: boolean;
     background?: 'default' | 'brand';
 });
 export default ModalProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -58,8 +58,8 @@
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
     "@utilitywarehouse/hearth-react-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.3"
   },
   "peerDependencies": {

package/src/components/Modal/Modal.docs.mdx

@@ -107,9 +107,10 @@ The Modal component extends the `BottomSheetModal` component and accepts all of
 | `primaryButtonProps`          | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the primary button (colorScheme defaults to 'highlight', variant to 'solid')      | -              |
 | `secondaryButtonProps`        | `Omit<ButtonWithoutChildrenProps, 'children'>`                     | Additional props to pass to the secondary button (colorScheme defaults to 'functional', variant to 'outline') | -              |
 | `closeButtonProps`            | `Omit<UnstyledIconButtonProps, 'children'>`                        | Additional props to pass to the close button                                                                  | -              |
-| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height                                                       | `false`        |
+| `fullscreen`                  | `boolean`                                                          | Whether the modal should take up the full screen height. Only applies when `inNavModal` is `false`            | `false`        |
 | `inNavModal`                  | `boolean`                                                          | Renders the modal correctly when used inside a navigation modal                                               | `false`        |
 | `background`                  | `'default' \| 'brand'`                                             | Sets the modal background. Only applies when `inNavModal` is `true`                                           | `'default'`    |
+| `scrollable`                  | `boolean`                                                          | Whether the modal's content should be placed in a `ScrollView`. Only applies when `inNavModal` is `true`      | `true`         |
 
 \* use this to detect if the modal has been opened or closed, index 0 indicates open state and -1 indicates closed state
 
@@ -462,11 +463,16 @@ const AlertModal = () => {
 
 ### Modal In Navigation Modal
 
-When using the Modal component in a navigation context, you can set it to `inNavModal` mode, this will make it behave like a standard modal screen.
+When wanting to use the Modal component in a navigation context using [React Navigation](https://reactnavigation.org/docs/modal), you can set `inNavModal` to `true` to make it behave like a standard modal screen.
+
+Within React Navigation, you can set `presentation: 'modal'` in the screen's settings to have the Modal look and behave like a standard modal/bottom sheet, or you can set `presentation: 'fullScreenModal'` to have the Modal fill the entire screen.
+
+When using `inNavModal`, by default the content will be rendered inside a `ScrollView` to ensure it is scrollable, especially on smaller devices or smaller modals. You can disable this by setting `scrollable={false}` if, for example, you need to center your content or add some custom content.
+
 Here's an example of how to implement this with custom close animations for Android:
 
 ```tsx
-import { useNavigation } from 'react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { useCallback, useEffect, useRef } from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 

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

@@ -12,6 +12,7 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
   loadingHeading?: string;
   description?: string;
   fullscreen?: boolean;
+  stickyFooter?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;
@@ -28,12 +29,13 @@ interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
 type ModalProps =
   | (ModalPropsBase & {
       inNavModal?: false | undefined;
-      stickyFooter?: boolean;
+      scrollable?: never;
       background?: never;
     })
   | (ModalPropsBase & {
       inNavModal: true;
-      stickyFooter?: never;
+      fullscreen?: never;
+      scrollable?: boolean;
       background?: 'default' | 'brand';
     });
 

package/src/components/Modal/Modal.tsx

@@ -6,8 +6,8 @@ import {
 } 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';
-import { AccessibilityInfo, Platform, ScrollView, View, findNodeHandle } from 'react-native';
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { AccessibilityInfo, Dimensions, Platform, ScrollView, View, findNodeHandle } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -51,6 +51,7 @@ const Modal = ({
   inNavModal = false,
   stickyFooter = true,
   background = 'default',
+  scrollable = true,
   ...props
 }: ModalProps) => {
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
@@ -61,6 +62,16 @@ const Modal = ({
   const pretendContentTranslateY = useSharedValue(20);
   const isBrandBackground = background === 'brand';
 
+  const [inNavModalHeight, setInNavModalHeight] = useState<number>();
+
+  const isNavModalFullScreen = useMemo(() => {
+    if (!inNavModalHeight || !inNavModal) return false;
+
+    const screenHeight = Dimensions.get('window').height;
+
+    return inNavModalHeight >= screenHeight;
+  }, [inNavModalHeight, inNavModal]);
+
   const triggerCloseAnimation = useCallback(() => {
     if (Platform.OS === 'android' && inNavModal) {
       pretendContentTranslateY.value = withTiming(20, {
@@ -173,6 +184,9 @@ const Modal = ({
     stickyFooter,
     showHandle: props.showHandle,
     background: isBrandBackground ? 'brand' : 'primary',
+    ...(inNavModal && {
+      fullscreen: isNavModalFullScreen,
+    }),
   });
 
   const footer = (
@@ -200,6 +214,8 @@ const Modal = ({
     </View>
   );
 
+  const InNavModalContainer = scrollable ? ScrollView : View;
+
   const content = (
     <>
       {loading ? (
@@ -275,8 +291,14 @@ const Modal = ({
               </View>
             </View>
           ) : null}
-          {inNavModal ? <ScrollView style={{ flex: 1 }}>{children}</ScrollView> : children}
-          {(!stickyFooter || inNavModal) && !noButtons ? footer : null}
+          {inNavModal && (
+            <InNavModalContainer style={{ flexGrow: stickyFooter ? 1 : 0 }}>
+              {children}
+              {!stickyFooter ? <View style={styles.inNavModalFooterContainer}>{footer}</View> : null}
+            </InNavModalContainer>
+          )}
+          {!inNavModal && children}
+          {((!stickyFooter && !inNavModal) || (inNavModal && stickyFooter)) && !noButtons ? footer : null}
         </View>
       )}
     </>
@@ -300,6 +322,9 @@ const Modal = ({
 
   return inNavModal ? (
     <View
+      onLayout={(e) => {
+        setInNavModalHeight(e.nativeEvent.layout.height);
+      }}
       style={{
         flex: 1,
         backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
@@ -313,7 +338,9 @@ const Modal = ({
       <Animated.View
         style={[styles.inNavModalContainer, Platform.OS === 'android' && animatedInNavModalStyle]}
       >
-        <View style={styles.inNavModalContent}>{content}</View>
+        <View style={styles.inNavModalContent}>
+          {content}
+        </View>
       </Animated.View>
     </View>
   ) : (
@@ -444,8 +471,6 @@ const styles = StyleSheet.create((theme, rt) => ({
     borderTopLeftRadius: theme.components.modal.borderRadius,
     borderTopRightRadius: theme.components.modal.borderRadius,
     backgroundColor: theme.color.surface.neutral.strong,
-    gap: theme.components.modal.gap,
-    padding: theme.components.modal.padding,
     paddingBottom: theme.components.modal.padding + rt.insets.bottom,
     variants: {
       background: {
@@ -454,8 +479,20 @@ const styles = StyleSheet.create((theme, rt) => ({
           backgroundColor: theme.color.background.brand,
         },
       },
+      fullscreen: {
+        true: {
+          padding: theme.components.modal.padding,
+          paddingTop: rt.insets.top,
+        },
+        false: {
+          padding: theme.components.modal.padding,
+        }
+      }
     },
   },
+  inNavModalFooterContainer: {
+    paddingTop: theme.components.modal.padding,
+  },
   androidContainer: {
     height: rt.insets.top + 18,
     paddingLeft: theme.components.modal.padding,