react-native-terra-ui 0.8.1 → 0.9.0
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 +15 -0
- package/lib/module/components/screen/Screen.js +54 -4
- package/lib/module/components/screen/Screen.js.map +1 -1
- package/lib/module/components/screen/ScreenContext.js +3 -1
- package/lib/module/components/screen/ScreenContext.js.map +1 -1
- package/lib/module/components/screen/ScreenList.js +10 -2
- package/lib/module/components/screen/ScreenList.js.map +1 -1
- package/lib/module/components/screen/ScreenScrollView.js +8 -2
- package/lib/module/components/screen/ScreenScrollView.js.map +1 -1
- package/lib/module/components/screen/parts/ScreenBottomInset.android.js +42 -0
- package/lib/module/components/screen/parts/ScreenBottomInset.android.js.map +1 -0
- package/lib/module/components/screen/parts/ScreenBottomInset.js +37 -0
- package/lib/module/components/screen/parts/ScreenBottomInset.js.map +1 -0
- package/lib/typescript/src/components/screen/Screen.d.ts +21 -5
- package/lib/typescript/src/components/screen/Screen.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/ScreenContext.d.ts +14 -1
- package/lib/typescript/src/components/screen/ScreenContext.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/ScreenList.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/ScreenScrollView.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/parts/ScreenBottomInset.android.d.ts +11 -0
- package/lib/typescript/src/components/screen/parts/ScreenBottomInset.android.d.ts.map +1 -0
- package/lib/typescript/src/components/screen/parts/ScreenBottomInset.d.ts +17 -0
- package/lib/typescript/src/components/screen/parts/ScreenBottomInset.d.ts.map +1 -0
- package/package.json +1 -1
- package/src/components/screen/Screen.tsx +73 -6
- package/src/components/screen/ScreenContext.tsx +16 -0
- package/src/components/screen/ScreenList.tsx +14 -1
- package/src/components/screen/ScreenScrollView.tsx +15 -1
- package/src/components/screen/parts/ScreenBottomInset.android.tsx +35 -0
- package/src/components/screen/parts/ScreenBottomInset.tsx +29 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.9.0](https://github.com/earthlin9/react-native-terra-ui/compare/v0.8.1...v0.9.0) (2026-09-07)
|
|
4
|
+
|
|
5
|
+
### ⚠ BREAKING CHANGES
|
|
6
|
+
|
|
7
|
+
* **ui:** scroll content draws beneath the bottom safe area instead
|
|
8
|
+
of stopping above it. A screen that added its own bottom clearance for a
|
|
9
|
+
tab bar should drop it, or the allowance is counted twice. Omit "bottom"
|
|
10
|
+
from `safeArea` to reserve no room for the bar at all and supply clearance
|
|
11
|
+
through `extraBottomPadding`.
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
|
|
15
|
+
* **showcase:** add native tab bar for components and blocks ([8e7f07f](https://github.com/earthlin9/react-native-terra-ui/commit/8e7f07f92b8a0eec76545ad6827ce2a6f04e5357))
|
|
16
|
+
* **ui:** [screen] hand the bottom safe area to the scroll container ([844869b](https://github.com/earthlin9/react-native-terra-ui/commit/844869b02f5488c8d545aab8c7e60dbf0e065a1a))
|
|
17
|
+
|
|
3
18
|
## [0.8.1](https://github.com/earthlin9/react-native-terra-ui/compare/v0.8.0...v0.8.1) (2026-09-07)
|
|
4
19
|
|
|
5
20
|
### Features
|
|
@@ -42,6 +42,40 @@ function ScreenHeader({
|
|
|
42
42
|
}
|
|
43
43
|
ScreenHeader.displayName = "Screen.Header";
|
|
44
44
|
|
|
45
|
+
/**
|
|
46
|
+
* Whether this child is a vertical scroll container that can pad its own bottom
|
|
47
|
+
* inset. A horizontal one cannot: bottom padding does nothing for it, so the
|
|
48
|
+
* frame keeps that edge.
|
|
49
|
+
*/
|
|
50
|
+
function ownsBottomInset(child) {
|
|
51
|
+
if (child.props.horizontal) return false;
|
|
52
|
+
if (child.type === ScreenScrollView || child.type === ScreenList) return true;
|
|
53
|
+
// Fast Refresh can retain an older function identity in existing child elements.
|
|
54
|
+
const {
|
|
55
|
+
displayName
|
|
56
|
+
} = child.type;
|
|
57
|
+
return displayName === "Screen.ScrollView" || displayName === "Screen.List";
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Whether the screen has such a container among its children. Inspects fragments,
|
|
62
|
+
* but does not execute arbitrary child components — a container nested inside one
|
|
63
|
+
* is not found, and the frame keeps the bottom edge.
|
|
64
|
+
*/
|
|
65
|
+
function hasScrollContainerOwningBottom(children) {
|
|
66
|
+
let found = false;
|
|
67
|
+
Children.forEach(children, child => {
|
|
68
|
+
if (found) return;
|
|
69
|
+
if (! /*#__PURE__*/isValidElement(child)) return;
|
|
70
|
+
if (child.type === Fragment) {
|
|
71
|
+
found = hasScrollContainerOwningBottom(child.props.children);
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
found = ownsBottomInset(child);
|
|
75
|
+
});
|
|
76
|
+
return found;
|
|
77
|
+
}
|
|
78
|
+
|
|
45
79
|
/** Inspect fragments, but do not execute arbitrary child components. */
|
|
46
80
|
function hasScreenHeader(children) {
|
|
47
81
|
let found = false;
|
|
@@ -71,6 +105,19 @@ const ScreenBase = /*#__PURE__*/forwardRef(function Screen({
|
|
|
71
105
|
const hasHeader = useMemo(() => hasScreenHeader(children), [children]);
|
|
72
106
|
const resolvedMargins = contentPadding ?? margins ?? (hasMargins === false ? "none" : "all");
|
|
73
107
|
const edges = useMemo(() => resolveSafeAreaEdges(safeArea), [safeArea]);
|
|
108
|
+
/*
|
|
109
|
+
The bottom edge goes to the scroll container when there is one to take it.
|
|
110
|
+
Applied to the frame, the bottom inset shrinks the scroll viewport, so content
|
|
111
|
+
stops above a tab bar rather than passing beneath it — and on iOS that inset
|
|
112
|
+
includes the bar itself, which UIKit folds into a tab screen's safe area. The
|
|
113
|
+
container reaches the same resting position by padding the end of its content
|
|
114
|
+
instead, which is how the platform's own content-inset adjustment behaves.
|
|
115
|
+
*/
|
|
116
|
+
const contentOwnsBottomInset = useMemo(() => edges.bottom && hasScrollContainerOwningBottom(children), [edges.bottom, children]);
|
|
117
|
+
const frameEdges = useMemo(() => contentOwnsBottomInset ? {
|
|
118
|
+
...edges,
|
|
119
|
+
bottom: false
|
|
120
|
+
} : edges, [contentOwnsBottomInset, edges]);
|
|
74
121
|
const {
|
|
75
122
|
theme
|
|
76
123
|
} = useUnistyles();
|
|
@@ -83,10 +130,11 @@ const ScreenBase = /*#__PURE__*/forwardRef(function Screen({
|
|
|
83
130
|
background: resolvedBackground,
|
|
84
131
|
contentPadding: resolvedMargins,
|
|
85
132
|
safeArea: safeArea,
|
|
133
|
+
contentOwnsBottomInset: contentOwnsBottomInset,
|
|
86
134
|
hasHeader: hasHeader,
|
|
87
135
|
children: /*#__PURE__*/_jsx(ScreenHeaderAppearanceProvider, {
|
|
88
136
|
children: /*#__PURE__*/_jsx(ScreenFrame, {
|
|
89
|
-
edges:
|
|
137
|
+
edges: frameEdges,
|
|
90
138
|
children: /*#__PURE__*/_jsx(PortalProvider, {
|
|
91
139
|
children: children
|
|
92
140
|
})
|
|
@@ -104,9 +152,11 @@ ScreenBase.List = ScreenList;
|
|
|
104
152
|
* Themed screen root with shared scroll state and a local header portal.
|
|
105
153
|
*
|
|
106
154
|
* Pair a `Screen.Header` child with one primary `Screen.ScrollView`
|
|
107
|
-
* or `Screen.List`. The root applies safe-area clearance to all children
|
|
108
|
-
*
|
|
109
|
-
* the
|
|
155
|
+
* or `Screen.List`. The root applies safe-area clearance to all children, except
|
|
156
|
+
* the bottom edge when that primary container is vertical — it pads that inset
|
|
157
|
+
* into the end of its own content instead, so content scrolls under a bottom bar
|
|
158
|
+
* rather than stopping above it. Scroll containers add themed content padding and
|
|
159
|
+
* header clearance. The ref targets the root View, not the scroll container.
|
|
110
160
|
*
|
|
111
161
|
* @example
|
|
112
162
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Children","Fragment","forwardRef","isValidElement","useMemo","StyleSheet","useUnistyles","resolveThemeColor","PortalProvider","ScreenFrame","ScreenHeaderAppearanceProvider","ScreenHeaderAppearanceSlot","ScreenScrollProvider","ScreenFlatList","ScreenList","ScreenScrollView","resolveSafeAreaEdges","jsx","_jsx","ScreenHeader","children","as","rest","Component","displayName","
|
|
1
|
+
{"version":3,"names":["Children","Fragment","forwardRef","isValidElement","useMemo","StyleSheet","useUnistyles","resolveThemeColor","PortalProvider","ScreenFrame","ScreenHeaderAppearanceProvider","ScreenHeaderAppearanceSlot","ScreenScrollProvider","ScreenFlatList","ScreenList","ScreenScrollView","resolveSafeAreaEdges","jsx","_jsx","ScreenHeader","children","as","rest","Component","displayName","ownsBottomInset","child","props","horizontal","type","hasScrollContainerOwningBottom","found","forEach","hasScreenHeader","ScreenBase","Screen","background","contentPadding","safeArea","margins","hasMargins","inTabView","_inTabView","style","ref","hasHeader","resolvedMargins","edges","contentOwnsBottomInset","bottom","frameEdges","theme","resolvedBackground","color","View","styles","container","Header","ScrollView","FlatList","List","create","backgroundColor","flex"],"sourceRoot":"../../../../src","sources":["components/screen/Screen.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -23,6 +23,7 @@ export function ScreenScrollProvider({
|
|
|
23
23
|
children,
|
|
24
24
|
contentPadding = "all",
|
|
25
25
|
safeArea = "auto",
|
|
26
|
+
contentOwnsBottomInset = false,
|
|
26
27
|
hasHeader = false
|
|
27
28
|
}) {
|
|
28
29
|
const scrollY = useSharedValue(0);
|
|
@@ -43,6 +44,7 @@ export function ScreenScrollProvider({
|
|
|
43
44
|
background,
|
|
44
45
|
contentPadding,
|
|
45
46
|
safeArea,
|
|
47
|
+
contentOwnsBottomInset,
|
|
46
48
|
margins: contentPadding,
|
|
47
49
|
hasHeader,
|
|
48
50
|
scrollY,
|
|
@@ -51,7 +53,7 @@ export function ScreenScrollProvider({
|
|
|
51
53
|
setHeaderCollapseHeight,
|
|
52
54
|
scrollRef,
|
|
53
55
|
scrollHandler
|
|
54
|
-
}), [background, contentPadding, safeArea, hasHeader, scrollY, headerCollapseHeight, headerSnapOffsets, setHeaderCollapseHeight, scrollRef, scrollHandler]);
|
|
56
|
+
}), [background, contentPadding, safeArea, contentOwnsBottomInset, hasHeader, scrollY, headerCollapseHeight, headerSnapOffsets, setHeaderCollapseHeight, scrollRef, scrollHandler]);
|
|
55
57
|
return /*#__PURE__*/_jsx(ScreenContext.Provider, {
|
|
56
58
|
value: value,
|
|
57
59
|
children: children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["createContext","useCallback","useContext","useMemo","useState","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","jsx","_jsx","SCREEN_HEADER_PORTAL_HOST","ScreenContext","ScreenScrollProvider","background","children","contentPadding","safeArea","hasHeader","scrollY","headerCollapseHeight","headerSnapOffsets","setHeaderSnapOffsets","scrollRef","setHeaderCollapseHeight","height","rounded","Math","round","value","undefined","scrollHandler","onScroll","event","contentOffset","y","margins","Provider","useScreen","context","Error"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenContext.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAkBC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEjG,SAIEC,cAAc,EACdC,wBAAwB,EACxBC,cAAc,QACT,yBAAyB;;AAIhC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGA;AACA,OAAO,MAAMC,yBAAyB,GAAG,eAAe;;AAExD;;
|
|
1
|
+
{"version":3,"names":["createContext","useCallback","useContext","useMemo","useState","useAnimatedRef","useAnimatedScrollHandler","useSharedValue","jsx","_jsx","SCREEN_HEADER_PORTAL_HOST","ScreenContext","ScreenScrollProvider","background","children","contentPadding","safeArea","contentOwnsBottomInset","hasHeader","scrollY","headerCollapseHeight","headerSnapOffsets","setHeaderSnapOffsets","scrollRef","setHeaderCollapseHeight","height","rounded","Math","round","value","undefined","scrollHandler","onScroll","event","contentOffset","y","margins","Provider","useScreen","context","Error"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenContext.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAkBC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEjG,SAIEC,cAAc,EACdC,wBAAwB,EACxBC,cAAc,QACT,yBAAyB;;AAIhC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGA;AACA,OAAO,MAAMC,yBAAyB,GAAG,eAAe;;AAExD;;AAmDA,OAAO,MAAMC,aAAa,gBAAGX,aAAa,CAA4B,IAAI,CAAC;;AAE3E;;AAeA;AACA;AACA;AACA;AACA,OAAO,SAASY,oBAAoBA,CAAC;EACnCC,UAAU,GAAG,aAAa;EAC1BC,QAAQ;EACRC,cAAc,GAAG,KAAK;EACtBC,QAAQ,GAAG,MAAM;EACjBC,sBAAsB,GAAG,KAAK;EAC9BC,SAAS,GAAG;AACa,CAAC,EAAE;EAC5B,MAAMC,OAAO,GAAGZ,cAAc,CAAC,CAAC,CAAC;EACjC,MAAMa,oBAAoB,GAAGb,cAAc,CAAC,CAAC,CAAC;EAC9C,MAAM,CAACc,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGlB,QAAQ,CAAW,CAAC;EACtE,MAAMmB,SAAS,GAAGlB,cAAc,CAAsB,CAAC;EAEvD,MAAMmB,uBAAuB,GAAGvB,WAAW,CACxCwB,MAAc,IAAK;IAClB,MAAMC,OAAO,GAAGC,IAAI,CAACC,KAAK,CAACH,MAAM,CAAC;IAClCL,oBAAoB,CAACS,KAAK,GAAGH,OAAO;IACpCJ,oBAAoB,CAACI,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,EAAEA,OAAO,CAAC,GAAGI,SAAS,CAAC;EAC9D,CAAC,EACD,CAACV,oBAAoB,CACvB,CAAC;EAED,MAAMW,aAAa,GAAGzB,wBAAwB,CAAC;IAC7C0B,QAAQ,EAAGC,KAAK,IAAK;MACnBd,OAAO,CAACU,KAAK,GAAGI,KAAK,CAACC,aAAa,CAACC,CAAC;IACvC;EACF,CAAC,CAAC;EAEF,MAAMN,KAAK,GAAG1B,OAAO,CACnB,OAAO;IACLU,UAAU;IACVE,cAAc;IACdC,QAAQ;IACRC,sBAAsB;IACtBmB,OAAO,EAAErB,cAAc;IACvBG,SAAS;IACTC,OAAO;IACPC,oBAAoB;IACpBC,iBAAiB;IACjBG,uBAAuB;IACvBD,SAAS;IACTQ;EACF,CAAC,CAAC,EACF,CACElB,UAAU,EACVE,cAAc,EACdC,QAAQ,EACRC,sBAAsB,EACtBC,SAAS,EACTC,OAAO,EACPC,oBAAoB,EACpBC,iBAAiB,EACjBG,uBAAuB,EACvBD,SAAS,EACTQ,aAAa,CAEjB,CAAC;EAED,oBAAOtB,IAAA,CAACE,aAAa,CAAC0B,QAAQ;IAACR,KAAK,EAAEA,KAAM;IAAAf,QAAA,EAAEA;EAAQ,CAAyB,CAAC;AAClF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASwB,SAASA,CAAA,EAAuB;EAC9C,MAAMC,OAAO,GAAGrC,UAAU,CAACS,aAAa,CAAC;EACzC,IAAI,CAAC4B,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,kDAAkD,CAAC;EACrE;EACA,OAAOD,OAAO;AAChB","ignoreList":[]}
|
|
@@ -9,6 +9,7 @@ import { resolveScreenPadding } from "../../theme/screen-padding.js";
|
|
|
9
9
|
import { PortalHost } from "../portal/index.js";
|
|
10
10
|
import { useScreenRef } from "./hooks/use-screen-ref.js";
|
|
11
11
|
import { useScreenScrollHandler } from "./hooks/use-screen-scroll-handler.js";
|
|
12
|
+
import { ScreenBottomInset } from "./parts/ScreenBottomInset";
|
|
12
13
|
import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder.js";
|
|
13
14
|
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext.js";
|
|
14
15
|
import { hasHorizontalPadding, hasVerticalPadding, renderListComponent } from "./utils.js";
|
|
@@ -59,8 +60,12 @@ const ScreenListBase = /*#__PURE__*/forwardRef(function ScreenList({
|
|
|
59
60
|
scrollHandler,
|
|
60
61
|
headerSnapOffsets,
|
|
61
62
|
contentPadding: screenPadding,
|
|
62
|
-
hasHeader
|
|
63
|
+
hasHeader,
|
|
64
|
+
contentOwnsBottomInset
|
|
63
65
|
} = useScreen();
|
|
66
|
+
// The root yields the bottom edge only to a vertical container, so a horizontal
|
|
67
|
+
// one here is a secondary container and must not pay the inset a second time.
|
|
68
|
+
const ownsBottomInset = contentOwnsBottomInset && !horizontal;
|
|
64
69
|
const mergedRef = useScreenRef(isDefaultFlatList ? scrollRef : undefined, ref);
|
|
65
70
|
const resolvedPadding = contentPadding ?? margins ?? screenPadding;
|
|
66
71
|
const resolvedLoading = isLoading ?? loading;
|
|
@@ -79,6 +84,9 @@ const ScreenListBase = /*#__PURE__*/forwardRef(function ScreenList({
|
|
|
79
84
|
})
|
|
80
85
|
}), renderListComponent(ListHeaderComponent)]
|
|
81
86
|
});
|
|
87
|
+
const footer = ownsBottomInset ? /*#__PURE__*/_jsxs(_Fragment, {
|
|
88
|
+
children: [renderListComponent(ListFooterComponent), /*#__PURE__*/_jsx(ScreenBottomInset, {})]
|
|
89
|
+
}) : ListFooterComponent;
|
|
82
90
|
return /*#__PURE__*/_jsx(AnimatedComponent, {
|
|
83
91
|
ref: mergedRef,
|
|
84
92
|
data: resolvedLoading ? [] : data,
|
|
@@ -92,7 +100,7 @@ const ScreenListBase = /*#__PURE__*/forwardRef(function ScreenList({
|
|
|
92
100
|
automaticallyAdjustsScrollIndicatorInsets: false,
|
|
93
101
|
contentContainerStyle: [styles.content(resolvedPadding, hasHeader, bottomInset, extraBottomPadding), contentContainerStyle],
|
|
94
102
|
ListHeaderComponent: header,
|
|
95
|
-
ListFooterComponent:
|
|
103
|
+
ListFooterComponent: footer,
|
|
96
104
|
ListEmptyComponent: placeholder ?? ListEmptyComponent,
|
|
97
105
|
showsVerticalScrollIndicator: false,
|
|
98
106
|
scrollEventThrottle: 16,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["forwardRef","useMemo","Animated","StyleSheet","resolveScreenPadding","PortalHost","useScreenRef","useScreenScrollHandler","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasHorizontalPadding","hasVerticalPadding","renderListComponent","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ScreenListBase","ScreenList","as","data","renderItem","style","contentContainerStyle","ListHeaderComponent","ListFooterComponent","ListEmptyComponent","horizontal","isLoading","loading","loadingContent","LoadingComponent","emptyContent","EmptyComponent","contentPadding","margins","bottomInset","extraBottomPadding","scrollHandler","externalScrollHandler","onScroll","rest","ref","isDefaultFlatList","undefined","FlatList","Component","AnimatedComponent","createAnimatedComponent","background","scrollRef","headerSnapOffsets","screenPadding","hasHeader","mergedRef","resolvedPadding","resolvedLoading","placeholder","isEmpty","length","composedScrollHandler","header","children","View","styles","headerWrapper","name","backgroundColor","contentInsetAdjustmentBehavior","automaticallyAdjustContentInsets","automaticallyAdjustsScrollIndicatorInsets","content","showsVerticalScrollIndicator","scrollEventThrottle","snapToOffsets","displayName","create","theme","runtime","padding","x","y","breakpoint","flexGrow","paddingTop","layout","height","paddingHorizontal","paddingBottom","uni__dependencies","marginHorizontal"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenList.tsx"],"mappings":";;;;AAAA,SAKEA,UAAU,EAIVC,OAAO,QACF,OAAO;AAGd,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,oBAAoB;AAC7B,SAASC,UAAU;AACnB,SAASC,YAAY;AACrB,SAASC,sBAAsB;AAC/B,SAASC,uBAAuB;AAChC,SAASC,yBAAyB,EAAEC,SAAS;AAE7C,SAASC,oBAAoB,EAAEC,kBAAkB,EAAEC,mBAAmB;;AAEtE;;AAKA;;AAgBA;;AAyBA;;AA+BA;;AAiBA;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAiBA,MAAMC,cAAc,
|
|
1
|
+
{"version":3,"names":["forwardRef","useMemo","Animated","StyleSheet","resolveScreenPadding","PortalHost","useScreenRef","useScreenScrollHandler","ScreenBottomInset","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasHorizontalPadding","hasVerticalPadding","renderListComponent","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ScreenListBase","ScreenList","as","data","renderItem","style","contentContainerStyle","ListHeaderComponent","ListFooterComponent","ListEmptyComponent","horizontal","isLoading","loading","loadingContent","LoadingComponent","emptyContent","EmptyComponent","contentPadding","margins","bottomInset","extraBottomPadding","scrollHandler","externalScrollHandler","onScroll","rest","ref","isDefaultFlatList","undefined","FlatList","Component","AnimatedComponent","createAnimatedComponent","background","scrollRef","headerSnapOffsets","screenPadding","hasHeader","contentOwnsBottomInset","ownsBottomInset","mergedRef","resolvedPadding","resolvedLoading","placeholder","isEmpty","length","composedScrollHandler","header","children","View","styles","headerWrapper","name","footer","backgroundColor","contentInsetAdjustmentBehavior","automaticallyAdjustContentInsets","automaticallyAdjustsScrollIndicatorInsets","content","showsVerticalScrollIndicator","scrollEventThrottle","snapToOffsets","displayName","create","theme","runtime","padding","x","y","breakpoint","flexGrow","paddingTop","layout","height","paddingHorizontal","paddingBottom","uni__dependencies","marginHorizontal"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenList.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,6 +8,7 @@ import { resolveScreenPadding } from "../../theme/screen-padding.js";
|
|
|
8
8
|
import { PortalHost } from "../portal/index.js";
|
|
9
9
|
import { useScreenRef } from "./hooks/use-screen-ref.js";
|
|
10
10
|
import { useScreenScrollHandler } from "./hooks/use-screen-scroll-handler.js";
|
|
11
|
+
import { ScreenBottomInset } from "./parts/ScreenBottomInset";
|
|
11
12
|
import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder.js";
|
|
12
13
|
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext.js";
|
|
13
14
|
import { hasHorizontalPadding, hasVerticalPadding } from "./utils.js";
|
|
@@ -56,8 +57,12 @@ export const ScreenScrollView = /*#__PURE__*/forwardRef(function ScreenScrollVie
|
|
|
56
57
|
scrollHandler,
|
|
57
58
|
contentPadding: screenPadding,
|
|
58
59
|
hasHeader,
|
|
59
|
-
background
|
|
60
|
+
background,
|
|
61
|
+
contentOwnsBottomInset
|
|
60
62
|
} = useScreen();
|
|
63
|
+
// The root yields the bottom edge only to a vertical container, so a horizontal
|
|
64
|
+
// one here is a secondary container and must not pay the inset a second time.
|
|
65
|
+
const ownsBottomInset = contentOwnsBottomInset && !horizontal;
|
|
61
66
|
const resolvedPadding = contentPadding ?? margins ?? screenPadding;
|
|
62
67
|
const mergedRef = useScreenRef(scrollRef, ref);
|
|
63
68
|
const placeholder = renderScreenPlaceholder({
|
|
@@ -89,9 +94,10 @@ export const ScreenScrollView = /*#__PURE__*/forwardRef(function ScreenScrollVie
|
|
|
89
94
|
}), /*#__PURE__*/_jsx(View, {
|
|
90
95
|
style: [styles.content(horizontal), contentStyle],
|
|
91
96
|
children: placeholder ?? children
|
|
92
|
-
})]
|
|
97
|
+
}), ownsBottomInset && /*#__PURE__*/_jsx(ScreenBottomInset, {})]
|
|
93
98
|
});
|
|
94
99
|
});
|
|
100
|
+
ScreenScrollView.displayName = "Screen.ScrollView";
|
|
95
101
|
const styles = StyleSheet.create((theme, runtime) => ({
|
|
96
102
|
scrollContent: (hasHeader, padding, extraBottomPadding) => {
|
|
97
103
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Children","forwardRef","Animated","StyleSheet","resolveScreenPadding","PortalHost","useScreenRef","useScreenScrollHandler","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasHorizontalPadding","hasVerticalPadding","jsx","_jsx","jsxs","_jsxs","ScreenScrollView","children","style","contentContainerStyle","contentStyle","scrollHandler","externalScrollHandler","onScroll","horizontal","isLoading","loading","loadingContent","LoadingComponent","emptyContent","EmptyComponent","contentPadding","margins","extraBottomPadding","isEmpty","rest","ref","scrollRef","screenPadding","hasHeader","background","resolvedPadding","mergedRef","placeholder","undefined","toArray","length","composedScrollHandler","ScrollView","backgroundColor","contentInsetAdjustmentBehavior","automaticallyAdjustContentInsets","automaticallyAdjustsScrollIndicatorInsets","showsVerticalScrollIndicator","scrollEventThrottle","styles","scrollContent","View","headerWrapper","name","content","create","theme","runtime","padding","x","y","breakpoint","flexGrow","paddingTop","layout","header","height","paddingHorizontal","paddingBottom","uni__dependencies","marginHorizontal","flexDirection"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenScrollView.tsx"],"mappings":";;;AAAA,SAASA,QAAQ,EAAqBC,UAAU,QAAwB,OAAO;AAG/E,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,oBAAoB;AAC7B,SAASC,UAAU;AACnB,SAASC,YAAY;AACrB,SAASC,sBAAsB;AAC/B,SAASC,uBAAuB;AAChC,SAASC,yBAAyB,EAAEC,SAAS;AAE7C,SAASC,oBAAoB,EAAEC,kBAAkB;;AAEjD;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,gBAAgB,
|
|
1
|
+
{"version":3,"names":["Children","forwardRef","Animated","StyleSheet","resolveScreenPadding","PortalHost","useScreenRef","useScreenScrollHandler","ScreenBottomInset","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasHorizontalPadding","hasVerticalPadding","jsx","_jsx","jsxs","_jsxs","ScreenScrollView","children","style","contentContainerStyle","contentStyle","scrollHandler","externalScrollHandler","onScroll","horizontal","isLoading","loading","loadingContent","LoadingComponent","emptyContent","EmptyComponent","contentPadding","margins","extraBottomPadding","isEmpty","rest","ref","scrollRef","screenPadding","hasHeader","background","contentOwnsBottomInset","ownsBottomInset","resolvedPadding","mergedRef","placeholder","undefined","toArray","length","composedScrollHandler","ScrollView","backgroundColor","contentInsetAdjustmentBehavior","automaticallyAdjustContentInsets","automaticallyAdjustsScrollIndicatorInsets","showsVerticalScrollIndicator","scrollEventThrottle","styles","scrollContent","View","headerWrapper","name","content","displayName","create","theme","runtime","padding","x","y","breakpoint","flexGrow","paddingTop","layout","header","height","paddingHorizontal","paddingBottom","uni__dependencies","marginHorizontal","flexDirection"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenScrollView.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
4
|
+
|
|
5
|
+
// Keep native codegen declarations outside the library's generated public types.
|
|
6
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
+
const {
|
|
8
|
+
SafeAreaView
|
|
9
|
+
} = require("react-native-screens/src/components/safe-area");
|
|
10
|
+
const BOTTOM_EDGE = {
|
|
11
|
+
top: false,
|
|
12
|
+
bottom: true,
|
|
13
|
+
left: false,
|
|
14
|
+
right: false
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Android's bottom safe area as scroll content — see the iOS file for why this
|
|
19
|
+
* is a native view rather than a measured inset.
|
|
20
|
+
*
|
|
21
|
+
* `insetType: "all"` is the same combination the Screen frame uses: system insets
|
|
22
|
+
* plus native interface insets, which is what carries a native tab bar. The frame
|
|
23
|
+
* leaves the bottom edge unconsumed when the content owns it, so this view still
|
|
24
|
+
* sees the inset and is the one to consume it.
|
|
25
|
+
*/
|
|
26
|
+
export function ScreenBottomInset() {
|
|
27
|
+
return /*#__PURE__*/_jsx(SafeAreaView, {
|
|
28
|
+
edges: BOTTOM_EDGE,
|
|
29
|
+
insetType: "all",
|
|
30
|
+
style: styles.spacer
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
const styles = StyleSheet.create(() => ({
|
|
34
|
+
// `flex: 0` cancels the `flex: 1` this SafeAreaView sets on itself, which would
|
|
35
|
+
// otherwise let the spacer eat the content container's growth.
|
|
36
|
+
spacer: {
|
|
37
|
+
flex: 0,
|
|
38
|
+
flexGrow: 0,
|
|
39
|
+
flexShrink: 0
|
|
40
|
+
}
|
|
41
|
+
}));
|
|
42
|
+
//# sourceMappingURL=ScreenBottomInset.android.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["StyleSheet","jsx","_jsx","SafeAreaView","require","BOTTOM_EDGE","top","bottom","left","right","ScreenBottomInset","edges","insetType","style","styles","spacer","create","flex","flexGrow","flexShrink"],"sourceRoot":"../../../../../src","sources":["components/screen/parts/ScreenBottomInset.android.tsx"],"mappings":";;AAGA,SAASA,UAAU,QAAQ,wBAAwB;;AAEnD;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAM;EAAEC;AAAa,CAAC,GAAGC,OAAO,CAAC,+CAA+C,CAO/E;AAED,MAAMC,WAAW,GAAG;EAAEC,GAAG,EAAE,KAAK;EAAEC,MAAM,EAAE,IAAI;EAAEC,IAAI,EAAE,KAAK;EAAEC,KAAK,EAAE;AAAM,CAAC;;AAE3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAClC,oBAAOR,IAAA,CAACC,YAAY;IAACQ,KAAK,EAAEN,WAAY;IAACO,SAAS,EAAC,KAAK;IAACC,KAAK,EAAEC,MAAM,CAACC;EAAO,CAAE,CAAC;AACnF;AAEA,MAAMD,MAAM,GAAGd,UAAU,CAACgB,MAAM,CAAC,OAAO;EACtC;EACA;EACAD,MAAM,EAAE;IAAEE,IAAI,EAAE,CAAC;IAAEC,QAAQ,EAAE,CAAC;IAAEC,UAAU,EAAE;EAAE;AAChD,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
4
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
const BOTTOM_EDGE = ["bottom"];
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* The bottom safe area as a piece of scroll content rather than frame padding.
|
|
10
|
+
*
|
|
11
|
+
* A scroll container that yields its bottom edge to the content (see
|
|
12
|
+
* `contentOwnsBottomInset`) keeps a full-bleed viewport, so its rows pass under
|
|
13
|
+
* a tab bar or home indicator instead of stopping above one. This spacer is what
|
|
14
|
+
* keeps the *end* of that content clear of the bar: an empty safe-area view whose
|
|
15
|
+
* own padding is its whole height.
|
|
16
|
+
*
|
|
17
|
+
* Deliberately a native safe-area view rather than a measured number. The inset
|
|
18
|
+
* that matters here includes bars this screen does not own — a native tab bar is
|
|
19
|
+
* a sibling view, not a window inset — and asking the platform for padding gets
|
|
20
|
+
* the same answer the frame would have applied, on both platforms, without a JS
|
|
21
|
+
* round trip through a value that lands a frame late.
|
|
22
|
+
*/
|
|
23
|
+
export function ScreenBottomInset() {
|
|
24
|
+
return /*#__PURE__*/_jsx(SafeAreaView, {
|
|
25
|
+
edges: BOTTOM_EDGE,
|
|
26
|
+
style: styles.spacer
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
const styles = StyleSheet.create(() => ({
|
|
30
|
+
// Height comes entirely from the inset, so the spacer must not flex with the
|
|
31
|
+
// content container's `flexGrow: 1`.
|
|
32
|
+
spacer: {
|
|
33
|
+
flexGrow: 0,
|
|
34
|
+
flexShrink: 0
|
|
35
|
+
}
|
|
36
|
+
}));
|
|
37
|
+
//# sourceMappingURL=ScreenBottomInset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SafeAreaView","StyleSheet","jsx","_jsx","BOTTOM_EDGE","ScreenBottomInset","edges","style","styles","spacer","create","flexGrow","flexShrink"],"sourceRoot":"../../../../../src","sources":["components/screen/parts/ScreenBottomInset.tsx"],"mappings":";;AAAA,SAASA,YAAY,QAAQ,gCAAgC;AAC7D,SAASC,UAAU,QAAQ,wBAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpD,MAAMC,WAAW,GAAG,CAAC,QAAQ,CAAU;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAA,EAAG;EAClC,oBAAOF,IAAA,CAACH,YAAY;IAACM,KAAK,EAAEF,WAAY;IAACG,KAAK,EAAEC,MAAM,CAACC;EAAO,CAAE,CAAC;AACnE;AAEA,MAAMD,MAAM,GAAGP,UAAU,CAACS,MAAM,CAAC,OAAO;EACtC;EACA;EACAD,MAAM,EAAE;IAAEE,QAAQ,EAAE,CAAC;IAAEC,UAAU,EAAE;EAAE;AACvC,CAAC,CAAC,CAAC","ignoreList":[]}
|
|
@@ -40,7 +40,10 @@ export interface ScreenProps extends ViewProps {
|
|
|
40
40
|
* @defaultValue "surface.canvas"
|
|
41
41
|
*/
|
|
42
42
|
background?: ColorToken;
|
|
43
|
-
/**
|
|
43
|
+
/**
|
|
44
|
+
* @deprecated Has no effect. A tab bar is part of the bottom safe area the
|
|
45
|
+
* scroll container already clears; nothing needs to declare it.
|
|
46
|
+
*/
|
|
44
47
|
inTabView?: boolean;
|
|
45
48
|
/**
|
|
46
49
|
* Axes that receive `layout.screen.padding` content padding in scroll containers.
|
|
@@ -48,7 +51,18 @@ export interface ScreenProps extends ViewProps {
|
|
|
48
51
|
* @defaultValue "all"
|
|
49
52
|
*/
|
|
50
53
|
contentPadding?: ScreenContentPadding;
|
|
51
|
-
/**
|
|
54
|
+
/**
|
|
55
|
+
* Native safe-area edges the screen protects. Applied once, at the root.
|
|
56
|
+
*
|
|
57
|
+
* The bottom edge is handed to the primary vertical scroll container when there
|
|
58
|
+
* is one: that container keeps a full-bleed viewport, so its content scrolls
|
|
59
|
+
* under a tab bar or home indicator and comes to rest clear of it. Every other
|
|
60
|
+
* edge, and the bottom of a screen with no such container, is padding on the
|
|
61
|
+
* root frame. Drop `"bottom"` from the list to reserve no room for the bar at
|
|
62
|
+
* all — see `extraBottomPadding` for adding your own.
|
|
63
|
+
*
|
|
64
|
+
* @defaultValue "auto"
|
|
65
|
+
*/
|
|
52
66
|
safeArea?: ScreenSafeAreaPolicy;
|
|
53
67
|
/** @deprecated Use contentPadding. */
|
|
54
68
|
margins?: ScreenMargins;
|
|
@@ -71,9 +85,11 @@ type ScreenComponent = ReturnType<typeof forwardRef<ComponentRef<typeof View>, S
|
|
|
71
85
|
* Themed screen root with shared scroll state and a local header portal.
|
|
72
86
|
*
|
|
73
87
|
* Pair a `Screen.Header` child with one primary `Screen.ScrollView`
|
|
74
|
-
* or `Screen.List`. The root applies safe-area clearance to all children
|
|
75
|
-
*
|
|
76
|
-
* the
|
|
88
|
+
* or `Screen.List`. The root applies safe-area clearance to all children, except
|
|
89
|
+
* the bottom edge when that primary container is vertical — it pads that inset
|
|
90
|
+
* into the end of its own content instead, so content scrolls under a bottom bar
|
|
91
|
+
* rather than stopping above it. Scroll containers add themed content padding and
|
|
92
|
+
* header clearance. The ref targets the root View, not the scroll container.
|
|
77
93
|
*
|
|
78
94
|
* @example
|
|
79
95
|
* ```tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,QAAQ,EACR,UAAU,EAEV,KAAK,iBAAiB,
|
|
1
|
+
{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,QAAQ,EACR,UAAU,EAEV,KAAK,iBAAiB,EAEtB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM/C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,YAAS,CAAC;AAG3G,qFAAqF;AACrF,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,QAAQ,IAAI,iBAAiB,CACxF;IACE;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAClD,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,iBAAS,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,QAAQ,EAAE,EAC7D,QAAQ,EACR,EAAE,EACF,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAOtB;kBAXQ,YAAY;;;AA+DrB,uFAAuF;AACvF,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,qFAAqF;IACrF,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAC;IAChC,sCAAsC;IACtC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,GAAG;IAC7F,2DAA2D;IAC3D,MAAM,EAAE,OAAO,YAAY,CAAC;IAC5B,6EAA6E;IAC7E,UAAU,EAAE,OAAO,gBAAgB,CAAC;IACpC,kEAAkE;IAClE,QAAQ,EAAE,OAAO,cAAc,CAAC;IAChC,sEAAsE;IACtE,IAAI,EAAE,OAAO,UAAU,CAAC;CACzB,CAAC;AA+DF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,MAAM,iBAAa,CAAC"}
|
|
@@ -14,6 +14,17 @@ export interface ScreenContextValue {
|
|
|
14
14
|
contentPadding: ScreenContentPadding;
|
|
15
15
|
/** Safe-area policy applied by the root; descendants must not reapply it. */
|
|
16
16
|
safeArea: ScreenSafeArea;
|
|
17
|
+
/**
|
|
18
|
+
* Whether the primary scroll container pads the bottom safe area itself.
|
|
19
|
+
*
|
|
20
|
+
* True when the policy protects the bottom edge *and* the root found a vertical
|
|
21
|
+
* scroll container to hand it to. The root then leaves that edge off the frame,
|
|
22
|
+
* so the container keeps a full-bleed viewport and its content passes under the
|
|
23
|
+
* bar; the container pays the inset back at the end of its content instead.
|
|
24
|
+
* False leaves the bottom to the frame, which is what a screen of plain children
|
|
25
|
+
* or a horizontal container needs.
|
|
26
|
+
*/
|
|
27
|
+
contentOwnsBottomInset: boolean;
|
|
17
28
|
/** @deprecated Use contentPadding. */
|
|
18
29
|
margins: ScreenContentPadding;
|
|
19
30
|
/** Whether a `Screen.Header` is present. Used by scroll containers to add top inset. */
|
|
@@ -50,6 +61,8 @@ export interface ScreenScrollProviderProps {
|
|
|
50
61
|
/** Which axes scroll containers pad with `layout.screen.padding`. Default `'all'`. */
|
|
51
62
|
contentPadding?: ScreenContentPadding;
|
|
52
63
|
safeArea?: ScreenSafeArea;
|
|
64
|
+
/** Whether the primary scroll container pads the bottom safe area. Default false. */
|
|
65
|
+
contentOwnsBottomInset?: boolean;
|
|
53
66
|
/** Whether a `Screen.Header` child is present. Default false. */
|
|
54
67
|
hasHeader?: boolean;
|
|
55
68
|
/** Resolved background color shared with scroll containers. */
|
|
@@ -59,7 +72,7 @@ export interface ScreenScrollProviderProps {
|
|
|
59
72
|
* Owns the screen's shared scroll ref, offset, snap offsets, and header collapse
|
|
60
73
|
* metrics. Scroll containers bind the ref via {@link useScreen}.
|
|
61
74
|
*/
|
|
62
|
-
export declare function ScreenScrollProvider({ background, children, contentPadding, safeArea, hasHeader, }: ScreenScrollProviderProps): import("react").JSX.Element;
|
|
75
|
+
export declare function ScreenScrollProvider({ background, children, contentPadding, safeArea, contentOwnsBottomInset, hasHeader, }: ScreenScrollProviderProps): import("react").JSX.Element;
|
|
63
76
|
/**
|
|
64
77
|
* Reads the nearest `Screen`'s configuration, shared scroll state, and ref.
|
|
65
78
|
* Read `scrollY.value` in Reanimated worklets to animate without React renders.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAC;AAElG,OAAO,QAAQ,EAAE,EACf,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAE/D,yDAAyD;AACzD,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AAEzD,gFAAgF;AAChF,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,cAAc,EAAE,oBAAoB,CAAC;IACrC,6EAA6E;IAC7E,QAAQ,EAAE,cAAc,CAAC;IACzB,sCAAsC;IACtC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,wFAAwF;IACxF,SAAS,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACxC,iGAAiG;IACjG,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,SAAS,EAAE,eAAe,CAAC;IAC3B,yDAAyD;IACzD,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/D,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,EAC1B,QAAQ,EACR,cAAsB,EACtB,QAAiB,EACjB,SAAiB,GAClB,EAAE,yBAAyB,+
|
|
1
|
+
{"version":3,"file":"ScreenContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAA8C,MAAM,OAAO,CAAC;AAElG,OAAO,QAAQ,EAAE,EACf,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC3B,KAAK,WAAW,EAIjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAEpE,6EAA6E;AAC7E,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;AAE/D,yDAAyD;AACzD,eAAO,MAAM,yBAAyB,kBAAkB,CAAC;AAEzD,gFAAgF;AAChF,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,cAAc,EAAE,oBAAoB,CAAC;IACrC,6EAA6E;IAC7E,QAAQ,EAAE,cAAc,CAAC;IACzB;;;;;;;;;OASG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC,sCAAsC;IACtC,OAAO,EAAE,oBAAoB,CAAC;IAC9B,wFAAwF;IACxF,SAAS,EAAE,OAAO,CAAC;IACnB,8EAA8E;IAC9E,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1C;;;OAGG;IACH,iBAAiB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACxC,iGAAiG;IACjG,uBAAuB,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD;;;;OAIG;IACH,SAAS,EAAE,eAAe,CAAC;IAC3B,yDAAyD;IACzD,aAAa,EAAE,sBAAsB,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/D,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,oDAAiD,CAAC;AAE5E,4DAA4D;AAC5D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,sFAAsF;IACtF,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,qFAAqF;IACrF,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,UAA0B,EAC1B,QAAQ,EACR,cAAsB,EACtB,QAAiB,EACjB,sBAA8B,EAC9B,SAAiB,GAClB,EAAE,yBAAyB,+BAoD3B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,IAAI,kBAAkB,CAM9C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAE1B,KAAK,WAAW,EAEhB,KAAK,YAAY,EAEjB,KAAK,aAAa,EAEnB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAQ,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ScreenList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenList.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAmB,KAAK,eAAe,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ScreenScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,EAAmB,KAAK,eAAe,EAAE,KAAK,SAAS,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAY3G,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAG3E,qFAAqF;AACrF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC,EAAE,qBAAqB;IACvG,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,gBAAgB,8MAsE5B,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Android's bottom safe area as scroll content — see the iOS file for why this
|
|
3
|
+
* is a native view rather than a measured inset.
|
|
4
|
+
*
|
|
5
|
+
* `insetType: "all"` is the same combination the Screen frame uses: system insets
|
|
6
|
+
* plus native interface insets, which is what carries a native tab bar. The frame
|
|
7
|
+
* leaves the bottom edge unconsumed when the content owns it, so this view still
|
|
8
|
+
* sees the inset and is the one to consume it.
|
|
9
|
+
*/
|
|
10
|
+
export declare function ScreenBottomInset(): import("react").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=ScreenBottomInset.android.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScreenBottomInset.android.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screen/parts/ScreenBottomInset.android.tsx"],"names":[],"mappings":"AAiBA;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,gCAEhC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The bottom safe area as a piece of scroll content rather than frame padding.
|
|
3
|
+
*
|
|
4
|
+
* A scroll container that yields its bottom edge to the content (see
|
|
5
|
+
* `contentOwnsBottomInset`) keeps a full-bleed viewport, so its rows pass under
|
|
6
|
+
* a tab bar or home indicator instead of stopping above one. This spacer is what
|
|
7
|
+
* keeps the *end* of that content clear of the bar: an empty safe-area view whose
|
|
8
|
+
* own padding is its whole height.
|
|
9
|
+
*
|
|
10
|
+
* Deliberately a native safe-area view rather than a measured number. The inset
|
|
11
|
+
* that matters here includes bars this screen does not own — a native tab bar is
|
|
12
|
+
* a sibling view, not a window inset — and asking the platform for padding gets
|
|
13
|
+
* the same answer the frame would have applied, on both platforms, without a JS
|
|
14
|
+
* round trip through a value that lands a frame late.
|
|
15
|
+
*/
|
|
16
|
+
export declare function ScreenBottomInset(): import("react").JSX.Element;
|
|
17
|
+
//# sourceMappingURL=ScreenBottomInset.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ScreenBottomInset.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screen/parts/ScreenBottomInset.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,gCAEhC"}
|
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
forwardRef,
|
|
8
8
|
isValidElement,
|
|
9
9
|
type PropsWithChildren,
|
|
10
|
+
type ReactElement,
|
|
10
11
|
type ReactNode,
|
|
11
12
|
useMemo,
|
|
12
13
|
} from "react";
|
|
@@ -64,6 +65,38 @@ function ScreenHeader<T extends ElementType = typeof Fragment>({
|
|
|
64
65
|
}
|
|
65
66
|
ScreenHeader.displayName = "Screen.Header";
|
|
66
67
|
|
|
68
|
+
/**
|
|
69
|
+
* Whether this child is a vertical scroll container that can pad its own bottom
|
|
70
|
+
* inset. A horizontal one cannot: bottom padding does nothing for it, so the
|
|
71
|
+
* frame keeps that edge.
|
|
72
|
+
*/
|
|
73
|
+
function ownsBottomInset(child: ReactElement): boolean {
|
|
74
|
+
if ((child.props as { horizontal?: boolean }).horizontal) return false;
|
|
75
|
+
if (child.type === ScreenScrollView || child.type === ScreenList) return true;
|
|
76
|
+
// Fast Refresh can retain an older function identity in existing child elements.
|
|
77
|
+
const { displayName } = child.type as { displayName?: string };
|
|
78
|
+
return displayName === "Screen.ScrollView" || displayName === "Screen.List";
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Whether the screen has such a container among its children. Inspects fragments,
|
|
83
|
+
* but does not execute arbitrary child components — a container nested inside one
|
|
84
|
+
* is not found, and the frame keeps the bottom edge.
|
|
85
|
+
*/
|
|
86
|
+
function hasScrollContainerOwningBottom(children: ReactNode): boolean {
|
|
87
|
+
let found = false;
|
|
88
|
+
Children.forEach(children, (child) => {
|
|
89
|
+
if (found) return;
|
|
90
|
+
if (!isValidElement(child)) return;
|
|
91
|
+
if (child.type === Fragment) {
|
|
92
|
+
found = hasScrollContainerOwningBottom((child.props as PropsWithChildren).children);
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
found = ownsBottomInset(child);
|
|
96
|
+
});
|
|
97
|
+
return found;
|
|
98
|
+
}
|
|
99
|
+
|
|
67
100
|
/** Inspect fragments, but do not execute arbitrary child components. */
|
|
68
101
|
function hasScreenHeader(children: ReactNode): boolean {
|
|
69
102
|
let found = false;
|
|
@@ -91,7 +124,10 @@ export interface ScreenProps extends ViewProps {
|
|
|
91
124
|
* @defaultValue "surface.canvas"
|
|
92
125
|
*/
|
|
93
126
|
background?: ColorToken;
|
|
94
|
-
/**
|
|
127
|
+
/**
|
|
128
|
+
* @deprecated Has no effect. A tab bar is part of the bottom safe area the
|
|
129
|
+
* scroll container already clears; nothing needs to declare it.
|
|
130
|
+
*/
|
|
95
131
|
inTabView?: boolean;
|
|
96
132
|
/**
|
|
97
133
|
* Axes that receive `layout.screen.padding` content padding in scroll containers.
|
|
@@ -99,7 +135,18 @@ export interface ScreenProps extends ViewProps {
|
|
|
99
135
|
* @defaultValue "all"
|
|
100
136
|
*/
|
|
101
137
|
contentPadding?: ScreenContentPadding;
|
|
102
|
-
/**
|
|
138
|
+
/**
|
|
139
|
+
* Native safe-area edges the screen protects. Applied once, at the root.
|
|
140
|
+
*
|
|
141
|
+
* The bottom edge is handed to the primary vertical scroll container when there
|
|
142
|
+
* is one: that container keeps a full-bleed viewport, so its content scrolls
|
|
143
|
+
* under a tab bar or home indicator and comes to rest clear of it. Every other
|
|
144
|
+
* edge, and the bottom of a screen with no such container, is padding on the
|
|
145
|
+
* root frame. Drop `"bottom"` from the list to reserve no room for the bar at
|
|
146
|
+
* all — see `extraBottomPadding` for adding your own.
|
|
147
|
+
*
|
|
148
|
+
* @defaultValue "auto"
|
|
149
|
+
*/
|
|
103
150
|
safeArea?: ScreenSafeAreaPolicy;
|
|
104
151
|
/** @deprecated Use contentPadding. */
|
|
105
152
|
margins?: ScreenMargins;
|
|
@@ -137,6 +184,23 @@ const ScreenBase = forwardRef<ComponentRef<typeof View>, ScreenProps>(function S
|
|
|
137
184
|
const hasHeader = useMemo(() => hasScreenHeader(children), [children]);
|
|
138
185
|
const resolvedMargins = contentPadding ?? margins ?? (hasMargins === false ? "none" : "all");
|
|
139
186
|
const edges = useMemo(() => resolveSafeAreaEdges(safeArea), [safeArea]);
|
|
187
|
+
/*
|
|
188
|
+
The bottom edge goes to the scroll container when there is one to take it.
|
|
189
|
+
|
|
190
|
+
Applied to the frame, the bottom inset shrinks the scroll viewport, so content
|
|
191
|
+
stops above a tab bar rather than passing beneath it — and on iOS that inset
|
|
192
|
+
includes the bar itself, which UIKit folds into a tab screen's safe area. The
|
|
193
|
+
container reaches the same resting position by padding the end of its content
|
|
194
|
+
instead, which is how the platform's own content-inset adjustment behaves.
|
|
195
|
+
*/
|
|
196
|
+
const contentOwnsBottomInset = useMemo(
|
|
197
|
+
() => edges.bottom && hasScrollContainerOwningBottom(children),
|
|
198
|
+
[edges.bottom, children]
|
|
199
|
+
);
|
|
200
|
+
const frameEdges = useMemo(
|
|
201
|
+
() => (contentOwnsBottomInset ? { ...edges, bottom: false } : edges),
|
|
202
|
+
[contentOwnsBottomInset, edges]
|
|
203
|
+
);
|
|
140
204
|
const { theme } = useUnistyles();
|
|
141
205
|
const resolvedBackground = resolveThemeColor(background, theme) ?? theme.color["surface.canvas"];
|
|
142
206
|
|
|
@@ -146,10 +210,11 @@ const ScreenBase = forwardRef<ComponentRef<typeof View>, ScreenProps>(function S
|
|
|
146
210
|
background={resolvedBackground}
|
|
147
211
|
contentPadding={resolvedMargins}
|
|
148
212
|
safeArea={safeArea}
|
|
213
|
+
contentOwnsBottomInset={contentOwnsBottomInset}
|
|
149
214
|
hasHeader={hasHeader}
|
|
150
215
|
>
|
|
151
216
|
<ScreenHeaderAppearanceProvider>
|
|
152
|
-
<ScreenFrame edges={
|
|
217
|
+
<ScreenFrame edges={frameEdges}>
|
|
153
218
|
<PortalProvider>{children}</PortalProvider>
|
|
154
219
|
</ScreenFrame>
|
|
155
220
|
</ScreenHeaderAppearanceProvider>
|
|
@@ -167,9 +232,11 @@ ScreenBase.List = ScreenList;
|
|
|
167
232
|
* Themed screen root with shared scroll state and a local header portal.
|
|
168
233
|
*
|
|
169
234
|
* Pair a `Screen.Header` child with one primary `Screen.ScrollView`
|
|
170
|
-
* or `Screen.List`. The root applies safe-area clearance to all children
|
|
171
|
-
*
|
|
172
|
-
* the
|
|
235
|
+
* or `Screen.List`. The root applies safe-area clearance to all children, except
|
|
236
|
+
* the bottom edge when that primary container is vertical — it pads that inset
|
|
237
|
+
* into the end of its own content instead, so content scrolls under a bottom bar
|
|
238
|
+
* rather than stopping above it. Scroll containers add themed content padding and
|
|
239
|
+
* header clearance. The ref targets the root View, not the scroll container.
|
|
173
240
|
*
|
|
174
241
|
* @example
|
|
175
242
|
* ```tsx
|
|
@@ -26,6 +26,17 @@ export interface ScreenContextValue {
|
|
|
26
26
|
contentPadding: ScreenContentPadding;
|
|
27
27
|
/** Safe-area policy applied by the root; descendants must not reapply it. */
|
|
28
28
|
safeArea: ScreenSafeArea;
|
|
29
|
+
/**
|
|
30
|
+
* Whether the primary scroll container pads the bottom safe area itself.
|
|
31
|
+
*
|
|
32
|
+
* True when the policy protects the bottom edge *and* the root found a vertical
|
|
33
|
+
* scroll container to hand it to. The root then leaves that edge off the frame,
|
|
34
|
+
* so the container keeps a full-bleed viewport and its content passes under the
|
|
35
|
+
* bar; the container pays the inset back at the end of its content instead.
|
|
36
|
+
* False leaves the bottom to the frame, which is what a screen of plain children
|
|
37
|
+
* or a horizontal container needs.
|
|
38
|
+
*/
|
|
39
|
+
contentOwnsBottomInset: boolean;
|
|
29
40
|
/** @deprecated Use contentPadding. */
|
|
30
41
|
margins: ScreenContentPadding;
|
|
31
42
|
/** Whether a `Screen.Header` is present. Used by scroll containers to add top inset. */
|
|
@@ -65,6 +76,8 @@ export interface ScreenScrollProviderProps {
|
|
|
65
76
|
/** Which axes scroll containers pad with `layout.screen.padding`. Default `'all'`. */
|
|
66
77
|
contentPadding?: ScreenContentPadding;
|
|
67
78
|
safeArea?: ScreenSafeArea;
|
|
79
|
+
/** Whether the primary scroll container pads the bottom safe area. Default false. */
|
|
80
|
+
contentOwnsBottomInset?: boolean;
|
|
68
81
|
/** Whether a `Screen.Header` child is present. Default false. */
|
|
69
82
|
hasHeader?: boolean;
|
|
70
83
|
|
|
@@ -81,6 +94,7 @@ export function ScreenScrollProvider({
|
|
|
81
94
|
children,
|
|
82
95
|
contentPadding = "all",
|
|
83
96
|
safeArea = "auto",
|
|
97
|
+
contentOwnsBottomInset = false,
|
|
84
98
|
hasHeader = false,
|
|
85
99
|
}: ScreenScrollProviderProps) {
|
|
86
100
|
const scrollY = useSharedValue(0);
|
|
@@ -108,6 +122,7 @@ export function ScreenScrollProvider({
|
|
|
108
122
|
background,
|
|
109
123
|
contentPadding,
|
|
110
124
|
safeArea,
|
|
125
|
+
contentOwnsBottomInset,
|
|
111
126
|
margins: contentPadding,
|
|
112
127
|
hasHeader,
|
|
113
128
|
scrollY,
|
|
@@ -121,6 +136,7 @@ export function ScreenScrollProvider({
|
|
|
121
136
|
background,
|
|
122
137
|
contentPadding,
|
|
123
138
|
safeArea,
|
|
139
|
+
contentOwnsBottomInset,
|
|
124
140
|
hasHeader,
|
|
125
141
|
scrollY,
|
|
126
142
|
headerCollapseHeight,
|
|
@@ -18,6 +18,7 @@ import { resolveScreenPadding } from "#theme/screen-padding";
|
|
|
18
18
|
import { PortalHost } from "../portal";
|
|
19
19
|
import { useScreenRef } from "./hooks/use-screen-ref";
|
|
20
20
|
import { useScreenScrollHandler } from "./hooks/use-screen-scroll-handler";
|
|
21
|
+
import { ScreenBottomInset } from "./parts/ScreenBottomInset";
|
|
21
22
|
import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder";
|
|
22
23
|
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext";
|
|
23
24
|
import type { ScreenContentPadding, ScreenScrollableProps } from "./types";
|
|
@@ -172,7 +173,11 @@ const ScreenListBase = forwardRef(function ScreenList(
|
|
|
172
173
|
headerSnapOffsets,
|
|
173
174
|
contentPadding: screenPadding,
|
|
174
175
|
hasHeader,
|
|
176
|
+
contentOwnsBottomInset,
|
|
175
177
|
} = useScreen();
|
|
178
|
+
// The root yields the bottom edge only to a vertical container, so a horizontal
|
|
179
|
+
// one here is a secondary container and must not pay the inset a second time.
|
|
180
|
+
const ownsBottomInset = contentOwnsBottomInset && !horizontal;
|
|
176
181
|
const mergedRef = useScreenRef(isDefaultFlatList ? scrollRef : undefined, ref);
|
|
177
182
|
const resolvedPadding = contentPadding ?? margins ?? screenPadding;
|
|
178
183
|
const resolvedLoading = isLoading ?? loading;
|
|
@@ -191,6 +196,14 @@ const ScreenListBase = forwardRef(function ScreenList(
|
|
|
191
196
|
{renderListComponent(ListHeaderComponent)}
|
|
192
197
|
</>
|
|
193
198
|
);
|
|
199
|
+
const footer = ownsBottomInset ? (
|
|
200
|
+
<>
|
|
201
|
+
{renderListComponent(ListFooterComponent)}
|
|
202
|
+
<ScreenBottomInset />
|
|
203
|
+
</>
|
|
204
|
+
) : (
|
|
205
|
+
ListFooterComponent
|
|
206
|
+
);
|
|
194
207
|
|
|
195
208
|
return (
|
|
196
209
|
<AnimatedComponent
|
|
@@ -207,7 +220,7 @@ const ScreenListBase = forwardRef(function ScreenList(
|
|
|
207
220
|
contentContainerStyle,
|
|
208
221
|
]}
|
|
209
222
|
ListHeaderComponent={header}
|
|
210
|
-
ListFooterComponent={
|
|
223
|
+
ListFooterComponent={footer}
|
|
211
224
|
ListEmptyComponent={placeholder ?? ListEmptyComponent}
|
|
212
225
|
showsVerticalScrollIndicator={false}
|
|
213
226
|
scrollEventThrottle={16}
|
|
@@ -8,6 +8,7 @@ import { resolveScreenPadding } from "#theme/screen-padding";
|
|
|
8
8
|
import { PortalHost } from "../portal";
|
|
9
9
|
import { useScreenRef } from "./hooks/use-screen-ref";
|
|
10
10
|
import { useScreenScrollHandler } from "./hooks/use-screen-scroll-handler";
|
|
11
|
+
import { ScreenBottomInset } from "./parts/ScreenBottomInset";
|
|
11
12
|
import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder";
|
|
12
13
|
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext";
|
|
13
14
|
import type { ScreenContentPadding, ScreenScrollableProps } from "./types";
|
|
@@ -64,7 +65,17 @@ export const ScreenScrollView = forwardRef<ComponentRef<typeof ScrollView>, Scre
|
|
|
64
65
|
},
|
|
65
66
|
ref
|
|
66
67
|
) {
|
|
67
|
-
const {
|
|
68
|
+
const {
|
|
69
|
+
scrollRef,
|
|
70
|
+
scrollHandler,
|
|
71
|
+
contentPadding: screenPadding,
|
|
72
|
+
hasHeader,
|
|
73
|
+
background,
|
|
74
|
+
contentOwnsBottomInset,
|
|
75
|
+
} = useScreen();
|
|
76
|
+
// The root yields the bottom edge only to a vertical container, so a horizontal
|
|
77
|
+
// one here is a secondary container and must not pay the inset a second time.
|
|
78
|
+
const ownsBottomInset = contentOwnsBottomInset && !horizontal;
|
|
68
79
|
const resolvedPadding = contentPadding ?? margins ?? screenPadding;
|
|
69
80
|
const mergedRef = useScreenRef(scrollRef, ref);
|
|
70
81
|
const placeholder = renderScreenPlaceholder({
|
|
@@ -96,11 +107,14 @@ export const ScreenScrollView = forwardRef<ComponentRef<typeof ScrollView>, Scre
|
|
|
96
107
|
<PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
|
|
97
108
|
</View>
|
|
98
109
|
<View style={[styles.content(horizontal), contentStyle]}>{placeholder ?? children}</View>
|
|
110
|
+
{ownsBottomInset && <ScreenBottomInset />}
|
|
99
111
|
</Animated.ScrollView>
|
|
100
112
|
);
|
|
101
113
|
}
|
|
102
114
|
);
|
|
103
115
|
|
|
116
|
+
ScreenScrollView.displayName = "Screen.ScrollView";
|
|
117
|
+
|
|
104
118
|
const styles = StyleSheet.create((theme, runtime) => ({
|
|
105
119
|
scrollContent: (hasHeader: boolean, padding: ScreenContentPadding, extraBottomPadding: number) => {
|
|
106
120
|
const { x, y } = resolveScreenPadding(theme, runtime.breakpoint);
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { ComponentType } from "react";
|
|
2
|
+
import type { ViewProps } from "react-native";
|
|
3
|
+
|
|
4
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
5
|
+
|
|
6
|
+
// Keep native codegen declarations outside the library's generated public types.
|
|
7
|
+
const { SafeAreaView } = require("react-native-screens/src/components/safe-area") as {
|
|
8
|
+
SafeAreaView: ComponentType<
|
|
9
|
+
ViewProps & {
|
|
10
|
+
edges: Record<"top" | "bottom" | "left" | "right", boolean>;
|
|
11
|
+
insetType: "all";
|
|
12
|
+
}
|
|
13
|
+
>;
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
const BOTTOM_EDGE = { top: false, bottom: true, left: false, right: false };
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* Android's bottom safe area as scroll content — see the iOS file for why this
|
|
20
|
+
* is a native view rather than a measured inset.
|
|
21
|
+
*
|
|
22
|
+
* `insetType: "all"` is the same combination the Screen frame uses: system insets
|
|
23
|
+
* plus native interface insets, which is what carries a native tab bar. The frame
|
|
24
|
+
* leaves the bottom edge unconsumed when the content owns it, so this view still
|
|
25
|
+
* sees the inset and is the one to consume it.
|
|
26
|
+
*/
|
|
27
|
+
export function ScreenBottomInset() {
|
|
28
|
+
return <SafeAreaView edges={BOTTOM_EDGE} insetType="all" style={styles.spacer} />;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const styles = StyleSheet.create(() => ({
|
|
32
|
+
// `flex: 0` cancels the `flex: 1` this SafeAreaView sets on itself, which would
|
|
33
|
+
// otherwise let the spacer eat the content container's growth.
|
|
34
|
+
spacer: { flex: 0, flexGrow: 0, flexShrink: 0 },
|
|
35
|
+
}));
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
2
|
+
import { StyleSheet } from "react-native-unistyles";
|
|
3
|
+
|
|
4
|
+
const BOTTOM_EDGE = ["bottom"] as const;
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* The bottom safe area as a piece of scroll content rather than frame padding.
|
|
8
|
+
*
|
|
9
|
+
* A scroll container that yields its bottom edge to the content (see
|
|
10
|
+
* `contentOwnsBottomInset`) keeps a full-bleed viewport, so its rows pass under
|
|
11
|
+
* a tab bar or home indicator instead of stopping above one. This spacer is what
|
|
12
|
+
* keeps the *end* of that content clear of the bar: an empty safe-area view whose
|
|
13
|
+
* own padding is its whole height.
|
|
14
|
+
*
|
|
15
|
+
* Deliberately a native safe-area view rather than a measured number. The inset
|
|
16
|
+
* that matters here includes bars this screen does not own — a native tab bar is
|
|
17
|
+
* a sibling view, not a window inset — and asking the platform for padding gets
|
|
18
|
+
* the same answer the frame would have applied, on both platforms, without a JS
|
|
19
|
+
* round trip through a value that lands a frame late.
|
|
20
|
+
*/
|
|
21
|
+
export function ScreenBottomInset() {
|
|
22
|
+
return <SafeAreaView edges={BOTTOM_EDGE} style={styles.spacer} />;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const styles = StyleSheet.create(() => ({
|
|
26
|
+
// Height comes entirely from the inset, so the spacer must not flex with the
|
|
27
|
+
// content container's `flexGrow: 1`.
|
|
28
|
+
spacer: { flexGrow: 0, flexShrink: 0 },
|
|
29
|
+
}));
|