@utilitywarehouse/hearth-react-native 0.30.0 → 0.30.2

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.30.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.30.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.30.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.30.2 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint .
 
 
@@ -51,15 +51,15 @@
 
 ✖ 22 problems (0 errors, 22 warnings)
 
-Rule                              | Time (ms) | Relative
-:---------------------------------|----------:|--------:
-@typescript-eslint/no-unused-vars |  1641.469 |    60.9%
-no-global-assign                  |    98.820 |     3.7%
-react-hooks/exhaustive-deps       |    93.179 |     3.5%
-no-unexpected-multiline           |    70.646 |     2.6%
-react-hooks/rules-of-hooks        |    65.259 |     2.4%
-@typescript-eslint/ban-ts-comment |    45.783 |     1.7%
-no-misleading-character-class     |    45.630 |     1.7%
-no-loss-of-precision              |    43.137 |     1.6%
-@typescript-eslint/no-this-alias  |    38.127 |     1.4%
-no-control-regex                  |    32.544 |     1.2%
+Rule                                              | Time (ms) | Relative
+:-------------------------------------------------|----------:|--------:
+@typescript-eslint/no-unused-vars                 |  1495.988 |    61.0%
+react-hooks/exhaustive-deps                       |    86.813 |     3.5%
+no-global-assign                                  |    85.050 |     3.5%
+react-hooks/rules-of-hooks                        |    60.522 |     2.5%
+@typescript-eslint/ban-ts-comment                 |    49.138 |     2.0%
+no-unexpected-multiline                           |    46.592 |     1.9%
+no-useless-escape                                 |    39.187 |     1.6%
+no-misleading-character-class                     |    35.552 |     1.5%
+@typescript-eslint/no-unused-expressions          |    33.343 |     1.4%
+@typescript-eslint/no-unnecessary-type-constraint |    31.189 |     1.3%

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.30.2
+
+### Patch Changes
+
+- [#1090](https://github.com/utilitywarehouse/hearth/pull/1090) [`1420244`](https://github.com/utilitywarehouse/hearth/commit/1420244fbc23c8a755f9249f8b39cb094a865cea) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `alignChevron` to `Banner` for horizontal pressable layouts.
+
+  `Banner` now supports an `alignChevron` prop to control the chevron alignment when `onPress` is used in the horizontal layout. Use `'start'`, `'center'`, or `'end'` to match the chevron position to the content layout.
+
+  **Components affected**:
+  - `Banner`
+
+  **Developer changes**:
+
+  No changes are required unless you want to override the default centred chevron alignment.
+
+## 0.30.1
+
+### Patch Changes
+
+- [#1081](https://github.com/utilitywarehouse/hearth/pull/1081) [`5db8538`](https://github.com/utilitywarehouse/hearth/commit/5db8538b69115a23289f0038f681fc8b87a310c4) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Correct `NavModal` safe area handling across sheet and full-screen presentations.
+
+  `NavModal` now applies safe area insets directly within the component layout, which fixes padding in full-screen presentations and keeps sheet-style presentations aligned with the modal footer behaviour.
+
+  **Developer changes**:
+
+  If you need to disable the inset padding, use the `useSafeAreaInsets` prop. The old `safeAreaViewProps` escape hatch is no longer available.
+
 ## 0.30.0
 
 ### Minor Changes

package/build/components/Banner/Banner.d.ts

@@ -1,6 +1,6 @@
 import type BannerProps from './Banner.props';
 declare const Banner: {
-    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ icon, iconContainerVariant, iconContainerSize, iconContainerColor, illustration, image, heading, description, direction, link, button, onPress, onClose, variant, alignChevron, style, ...props }: BannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default Banner;

package/build/components/Banner/Banner.js

@@ -9,9 +9,14 @@ import { Heading } from '../Heading';
 import { IconContainer } from '../IconContainer';
 import { UnstyledIconButton } from '../UnstyledIconButton';
 import BannerContext from './Banner.context';
-const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', style, ...props }) => {
+const Banner = ({ icon, iconContainerVariant = 'subtle', iconContainerSize = 'md', iconContainerColor = 'pig', illustration, image, heading, description, direction = 'horizontal', link, button, onPress, onClose, variant = 'subtle', alignChevron = 'center', style, ...props }) => {
     const hasIllustration = Boolean(illustration);
-    styles.useVariants({ direction, hasIllustration, isPressable: Boolean(onPress) });
+    styles.useVariants({
+        direction,
+        hasIllustration,
+        isPressable: Boolean(onPress),
+        alignChevron,
+    });
     const context = useMemo(() => ({
         direction,
     }), [direction]);
@@ -187,6 +192,25 @@ const styles = StyleSheet.create(theme => ({
     },
     chevron: {
         alignSelf: 'center',
+        variants: {
+            direction: {
+                horizontal: {},
+                vertical: {
+                    display: 'none',
+                },
+            },
+            alignChevron: {
+                center: {
+                    alignSelf: 'center',
+                },
+                start: {
+                    alignSelf: 'flex-start',
+                },
+                end: {
+                    alignSelf: 'flex-end',
+                },
+            },
+        },
     },
     closeButton: {
         alignSelf: 'flex-start',

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

@@ -66,5 +66,10 @@ export interface BannerProps extends Omit<CardProps, 'noPadding' | 'variant' | '
      * @default 'subtle'
      */
     variant?: 'subtle' | 'emphasis';
+    /**
+     * Chevron alignment for horizontal layout
+     * @default 'center'
+     */
+    alignChevron?: 'center' | 'start' | 'end';
 }
 export default BannerProps;

package/build/components/NavModal/NavModal.d.ts

@@ -1,3 +1,3 @@
 import NavModalProps from './NavModal.props';
-declare const NavModal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading, loadingDescription, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, background, scrollable, presentation, scrollViewProps, safeAreaViewProps, ...props }: NavModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const NavModal: ({ ref, children, heading, description, showCloseButton, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading, loadingDescription, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter, background, scrollable, presentation, scrollViewProps, useSafeAreaInsets, ...props }: NavModalProps) => import("react/jsx-runtime").JSX.Element;
 export default NavModal;

package/build/components/NavModal/NavModal.js

@@ -3,7 +3,6 @@ import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { Platform, ScrollView, View } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { hexWithOpacity } from '../../utils';
@@ -12,7 +11,7 @@ import { Button } from '../Button';
 import { Heading } from '../Heading';
 import { Spinner } from '../Spinner';
 import { UnstyledIconButton } from '../UnstyledIconButton';
-const NavModal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading = 'Loading...', loadingDescription, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, background = 'default', scrollable = true, presentation = 'modal', scrollViewProps, safeAreaViewProps, ...props }) => {
+const NavModal = ({ ref, children, heading, description, showCloseButton = true, primaryButtonText, secondaryButtonText, onPressPrimaryButton, onPressCloseButton, onPressSecondaryButton, loading, loadingHeading = 'Loading...', loadingDescription, image, primaryButtonProps, secondaryButtonProps, closeButtonProps, stickyFooter = true, background = 'default', scrollable = true, presentation = 'modal', scrollViewProps, useSafeAreaInsets = true, ...props }) => {
     const theme = useTheme();
     const backgroundOpacity = useSharedValue(0);
     const pretendContentTranslateY = useSharedValue(20);
@@ -66,6 +65,9 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
         loading,
         background: isBrandBackground ? 'brand' : 'primary',
         presentation: isFullScreenPresentation ? 'fullScreen' : 'modal',
+        useSafeAreaInsets,
+        usesSheetPresentation,
+        stickyFooter,
     });
     const footer = useMemo(() => (_jsxs(View, { style: styles.footer, children: [onPressPrimaryButton && primaryButtonText ? (_jsx(Button, { onPress: handlePrimaryButtonPress, text: primaryButtonText, inverted: isBrandBackground, ...primaryButtonProps, variant: primaryButtonProps?.variant ?? 'solid', colorScheme: primaryButtonProps?.colorScheme ?? 'highlight' })) : null, onPressSecondaryButton && secondaryButtonText ? (_jsx(Button, { onPress: handleSecondaryButtonPress, text: secondaryButtonText, inverted: isBrandBackground, ...secondaryButtonProps, variant: secondaryButtonProps?.variant ?? 'outline', colorScheme: secondaryButtonProps?.colorScheme ?? 'functional' })) : null] })), [
         handlePrimaryButtonPress,
@@ -84,19 +86,57 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
                     }, contentContainerStyle: { paddingHorizontal: 4 }, ...scrollViewProps, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })) : (_jsxs(View, { style: {
                         flex: stickyFooter ? 1 : 0,
                     }, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), stickyFooter && !noButtons ? footer : null] })) }));
