@utilitywarehouse/hearth-react-native 0.30.0 → 0.30.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/.turbo/turbo-build.log +1 -1
  2. package/.turbo/turbo-lint.log +11 -11
  3. package/CHANGELOG.md +12 -0
  4. package/build/components/NavModal/NavModal.d.ts +1 -1
  5. package/build/components/NavModal/NavModal.js +50 -10
  6. package/build/components/NavModal/NavModal.props.d.ts +3 -3
  7. package/package.json +3 -3
  8. package/src/components/NavModal/NavModal.docs.mdx +24 -24
  9. package/src/components/NavModal/NavModal.props.ts +3 -3
  10. package/src/components/NavModal/NavModal.tsx +51 -15
package/.turbo/turbo-build.log CHANGED
@@ -1,4 +1,4 @@
1
1
 
2
- > @utilitywarehouse/hearth-react-native@0.30.0 build /home/runner/work/hearth/hearth/packages/react-native
2
+ > @utilitywarehouse/hearth-react-native@0.30.1 build /home/runner/work/hearth/hearth/packages/react-native
3
3
  > tsc
4
4
 
package/.turbo/turbo-lint.log CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- > @utilitywarehouse/hearth-react-native@0.30.0 lint /home/runner/work/hearth/hearth/packages/react-native
2
+ > @utilitywarehouse/hearth-react-native@0.30.1 lint /home/runner/work/hearth/hearth/packages/react-native
3
3
  > TIMING=1 eslint .
4
4
 
5
5
 
@@ -53,13 +53,13 @@
53
53
 
54
54
  Rule | Time (ms) | Relative
55
55
  :---------------------------------|----------:|--------:
56
- @typescript-eslint/no-unused-vars | 1641.469 | 60.9%
57
- no-global-assign | 98.820 | 3.7%
58
- react-hooks/exhaustive-deps | 93.179 | 3.5%
59
- no-unexpected-multiline | 70.646 | 2.6%
60
- react-hooks/rules-of-hooks | 65.259 | 2.4%
61
- @typescript-eslint/ban-ts-comment | 45.783 | 1.7%
62
- no-misleading-character-class | 45.630 | 1.7%
63
- no-loss-of-precision | 43.137 | 1.6%
64
- @typescript-eslint/no-this-alias | 38.127 | 1.4%
65
- no-control-regex | 32.544 | 1.2%
56
+ @typescript-eslint/no-unused-vars | 1663.735 | 62.2%
57
+ react-hooks/exhaustive-deps | 114.322 | 4.3%
58
+ no-global-assign | 106.232 | 4.0%
59
+ react-hooks/rules-of-hooks | 88.095 | 3.3%
60
+ no-misleading-character-class | 76.056 | 2.8%
61
+ no-unexpected-multiline | 42.483 | 1.6%
62
+ @typescript-eslint/ban-ts-comment | 34.247 | 1.3%
63
+ no-loss-of-precision | 32.608 | 1.2%
64
+ no-useless-escape | 30.291 | 1.1%
65
+ no-control-regex | 26.605 | 1.0%
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @utilitywarehouse/hearth-react-native
2
2
 
