@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.
- package/.turbo/turbo-build.log +1 -1
- package/.turbo/turbo-lint.log +11 -11
- package/CHANGELOG.md +12 -0
- package/build/components/NavModal/NavModal.d.ts +1 -1
- package/build/components/NavModal/NavModal.js +50 -10
- package/build/components/NavModal/NavModal.props.d.ts +3 -3
- package/package.json +3 -3
- package/src/components/NavModal/NavModal.docs.mdx +24 -24
- package/src/components/NavModal/NavModal.props.ts +3 -3
- package/src/components/NavModal/NavModal.tsx +51 -15
package/.turbo/turbo-build.log
CHANGED
package/.turbo/turbo-lint.log
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @utilitywarehouse/hearth-react-native@0.30.
|
|
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 |
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
no-loss-of-precision |
|
|
64
|
-
|
|
65
|
-
no-control-regex |
|
|
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
|
|
@@ -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,
|
|
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;
|
|
@@ -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,
|
|
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
|
-
|
|
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,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Ref } from 'react';
|
|
2
|
-
import {
|
|
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
|
-
|
|
13
|
-
scrollViewProps?: Omit<
|
|
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.
|
|
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-
|
|
64
|
-
"@utilitywarehouse/hearth-
|
|
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",
|
|
@@ -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
|
|
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.
|
|
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.
|
|
152
|
-
| `loadingHeading` | `string` | Heading text shown while `loading` is true.
|
|
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.
|
|
157
|
-
| `background` | `'default' /\| 'brand'` | Switches between the default surface background and the brand background treatment.
|
|
158
|
-
| `scrollable` | `boolean` | Wraps the content area in a `ScrollView`. Set this to `false` for custom layouts that should not scroll.
|
|
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.
|
|
160
|
-
| `
|
|
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
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Ref } from 'react';
|
|
2
|
-
import {
|
|
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
|
-
|
|
20
|
-
scrollViewProps?: Omit<
|
|
19
|
+
useSafeAreaInsets?: boolean;
|
|
20
|
+
scrollViewProps?: Omit<ScrollViewProps, 'children'>;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
export default NavModalProps;
|
|
@@ -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
|
-
|
|
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
|
-
<
|
|
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
|
-
</
|
|
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,
|