react-native-terra-ui 0.11.13 → 0.11.15
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/CHANGELOG.md +12 -0
- package/lib/module/components/header/parts/HeaderBar.js +41 -22
- package/lib/module/components/header/parts/HeaderBar.js.map +1 -1
- package/lib/module/components/toast/parts/ToastViewport.js +37 -14
- package/lib/module/components/toast/parts/ToastViewport.js.map +1 -1
- package/lib/typescript/src/components/header/parts/HeaderBar.d.ts.map +1 -1
- package/lib/typescript/src/components/toast/parts/ToastViewport.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/header/parts/HeaderBar.tsx +53 -35
- package/src/components/toast/parts/ToastViewport.tsx +38 -20
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.11.15](https://github.com/earthling-std/react-native-terra-ui/compare/v0.11.14...v0.11.15) (2026-09-19)
|
|
4
|
+
|
|
5
|
+
### Bug Fixes
|
|
6
|
+
|
|
7
|
+
* **ui:** [header] stop status-bar taps scrolling the wrong list ([6ec4094](https://github.com/earthling-std/react-native-terra-ui/commit/6ec4094ac6d6062b763946c69dbe6fb794f2d582))
|
|
8
|
+
|
|
9
|
+
## [0.11.14](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.13...v0.11.14) (2026-09-19)
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **ui:** [toast] anchor the stack at a fixed width on wide screens ([5c7345a](https://github.com/earthlin9/react-native-terra-ui/commit/5c7345afbcf2258f4ee722666e5df22cc8d5611f))
|
|
14
|
+
|
|
3
15
|
## [0.11.13](https://github.com/earthlin9/react-native-terra-ui/compare/v0.11.12...v0.11.13) (2026-09-18)
|
|
4
16
|
|
|
5
17
|
### Bug Fixes
|
|
@@ -4,6 +4,7 @@ import { View } from "react-native-unistyles/components/native/View";
|
|
|
4
4
|
import { Text } from "react-native-unistyles/components/native/Text";
|
|
5
5
|
import { useState } from "react";
|
|
6
6
|
import Animated from "react-native-reanimated";
|
|
7
|
+
import { ScrollToTopGuard } from "react-native-screens/experimental";
|
|
7
8
|
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
8
9
|
import { FONT_WEIGHT_VALUE } from "../../../utils/typography.js";
|
|
9
10
|
import { resolveScreenPadding } from "../../../theme/screen-padding.js";
|
|
@@ -43,28 +44,46 @@ export function HeaderBar({
|
|
|
43
44
|
navigation: navigation,
|
|
44
45
|
onDismiss: onDismiss
|
|
45
46
|
});
|
|
46
|
-
return
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
47
|
+
return (
|
|
48
|
+
/*#__PURE__*/
|
|
49
|
+
/*
|
|
50
|
+
iPadOS 26 extended the status bar's tap-to-scroll-to-top zone down over
|
|
51
|
+
this bar, and a React Native `Pressable` is not a `UIControl`, so a tap on
|
|
52
|
+
a header button reaches UIKit's gesture as well. UIKit then scrolls
|
|
53
|
+
whichever container still accepts it — routinely not the one the reader
|
|
54
|
+
touched, but the list on the screen underneath the one being dismissed.
|
|
55
|
+
The guard covers the whole bar rather than each button: the zone covers
|
|
56
|
+
the bar, so the title and the gaps between actions are just as exposed.
|
|
57
|
+
Gesture recognizers on descendants are exempt, so the buttons keep their
|
|
58
|
+
own touch handling; only the ancestor gesture is made to wait and lose.
|
|
59
|
+
The status bar above the bar is untouched and still scrolls to top.
|
|
60
|
+
A Fragment off iOS and inert below iPadOS 26. See react-native#56061.
|
|
61
|
+
*/
|
|
62
|
+
_jsx(ScrollToTopGuard, {
|
|
63
|
+
children: /*#__PURE__*/_jsxs(View, {
|
|
64
|
+
style: [styles.bar, styles.windowInsets(windowInsets.left, windowInsets.right)],
|
|
65
|
+
children: [/*#__PURE__*/_jsx(HeaderSurface, {
|
|
66
|
+
color: color,
|
|
67
|
+
animatedStyle: surfaceStyle
|
|
68
|
+
}), /*#__PURE__*/_jsx(HeaderWindowInsets, {
|
|
69
|
+
onInsetsChange: setWindowInsets
|
|
70
|
+
}), (leading != null || dismissAction === "back") && /*#__PURE__*/_jsxs(Toolbar, {
|
|
71
|
+
children: [dismissAction === "back" && dismiss, leading]
|
|
72
|
+
}), /*#__PURE__*/_jsx(Animated.View, {
|
|
73
|
+
style: [styles.titleContainer, styles.titleInsets(windowInsets.left, windowInsets.right, titleAlignment), titleStyle],
|
|
74
|
+
pointerEvents: isCustomTitle(title) ? "box-none" : "none",
|
|
75
|
+
children: isTextTitle(title) ? String(title).trim().length > 0 && /*#__PURE__*/_jsx(Text, {
|
|
76
|
+
style: styles.title,
|
|
77
|
+
maxFontSizeMultiplier: theme.typography.variants["title-md"].maxFontSizeMultiplier,
|
|
78
|
+
children: title
|
|
79
|
+
}) : title
|
|
80
|
+
}), (trailing != null || dismissAction === "close") && /*#__PURE__*/_jsxs(Toolbar, {
|
|
81
|
+
style: styles.trailing,
|
|
82
|
+
children: [dismissAction === "close" && dismiss, trailing]
|
|
83
|
+
})]
|
|
84
|
+
})
|
|
85
|
+
})
|
|
86
|
+
);
|
|
68
87
|
}
|
|
69
88
|
}
|
|
70
89
|
const styles = StyleSheet.create((theme, runtime) => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useState","Animated","StyleSheet","useUnistyles","FONT_WEIGHT_VALUE","resolveScreenPadding","Toolbar","HeaderDismissButton","isCustomTitle","isTextTitle","HeaderSurface","HeaderWindowInsets","jsx","_jsx","jsxs","_jsxs","HeaderBar","title","leading","trailing","titleAlignment","color","surfaceStyle","titleStyle","dismissAction","navigation","onDismiss","theme","windowInsets","setWindowInsets","left","right","_styles","styles","useVariants","dismiss","View","style","bar","
|
|
1
|
+
{"version":3,"names":["useState","Animated","ScrollToTopGuard","StyleSheet","useUnistyles","FONT_WEIGHT_VALUE","resolveScreenPadding","Toolbar","HeaderDismissButton","isCustomTitle","isTextTitle","HeaderSurface","HeaderWindowInsets","jsx","_jsx","jsxs","_jsxs","HeaderBar","title","leading","trailing","titleAlignment","color","surfaceStyle","titleStyle","dismissAction","navigation","onDismiss","theme","windowInsets","setWindowInsets","left","right","_styles","styles","useVariants","dismiss","children","View","style","bar","animatedStyle","onInsetsChange","titleContainer","titleInsets","pointerEvents","String","trim","length","Text","maxFontSizeMultiplier","typography","variants","create","runtime","paddingLeft","Math","max","breakpoint","x","paddingRight","uni__dependencies","alignment","height","layout","header","flexDirection","alignItems","paddingHorizontal","screen","padding","gap","spacing","justifyContent","center","marginLeft","position","flex","fontSize","lineHeight","letterSpacing","fontWeight","textAlign"],"sourceRoot":"../../../../../src","sources":["components/header/parts/HeaderBar.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
import { View } from "react-native-unistyles/components/native/View";
|
|
3
4
|
import { useEffect } from "react";
|
|
4
5
|
import { Keyboard, Platform } from "react-native";
|
|
5
6
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
6
7
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
8
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
7
9
|
import { ToastAnimatedItem } from "./ToastAnimatedItem.js";
|
|
8
10
|
import { ToastOverlay } from "./ToastOverlay";
|
|
9
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -70,22 +72,43 @@ export function ToastViewport({
|
|
|
70
72
|
left: offset?.left ?? safeAreaInsets.left + 12,
|
|
71
73
|
right: offset?.right ?? safeAreaInsets.right + 12
|
|
72
74
|
}, keyboardStyle],
|
|
73
|
-
children:
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
placement: placement,
|
|
79
|
-
total: toasts.length,
|
|
80
|
-
frontId: frontToast.id,
|
|
81
|
-
children: toast.component({
|
|
75
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
76
|
+
pointerEvents: "box-none",
|
|
77
|
+
style: styles.stack,
|
|
78
|
+
children: toasts.map((toast, index) => /*#__PURE__*/_jsx(ToastAnimatedItem, {
|
|
79
|
+
heights: heights,
|
|
82
80
|
id: toast.id,
|
|
83
|
-
index,
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
81
|
+
index: index,
|
|
82
|
+
maxVisibleToasts: maxVisibleToasts,
|
|
83
|
+
placement: placement,
|
|
84
|
+
total: toasts.length,
|
|
85
|
+
frontId: frontToast.id,
|
|
86
|
+
children: toast.component({
|
|
87
|
+
id: toast.id,
|
|
88
|
+
index,
|
|
89
|
+
hide: manager.hide,
|
|
90
|
+
show: manager.show
|
|
91
|
+
})
|
|
92
|
+
}, toast.id))
|
|
93
|
+
})
|
|
88
94
|
})
|
|
89
95
|
});
|
|
90
96
|
}
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Width of the toast stack from the `sm` breakpoint up. On phones the stack
|
|
100
|
+
* stretches edge to edge; on wider viewports it anchors to the leading edge at
|
|
101
|
+
* a fixed width, matching Material's large-screen snackbar guidance and the
|
|
102
|
+
* 400dp width most design systems ship for corner-anchored toasts.
|
|
103
|
+
*/
|
|
104
|
+
const TOAST_WIDE_WIDTH = 400;
|
|
105
|
+
const styles = StyleSheet.create({
|
|
106
|
+
stack: {
|
|
107
|
+
alignSelf: "flex-start",
|
|
108
|
+
width: {
|
|
109
|
+
xs: "100%",
|
|
110
|
+
sm: TOAST_WIDE_WIDTH
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
});
|
|
91
114
|
//# sourceMappingURL=ToastViewport.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useEffect","Keyboard","Platform","Animated","useAnimatedStyle","useSharedValue","withTiming","useSafeAreaInsets","ToastAnimatedItem","ToastOverlay","jsx","_jsx","ToastViewport","placement","toasts","manager","maxVisibleToasts","offset","safeAreaInsets","heights","keyboardHeight","baseBottom","bottom","OS","baseTop","top","showEvent","hideEvent","showSub","addListener","e","value","endCoordinates","height","hideSub","remove","gap","keyboardStyle","activeIds","Set","map","toast","id","nextHeights","Object","entries","has","frontToast","length","children","View","pointerEvents","style","position","zIndex","elevation","left","right","index","total","frontId","component","hide","show"],"sourceRoot":"../../../../../src","sources":["components/toast/parts/ToastViewport.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"names":["useEffect","Keyboard","Platform","Animated","useAnimatedStyle","useSharedValue","withTiming","useSafeAreaInsets","StyleSheet","ToastAnimatedItem","ToastOverlay","jsx","_jsx","ToastViewport","placement","toasts","manager","maxVisibleToasts","offset","safeAreaInsets","heights","keyboardHeight","baseBottom","bottom","OS","baseTop","top","showEvent","hideEvent","showSub","addListener","e","value","endCoordinates","height","hideSub","remove","gap","keyboardStyle","activeIds","Set","map","toast","id","nextHeights","Object","entries","has","frontToast","length","children","View","pointerEvents","style","position","zIndex","elevation","left","right","styles","stack","index","total","frontId","component","hide","show","TOAST_WIDE_WIDTH","create","alignSelf","width","xs","sm"],"sourceRoot":"../../../../../src","sources":["components/toast/parts/ToastViewport.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGtE,OAAO,QAAQ,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"HeaderBar.d.ts","sourceRoot":"","sources":["../../../../../../src/components/header/parts/HeaderBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAGtE,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAO/C,OAAO,EAAuB,KAAK,kBAAkB,EAAE,MAAM,sBAAmB,CAAC;AAEjF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAGzE,UAAU,cAAe,SAAQ,kBAAkB;IACjD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,EAAE,QAAQ,GAAG,MAAM,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;IACnD,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED,2FAA2F;AAC3F,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAc,EACd,KAAK,EACL,YAAY,EACZ,UAAU,EACV,aAAsB,EACtB,UAAU,EACV,SAAS,GACV,EAAE,cAAc,+BA6DhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/parts/ToastViewport.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../../../../../src/components/toast/parts/ToastViewport.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAW,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,aAAU,CAAC;AAIrG,UAAU,kBAAkB;IAC1B,SAAS,EAAE,cAAc,CAAC;IAC1B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,YAAY,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;CACvC;AAED,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,EAAE,EAAE,kBAAkB,sCAuFzG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-terra-ui",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.15",
|
|
4
4
|
"description": "Themeable React Native UI components built on react-native-unistyles",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"react-native-nitro-modules": "0.36.1",
|
|
76
76
|
"react-native-reanimated": "4.4.3",
|
|
77
77
|
"react-native-safe-area-context": "5.7.0",
|
|
78
|
-
"react-native-screens": "4.
|
|
78
|
+
"react-native-screens": "4.27.0",
|
|
79
79
|
"react-native-svg": "15.15.4",
|
|
80
80
|
"react-native-unistyles": "^3.3.0",
|
|
81
81
|
"react-native-worklets": "0.10.0",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"react-native": "*",
|
|
90
90
|
"react-native-reanimated": ">=4.0.0",
|
|
91
91
|
"react-native-safe-area-context": ">=4.0.0",
|
|
92
|
-
"react-native-screens": ">=4.
|
|
92
|
+
"react-native-screens": ">=4.27.0",
|
|
93
93
|
"react-native-svg": ">=15.0.0",
|
|
94
94
|
"react-native-unistyles": ">=3.0.0",
|
|
95
95
|
"react-native-worklets": ">=0.8.0"
|
|
@@ -2,6 +2,7 @@ import { type ComponentProps, type ReactNode, useState } from "react";
|
|
|
2
2
|
import { Text, View } from "react-native";
|
|
3
3
|
|
|
4
4
|
import Animated from "react-native-reanimated";
|
|
5
|
+
import { ScrollToTopGuard } from "react-native-screens/experimental";
|
|
5
6
|
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
6
7
|
|
|
7
8
|
import { FONT_WEIGHT_VALUE } from "#utils/typography";
|
|
@@ -42,41 +43,58 @@ export function HeaderBar({
|
|
|
42
43
|
<HeaderDismissButton dismissAction={dismissAction} navigation={navigation} onDismiss={onDismiss} />
|
|
43
44
|
);
|
|
44
45
|
return (
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
>
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
{
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
46
|
+
/*
|
|
47
|
+
iPadOS 26 extended the status bar's tap-to-scroll-to-top zone down over
|
|
48
|
+
this bar, and a React Native `Pressable` is not a `UIControl`, so a tap on
|
|
49
|
+
a header button reaches UIKit's gesture as well. UIKit then scrolls
|
|
50
|
+
whichever container still accepts it — routinely not the one the reader
|
|
51
|
+
touched, but the list on the screen underneath the one being dismissed.
|
|
52
|
+
|
|
53
|
+
The guard covers the whole bar rather than each button: the zone covers
|
|
54
|
+
the bar, so the title and the gaps between actions are just as exposed.
|
|
55
|
+
Gesture recognizers on descendants are exempt, so the buttons keep their
|
|
56
|
+
own touch handling; only the ancestor gesture is made to wait and lose.
|
|
57
|
+
The status bar above the bar is untouched and still scrolls to top.
|
|
58
|
+
|
|
59
|
+
A Fragment off iOS and inert below iPadOS 26. See react-native#56061.
|
|
60
|
+
*/
|
|
61
|
+
<ScrollToTopGuard>
|
|
62
|
+
<View style={[styles.bar, styles.windowInsets(windowInsets.left, windowInsets.right)]}>
|
|
63
|
+
<HeaderSurface color={color} animatedStyle={surfaceStyle} />
|
|
64
|
+
<HeaderWindowInsets onInsetsChange={setWindowInsets} />
|
|
65
|
+
{(leading != null || dismissAction === "back") && (
|
|
66
|
+
<Toolbar>
|
|
67
|
+
{dismissAction === "back" && dismiss}
|
|
68
|
+
{leading}
|
|
69
|
+
</Toolbar>
|
|
70
|
+
)}
|
|
71
|
+
<Animated.View
|
|
72
|
+
style={[
|
|
73
|
+
styles.titleContainer,
|
|
74
|
+
styles.titleInsets(windowInsets.left, windowInsets.right, titleAlignment),
|
|
75
|
+
titleStyle,
|
|
76
|
+
]}
|
|
77
|
+
pointerEvents={isCustomTitle(title) ? "box-none" : "none"}
|
|
78
|
+
>
|
|
79
|
+
{isTextTitle(title)
|
|
80
|
+
? String(title).trim().length > 0 && (
|
|
81
|
+
<Text
|
|
82
|
+
style={styles.title}
|
|
83
|
+
maxFontSizeMultiplier={theme.typography.variants["title-md"].maxFontSizeMultiplier}
|
|
84
|
+
>
|
|
85
|
+
{title}
|
|
86
|
+
</Text>
|
|
87
|
+
)
|
|
88
|
+
: title}
|
|
89
|
+
</Animated.View>
|
|
90
|
+
{(trailing != null || dismissAction === "close") && (
|
|
91
|
+
<Toolbar style={styles.trailing}>
|
|
92
|
+
{dismissAction === "close" && dismiss}
|
|
93
|
+
{trailing}
|
|
94
|
+
</Toolbar>
|
|
95
|
+
)}
|
|
96
|
+
</View>
|
|
97
|
+
</ScrollToTopGuard>
|
|
80
98
|
);
|
|
81
99
|
}
|
|
82
100
|
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { useEffect } from "react";
|
|
2
|
-
import { Keyboard, Platform } from "react-native";
|
|
2
|
+
import { Keyboard, Platform, View } from "react-native";
|
|
3
3
|
|
|
4
4
|
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
|
|
5
5
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
|
6
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
6
7
|
|
|
7
8
|
import type { ToastId, ToastItem, ToastManager, ToastPlacement, ToastProviderProps } from "../types";
|
|
8
9
|
import { ToastAnimatedItem } from "./ToastAnimatedItem";
|
|
@@ -79,26 +80,43 @@ export function ToastViewport({ placement, toasts, manager, maxVisibleToasts, of
|
|
|
79
80
|
keyboardStyle,
|
|
80
81
|
]}
|
|
81
82
|
>
|
|
82
|
-
{
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
83
|
+
<View pointerEvents="box-none" style={styles.stack}>
|
|
84
|
+
{toasts.map((toast, index) => (
|
|
85
|
+
<ToastAnimatedItem
|
|
86
|
+
key={toast.id}
|
|
87
|
+
heights={heights}
|
|
88
|
+
id={toast.id}
|
|
89
|
+
index={index}
|
|
90
|
+
maxVisibleToasts={maxVisibleToasts}
|
|
91
|
+
placement={placement}
|
|
92
|
+
total={toasts.length}
|
|
93
|
+
frontId={frontToast.id}
|
|
94
|
+
>
|
|
95
|
+
{toast.component({
|
|
96
|
+
id: toast.id,
|
|
97
|
+
index,
|
|
98
|
+
hide: manager.hide,
|
|
99
|
+
show: manager.show,
|
|
100
|
+
})}
|
|
101
|
+
</ToastAnimatedItem>
|
|
102
|
+
))}
|
|
103
|
+
</View>
|
|
101
104
|
</Animated.View>
|
|
102
105
|
</ToastOverlay>
|
|
103
106
|
);
|
|
104
107
|
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Width of the toast stack from the `sm` breakpoint up. On phones the stack
|
|
111
|
+
* stretches edge to edge; on wider viewports it anchors to the leading edge at
|
|
112
|
+
* a fixed width, matching Material's large-screen snackbar guidance and the
|
|
113
|
+
* 400dp width most design systems ship for corner-anchored toasts.
|
|
114
|
+
*/
|
|
115
|
+
const TOAST_WIDE_WIDTH = 400;
|
|
116
|
+
|
|
117
|
+
const styles = StyleSheet.create({
|
|
118
|
+
stack: {
|
|
119
|
+
alignSelf: "flex-start",
|
|
120
|
+
width: { xs: "100%", sm: TOAST_WIDE_WIDTH },
|
|
121
|
+
},
|
|
122
|
+
});
|