3
+ ## 0.30.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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.
8
+
9
+ `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.
10
+
11
+ **Developer changes**:
12
+
13
+ If you need to disable the inset padding, use the `useSafeAreaInsets` prop. The old `safeAreaViewProps` escape hatch is no longer available.
14
+
3
15
  ## 0.30.0
4
16
 
5
17
  ### Minor Changes
package/build/components/NavModal/NavModal.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import NavModalProps from './NavModal.props';
2
- 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;
2
+ 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;
3
3
  export default NavModal;
package/build/components/NavModal/NavModal.js CHANGED
@@ -3,7 +3,6 @@ import { CloseMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
3
3
  import { useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
4
4
  import { Platform, ScrollView, View } from 'react-native';
5
5
  import Animated, { Easing, useAnimatedStyle, useSharedValue, withDelay, withTiming, } from 'react-native-reanimated';
6
- import { SafeAreaView } from 'react-native-safe-area-context';
7
6
  import { StyleSheet } from 'react-native-unistyles';
8
7
  import { useTheme } from '../../hooks';
9
8
  import { hexWithOpacity } from '../../utils';
@@ -12,7 +11,7 @@ import { Button } from '../Button';
12
11
  import { Heading } from '../Heading';
13
12
  import { Spinner } from '../Spinner';
14
13
  import { UnstyledIconButton } from '../UnstyledIconButton';
15
- 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 }) => {
14
+ 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 }) => {
16
15
  const theme = useTheme();
17
16
  const backgroundOpacity = useSharedValue(0);
18
17
  const pretendContentTranslateY = useSharedValue(20);
@@ -66,6 +65,9 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
66
65
  loading,
67
66
  background: isBrandBackground ? 'brand' : 'primary',
68
67
  presentation: isFullScreenPresentation ? 'fullScreen' : 'modal',
68
+ useSafeAreaInsets,
69
+ usesSheetPresentation,
70
+ stickyFooter,
69
71
  });
70
72
  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] })), [
71
73
  handlePrimaryButtonPress,
@@ -84,19 +86,57 @@ const NavModal = ({ ref, children, heading, description, showCloseButton = true,
84
86
  }, contentContainerStyle: { paddingHorizontal: 4 }, ...scrollViewProps, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })) : (_jsxs(View, { style: {
85
87
  flex: stickyFooter ? 1 : 0,
86
88
  }, children: [children, !stickyFooter && !noButtons ? (_jsx(View, { style: styles.inNavModalFooterContainer, children: footer })) : null] })), stickyFooter && !noButtons ? footer : null] })) }));
87
- const { style: safeAreaViewStyle, ...restSafeAreaViewProps } = safeAreaViewProps ?? {};
88
- return (_jsxs(SafeAreaView, { style: [
89
- {
90
- flex: 1,
91
- backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'secondary'],
92
- },
93
- safeAreaViewStyle,
94
- ], ...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: [
89
+ 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: [
95
90
  styles.inNavModalContainer,
96
91
  Platform.OS === 'android' && usesSheetPresentation && animatedBackgroundStyle,
97
92
  ], ...props, children: _jsx(View, { style: styles.inNavModalContent, children: content }) })] }));
98
93
  };
99
94
  const styles = StyleSheet.create((theme, rt) => ({
95
+ root: {
96
+ flex: 1,
97
+ variants: {
98
+ background: {
99
+ brand: {
100
+ backgroundColor: theme.color.background.brand,
101
+ },
102
+ primary: {
103
+ backgroundColor: theme.color.background.secondary,
104
+ },
105
+ },
106
+ usesSheetPresentation: {
107
+ true: {},
108
+ false: {},
109
+ },
110
+ useSafeAreaInsets: {
111
+ true: {},
112
+ false: {},
113
+ },
114
+ stickyFooter: {
115
+ true: {},
116
+ false: {},
117
+ },
118
+ },
119
+ compoundVariants: [
120
+ {
121
+ usesSheetPresentation: false,
122
+ useSafeAreaInsets: true,
123
+ styles: {
124
+ paddingTop: rt.insets.top,
125
+ paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
126
+ paddingLeft: rt.insets.left,
127
+ paddingRight: rt.insets.right,
128
+ },
129
+ },
130
+ {
131
+ usesSheetPresentation: true,
132
+ useSafeAreaInsets: true,
133
+ stickyFooter: true,
134
+ styles: {
135
+ paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
136
+ },
137
+ },
138
+ ],
139
+ },
100
140
  container: {
101
141
  flex: 1,
102
142
  gap: theme.components.modal.gap,
package/build/components/NavModal/NavModal.props.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Ref } from 'react';
2
- import { SafeAreaViewProps } from 'react-native-safe-area-context';
2
+ import { ScrollViewProps } from 'react-native';
3
3
  import { ModalCommonProps } from '../Modal/Modal.shared.types';
4
4
  export interface NavModalRef {
5
5
  triggerCloseAnimation?: () => void;
@@ -9,7 +9,7 @@ interface NavModalProps extends ModalCommonProps {
9
9
  background?: 'default' | 'brand';
10
10
  scrollable?: boolean;
11
11
  presentation?: 'fullScreenModal' | 'modal' | 'transparentModal' | 'containedModal' | 'containedTransparentModal';
12
- safeAreaViewProps?: Omit<SafeAreaViewProps, 'children'>;
13
- scrollViewProps?: Omit<SafeAreaViewProps, 'children'>;
12
+ useSafeAreaInsets?: boolean;
13
+ scrollViewProps?: Omit<ScrollViewProps, 'children'>;
14
14
  }
15
15
  export default NavModalProps;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@utilitywarehouse/hearth-react-native",
3
- "version": "0.30.0",
3
+ "version": "0.30.1",
4
4
  "description": "Utility Warehouse React Native UI library",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",
@@ -60,8 +60,8 @@
60
60
  "@utilitywarehouse/hearth-fonts": "^0.0.4",
61
61
  "@utilitywarehouse/hearth-react-icons": "^0.8.0",
62
62
  "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
63
- "@utilitywarehouse/hearth-svg-assets": "^0.5.0",
64
- "@utilitywarehouse/hearth-tokens": "^0.2.4"
63
+ "@utilitywarehouse/hearth-tokens": "^0.2.4",
64
+ "@utilitywarehouse/hearth-svg-assets": "^0.5.0"
65
65
  },
66
66
  "peerDependencies": {
67
67
  "@gorhom/bottom-sheet": ">=5.0.0",
package/src/components/NavModal/NavModal.docs.mdx CHANGED
@@ -135,30 +135,30 @@ const styles = StyleSheet.create({
135
135
 
136
136
  `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.