-    const { style: safeAreaViewStyle, ...restSafeAreaViewProps } = safeAreaViewProps ?? {};
-    return (_jsxs(SafeAreaView, { style: [
-            {
-                flex: 1,
-                backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'secondary'],
-            },
-            safeAreaViewStyle,
-        ], ...restSafeAreaViewProps, children: [Platform.OS === 'android' && usesSheetPresentation ? (_jsx(Animated.View, { style: [styles.androidContainer, animatedBackgroundStyle], children: _jsx(Animated.View, { style: [styles.pretendContent, animatedPretendContentStyle] }) })) : null, _jsx(Animated.View, { style: [
+    return (_jsxs(View, { style: styles.root, children: [Platform.OS === 'android' && usesSheetPresentation ? (_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' && usesSheetPresentation && animatedBackgroundStyle,
                 ], ...props, children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] }));
 };
 const styles = StyleSheet.create((theme, rt) => ({
+    root: {
+        flex: 1,
+        variants: {
+            background: {
+                brand: {
+                    backgroundColor: theme.color.background.brand,
+                },
+                primary: {
+                    backgroundColor: theme.color.background.secondary,
+                },
+            },
+            usesSheetPresentation: {
+                true: {},
+                false: {},
+            },
+            useSafeAreaInsets: {
+                true: {},
+                false: {},
+            },
+            stickyFooter: {
+                true: {},
+                false: {},
+            },
+        },
+        compoundVariants: [
+            {
+                usesSheetPresentation: false,
+                useSafeAreaInsets: true,
+                styles: {
+                    paddingTop: rt.insets.top,
+                    paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
+                    paddingLeft: rt.insets.left,
+                    paddingRight: rt.insets.right,
+                },
+            },
+            {
+                usesSheetPresentation: true,
+                useSafeAreaInsets: true,
+                stickyFooter: true,
+                styles: {
+                    paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
+                },
+            },
+        ],
+    },
     container: {
         flex: 1,
         gap: theme.components.modal.gap,

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

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-import { SafeAreaViewProps } from 'react-native-safe-area-context';
+import { ScrollViewProps } from 'react-native';
 import { ModalCommonProps } from '../Modal/Modal.shared.types';
 export interface NavModalRef {
     triggerCloseAnimation?: () => void;
@@ -9,7 +9,7 @@ interface NavModalProps extends ModalCommonProps {
     background?: 'default' | 'brand';
     scrollable?: boolean;
     presentation?: 'fullScreenModal' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal';
-    safeAreaViewProps?: Omit<SafeAreaViewProps, 'children'>;
-    scrollViewProps?: Omit<SafeAreaViewProps, 'children'>;
+    useSafeAreaInsets?: boolean;
+    scrollViewProps?: Omit<ScrollViewProps, 'children'>;
 }
 export default NavModalProps;

package/docs/changelog.mdx

@@ -9,6 +9,73 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.30.1
+
+### Patch Changes
+
+- [#1081](https://github.com/utilitywarehouse/hearth/pull/1081) [`5db8538`](https://github.com/utilitywarehouse/hearth/commit/5db8538b69115a23289f0038f681fc8b87a310c4) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Correct `NavModal` safe area handling across sheet and full-screen presentations.
+
+  `NavModal` now applies safe area insets directly within the component layout, which fixes padding in full-screen presentations and keeps sheet-style presentations aligned with the modal footer behaviour.
+
+  **Developer changes**:
+
+  If you need to disable the inset padding, use the `useSafeAreaInsets` prop. The old `safeAreaViewProps` escape hatch is no longer available.
+
+## 0.30.0
+
+### Minor Changes
+
+- [#1072](https://github.com/utilitywarehouse/hearth/pull/1072) [`55f0095`](https://github.com/utilitywarehouse/hearth/commit/55f009576ba55081de358bccc21691861ddd7c33) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `loadingDescription` support to `Modal` and `NavModal`
+
+  `Modal` and `NavModal` now accept a `loadingDescription` prop to render supporting text beneath the spinner while `loading` is true. This makes it easier to give users more context during loading states without building custom loading content.
+
+  **Components affected**:
+  - `Modal`
+  - `NavModal`
+
+  **Developer changes**:
+
+  No changes are required for existing usage. To show supporting text in a loading state, pass `loadingDescription` alongside `loading` and, if needed, `loadingHeading`.
+
+### Patch Changes
+
+- [#1070](https://github.com/utilitywarehouse/hearth/pull/1070) [`93c042c`](https://github.com/utilitywarehouse/hearth/commit/93c042c7772ab298e2ea4888a9777e8176453098) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Standardise numeric value typography across list-based components.
+
+  Numeric values in `DescriptionListItem`, `ExpandableCard`, and `ListItem` now render with semibold `BodyText` instead of `DetailText`, aligning them with the updated content hierarchy used elsewhere in the library.
+
+  **Components affected**:
+  - `DescriptionListItem`
+  - `ExpandableCard`
+  - `ListItem`
+
+  **Developer changes**:
+
+  No changes are required.
+
+- [#1073](https://github.com/utilitywarehouse/hearth/pull/1073) [`9759622`](https://github.com/utilitywarehouse/hearth/commit/975962229137dd196e5f72a04037a8f181907818) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Announce `Heading` as a header for assistive technologies.
+
+  `Heading` now sets `accessibilityRole="header"` automatically so VoiceOver and TalkBack can identify headings as part of the screen structure.
+
+  **Components affected**:
+  - `Heading`
+
+  **Developer changes**:
+
+  No changes are required.
+
+- [#1074](https://github.com/utilitywarehouse/hearth/pull/1074) [`95fe19e`](https://github.com/utilitywarehouse/hearth/commit/95fe19e6328bf652ff3ac1b2c723e1389fc59936) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Improve accessibility roles for `List`, `ListItem`, and `ListAction`
+
+  `List` now defaults to `accessibilityRole="list"`, `ListAction` now defaults to `accessibilityRole="button"`, and `ListItem` respects an explicitly provided `accessibilityRole` instead of always forcing button semantics when `onPress` is set.
+
+  **Components affected**:
+  - `List`
+  - `ListItem`
+  - `ListAction`
+
+  **Developer changes**:
+
+  No changes are required unless you want a tappable `ListItem` to be announced as something other than a button. In that case, pass `accessibilityRole` explicitly.
+
 ## 0.29.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.30.0",
+  "version": "0.30.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -60,7 +60,7 @@
     "@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-svg-assets": "^0.6.0",
     "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },
   "peerDependencies": {

package/src/components/Banner/Banner.docs.mdx

@@ -81,6 +81,7 @@ const MyComponent = () => (
 | onClose              | `() => void`                                                                                       | Shows close button with handler                                         | `-`            |
 | variant              | `'subtle' \| 'emphasis'`                                                                           | Card visual style variant                                               | `'subtle'`     |
 | colorScheme          | `'pig' \| 'energy' \| 'broadband' \| 'mobile' \|` <br />`'insurance' \| 'cashback' \| 'highlight'` | Color scheme for buttons                                                | `'pig'`        |
+| alignChevron         | `'center' \| 'start' \| 'end'`                                                                     | Alignment of chevron when `onPress` is used with horizontal layout      | `'center'`     |
 
 The component also accepts all standard Card props except `noPadding`, `spacing`, `gap`, `rowGap`, `columnGap`, `flexDirection`, `flexWrap`, `alignItems`, and `justifyContent`.
 

package/src/components/Banner/Banner.props.ts

@@ -87,6 +87,11 @@ export interface BannerProps extends Omit<
    * @default 'subtle'
    */
   variant?: 'subtle' | 'emphasis';
+  /**
+   * Chevron alignment for horizontal layout
+   * @default 'center'
+   */
+  alignChevron?: 'center' | 'start' | 'end';
 }
 
 export default BannerProps;

package/src/components/Banner/Banner.stories.tsx

@@ -301,6 +301,22 @@ export const Pressable: Story = {
             description="Manage your account preferences."
             onPress={() => console.log('Banner pressed')}
           />
+          <Banner
+            direction="vertical"
+            image={
+              <BannerImage
+                light={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+                dark={{
+                  uri: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=200&q=80',
+                }}
+              />
+            }
+            heading="Account Settings"
+            description="Manage your account preferences."
+            onPress={() => console.log('Banner pressed')}
+          />
         </Flex>
       </View>
     );

package/src/components/Banner/Banner.tsx

@@ -25,11 +25,17 @@ const Banner = ({
   onPress,
   onClose,
   variant = 'subtle',
+  alignChevron = 'center',
   style,
   ...props
 }: BannerProps) => {
   const hasIllustration = Boolean(illustration);
-  styles.useVariants({ direction, hasIllustration, isPressable: Boolean(onPress) });
+  styles.useVariants({
+    direction,
+    hasIllustration,
+    isPressable: Boolean(onPress),
+    alignChevron,
+  });
 
   const context = useMemo(
     () => ({
@@ -295,6 +301,25 @@ const styles = StyleSheet.create(theme => ({
   },
   chevron: {
     alignSelf: 'center',
+    variants: {
+      direction: {
+        horizontal: {},
+        vertical: {
+          display: 'none',
+        },
+      },
+      alignChevron: {
+        center: {
+          alignSelf: 'center',
+        },
+        start: {
+          alignSelf: 'flex-start',
+        },
+        end: {
+          alignSelf: 'flex-end',
+        },
+      },
+    },
   },
   closeButton: {
     alignSelf: 'flex-start',

package/src/components/NavModal/NavModal.docs.mdx

@@ -135,30 +135,30 @@ const styles = StyleSheet.create({
 
 `NavModal` supports Hearth's modal content props plus the navigation-specific `background`, `scrollable`, and `presentation` options. Set `presentation` to the same value you pass to React Navigation so `NavModal` can match the route's sheet-style or full-screen layout. It does not take bottom-sheet props such as `snapPoints`, and it does not manage its own dismissal. Your screen or navigator owns closing behavior.
 
-| Property                 | Type                                                                                                             | Description                                                                                                                                   | Default        |
-| ------------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
-| `heading`                | `string`                                                                                                         | Heading text shown at the top of the modal when no `image` is provided.                                                                       | -              |
-| `description`            | `string`                                                                                                         | Supporting text shown below the heading when no `image` is provided.                                                                          | -              |
-| `showCloseButton`        | `boolean`                                                                                                        | Whether to render the close button in the top-right corner.                                                                                   | `true`         |
-| `primaryButtonText`      | `string`                                                                                                         | Label for the primary action button.                                                                                                          | -              |
-| `secondaryButtonText`    | `string`                                                                                                         | Label for the secondary action button.                                                                                                        | -              |
-| `onPressPrimaryButton`   | `() => void`                                                                                                     | Called when the primary action button is pressed.                                                                                             | -              |
-| `onPressSecondaryButton` | `() => void`                                                                                                     | Called when the secondary action button is pressed.                                                                                           | -              |
-| `onPressCloseButton`     | `() => void`                                                                                                     | Called when the close button is pressed.                                                                                                      | -              |
-| `primaryButtonProps`     | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the primary button.                                                                                                  | -              |
-| `secondaryButtonProps`   | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the secondary button.                                                                                                | -              |
-| `closeButtonProps`       | `Omit<UnstyledIconButtonProps, 'children'>`                                                                      | Extra props forwarded to the close button.                                                                                                    | -              |
-| `loading`                | `boolean`                                                                                                        | Replaces the content with a loading state and spinner.                                                                                        | `false`        |
-| `loadingHeading`         | `string`                                                                                                         | Heading text shown while `loading` is true.                                                                                                   | `'Loading...'` |
-| `loadingDescription`     | `string`                                                                                                         | Supporting text shown below the heading while `loading` is true.                                                                              | -              |
-| `image`                  | `ReactNode`                                                                                                      | Optional image or illustration shown above the text content.                                                                                  | -              |
-| `children`               | `ReactNode`                                                                                                      | Content rendered inside the modal body.                                                                                                       | -              |
-| `stickyFooter`           | `boolean`                                                                                                        | Keeps action buttons pinned to the bottom instead of flowing with the content.                                                                | `true`         |
-| `background`             | `'default' /\| 'brand'`                                                                                          | Switches between the default surface background and the brand background treatment.                                                           | `'default'`    |
-| `scrollable`             | `boolean`                                                                                                        | Wraps the content area in a `ScrollView`. Set this to `false` for custom layouts that should not scroll.                                      | `true`         |
-| `presentation`           | `'modal' \| 'fullScreenModal' \| 'transparentModal' `<br />` \| 'containedModal' \| 'containedTransparentModal'` | Matches the React Navigation screen presentation. `fullScreenModal` uses the full-screen layout; the other values use the sheet-style layout. | `'modal'`      |
-| `safeAreaViewProps`      | `SafeAreaViewProps`                                                                                              | Extra props forwarded to the `SafeAreaView` wrapping the modal content.                                                                       | -              |
-| `scrollViewProps`        | `ScrollViewProps`                                                                                                | Extra props forwarded to the `ScrollView` wrapping the modal content when `scrollable` is true.                                               | -              |
+| Property                 | Type                                                                                                             | Description                                                                                                                                                                                      | Default        |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
+| `heading`                | `string`                                                                                                         | Heading text shown at the top of the modal when no `image` is provided.                                                                                                                          | -              |
+| `description`            | `string`                                                                                                         | Supporting text shown below the heading when no `image` is provided.                                                                                                                             | -              |
+| `showCloseButton`        | `boolean`                                                                                                        | Whether to render the close button in the top-right corner.                                                                                                                                      | `true`         |
+| `primaryButtonText`      | `string`                                                                                                         | Label for the primary action button.                                                                                                                                                             | -              |
+| `secondaryButtonText`    | `string`                                                                                                         | Label for the secondary action button.                                                                                                                                                           | -              |
+| `onPressPrimaryButton`   | `() => void`                                                                                                     | Called when the primary action button is pressed.                                                                                                                                                | -              |
+| `onPressSecondaryButton` | `() => void`                                                                                                     | Called when the secondary action button is pressed.                                                                                                                                              | -              |
+| `onPressCloseButton`     | `() => void`                                                                                                     | Called when the close button is pressed.                                                                                                                                                         | -              |
+| `primaryButtonProps`     | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the primary button.                                                                                                                                                     | -              |
+| `secondaryButtonProps`   | `Omit<ButtonWithoutChildrenProps, 'children'>`                                                                   | Extra props forwarded to the secondary button.                                                                                                                                                   | -              |
+| `closeButtonProps`       | `Omit<UnstyledIconButtonProps, 'children'>`                                                                      | Extra props forwarded to the close button.                                                                                                                                                       | -              |
+| `loading`                | `boolean`                                                                                                        | Replaces the content with a loading state and spinner.                                                                                                                                           | `false`        |
+| `loadingHeading`         | `string`                                                                                                         | Heading text shown while `loading` is true.                                                                                                                                                      | `'Loading...'` |
+| `loadingDescription`     | `string`                                                                                                         | Supporting text shown below the heading while `loading` is true.                                                                                                                                 | -              |
+| `image`                  | `ReactNode`                                                                                                      | Optional image or illustration shown above the text content.                                                                                                                                     | -              |
+| `children`               | `ReactNode`                                                                                                      | Content rendered inside the modal body.                                                                                                                                                          | -              |
+| `stickyFooter`           | `boolean`                                                                                                        | Keeps action buttons pinned to the bottom instead of flowing with the content.                                                                                                                   | `true`         |
+| `background`             | `'default' /\| 'brand'`                                                                                          | Switches between the default surface background and the brand background treatment.                                                                                                              | `'default'`    |
+| `scrollable`             | `boolean`                                                                                                        | Wraps the content area in a `ScrollView`. Set this to `false` for custom layouts that should not scroll.                                                                                         | `true`         |
+| `presentation`           | `'modal' \| 'fullScreenModal' \| 'transparentModal' `<br />` \| 'containedModal' \| 'containedTransparentModal'` | Matches the React Navigation screen presentation. `fullScreenModal` uses the full-screen layout; the other values use the sheet-style layout.                                                    | `'modal'`      |
+| `useSafeAreaInsets`      | `boolean`                                                                                                        | Whether to apply safe area insets as padding within the component. This is enabled by default to fix full-screen presentation padding but can be disabled if you want to manage insets yourself. | `true`         |
+| `scrollViewProps`        | `ScrollViewProps`                                                                                                | Extra props forwarded to the `ScrollView` wrapping the modal content when `scrollable` is true.                                                                                                  | -              |
 
 ## Accessibility
 

package/src/components/NavModal/NavModal.props.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-import { SafeAreaViewProps } from 'react-native-safe-area-context';
+import { ScrollViewProps } from 'react-native';
 import { ModalCommonProps } from '../Modal/Modal.shared.types';
 
 export interface NavModalRef {
@@ -16,8 +16,8 @@ interface NavModalProps extends ModalCommonProps {
     | 'transparentModal'
     | 'containedModal'
     | 'containedTransparentModal';
-  safeAreaViewProps?: Omit<SafeAreaViewProps, 'children'>;
-  scrollViewProps?: Omit<SafeAreaViewProps, 'children'>;
+  useSafeAreaInsets?: boolean;
+  scrollViewProps?: Omit<ScrollViewProps, 'children'>;
 }
 
 export default NavModalProps;

package/src/components/NavModal/NavModal.tsx

@@ -8,7 +8,6 @@ import Animated, {
   withDelay,
   withTiming,
 } from 'react-native-reanimated';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleSheet } from 'react-native-unistyles';
 import { useTheme } from '../../hooks';
 import { hexWithOpacity } from '../../utils';
@@ -42,7 +41,7 @@ const NavModal = ({
   scrollable = true,
   presentation = 'modal',
   scrollViewProps,
-  safeAreaViewProps,
+  useSafeAreaInsets = true,
   ...props
 }: NavModalProps) => {
   const theme = useTheme();
@@ -117,6 +116,9 @@ const NavModal = ({
     loading,
     background: isBrandBackground ? 'brand' : 'primary',
     presentation: isFullScreenPresentation ? 'fullScreen' : 'modal',
+    useSafeAreaInsets,
+    usesSheetPresentation,
+    stickyFooter,
   });
 
   const footer = useMemo(
@@ -258,19 +260,8 @@ const NavModal = ({
     </>
   );
 
-  const { style: safeAreaViewStyle, ...restSafeAreaViewProps } = safeAreaViewProps ?? {};
-
   return (
-    <SafeAreaView
-      style={[
-        {
-          flex: 1,
-          backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'secondary'],
-        },
-        safeAreaViewStyle,
-      ]}
-      {...restSafeAreaViewProps}
-    >
+    <View style={styles.root}>
       {Platform.OS === 'android' && usesSheetPresentation ? (
         <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
           <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
@@ -285,11 +276,56 @@ const NavModal = ({
       >
         <View style={styles.inNavModalContent}>{content}</View>
       </Animated.View>
-    </SafeAreaView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create((theme, rt) => ({
+  root: {
+    flex: 1,
+    variants: {
+      background: {
+        brand: {
+          backgroundColor: theme.color.background.brand,
+        },
+        primary: {
+          backgroundColor: theme.color.background.secondary,
+        },
+      },
+      usesSheetPresentation: {
+        true: {},
+        false: {},
+      },
+      useSafeAreaInsets: {
+        true: {},
+        false: {},
+      },
+      stickyFooter: {
+        true: {},
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        usesSheetPresentation: false,
+        useSafeAreaInsets: true,
+        styles: {
+          paddingTop: rt.insets.top,
+          paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
+          paddingLeft: rt.insets.left,
+          paddingRight: rt.insets.right,
+        },
+      },
+      {
+        usesSheetPresentation: true,
+        useSafeAreaInsets: true,
+        stickyFooter: true,
+        styles: {
+          paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
+        },
+      },
+    ],
+  },
   container: {
     flex: 1,
     gap: theme.components.modal.gap,