@hzblj/kara-components 0.24.0 → 0.25.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/atoms/list/list.ios.js +2 -1
- package/lib/module/atoms/list/list.ios.js.map +1 -1
- package/lib/module/molecules/scroll-edge-container/scroll-edge-container.android.js +4 -0
- package/lib/module/molecules/scroll-edge-container/scroll-edge-container.android.js.map +1 -1
- package/lib/module/molecules/scroll-edge-container/scroll-edge-container.ios.js +8 -0
- package/lib/module/molecules/scroll-edge-container/scroll-edge-container.ios.js.map +1 -1
- package/lib/typescript/atoms/list/list.types.d.ts +2 -0
- package/lib/typescript/molecules/scroll-edge-container/scroll-edge-container.types.d.ts +8 -0
- package/package.json +4 -4
- package/src/atoms/list/list.ios.tsx +2 -1
- package/src/atoms/list/list.types.ts +2 -0
- package/src/molecules/scroll-edge-container/scroll-edge-container.android.tsx +4 -0
- package/src/molecules/scroll-edge-container/scroll-edge-container.ios.tsx +8 -0
- package/src/molecules/scroll-edge-container/scroll-edge-container.types.ts +8 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @hzblj/kara-components
|
|
2
2
|
|
|
3
|
+
## 0.25.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`ac467e2`](https://github.com/hzblj/kara-ui/commit/ac467e2395360710f0745ccd49f21434eb101afe)]:
|
|
8
|
+
- @hzblj/kara-native@0.25.1
|
|
9
|
+
- @hzblj/kara-theme@0.25.1
|
|
10
|
+
- @hzblj/kara-sx@0.25.1
|
|
11
|
+
|
|
12
|
+
## 0.25.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [#80](https://github.com/hzblj/kara-ui/pull/80) [`e9d4c23`](https://github.com/hzblj/kara-ui/commit/e9d4c23328a2e72e0fb124621cc4f491b3f86335) Thanks [@hzblj](https://github.com/hzblj)! - `ScrollEdgeContainer` catches up with Footshop's: it sets the scroll view's top inset natively as soon as the top bar is laid out, so a list no longer starts under its bar for a few frames and then jumps (most visible on a tab rendered before it is first shown); `initialTopBarHeight` / `initialBottomBarHeight` give the first frame its insets; `contentScrollView` lets the iOS 26 tab bar minimise with this scroll view; `topEdgeEffectHidden` drops the top blur. A list remounted by `key` keeps its inset and edge effects, and a bottom bar no longer jumps while the keyboard animates. On iOS a `List` is its screen's content scroll view, so a large title in the header collapses as the list scrolls. Run a prebuild after upgrading.
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies [[`e9d4c23`](https://github.com/hzblj/kara-ui/commit/e9d4c23328a2e72e0fb124621cc4f491b3f86335)]:
|
|
21
|
+
- @hzblj/kara-native@0.25.0
|
|
22
|
+
- @hzblj/kara-sx@0.25.0
|
|
23
|
+
- @hzblj/kara-theme@0.25.0
|
|
24
|
+
|
|
3
25
|
## 0.24.0
|
|
4
26
|
|
|
5
27
|
### Minor Changes
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { Group, List as SwiftUIList } from '@expo/ui/swift-ui';
|
|
4
4
|
import { listRowSeparator, listStyle, refreshable } from '@expo/ui/swift-ui/modifiers';
|
|
5
|
+
import { contentScrollView } from '@hzblj/kara-native/swift-ui';
|
|
5
6
|
import { useMemo } from 'react';
|
|
6
7
|
import { useHostGuard } from "../../hooks/host-context.js";
|
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -18,7 +19,7 @@ export const List = ({
|
|
|
18
19
|
variant = 'insetGrouped'
|
|
19
20
|
}) => {
|
|
20
21
|
useHostGuard('List');
|
|
21
|
-
const modifiers = useMemo(() => [listStyle(variant), ...(onRefresh ? [refreshable(onRefresh)] : [])], [onRefresh, variant]);
|
|
22
|
+
const modifiers = useMemo(() => [listStyle(variant), contentScrollView(), ...(onRefresh ? [refreshable(onRefresh)] : [])], [onRefresh, variant]);
|
|
22
23
|
return /*#__PURE__*/_jsx(SwiftUIList, {
|
|
23
24
|
modifiers: modifiers,
|
|
24
25
|
testID: testID,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["Group","List","SwiftUIList","listRowSeparator","listStyle","refreshable","useMemo","useHostGuard","jsx","_jsx","NO_SEPARATORS","children","onRefresh","separators","testID","variant","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/list/list.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAC5D,SAAQC,gBAAgB,EAAEC,SAAS,EAAuBC,WAAW,QAAO,6BAA6B;AACzG,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG,
|
|
1
|
+
{"version":3,"names":["Group","List","SwiftUIList","listRowSeparator","listStyle","refreshable","contentScrollView","useMemo","useHostGuard","jsx","_jsx","NO_SEPARATORS","children","onRefresh","separators","testID","variant","modifiers"],"sourceRoot":"../../../../src","sources":["atoms/list/list.ios.tsx"],"mappings":";;AAAA,SAAQA,KAAK,EAAEC,IAAI,IAAIC,WAAW,QAAO,mBAAmB;AAC5D,SAAQC,gBAAgB,EAAEC,SAAS,EAAuBC,WAAW,QAAO,6BAA6B;AACzG,SAAQC,iBAAiB,QAAO,6BAA6B;AAC7D,SAAQC,OAAO,QAAO,OAAO;AAE7B,SAAQC,YAAY,QAAO,6BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGrD;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAG,CAACR,gBAAgB,CAAC,QAAQ,CAAC,CAAC;AAElD,OAAO,MAAMF,IAAmB,GAAGA,CAAC;EAClCW,QAAQ;EACRC,SAAS;EACTC,UAAU,GAAG,IAAI;EACjBC,MAAM;EACNC,OAAO,GAAG;AACD,CAAC,KAAK;EACfR,YAAY,CAAC,MAAM,CAAC;EAEpB,MAAMS,SAAS,GAAGV,OAAO,CACvB,MAAM,CAACH,SAAS,CAACY,OAAO,CAAC,EAAEV,iBAAiB,CAAC,CAAC,EAAE,IAAIO,SAAS,GAAG,CAACR,WAAW,CAACQ,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,EAC/F,CAACA,SAAS,EAAEG,OAAO,CACrB,CAAC;EAED,oBACEN,IAAA,CAACR,WAAW;IAACe,SAAS,EAAEA,SAAU;IAACF,MAAM,EAAEA,MAAO;IAAAH,QAAA,EAC/CE,UAAU,GAAGF,QAAQ,gBAAGF,IAAA,CAACV,KAAK;MAACiB,SAAS,EAAEN,aAAc;MAAAC,QAAA,EAAEA;IAAQ,CAAQ;EAAC,CACjE,CAAC;AAElB,CAAC","ignoreList":[]}
|
|
@@ -45,9 +45,13 @@ export const ScrollEdgeContainer = ({
|
|
|
45
45
|
automaticInsets: _automaticInsets,
|
|
46
46
|
bottomBar,
|
|
47
47
|
children,
|
|
48
|
+
contentScrollView: _contentScrollView,
|
|
48
49
|
effect: _effect,
|
|
50
|
+
initialBottomBarHeight: _initialBottomBarHeight,
|
|
51
|
+
initialTopBarHeight: _initialTopBarHeight,
|
|
49
52
|
testID,
|
|
50
53
|
topBar,
|
|
54
|
+
topEdgeEffectHidden: _topEdgeEffectHidden,
|
|
51
55
|
...sx
|
|
52
56
|
}) => {
|
|
53
57
|
const topFilled = useSharedValue(opacity.o0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["timing","opacity","cloneElement","useCallback","useRef","useAnimatedStyle","useSharedValue","withTiming","Box","jsx","_jsx","jsxs","_jsxs","EDGE_SLOP","FILL","EdgeBar","children","filled","fill","value","bg","bottom","left","pointerEvents","position","right","style","top","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","effect","_effect","testID","topBar","sx","topFilled","o0","bottomFilled","metrics","content","offset","viewport","state","flex","onContentSizeChange","onLayout","onScroll","scrollEventThrottle","props","update","current","o100","scrollable","width","height","event","nativeEvent","layout","contentOffset","y"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":";;AAAA,SAAQA,MAAM,QAAO,gBAAgB;AACrC,SAAQC,OAAO,QAAO,mBAAmB;AACzC,SAAQC,YAAY,EAAkBC,WAAW,EAAEC,MAAM,QAAO,OAAO;AAEvE,SAA0BC,gBAAgB,EAAEC,cAAc,EAAEC,UAAU,QAAO,yBAAyB;AAEtG,SAAQC,GAAG,QAAO,0BAAiB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAGnC;AACA,MAAMC,SAAS,GAAG,GAAG;AAErB,MAAMC,IAAI,GAAGd,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC;AAInC;AACA,MAAMe,OAAO,GAAGA,CAAC;EAACC,QAAQ;EAAEC;AAAW,CAAC,KAAK;EAC3C,MAAMC,IAAI,GAAGb,gBAAgB,CAAC,OAAO;IAACJ,OAAO,EAAEgB,MAAM,CAACE;EAAK,CAAC,CAAC,EAAE,EAAE,CAAC;EAElE,IAAI,CAACH,QAAQ,EAAE;IACb,OAAO,IAAI;EACb;EAEA,oBACEJ,KAAA,CAACJ,GAAG;IAAAQ,QAAA,gBACFN,IAAA,CAACF,GAAG;MACFY,EAAE,EAAC,mBAAmB;MACtBC,MAAM,EAAE,CAAE;MACVC,IAAI,EAAE,CAAE;MACRC,aAAa,EAAC,MAAM;MACpBC,QAAQ,EAAC,UAAU;MACnBC,KAAK,EAAE,CAAE;MACTC,KAAK,EAAER,IAAK;MACZS,GAAG,EAAE;IAAE,CACR,CAAC,EACDX,QAAQ;EAAA,CACN,CAAC;AAEV,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMY,mBAAiD,GAAGA,CAAC;EAChEC,eAAe,EAAEC,gBAAgB;EACjCC,SAAS;EACTf,QAAQ;EACRgB,MAAM,EAAEC,OAAO;EACfC,MAAM;EACNC,MAAM;
|
|
1
|
+
{"version":3,"names":["timing","opacity","cloneElement","useCallback","useRef","useAnimatedStyle","useSharedValue","withTiming","Box","jsx","_jsx","jsxs","_jsxs","EDGE_SLOP","FILL","EdgeBar","children","filled","fill","value","bg","bottom","left","pointerEvents","position","right","style","top","ScrollEdgeContainer","automaticInsets","_automaticInsets","bottomBar","contentScrollView","_contentScrollView","effect","_effect","initialBottomBarHeight","_initialBottomBarHeight","initialTopBarHeight","_initialTopBarHeight","testID","topBar","topEdgeEffectHidden","_topEdgeEffectHidden","sx","topFilled","o0","bottomFilled","metrics","content","offset","viewport","state","flex","onContentSizeChange","onLayout","onScroll","scrollEventThrottle","props","update","current","o100","scrollable","width","height","event","nativeEvent","layout","contentOffset","y"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.android.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -11,19 +11,27 @@ export const ScrollEdgeContainer = ({
|
|
|
11
11
|
automaticInsets,
|
|
12
12
|
bottomBar,
|
|
13
13
|
children,
|
|
14
|
+
contentScrollView,
|
|
14
15
|
effect,
|
|
16
|
+
initialBottomBarHeight,
|
|
17
|
+
initialTopBarHeight,
|
|
15
18
|
testID,
|
|
16
19
|
topBar,
|
|
20
|
+
topEdgeEffectHidden,
|
|
17
21
|
...sx
|
|
18
22
|
}) => {
|
|
19
23
|
const style = useSx(sx);
|
|
20
24
|
return /*#__PURE__*/_jsx(NativeScrollEdgeContainer, {
|
|
21
25
|
automaticInsets: automaticInsets,
|
|
22
26
|
bottomBar: bottomBar,
|
|
27
|
+
contentScrollView: contentScrollView,
|
|
23
28
|
effect: effect,
|
|
29
|
+
initialBottomBarHeight: initialBottomBarHeight,
|
|
30
|
+
initialTopBarHeight: initialTopBarHeight,
|
|
24
31
|
style: style,
|
|
25
32
|
testID: testID,
|
|
26
33
|
topBar: topBar,
|
|
34
|
+
topEdgeEffectHidden: topEdgeEffectHidden,
|
|
27
35
|
children: children
|
|
28
36
|
});
|
|
29
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["ScrollEdgeContainer","NativeScrollEdgeContainer","useSx","jsx","_jsx","automaticInsets","bottomBar","children","effect","testID","topBar","sx","style"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.ios.tsx"],"mappings":";;AAAA,SAAQA,mBAAmB,IAAIC,yBAAyB,QAAO,6BAA6B;AAC5F,SAAQC,KAAK,QAAO,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpC;AACA;AACA;AACA;AACA,OAAO,MAAMJ,mBAAiD,GAAGA,CAAC;EAChEK,eAAe;EACfC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,MAAM;EACNC,MAAM;
|
|
1
|
+
{"version":3,"names":["ScrollEdgeContainer","NativeScrollEdgeContainer","useSx","jsx","_jsx","automaticInsets","bottomBar","children","contentScrollView","effect","initialBottomBarHeight","initialTopBarHeight","testID","topBar","topEdgeEffectHidden","sx","style"],"sourceRoot":"../../../../src","sources":["molecules/scroll-edge-container/scroll-edge-container.ios.tsx"],"mappings":";;AAAA,SAAQA,mBAAmB,IAAIC,yBAAyB,QAAO,6BAA6B;AAC5F,SAAQC,KAAK,QAAO,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpC;AACA;AACA;AACA;AACA,OAAO,MAAMJ,mBAAiD,GAAGA,CAAC;EAChEK,eAAe;EACfC,SAAS;EACTC,QAAQ;EACRC,iBAAiB;EACjBC,MAAM;EACNC,sBAAsB;EACtBC,mBAAmB;EACnBC,MAAM;EACNC,MAAM;EACNC,mBAAmB;EACnB,GAAGC;AACqB,CAAC,KAAK;EAC9B,MAAMC,KAAK,GAAGd,KAAK,CAACa,EAAE,CAAC;EAEvB,oBACEX,IAAA,CAACH,yBAAyB;IACxBI,eAAe,EAAEA,eAAgB;IACjCC,SAAS,EAAEA,SAAU;IACrBE,iBAAiB,EAAEA,iBAAkB;IACrCC,MAAM,EAAEA,MAAO;IACfC,sBAAsB,EAAEA,sBAAuB;IAC/CC,mBAAmB,EAAEA,mBAAoB;IACzCK,KAAK,EAAEA,KAAM;IACbJ,MAAM,EAAEA,MAAO;IACfC,MAAM,EAAEA,MAAO;IACfC,mBAAmB,EAAEA,mBAAoB;IAAAP,QAAA,EAExCA;EAAQ,CACgB,CAAC;AAEhC,CAAC","ignoreList":[]}
|
|
@@ -9,6 +9,8 @@ export type ListVariant = 'insetGrouped' | 'plain';
|
|
|
9
9
|
*
|
|
10
10
|
* Rows are separated for you (SwiftUI's own separators, a `Divider` between rows on Android), so a `Divider` among
|
|
11
11
|
* the children is one too many: on iOS it becomes an empty row of its own.
|
|
12
|
+
*
|
|
13
|
+
* On iOS the list is its screen's content scroll view, so a native-stack large title collapses as it scrolls.
|
|
12
14
|
*/
|
|
13
15
|
export type ListProps = {
|
|
14
16
|
/** The rows: native views, one row each. */
|
|
@@ -21,11 +21,19 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
|
|
|
21
21
|
bottomBar?: ReactNode;
|
|
22
22
|
/** Exactly one React Native scroll view: `RnScrollView`, `RnFlatList`, `RnSectionList`. */
|
|
23
23
|
children: ReactElement<ScrollEdgeScrollableProps>;
|
|
24
|
+
/** iOS 26: the tab bar minimises as this scroll view scrolls, not as the screen's first one does. */
|
|
25
|
+
contentScrollView?: boolean;
|
|
24
26
|
/** iOS 26: how hard the edge cuts. `soft` by default. */
|
|
25
27
|
effect?: ScrollEdgeEffect;
|
|
28
|
+
/** iOS: the bottom bar's height before it is measured, so the first frame already has the inset. */
|
|
29
|
+
initialBottomBarHeight?: number;
|
|
30
|
+
/** iOS: the top bar's height before it is measured, so the first frame's content starts below the bar. */
|
|
31
|
+
initialTopBarHeight?: number;
|
|
26
32
|
/** Test identifier, forwarded to the container view. */
|
|
27
33
|
testID?: string;
|
|
28
34
|
/** Laid over the scroll view's top edge on iOS; stacked above it on Android, filled once content scrolls under it. */
|
|
29
35
|
topBar?: ReactNode;
|
|
36
|
+
/** iOS 26: hides the top edge effect, e.g. while a cover image sits under the top bar. */
|
|
37
|
+
topEdgeEffectHidden?: boolean;
|
|
30
38
|
};
|
|
31
39
|
export type ScrollEdgeContainerComponent = (props: ScrollEdgeContainerProps) => ReactNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hzblj/kara-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.1",
|
|
4
4
|
"description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
|
|
5
5
|
"author": "Jan Blazej",
|
|
6
6
|
"license": "MIT",
|
|
@@ -66,9 +66,9 @@
|
|
|
66
66
|
"dependencies": {
|
|
67
67
|
"@hzblj/expo-native-icons": "^0.2.0",
|
|
68
68
|
"@hzblj/expo-rich-haptics": "^0.1.0",
|
|
69
|
-
"@hzblj/kara-native": "^0.
|
|
70
|
-
"@hzblj/kara-sx": "^0.
|
|
71
|
-
"@hzblj/kara-theme": "^0.
|
|
69
|
+
"@hzblj/kara-native": "^0.25.1",
|
|
70
|
+
"@hzblj/kara-sx": "^0.25.1",
|
|
71
|
+
"@hzblj/kara-theme": "^0.25.1",
|
|
72
72
|
"sf-symbols-typescript": "^2.2.0"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import {Group, List as SwiftUIList} from '@expo/ui/swift-ui'
|
|
2
2
|
import {listRowSeparator, listStyle, type ModifierConfig, refreshable} from '@expo/ui/swift-ui/modifiers'
|
|
3
|
+
import {contentScrollView} from '@hzblj/kara-native/swift-ui'
|
|
3
4
|
import {useMemo} from 'react'
|
|
4
5
|
|
|
5
6
|
import {useHostGuard} from '../../hooks/host-context'
|
|
@@ -21,7 +22,7 @@ export const List: ListComponent = ({
|
|
|
21
22
|
useHostGuard('List')
|
|
22
23
|
|
|
23
24
|
const modifiers = useMemo<ModifierConfig[]>(
|
|
24
|
-
() => [listStyle(variant), ...(onRefresh ? [refreshable(onRefresh)] : [])],
|
|
25
|
+
() => [listStyle(variant), contentScrollView(), ...(onRefresh ? [refreshable(onRefresh)] : [])],
|
|
25
26
|
[onRefresh, variant]
|
|
26
27
|
)
|
|
27
28
|
|
|
@@ -11,6 +11,8 @@ export type ListVariant = 'insetGrouped' | 'plain'
|
|
|
11
11
|
*
|
|
12
12
|
* Rows are separated for you (SwiftUI's own separators, a `Divider` between rows on Android), so a `Divider` among
|
|
13
13
|
* the children is one too many: on iOS it becomes an empty row of its own.
|
|
14
|
+
*
|
|
15
|
+
* On iOS the list is its screen's content scroll view, so a native-stack large title collapses as it scrolls.
|
|
14
16
|
*/
|
|
15
17
|
export type ListProps = {
|
|
16
18
|
/** The rows: native views, one row each. */
|
|
@@ -50,9 +50,13 @@ export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
|
|
|
50
50
|
automaticInsets: _automaticInsets,
|
|
51
51
|
bottomBar,
|
|
52
52
|
children,
|
|
53
|
+
contentScrollView: _contentScrollView,
|
|
53
54
|
effect: _effect,
|
|
55
|
+
initialBottomBarHeight: _initialBottomBarHeight,
|
|
56
|
+
initialTopBarHeight: _initialTopBarHeight,
|
|
54
57
|
testID,
|
|
55
58
|
topBar,
|
|
59
|
+
topEdgeEffectHidden: _topEdgeEffectHidden,
|
|
56
60
|
...sx
|
|
57
61
|
}: ScrollEdgeContainerProps) => {
|
|
58
62
|
const topFilled = useSharedValue<number>(opacity.o0)
|
|
@@ -10,9 +10,13 @@ export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
|
|
|
10
10
|
automaticInsets,
|
|
11
11
|
bottomBar,
|
|
12
12
|
children,
|
|
13
|
+
contentScrollView,
|
|
13
14
|
effect,
|
|
15
|
+
initialBottomBarHeight,
|
|
16
|
+
initialTopBarHeight,
|
|
14
17
|
testID,
|
|
15
18
|
topBar,
|
|
19
|
+
topEdgeEffectHidden,
|
|
16
20
|
...sx
|
|
17
21
|
}: ScrollEdgeContainerProps) => {
|
|
18
22
|
const style = useSx(sx)
|
|
@@ -21,10 +25,14 @@ export const ScrollEdgeContainer: ScrollEdgeContainerComponent = ({
|
|
|
21
25
|
<NativeScrollEdgeContainer
|
|
22
26
|
automaticInsets={automaticInsets}
|
|
23
27
|
bottomBar={bottomBar}
|
|
28
|
+
contentScrollView={contentScrollView}
|
|
24
29
|
effect={effect}
|
|
30
|
+
initialBottomBarHeight={initialBottomBarHeight}
|
|
31
|
+
initialTopBarHeight={initialTopBarHeight}
|
|
25
32
|
style={style}
|
|
26
33
|
testID={testID}
|
|
27
34
|
topBar={topBar}
|
|
35
|
+
topEdgeEffectHidden={topEdgeEffectHidden}
|
|
28
36
|
>
|
|
29
37
|
{children}
|
|
30
38
|
</NativeScrollEdgeContainer>
|
|
@@ -23,12 +23,20 @@ export type ScrollEdgeContainerProps = ResponsiveViewSx & {
|
|
|
23
23
|
bottomBar?: ReactNode
|
|
24
24
|
/** Exactly one React Native scroll view: `RnScrollView`, `RnFlatList`, `RnSectionList`. */
|
|
25
25
|
children: ReactElement<ScrollEdgeScrollableProps>
|
|
26
|
+
/** iOS 26: the tab bar minimises as this scroll view scrolls, not as the screen's first one does. */
|
|
27
|
+
contentScrollView?: boolean
|
|
26
28
|
/** iOS 26: how hard the edge cuts. `soft` by default. */
|
|
27
29
|
effect?: ScrollEdgeEffect
|
|
30
|
+
/** iOS: the bottom bar's height before it is measured, so the first frame already has the inset. */
|
|
31
|
+
initialBottomBarHeight?: number
|
|
32
|
+
/** iOS: the top bar's height before it is measured, so the first frame's content starts below the bar. */
|
|
33
|
+
initialTopBarHeight?: number
|
|
28
34
|
/** Test identifier, forwarded to the container view. */
|
|
29
35
|
testID?: string
|
|
30
36
|
/** Laid over the scroll view's top edge on iOS; stacked above it on Android, filled once content scrolls under it. */
|
|
31
37
|
topBar?: ReactNode
|
|
38
|
+
/** iOS 26: hides the top edge effect, e.g. while a cover image sits under the top bar. */
|
|
39
|
+
topEdgeEffectHidden?: boolean
|
|
32
40
|
}
|
|
33
41
|
|
|
34
42
|
export type ScrollEdgeContainerComponent = (props: ScrollEdgeContainerProps) => ReactNode
|