137
137
 
138
- | Property | Type | Description | Default |
139
- | ------------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
140
- | `heading` | `string` | Heading text shown at the top of the modal when no `image` is provided. | - |
141
- | `description` | `string` | Supporting text shown below the heading when no `image` is provided. | - |
142
- | `showCloseButton` | `boolean` | Whether to render the close button in the top-right corner. | `true` |
143
- | `primaryButtonText` | `string` | Label for the primary action button. | - |
144
- | `secondaryButtonText` | `string` | Label for the secondary action button. | - |
145
- | `onPressPrimaryButton` | `() => void` | Called when the primary action button is pressed. | - |
146
- | `onPressSecondaryButton` | `() => void` | Called when the secondary action button is pressed. | - |
147
- | `onPressCloseButton` | `() => void` | Called when the close button is pressed. | - |
148
- | `primaryButtonProps` | `Omit<ButtonWithoutChildrenProps, 'children'>` | Extra props forwarded to the primary button. | - |
149
- | `secondaryButtonProps` | `Omit<ButtonWithoutChildrenProps, 'children'>` | Extra props forwarded to the secondary button. | - |
150
- | `closeButtonProps` | `Omit<UnstyledIconButtonProps, 'children'>` | Extra props forwarded to the close button. | - |
151
- | `loading` | `boolean` | Replaces the content with a loading state and spinner. | `false` |
152
- | `loadingHeading` | `string` | Heading text shown while `loading` is true. | `'Loading...'` |
153
- | `loadingDescription` | `string` | Supporting text shown below the heading while `loading` is true. | - |
154
- | `image` | `ReactNode` | Optional image or illustration shown above the text content. | - |
155
- | `children` | `ReactNode` | Content rendered inside the modal body. | - |
156
- | `stickyFooter` | `boolean` | Keeps action buttons pinned to the bottom instead of flowing with the content. | `true` |
157
- | `background` | `'default' /\| 'brand'` | Switches between the default surface background and the brand background treatment. | `'default'` |
158
- | `scrollable` | `boolean` | Wraps the content area in a `ScrollView`. Set this to `false` for custom layouts that should not scroll. | `true` |
159
- | `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'` |
160
- | `safeAreaViewProps` | `SafeAreaViewProps` | Extra props forwarded to the `SafeAreaView` wrapping the modal content. | - |
161
- | `scrollViewProps` | `ScrollViewProps` | Extra props forwarded to the `ScrollView` wrapping the modal content when `scrollable` is true. | - |
138
+ | Property | Type | Description | Default |
139
+ | ------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
140
+ | `heading` | `string` | Heading text shown at the top of the modal when no `image` is provided. | - |
141
+ | `description` | `string` | Supporting text shown below the heading when no `image` is provided. | - |
142
+ | `showCloseButton` | `boolean` | Whether to render the close button in the top-right corner. | `true` |
143
+ | `primaryButtonText` | `string` | Label for the primary action button. | - |
144
+ | `secondaryButtonText` | `string` | Label for the secondary action button. | - |
145
+ | `onPressPrimaryButton` | `() => void` | Called when the primary action button is pressed. | - |
146
+ | `onPressSecondaryButton` | `() => void` | Called when the secondary action button is pressed. | - |
147
+ | `onPressCloseButton` | `() => void` | Called when the close button is pressed. | - |
148
+ | `primaryButtonProps` | `Omit<ButtonWithoutChildrenProps, 'children'>` | Extra props forwarded to the primary button. | - |
149
+ | `secondaryButtonProps` | `Omit<ButtonWithoutChildrenProps, 'children'>` | Extra props forwarded to the secondary button. | - |
150
+ | `closeButtonProps` | `Omit<UnstyledIconButtonProps, 'children'>` | Extra props forwarded to the close button. | - |
151
+ | `loading` | `boolean` | Replaces the content with a loading state and spinner. | `false` |
152
+ | `loadingHeading` | `string` | Heading text shown while `loading` is true. | `'Loading...'` |
153
+ | `loadingDescription` | `string` | Supporting text shown below the heading while `loading` is true. | - |
154
+ | `image` | `ReactNode` | Optional image or illustration shown above the text content. | - |
155
+ | `children` | `ReactNode` | Content rendered inside the modal body. | - |
156
+ | `stickyFooter` | `boolean` | Keeps action buttons pinned to the bottom instead of flowing with the content. | `true` |
157
+ | `background` | `'default' /\| 'brand'` | Switches between the default surface background and the brand background treatment. | `'default'` |
158
+ | `scrollable` | `boolean` | Wraps the content area in a `ScrollView`. Set this to `false` for custom layouts that should not scroll. | `true` |
159
+ | `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'` |
160
+ | `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` |
161
+ | `scrollViewProps` | `ScrollViewProps` | Extra props forwarded to the `ScrollView` wrapping the modal content when `scrollable` is true. | - |
162
162
 
