react-native-terra-ui 0.8.1 → 0.9.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/CHANGELOG.md +22 -0
- package/lib/module/components/screen/Screen.js +135 -25
- package/lib/module/components/screen/Screen.js.map +1 -1
- package/lib/module/components/screen/ScreenContext.js +7 -1
- package/lib/module/components/screen/ScreenContext.js.map +1 -1
- package/lib/module/components/screen/ScreenList.js +20 -4
- package/lib/module/components/screen/ScreenList.js.map +1 -1
- package/lib/module/components/screen/ScreenScrollView.js +18 -4
- package/lib/module/components/screen/ScreenScrollView.js.map +1 -1
- package/lib/module/components/screen/hooks/use-nested-container-warning.js +39 -0
- package/lib/module/components/screen/hooks/use-nested-container-warning.js.map +1 -0
- 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/module/components/screen/parts/ScreenFrame.js +1 -0
- package/lib/module/components/screen/parts/ScreenFrame.js.map +1 -1
- package/lib/typescript/src/components/screen/Screen.d.ts +27 -5
- package/lib/typescript/src/components/screen/Screen.d.ts.map +1 -1
- package/lib/typescript/src/components/screen/ScreenContext.d.ts +40 -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/hooks/use-nested-container-warning.d.ts +24 -0
- package/lib/typescript/src/components/screen/hooks/use-nested-container-warning.d.ts.map +1 -0
- 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/lib/typescript/src/components/screen/parts/ScreenFrame.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/screen/Screen.tsx +147 -16
- package/src/components/screen/ScreenContext.tsx +48 -0
- package/src/components/screen/ScreenList.tsx +23 -2
- package/src/components/screen/ScreenScrollView.tsx +24 -2
- package/src/components/screen/hooks/use-nested-container-warning.ts +40 -0
- package/src/components/screen/parts/ScreenBottomInset.android.tsx +35 -0
- package/src/components/screen/parts/ScreenBottomInset.tsx +29 -0
- package/src/components/screen/parts/ScreenFrame.tsx +8 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["useCallback","useContext","useState","Animated","StyleSheet","ScreenHeaderAppearanceContext","ScreenSafeArea","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ScreenFrame","children","edges","appearance","topInset","setTopInset","onLayout","event","nativeEvent","layout","y","View","style","styles","content","top","background","undefined","pointerEvents","topSafeArea","color","animatedStyle","create","flex","height","backgroundColor","position","left","right"],"sourceRoot":"../../../../../src","sources":["components/screen/parts/ScreenFrame.tsx"],"mappings":";;;AAAA,SAAiCA,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAGjF,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,QAAQ,wBAAwB;AAGnD,SAASC,6BAA6B;AACtC,SAASC,cAAc;AAA2B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAElD,OAAO,SAASC,WAAWA,CAAC;EAAEC,QAAQ;EAAEC;AAAyD,CAAC,EAAE;EAClG,MAAMC,UAAU,GAAGf,UAAU,CAACI,6BAA6B,CAAC;EAC5D,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAMiB,QAAQ,GAAGnB,WAAW,CAAEoB,KAAwB,IAAK;IACzD;IACAF,WAAW,CAACE,KAAK,CAACC,WAAW,CAACC,MAAM,CAACC,CAAC,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEX,KAAA,CAAAF,SAAA;IAAAI,QAAA,gBACEN,IAAA,CAACF,cAAc;MAACS,KAAK,EAAEA,KAAM;MAAAD,QAAA,
|
|
1
|
+
{"version":3,"names":["useCallback","useContext","useState","Animated","StyleSheet","ScreenHeaderAppearanceContext","ScreenSafeArea","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","ScreenFrame","children","edges","appearance","topInset","setTopInset","onLayout","event","nativeEvent","layout","y","View","collapsable","style","styles","content","top","background","undefined","pointerEvents","topSafeArea","color","animatedStyle","create","flex","height","backgroundColor","position","left","right"],"sourceRoot":"../../../../../src","sources":["components/screen/parts/ScreenFrame.tsx"],"mappings":";;;AAAA,SAAiCA,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAGjF,OAAOC,QAAQ,MAAM,yBAAyB;AAC9C,SAASC,UAAU,QAAQ,wBAAwB;AAGnD,SAASC,6BAA6B;AACtC,SAASC,cAAc;AAA2B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAElD,OAAO,SAASC,WAAWA,CAAC;EAAEC,QAAQ;EAAEC;AAAyD,CAAC,EAAE;EAClG,MAAMC,UAAU,GAAGf,UAAU,CAACI,6BAA6B,CAAC;EAC5D,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAGhB,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAMiB,QAAQ,GAAGnB,WAAW,CAAEoB,KAAwB,IAAK;IACzD;IACAF,WAAW,CAACE,KAAK,CAACC,WAAW,CAACC,MAAM,CAACC,CAAC,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,oBACEX,KAAA,CAAAF,SAAA;IAAAI,QAAA,gBACEN,IAAA,CAACF,cAAc;MAACS,KAAK,EAAEA,KAAM;MAAAD,QAAA,eAQ3BN,IAAA,CAACgB,IAAI;QAACC,WAAW,EAAE,KAAM;QAACC,KAAK,EAAEC,MAAM,CAACC,OAAQ;QAACT,QAAQ,EAAEA,QAAS;QAAAL,QAAA,EACjEA;MAAQ,CACL;IAAC,CACO,CAAC,EAChBC,KAAK,CAACc,GAAG,IAAIb,UAAU,EAAEc,UAAU,KAAKC,SAAS,iBAChDvB,IAAA,CAACL,QAAQ,CAACqB,IAAI;MACZQ,aAAa,EAAC,MAAM;MACpBN,KAAK,EAAE,CACLC,MAAM,CAACM,WAAW,CAAChB,QAAQ,EAAED,UAAU,CAACc,UAAU,CAACI,KAAK,CAAC,EACzDlB,UAAU,CAACc,UAAU,CAACK,aAAa;IACnC,CACH,CACF;EAAA,CACD,CAAC;AAEP;AAEA,MAAMR,MAAM,GAAGvB,UAAU,CAACgC,MAAM,CAAC,OAAO;EACtCR,OAAO,EAAE;IAAES,IAAI,EAAE;EAAE,CAAC;EACpBJ,WAAW,EAAEA,CAACK,MAAc,EAAEC,eAAuB,MAAM;IACzDC,QAAQ,EAAE,UAAU;IACpBX,GAAG,EAAE,CAAC;IACNY,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRJ,MAAM;IACNC;EACF,CAAC;AACH,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,24 @@ 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
|
+
* On iOS, a screen with no `Screen.Header` hands both vertical edges to UIKit's
|
|
65
|
+
* own content-inset adjustment instead: the bar above such a screen is a native
|
|
66
|
+
* navigation bar, and a native large title only collapses for a scroll view
|
|
67
|
+
* that fills the screen. Do not also pass `contentInsetAdjustmentBehavior` to
|
|
68
|
+
* the container there — the default already asks UIKit for it.
|
|
69
|
+
*
|
|
70
|
+
* @defaultValue "auto"
|
|
71
|
+
*/
|
|
52
72
|
safeArea?: ScreenSafeAreaPolicy;
|
|
53
73
|
/** @deprecated Use contentPadding. */
|
|
54
74
|
margins?: ScreenMargins;
|
|
@@ -71,9 +91,11 @@ type ScreenComponent = ReturnType<typeof forwardRef<ComponentRef<typeof View>, S
|
|
|
71
91
|
* Themed screen root with shared scroll state and a local header portal.
|
|
72
92
|
*
|
|
73
93
|
* 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
|
|
94
|
+
* or `Screen.List`. The root applies safe-area clearance to all children, except
|
|
95
|
+
* the bottom edge when that primary container is vertical — it pads that inset
|
|
96
|
+
* into the end of its own content instead, so content scrolls under a bottom bar
|
|
97
|
+
* rather than stopping above it. Scroll containers add themed content padding and
|
|
98
|
+
* header clearance. The ref targets the root View, not the scroll container.
|
|
77
99
|
*
|
|
78
100
|
* @example
|
|
79
101
|
* ```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,EAAY,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9D,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;;;;;;;;;;;;;;;;;OAiBG;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;AAgIF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,MAAM,iBAAa,CAAC"}
|
|
@@ -14,6 +14,39 @@ 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;
|
|
28
|
+
/**
|
|
29
|
+
* Whether the platform's own content-inset adjustment pays the vertical insets.
|
|
30
|
+
*
|
|
31
|
+
* True on an iOS screen with no `Screen.Header`: the navigation bar above such a
|
|
32
|
+
* screen is UIKit's, and only UIKit can inset a scroll view for one — a native
|
|
33
|
+
* large title resizes on every frame of its collapse, and it refuses to collapse
|
|
34
|
+
* at all for a scroll view that does not fill the screen. The frame therefore
|
|
35
|
+
* keeps no vertical edge, the container asks for
|
|
36
|
+
* `contentInsetAdjustmentBehavior: "automatic"` rather than `"never"`, and
|
|
37
|
+
* `contentOwnsBottomInset` stays false because UIKit pays that edge too.
|
|
38
|
+
*/
|
|
39
|
+
platformAdjustsInsets: boolean;
|
|
40
|
+
/**
|
|
41
|
+
* Whether this screen *would* hand its vertical insets to the platform, if it
|
|
42
|
+
* found a vertical scroll container among its children.
|
|
43
|
+
*
|
|
44
|
+
* Everything `platformAdjustsInsets` needs except the container itself. The two
|
|
45
|
+
* differ only when the container is nested inside another component, where the
|
|
46
|
+
* root cannot see it — which is a mistake on such a screen, and the difference
|
|
47
|
+
* is how a mounting container detects that it was the one missed.
|
|
48
|
+
*/
|
|
49
|
+
platformInsetsEligible: boolean;
|
|
17
50
|
/** @deprecated Use contentPadding. */
|
|
18
51
|
margins: ScreenContentPadding;
|
|
19
52
|
/** Whether a `Screen.Header` is present. Used by scroll containers to add top inset. */
|
|
@@ -50,6 +83,12 @@ export interface ScreenScrollProviderProps {
|
|
|
50
83
|
/** Which axes scroll containers pad with `layout.screen.padding`. Default `'all'`. */
|
|
51
84
|
contentPadding?: ScreenContentPadding;
|
|
52
85
|
safeArea?: ScreenSafeArea;
|
|
86
|
+
/** Whether the primary scroll container pads the bottom safe area. Default false. */
|
|
87
|
+
contentOwnsBottomInset?: boolean;
|
|
88
|
+
/** Whether the platform adjusts the scroll container's vertical insets. Default false. */
|
|
89
|
+
platformAdjustsInsets?: boolean;
|
|
90
|
+
/** Whether the screen qualifies for that, container aside. Default false. */
|
|
91
|
+
platformInsetsEligible?: boolean;
|
|
53
92
|
/** Whether a `Screen.Header` child is present. Default false. */
|
|
54
93
|
hasHeader?: boolean;
|
|
55
94
|
/** Resolved background color shared with scroll containers. */
|
|
@@ -59,7 +98,7 @@ export interface ScreenScrollProviderProps {
|
|
|
59
98
|
* Owns the screen's shared scroll ref, offset, snap offsets, and header collapse
|
|
60
99
|
* metrics. Scroll containers bind the ref via {@link useScreen}.
|
|
61
100
|
*/
|
|
62
|
-
export declare function ScreenScrollProvider({ background, children, contentPadding, safeArea, hasHeader, }: ScreenScrollProviderProps): import("react").JSX.Element;
|
|
101
|
+
export declare function ScreenScrollProvider({ background, children, contentPadding, safeArea, contentOwnsBottomInset, platformAdjustsInsets, platformInsetsEligible, hasHeader, }: ScreenScrollProviderProps): import("react").JSX.Element;
|
|
63
102
|
/**
|
|
64
103
|
* Reads the nearest `Screen`'s configuration, shared scroll state, and ref.
|
|
65
104
|
* 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;;;;;;;;;;OAUG;IACH,qBAAqB,EAAE,OAAO,CAAC;IAC/B;;;;;;;;OAQG;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,0FAA0F;IAC1F,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,6EAA6E;IAC7E,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,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAiB,GAClB,EAAE,yBAAyB,+BAwD3B;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":"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;AAavF,OAAO,KAAK,EAAwB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAG3E,oGAAoG;AACpG,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;CACf;AACD,iEAAiE;AACjE,KAAK,eAAe,GAAG,UAAU,CAC/B,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAC9D,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9B,MAAM,MAAM,mBAAmB,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,CAAC,CAAA;CAAE,CAAC;AAEjF,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE;IACnC,aAAa,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IACxC,OAAO,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;CACnC,KAAK,IAAI,CAAC;AAEX,KAAK,eAAe,GAAG,qBAAqB,GAAG;IAC7C,2GAA2G;IAC3G,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,oFAAoF;AACpF,KAAK,qBAAqB,CAAC,CAAC,IAAI,eAAe,GAC7C,IAAI,CACF,aAAa,CAAC,CAAC,CAAC,EACd,MAAM,eAAe,GACrB,MAAM,GACN,YAAY,GACZ,wBAAwB,GACxB,gCAAgC,CACnC,GAAG;IACF,0CAA0C;IAC1C,EAAE,CAAC,EAAE,OAAO,QAAQ,CAAC;IACrB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,IAAI,CAAC;IAC3B,wDAAwD;IACxD,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,8CAA8C;IAC9C,sBAAsB,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACvD,kEAAkE;IAClE,8BAA8B,CAAC,EAAE;QAC/B,iBAAiB,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACtE,sBAAsB,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC;KAChD,EAAE,CAAC;CACL,CAAC;AAEJ,sFAAsF;AACtF,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAAI,IAAI,CAC1C,aAAa,CAAC,CAAC,CAAC,EACd,OAAO,GACP,uBAAuB,GACvB,UAAU,GACV,qBAAqB,GACrB,qBAAqB,GACrB,oBAAoB,GACpB,YAAY,GACZ,qBAAqB,GACrB,gCAAgC,GAChC,kCAAkC,GAClC,2CAA2C,GAC3C,8BAA8B,GAC9B,eAAe,CAClB,GAAG;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,IAAI,CAAC;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,YAAY,GAAG,IAAI,CAAC;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CACnD,CAAC;AAEF,KAAK,WAAW,GACZ,MAAM,GACN,YAAY,GACZ,UAAU,GACV,uBAAuB,GACvB,qBAAqB,GACrB,qBAAqB,GACrB,oBAAoB,CAAC;AAEzB,sFAAsF;AACtF,MAAM,MAAM,qBAAqB,CAAC,CAAC,EAAE,EAAE,SAAS,WAAW,IAAI,eAAe,GAC5E,sBAAsB,CAAC,CAAC,CAAC,GACzB,IAAI,CAAC,wBAAwB,CAAC,EAAE,CAAC,EAAE,MAAM,eAAe,GAAG,MAAM,sBAAsB,CAAC,CAAC,CAAC,CAAC,GAAG;IAC5F,EAAE,EAAE,EAAE,GACJ,CAAC,EAAE,SAAS,OAAO,QAAQ,GACvB,KAAK,GACL,WAAW,SAAS,MAAM,wBAAwB,CAAC,EAAE,CAAC,GACpD,SAAS,CAAC,EAAE,SAAS,WAAW,CAAC,wBAAwB,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,GACpE,KAAK,SAAS,MAAM,qBAAqB,CAAC,EAAE,CAAC,GAC3C,OAAO,GACP,KAAK,GACP,KAAK,GACP,KAAK,CAAC,CAAC;IACf,GAAG,CAAC,EAAE,qBAAqB,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAEJ,iFAAiF;AACjF,MAAM,MAAM,eAAe,CACzB,CAAC,GAAG,OAAO,EACX,EAAE,SAAS,WAAW,GAAG,OAAO,QAAQ,IACtC,EAAE,SAAS,OAAO,QAAQ,GAAG,qBAAqB,CAAC,CAAC,CAAC,GAAG,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;AAEzF,UAAU,mBAAmB;IAC3B,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IACjF,CAAC,CAAC,EAAE,EAAE,SAAS,WAAW,EAAE,KAAK,EAAE,qBAAqB,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,YAAY,GAAG,IAAI,CAAC;IACtF,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA8GD;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU,EAAqB,mBAAmB,CAAC"}
|
|
@@ -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;AAa3G,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,8MA6E5B,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Warns, in development, when this container is the one the screen root failed
|
|
3
|
+
* to find.
|
|
4
|
+
*
|
|
5
|
+
* The root inspects its own children and fragments but does not execute
|
|
6
|
+
* component children, so a container rendered inside one is invisible to it (see
|
|
7
|
+
* `hasScrollContainerOwningBottom`). On a header-less iOS screen that changes
|
|
8
|
+
* behaviour rather than just bookkeeping: the frame pads the top edge, the scroll
|
|
9
|
+
* view no longer fills the screen, and UIKit stops collapsing the native large
|
|
10
|
+
* title — silently, with the screen otherwise looking correct.
|
|
11
|
+
*
|
|
12
|
+
* The container is the only place that can tell. `platformInsetsEligible` says
|
|
13
|
+
* the screen qualified; a container mounting while `platformAdjustsInsets` is
|
|
14
|
+
* false says the root never saw it. Both true together mean exactly this mistake,
|
|
15
|
+
* so there is nothing here to false-positive on: a screen with no scroll
|
|
16
|
+
* container at all never runs this hook, and a deliberate `safeArea` opt-out is
|
|
17
|
+
* not eligible in the first place.
|
|
18
|
+
*
|
|
19
|
+
* @param container Name to report, e.g. `"Screen.List"`.
|
|
20
|
+
* @param horizontal Whether this container scrolls horizontally; those are never
|
|
21
|
+
* candidates for the vertical insets and never warn.
|
|
22
|
+
*/
|
|
23
|
+
export declare function useNestedContainerWarning(container: string, horizontal: boolean): void;
|
|
24
|
+
//# sourceMappingURL=use-nested-container-warning.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-nested-container-warning.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screen/hooks/use-nested-container-warning.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,yBAAyB,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,GAAG,IAAI,CAatF"}
|
|
@@ -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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScreenFrame.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screen/parts/ScreenFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAMlF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAU,CAAC;AAIpD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,CAAC;IAAE,KAAK,EAAE,mBAAmB,CAAA;CAAE,CAAC,+
|
|
1
|
+
{"version":3,"file":"ScreenFrame.d.ts","sourceRoot":"","sources":["../../../../../../src/components/screen/parts/ScreenFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAqC,MAAM,OAAO,CAAC;AAMlF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAU,CAAC;AAIpD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,iBAAiB,CAAC;IAAE,KAAK,EAAE,mBAAmB,CAAA;CAAE,CAAC,+BAiCjG"}
|
package/package.json
CHANGED
|
@@ -7,12 +7,13 @@ 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";
|
|
13
|
-
import { View, type ViewProps } from "react-native";
|
|
14
|
+
import { Platform, View, type ViewProps } from "react-native";
|
|
14
15
|
|
|
15
|
-
import {
|
|
16
|
+
import { useUnistyles } from "react-native-unistyles";
|
|
16
17
|
|
|
17
18
|
import type { ColorToken } from "#theme/types";
|
|
18
19
|
import { resolveThemeColor } from "#utils/resolve-theme-color";
|
|
@@ -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,24 @@ 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
|
+
* On iOS, a screen with no `Screen.Header` hands both vertical edges to UIKit's
|
|
149
|
+
* own content-inset adjustment instead: the bar above such a screen is a native
|
|
150
|
+
* navigation bar, and a native large title only collapses for a scroll view
|
|
151
|
+
* that fills the screen. Do not also pass `contentInsetAdjustmentBehavior` to
|
|
152
|
+
* the container there — the default already asks UIKit for it.
|
|
153
|
+
*
|
|
154
|
+
* @defaultValue "auto"
|
|
155
|
+
*/
|
|
103
156
|
safeArea?: ScreenSafeAreaPolicy;
|
|
104
157
|
/** @deprecated Use contentPadding. */
|
|
105
158
|
margins?: ScreenMargins;
|
|
@@ -137,19 +190,102 @@ const ScreenBase = forwardRef<ComponentRef<typeof View>, ScreenProps>(function S
|
|
|
137
190
|
const hasHeader = useMemo(() => hasScreenHeader(children), [children]);
|
|
138
191
|
const resolvedMargins = contentPadding ?? margins ?? (hasMargins === false ? "none" : "all");
|
|
139
192
|
const edges = useMemo(() => resolveSafeAreaEdges(safeArea), [safeArea]);
|
|
193
|
+
const hasVerticalScrollContainer = useMemo(() => hasScrollContainerOwningBottom(children), [children]);
|
|
194
|
+
/*
|
|
195
|
+
A screen with no `Screen.Header` wears UIKit's own navigation bar, and only
|
|
196
|
+
UIKit can inset a scroll view for one.
|
|
197
|
+
|
|
198
|
+
A native large title changes height on every frame of its collapse, and the
|
|
199
|
+
bar is a sibling view this screen cannot measure — so an inset computed in JS
|
|
200
|
+
is always a frame late and always the wrong size. Worse, UIKit will not
|
|
201
|
+
collapse the title at all unless the scroll view it finds fills the screen:
|
|
202
|
+
padding the top edge on the frame starts that view 168pt down (measured on an
|
|
203
|
+
iPhone 17, expanded title), and the title then stays full size while rows
|
|
204
|
+
scroll up and overprint it.
|
|
205
|
+
|
|
206
|
+
So the frame keeps no vertical edge on such a screen, the container turns
|
|
207
|
+
UIKit's `contentInsetAdjustmentBehavior` back on, and UIKit pays the top and
|
|
208
|
+
the bottom both — which is why `ScreenBottomInset` stands down here rather
|
|
209
|
+
than paying that edge a second time. iOS only: this is UIKit's mechanism, and
|
|
210
|
+
Android has no navigation bar to track.
|
|
211
|
+
|
|
212
|
+
Both vertical edges have to be protected to hand them over, because UIKit
|
|
213
|
+
adjusts for both or for neither. A policy that asks for one and not the other
|
|
214
|
+
cannot be expressed this way, so it keeps the ordinary treatment below and
|
|
215
|
+
is honoured exactly as written — at the cost of the title collapse, which is
|
|
216
|
+
the better trade: an edge list is an explicit instruction, and silently
|
|
217
|
+
insetting an edge the caller excluded would be the worse surprise.
|
|
218
|
+
*/
|
|
219
|
+
const platformInsetsEligible = Platform.OS === "ios" && !hasHeader && edges.top && edges.bottom;
|
|
220
|
+
const platformAdjustsInsets = platformInsetsEligible && hasVerticalScrollContainer;
|
|
221
|
+
/*
|
|
222
|
+
Otherwise the bottom edge goes to the scroll container when there is one to
|
|
223
|
+
take it.
|
|
224
|
+
|
|
225
|
+
Applied to the frame, the bottom inset shrinks the scroll viewport, so content
|
|
226
|
+
stops above a tab bar rather than passing beneath it — and on iOS that inset
|
|
227
|
+
includes the bar itself, which UIKit folds into a tab screen's safe area. The
|
|
228
|
+
container reaches the same resting position by padding the end of its content
|
|
229
|
+
instead, which is how the platform's own content-inset adjustment behaves.
|
|
230
|
+
*/
|
|
231
|
+
const contentOwnsBottomInset = !platformAdjustsInsets && edges.bottom && hasVerticalScrollContainer;
|
|
232
|
+
const frameEdges = useMemo(
|
|
233
|
+
() =>
|
|
234
|
+
platformAdjustsInsets
|
|
235
|
+
? { ...edges, top: false, bottom: false }
|
|
236
|
+
: contentOwnsBottomInset
|
|
237
|
+
? { ...edges, bottom: false }
|
|
238
|
+
: edges,
|
|
239
|
+
[platformAdjustsInsets, contentOwnsBottomInset, edges]
|
|
240
|
+
);
|
|
140
241
|
const { theme } = useUnistyles();
|
|
141
242
|
const resolvedBackground = resolveThemeColor(background, theme) ?? theme.color["surface.canvas"];
|
|
243
|
+
/*
|
|
244
|
+
A plain object, not a Unistyles stylesheet, and the background belongs in it
|
|
245
|
+
rather than arriving later.
|
|
246
|
+
|
|
247
|
+
Unistyles applies a dynamic function's style after mount. UIKit resolves a
|
|
248
|
+
screen's scroll view once, while it is being presented, and a scroll area
|
|
249
|
+
that was not yet the size of the screen at that moment never drives the
|
|
250
|
+
navigation bar afterwards — the large title stays expanded for the rest of
|
|
251
|
+
the screen's life.
|
|
252
|
+
*/
|
|
253
|
+
const rootStyle = useMemo(
|
|
254
|
+
() => ({ flex: 1, backgroundColor: resolvedBackground }) as const,
|
|
255
|
+
[resolvedBackground]
|
|
256
|
+
);
|
|
142
257
|
|
|
143
258
|
return (
|
|
144
|
-
|
|
259
|
+
/*
|
|
260
|
+
`collapsable={false}`, because a background colour alone is the worst of
|
|
261
|
+
both worlds here.
|
|
262
|
+
|
|
263
|
+
Fabric decides two things separately: whether a view is mounted at all, and
|
|
264
|
+
whether it *keeps* its children. A `View` with only layout styles is
|
|
265
|
+
dropped and its children are re-parented to its own parent — harmless. Give
|
|
266
|
+
it a background and it is mounted, but it still does not form a stacking
|
|
267
|
+
context, so the children are mounted *beside* it instead of inside it. The
|
|
268
|
+
screen's view then begins with an empty full-screen view, and UIKit — which
|
|
269
|
+
finds the scroll view by walking first subviews down from the view
|
|
270
|
+
controller (`RNSScrollViewFinder` mirrors the same walk) — reaches that dead
|
|
271
|
+
end and finds nothing. Measured on an iPhone 17: no content-inset
|
|
272
|
+
adjustment and no large-title collapse at all.
|
|
273
|
+
|
|
274
|
+
`collapsable={false}` forms the stacking context, so the frame, the safe
|
|
275
|
+
areas, and the scroll container stay in one unbroken first-subview chain.
|
|
276
|
+
*/
|
|
277
|
+
<View collapsable={false} ref={ref} style={[rootStyle, style]} {...rest}>
|
|
145
278
|
<ScreenScrollProvider
|
|
146
279
|
background={resolvedBackground}
|
|
147
280
|
contentPadding={resolvedMargins}
|
|
148
281
|
safeArea={safeArea}
|
|
282
|
+
contentOwnsBottomInset={contentOwnsBottomInset}
|
|
283
|
+
platformAdjustsInsets={platformAdjustsInsets}
|
|
284
|
+
platformInsetsEligible={platformInsetsEligible}
|
|
149
285
|
hasHeader={hasHeader}
|
|
150
286
|
>
|
|
151
287
|
<ScreenHeaderAppearanceProvider>
|
|
152
|
-
<ScreenFrame edges={
|
|
288
|
+
<ScreenFrame edges={frameEdges}>
|
|
153
289
|
<PortalProvider>{children}</PortalProvider>
|
|
154
290
|
</ScreenFrame>
|
|
155
291
|
</ScreenHeaderAppearanceProvider>
|
|
@@ -167,9 +303,11 @@ ScreenBase.List = ScreenList;
|
|
|
167
303
|
* Themed screen root with shared scroll state and a local header portal.
|
|
168
304
|
*
|
|
169
305
|
* 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
|
|
306
|
+
* or `Screen.List`. The root applies safe-area clearance to all children, except
|
|
307
|
+
* the bottom edge when that primary container is vertical — it pads that inset
|
|
308
|
+
* into the end of its own content instead, so content scrolls under a bottom bar
|
|
309
|
+
* rather than stopping above it. Scroll containers add themed content padding and
|
|
310
|
+
* header clearance. The ref targets the root View, not the scroll container.
|
|
173
311
|
*
|
|
174
312
|
* @example
|
|
175
313
|
* ```tsx
|
|
@@ -180,10 +318,3 @@ ScreenBase.List = ScreenList;
|
|
|
180
318
|
* ```
|
|
181
319
|
*/
|
|
182
320
|
export const Screen = ScreenBase;
|
|
183
|
-
|
|
184
|
-
const styles = StyleSheet.create(() => ({
|
|
185
|
-
container: (backgroundColor: string) => ({
|
|
186
|
-
flex: 1,
|
|
187
|
-
backgroundColor,
|
|
188
|
-
}),
|
|
189
|
-
}));
|
|
@@ -26,6 +26,39 @@ 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;
|
|
40
|
+
/**
|
|
41
|
+
* Whether the platform's own content-inset adjustment pays the vertical insets.
|
|
42
|
+
*
|
|
43
|
+
* True on an iOS screen with no `Screen.Header`: the navigation bar above such a
|
|
44
|
+
* screen is UIKit's, and only UIKit can inset a scroll view for one — a native
|
|
45
|
+
* large title resizes on every frame of its collapse, and it refuses to collapse
|
|
46
|
+
* at all for a scroll view that does not fill the screen. The frame therefore
|
|
47
|
+
* keeps no vertical edge, the container asks for
|
|
48
|
+
* `contentInsetAdjustmentBehavior: "automatic"` rather than `"never"`, and
|
|
49
|
+
* `contentOwnsBottomInset` stays false because UIKit pays that edge too.
|
|
50
|
+
*/
|
|
51
|
+
platformAdjustsInsets: boolean;
|
|
52
|
+
/**
|
|
53
|
+
* Whether this screen *would* hand its vertical insets to the platform, if it
|
|
54
|
+
* found a vertical scroll container among its children.
|
|
55
|
+
*
|
|
56
|
+
* Everything `platformAdjustsInsets` needs except the container itself. The two
|
|
57
|
+
* differ only when the container is nested inside another component, where the
|
|
58
|
+
* root cannot see it — which is a mistake on such a screen, and the difference
|
|
59
|
+
* is how a mounting container detects that it was the one missed.
|
|
60
|
+
*/
|
|
61
|
+
platformInsetsEligible: boolean;
|
|
29
62
|
/** @deprecated Use contentPadding. */
|
|
30
63
|
margins: ScreenContentPadding;
|
|
31
64
|
/** Whether a `Screen.Header` is present. Used by scroll containers to add top inset. */
|
|
@@ -65,6 +98,12 @@ export interface ScreenScrollProviderProps {
|
|
|
65
98
|
/** Which axes scroll containers pad with `layout.screen.padding`. Default `'all'`. */
|
|
66
99
|
contentPadding?: ScreenContentPadding;
|
|
67
100
|
safeArea?: ScreenSafeArea;
|
|
101
|
+
/** Whether the primary scroll container pads the bottom safe area. Default false. */
|
|
102
|
+
contentOwnsBottomInset?: boolean;
|
|
103
|
+
/** Whether the platform adjusts the scroll container's vertical insets. Default false. */
|
|
104
|
+
platformAdjustsInsets?: boolean;
|
|
105
|
+
/** Whether the screen qualifies for that, container aside. Default false. */
|
|
106
|
+
platformInsetsEligible?: boolean;
|
|
68
107
|
/** Whether a `Screen.Header` child is present. Default false. */
|
|
69
108
|
hasHeader?: boolean;
|
|
70
109
|
|
|
@@ -81,6 +120,9 @@ export function ScreenScrollProvider({
|
|
|
81
120
|
children,
|
|
82
121
|
contentPadding = "all",
|
|
83
122
|
safeArea = "auto",
|
|
123
|
+
contentOwnsBottomInset = false,
|
|
124
|
+
platformAdjustsInsets = false,
|
|
125
|
+
platformInsetsEligible = false,
|
|
84
126
|
hasHeader = false,
|
|
85
127
|
}: ScreenScrollProviderProps) {
|
|
86
128
|
const scrollY = useSharedValue(0);
|
|
@@ -108,6 +150,9 @@ export function ScreenScrollProvider({
|
|
|
108
150
|
background,
|
|
109
151
|
contentPadding,
|
|
110
152
|
safeArea,
|
|
153
|
+
contentOwnsBottomInset,
|
|
154
|
+
platformAdjustsInsets,
|
|
155
|
+
platformInsetsEligible,
|
|
111
156
|
margins: contentPadding,
|
|
112
157
|
hasHeader,
|
|
113
158
|
scrollY,
|
|
@@ -121,6 +166,9 @@ export function ScreenScrollProvider({
|
|
|
121
166
|
background,
|
|
122
167
|
contentPadding,
|
|
123
168
|
safeArea,
|
|
169
|
+
contentOwnsBottomInset,
|
|
170
|
+
platformAdjustsInsets,
|
|
171
|
+
platformInsetsEligible,
|
|
124
172
|
hasHeader,
|
|
125
173
|
scrollY,
|
|
126
174
|
headerCollapseHeight,
|
|
@@ -16,8 +16,10 @@ import { StyleSheet } from "react-native-unistyles";
|
|
|
16
16
|
|
|
17
17
|
import { resolveScreenPadding } from "#theme/screen-padding";
|
|
18
18
|
import { PortalHost } from "../portal";
|
|
19
|
+
import { useNestedContainerWarning } from "./hooks/use-nested-container-warning";
|
|
19
20
|
import { useScreenRef } from "./hooks/use-screen-ref";
|
|
20
21
|
import { useScreenScrollHandler } from "./hooks/use-screen-scroll-handler";
|
|
22
|
+
import { ScreenBottomInset } from "./parts/ScreenBottomInset";
|
|
21
23
|
import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder";
|
|
22
24
|
import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext";
|
|
23
25
|
import type { ScreenContentPadding, ScreenScrollableProps } from "./types";
|
|
@@ -172,7 +174,13 @@ const ScreenListBase = forwardRef(function ScreenList(
|
|
|
172
174
|
headerSnapOffsets,
|
|
173
175
|
contentPadding: screenPadding,
|
|
174
176
|
hasHeader,
|
|
177
|
+
contentOwnsBottomInset,
|
|
178
|
+
platformAdjustsInsets,
|
|
175
179
|
} = useScreen();
|
|
180
|
+
// The root yields the bottom edge only to a vertical container, so a horizontal
|
|
181
|
+
// one here is a secondary container and must not pay the inset a second time.
|
|
182
|
+
const ownsBottomInset = contentOwnsBottomInset && !horizontal;
|
|
183
|
+
useNestedContainerWarning("Screen.List", horizontal);
|
|
176
184
|
const mergedRef = useScreenRef(isDefaultFlatList ? scrollRef : undefined, ref);
|
|
177
185
|
const resolvedPadding = contentPadding ?? margins ?? screenPadding;
|
|
178
186
|
const resolvedLoading = isLoading ?? loading;
|
|
@@ -191,6 +199,14 @@ const ScreenListBase = forwardRef(function ScreenList(
|
|
|
191
199
|
{renderListComponent(ListHeaderComponent)}
|
|
192
200
|
</>
|
|
193
201
|
);
|
|
202
|
+
const footer = ownsBottomInset ? (
|
|
203
|
+
<>
|
|
204
|
+
{renderListComponent(ListFooterComponent)}
|
|
205
|
+
<ScreenBottomInset />
|
|
206
|
+
</>
|
|
207
|
+
) : (
|
|
208
|
+
ListFooterComponent
|
|
209
|
+
);
|
|
194
210
|
|
|
195
211
|
return (
|
|
196
212
|
<AnimatedComponent
|
|
@@ -199,7 +215,12 @@ const ScreenListBase = forwardRef(function ScreenList(
|
|
|
199
215
|
renderItem={renderItem}
|
|
200
216
|
style={[{ backgroundColor: background }, style]}
|
|
201
217
|
horizontal={horizontal}
|
|
202
|
-
|
|
218
|
+
/*
|
|
219
|
+
UIKit owns the vertical insets on a header-less iOS screen — see
|
|
220
|
+
`platformAdjustsInsets`. Everywhere else the frame has already paid them,
|
|
221
|
+
so a second adjustment here would count them twice.
|
|
222
|
+
*/
|
|
223
|
+
contentInsetAdjustmentBehavior={platformAdjustsInsets ? "automatic" : "never"}
|
|
203
224
|
automaticallyAdjustContentInsets={false}
|
|
204
225
|
automaticallyAdjustsScrollIndicatorInsets={false}
|
|
205
226
|
contentContainerStyle={[
|
|
@@ -207,7 +228,7 @@ const ScreenListBase = forwardRef(function ScreenList(
|
|
|
207
228
|
contentContainerStyle,
|
|
208
229
|
]}
|
|
209
230
|
ListHeaderComponent={header}
|
|
210
|
-
ListFooterComponent={
|
|
231
|
+
ListFooterComponent={footer}
|
|
211
232
|
ListEmptyComponent={placeholder ?? ListEmptyComponent}
|
|
212
233
|
showsVerticalScrollIndicator={false}
|
|
213
234
|
scrollEventThrottle={16}
|