@swmansion/react-native-bottom-sheet 0.8.2 → 0.8.3-next.2
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/android/src/main/java/com/swmansion/reactnativebottomsheet/BottomSheetView.kt +5 -0
- package/ios/RNSBottomSheetHostingView.swift +13 -1
- package/lib/module/BottomSheet.js +5 -9
- package/lib/module/BottomSheet.js.map +1 -1
- package/lib/typescript/src/BottomSheet.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/BottomSheet.tsx +6 -11
|
@@ -261,11 +261,16 @@ class BottomSheetView(context: Context) : ReactViewGroup(context) {
|
|
|
261
261
|
val ty = sheetContainer.translationY
|
|
262
262
|
val position = maxHeight - ty
|
|
263
263
|
updateScrim(position)
|
|
264
|
+
updateSheetVisibility(position)
|
|
264
265
|
updateInteractionState()
|
|
265
266
|
listener?.onPositionChange((position / density).toDouble())
|
|
266
267
|
updateShadowState(ty)
|
|
267
268
|
}
|
|
268
269
|
|
|
270
|
+
private fun updateSheetVisibility(position: Float) {
|
|
271
|
+
sheetContainer.alpha = if (position <= 0.5f) 0f else 1f
|
|
272
|
+
}
|
|
273
|
+
|
|
269
274
|
private var lastShadowOffsetY = Float.NaN
|
|
270
275
|
|
|
271
276
|
private fun updateShadowState(translationY: Float) {
|
|
@@ -280,6 +280,7 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
280
280
|
let ty = sheetContainer.layer.presentation()?.affineTransform().ty ?? sheetContainer.transform.ty
|
|
281
281
|
let position = maxHeight - ty
|
|
282
282
|
updateScrim(forPosition: position)
|
|
283
|
+
updateSheetVisibility(forPosition: position)
|
|
283
284
|
updateInteractionState()
|
|
284
285
|
eventDelegate?.bottomSheetHostingView(self, didChangePosition: position)
|
|
285
286
|
}
|
|
@@ -442,9 +443,15 @@ public final class RNSBottomSheetHostingView: UIView {
|
|
|
442
443
|
})?.offset ?? targetIndex
|
|
443
444
|
}
|
|
444
445
|
|
|
446
|
+
private func isVerticallyScrollable(_ scrollView: UIScrollView) -> Bool {
|
|
447
|
+
let verticalInset = scrollView.adjustedContentInset.top + scrollView.adjustedContentInset.bottom
|
|
448
|
+
let visibleHeight = max(0, scrollView.bounds.height - verticalInset)
|
|
449
|
+
return scrollView.alwaysBounceVertical || scrollView.contentSize.height > visibleHeight
|
|
450
|
+
}
|
|
451
|
+
|
|
445
452
|
private func firstScrollView(in view: UIView) -> UIScrollView? {
|
|
446
453
|
for subview in view.subviews {
|
|
447
|
-
if let scrollView = subview as? UIScrollView {
|
|
454
|
+
if let scrollView = subview as? UIScrollView, isVerticallyScrollable(scrollView) {
|
|
448
455
|
return scrollView
|
|
449
456
|
}
|
|
450
457
|
if let found = firstScrollView(in: subview) {
|
|
@@ -513,9 +520,14 @@ extension RNSBottomSheetHostingView: UIGestureRecognizerDelegate {
|
|
|
513
520
|
private extension RNSBottomSheetHostingView {
|
|
514
521
|
func updateScrim() {
|
|
515
522
|
updateScrim(forPosition: currentSheetHeight)
|
|
523
|
+
updateSheetVisibility(forPosition: currentSheetHeight)
|
|
516
524
|
updateInteractionState()
|
|
517
525
|
}
|
|
518
526
|
|
|
527
|
+
func updateSheetVisibility(forPosition position: CGFloat) {
|
|
528
|
+
sheetContainer.alpha = position <= 0.5 ? 0 : 1
|
|
529
|
+
}
|
|
530
|
+
|
|
519
531
|
func updateScrim(forPosition position: CGFloat) {
|
|
520
532
|
guard modal else {
|
|
521
533
|
scrimView.alpha = 0
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { useState } from 'react';
|
|
4
|
+
import { StyleSheet, View, useWindowDimensions } from 'react-native';
|
|
5
5
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
6
6
|
import BottomSheetNativeComponent from './BottomSheetNativeComponent';
|
|
7
7
|
import { Portal } from "./BottomSheetProvider.js";
|
|
@@ -26,7 +26,6 @@ export const BottomSheet = ({
|
|
|
26
26
|
const insets = useSafeAreaInsets();
|
|
27
27
|
const maxHeight = windowHeight - insets.top;
|
|
28
28
|
const [contentHeight, setContentHeight] = useState(0);
|
|
29
|
-
const sheetOpacity = useRef(new Animated.Value(0)).current;
|
|
30
29
|
const resolvedDetents = detents.map(detent => {
|
|
31
30
|
const value = resolveDetent(detent, contentHeight, maxHeight);
|
|
32
31
|
return {
|
|
@@ -47,17 +46,14 @@ export const BottomSheet = ({
|
|
|
47
46
|
};
|
|
48
47
|
const handlePositionChange = event => {
|
|
49
48
|
const height = event.nativeEvent.position;
|
|
50
|
-
sheetOpacity.setValue(height === 0 ? 0 : 1);
|
|
51
49
|
onPositionChange?.(height);
|
|
52
50
|
};
|
|
53
|
-
const sheet = /*#__PURE__*/_jsx(
|
|
51
|
+
const sheet = /*#__PURE__*/_jsx(View, {
|
|
54
52
|
style: StyleSheet.absoluteFill,
|
|
55
53
|
pointerEvents: modal ? isCollapsed ? 'none' : 'auto' : 'box-none',
|
|
56
|
-
children: /*#__PURE__*/_jsx(
|
|
54
|
+
children: /*#__PURE__*/_jsx(View, {
|
|
57
55
|
pointerEvents: "box-none",
|
|
58
|
-
style:
|
|
59
|
-
opacity: sheetOpacity
|
|
60
|
-
}],
|
|
56
|
+
style: StyleSheet.absoluteFill,
|
|
61
57
|
children: /*#__PURE__*/_jsx(BottomSheetNativeComponent, {
|
|
62
58
|
pointerEvents: "box-none",
|
|
63
59
|
style: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["useState","StyleSheet","View","useWindowDimensions","useSafeAreaInsets","BottomSheetNativeComponent","Portal","resolveDetent","jsx","_jsx","jsxs","_jsxs","programmatic","BottomSheet","children","style","detents","index","animateIn","onIndexChange","onSettle","onPositionChange","modal","scrimColor","height","windowHeight","insets","maxHeight","top","contentHeight","setContentHeight","resolvedDetents","map","detent","value","Math","max","min","isDetentProgrammatic","handleSentinelLayout","event","nativeEvent","layout","y","clampedIndex","length","isCollapsed","handleIndexChange","handleSettle","handlePositionChange","position","sheet","absoluteFill","pointerEvents","left","right","bottom","collapsable","flex","onLayout"],"sourceRoot":"../../src","sources":["BottomSheet.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAqB,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAM5E,OAAO,EAAE,KAAK,MAAM,EAAiB,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,GAAI,+GAWzB,gBAAgB,4CA8ElB,CAAC"}
|
package/package.json
CHANGED
package/src/BottomSheet.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useState, type ReactNode } from 'react';
|
|
2
2
|
import type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
|
|
3
|
-
import {
|
|
3
|
+
import { StyleSheet, View, useWindowDimensions } from 'react-native';
|
|
4
4
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
5
5
|
|
|
6
6
|
import BottomSheetNativeComponent from './BottomSheetNativeComponent';
|
|
@@ -38,7 +38,6 @@ export const BottomSheet = ({
|
|
|
38
38
|
const insets = useSafeAreaInsets();
|
|
39
39
|
const maxHeight = windowHeight - insets.top;
|
|
40
40
|
const [contentHeight, setContentHeight] = useState(0);
|
|
41
|
-
const sheetOpacity = useRef(new Animated.Value(0)).current;
|
|
42
41
|
|
|
43
42
|
const resolvedDetents = detents.map((detent) => {
|
|
44
43
|
const value = resolveDetent(detent, contentHeight, maxHeight);
|
|
@@ -65,19 +64,15 @@ export const BottomSheet = ({
|
|
|
65
64
|
nativeEvent: { position: number };
|
|
66
65
|
}) => {
|
|
67
66
|
const height = event.nativeEvent.position;
|
|
68
|
-
sheetOpacity.setValue(height === 0 ? 0 : 1);
|
|
69
67
|
onPositionChange?.(height);
|
|
70
68
|
};
|
|
71
69
|
|
|
72
70
|
const sheet = (
|
|
73
|
-
<
|
|
71
|
+
<View
|
|
74
72
|
style={StyleSheet.absoluteFill}
|
|
75
73
|
pointerEvents={modal ? (isCollapsed ? 'none' : 'auto') : 'box-none'}
|
|
76
74
|
>
|
|
77
|
-
<
|
|
78
|
-
pointerEvents="box-none"
|
|
79
|
-
style={[StyleSheet.absoluteFill, { opacity: sheetOpacity }]}
|
|
80
|
-
>
|
|
75
|
+
<View pointerEvents="box-none" style={StyleSheet.absoluteFill}>
|
|
81
76
|
<BottomSheetNativeComponent
|
|
82
77
|
pointerEvents="box-none"
|
|
83
78
|
style={[
|
|
@@ -107,8 +102,8 @@ export const BottomSheet = ({
|
|
|
107
102
|
<View onLayout={handleSentinelLayout} pointerEvents="none" />
|
|
108
103
|
</View>
|
|
109
104
|
</BottomSheetNativeComponent>
|
|
110
|
-
</
|
|
111
|
-
</
|
|
105
|
+
</View>
|
|
106
|
+
</View>
|
|
112
107
|
);
|
|
113
108
|
|
|
114
109
|
if (modal) {
|