163
163
  ## Accessibility
164
164
 
package/src/components/NavModal/NavModal.props.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Ref } from 'react';
2
- import { SafeAreaViewProps } from 'react-native-safe-area-context';
2
+ import { ScrollViewProps } from 'react-native';
3
3
  import { ModalCommonProps } from '../Modal/Modal.shared.types';
4
4
 
5
5
  export interface NavModalRef {
@@ -16,8 +16,8 @@ interface NavModalProps extends ModalCommonProps {
16
16
  | 'transparentModal'
17
17
  | 'containedModal'
18
18
  | 'containedTransparentModal';
19
- safeAreaViewProps?: Omit<SafeAreaViewProps, 'children'>;
20
- scrollViewProps?: Omit<SafeAreaViewProps, 'children'>;
19
+ useSafeAreaInsets?: boolean;
20
+ scrollViewProps?: Omit<ScrollViewProps, 'children'>;
21
21
  }
22
22
 
23
23
  export default NavModalProps;
package/src/components/NavModal/NavModal.tsx CHANGED
@@ -8,7 +8,6 @@ import Animated, {
8
8
  withDelay,
9
9
  withTiming,
10
10
  } from 'react-native-reanimated';
11
- import { SafeAreaView } from 'react-native-safe-area-context';
12
11
  import { StyleSheet } from 'react-native-unistyles';
13
12
  import { useTheme } from '../../hooks';
14
13
  import { hexWithOpacity } from '../../utils';
@@ -42,7 +41,7 @@ const NavModal = ({
42
41
  scrollable = true,
43
42
  presentation = 'modal',
44
43
  scrollViewProps,
45
- safeAreaViewProps,
44
+ useSafeAreaInsets = true,
46
45
  ...props
47
46
  }: NavModalProps) => {
48
47
  const theme = useTheme();
@@ -117,6 +116,9 @@ const NavModal = ({
117
116
  loading,
118
117
  background: isBrandBackground ? 'brand' : 'primary',
119
118
  presentation: isFullScreenPresentation ? 'fullScreen' : 'modal',
119
+ useSafeAreaInsets,
120
+ usesSheetPresentation,
121
+ stickyFooter,
120
122
  });
121
123
 
122
124
  const footer = useMemo(
@@ -258,19 +260,8 @@ const NavModal = ({
258
260
  </>
259
261
  );
260
262
 
261
- const { style: safeAreaViewStyle, ...restSafeAreaViewProps } = safeAreaViewProps ?? {};
262
-
263
263
  return (
264
- <SafeAreaView
265
- style={[
266
- {
267
- flex: 1,
268
- backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'secondary'],
269
- },
270
- safeAreaViewStyle,
271
- ]}
272
- {...restSafeAreaViewProps}
273
- >
264
+ <View style={styles.root}>
274
265
  {Platform.OS === 'android' && usesSheetPresentation ? (
275
266
  <Animated.View style={[styles.androidContainer, animatedBackgroundStyle]}>
276
267
  <Animated.View style={[styles.pretendContent, animatedPretendContentStyle]} />
@@ -285,11 +276,56 @@ const NavModal = ({
285
276
  >
286
277
  <View style={styles.inNavModalContent}>{content}</View>
287
278
  </Animated.View>
288
- </SafeAreaView>
279
+ </View>
289
280
  );
290
281
  };
291
282
 
292
283
  const styles = StyleSheet.create((theme, rt) => ({
284
+ root: {
285
+ flex: 1,
286
+ variants: {
287
+ background: {
288
+ brand: {
289
+ backgroundColor: theme.color.background.brand,
290
+ },
291
+ primary: {
292
+ backgroundColor: theme.color.background.secondary,
293
+ },
294
+ },
295
+ usesSheetPresentation: {
296
+ true: {},
297
+ false: {},
298
+ },
299
+ useSafeAreaInsets: {
300
+ true: {},
301
+ false: {},
302
+ },
303
+ stickyFooter: {
304
+ true: {},
305
+ false: {},
306
+ },
307
+ },
308
+ compoundVariants: [
309
+ {
310
+ usesSheetPresentation: false,
311
+ useSafeAreaInsets: true,
312
+ styles: {
313
+ paddingTop: rt.insets.top,
314
+ paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
315
+ paddingLeft: rt.insets.left,
316
+ paddingRight: rt.insets.right,
317
+ },
318
+ },
319
+ {
320
+ usesSheetPresentation: true,
321
+ useSafeAreaInsets: true,
322
+ stickyFooter: true,
323
+ styles: {
324
+ paddingBottom: Platform.OS === 'ios' ? rt.insets.bottom : 0,
325
+ },
326
+ },
327
+ ],
328
+ },
293
329
  container: {
294
330
  flex: 1,
295
331
  gap: theme.components.modal.gap,