Skip to content

Commit 78e66c2

Browse files
MxKevinBeqoMxKevinBeqo
committed
fix(bottom-sheet-native): re-introduce Pressable as 'close when click outside' mechanism
1 parent df36f05 commit 78e66c2

2 files changed

Lines changed: 64 additions & 65 deletions

File tree

‎packages/pluggableWidgets/bottom-sheet-native/src/components/CustomModalSheet.tsx‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { ReactElement, ReactNode, useCallback, useRef, useState } from "react";
2-
import { Modal, useWindowDimensions } from "react-native";
3-
import { GestureHandlerRootView } from "react-native-gesture-handler";
2+
import { Modal, Pressable, useWindowDimensions } from "react-native";
43
import BottomSheet, {
54
BottomSheetBackdrop,
65
BottomSheetBackdropProps,
@@ -57,45 +56,45 @@ export const CustomModalSheet = (props: CustomModalSheetProps): ReactElement =>
5756

5857
const renderBackdrop = useCallback(
5958
(backdropProps: BottomSheetBackdropProps) => (
60-
<BottomSheetBackdrop
61-
{...backdropProps}
62-
pressBehavior="close"
63-
opacity={0.3}
64-
appearsOnIndex={0}
65-
disappearsOnIndex={-1}
66-
/>
59+
<Pressable style={{ flex: 1 }} onPress={close}>
60+
<BottomSheetBackdrop
61+
{...backdropProps}
62+
pressBehavior="close"
63+
opacity={0.3}
64+
appearsOnIndex={0}
65+
disappearsOnIndex={-1}
66+
/>
67+
</Pressable>
6768
),
68-
[]
69+
[close]
6970
);
7071

7172
const maxHeight = windowHeight * 0.9;
7273

7374
return (
7475
<Modal transparent animationType="none" visible={mounted} onRequestClose={close} onShow={handleModalShow}>
75-
<GestureHandlerRootView style={{ flex: 1 }}>
76-
{ready && (
77-
<BottomSheet
78-
ref={bottomSheetRef}
79-
index={0}
80-
animateOnMount
81-
enableDynamicSizing
82-
maxDynamicContentSize={maxHeight}
83-
containerHeight={windowHeight}
84-
enablePanDownToClose
85-
onChange={handleChange}
86-
onClose={() => handleChange(-1)}
87-
backdropComponent={renderBackdrop}
88-
style={[props.styles.modal]}
89-
backgroundStyle={props.styles.container}
90-
handleComponent={null}
91-
handleStyle={{ display: "none" }}
92-
>
93-
<BottomSheetScrollView style={[{ flex: 1 }]} contentContainerStyle={{ paddingBottom: 16 }}>
94-
{props.content}
95-
</BottomSheetScrollView>
96-
</BottomSheet>
97-
)}
98-
</GestureHandlerRootView>
76+
{ready && (
77+
<BottomSheet
78+
ref={bottomSheetRef}
79+
index={0}
80+
animateOnMount
81+
enableDynamicSizing
82+
maxDynamicContentSize={maxHeight}
83+
containerHeight={windowHeight}
84+
enablePanDownToClose
85+
onChange={handleChange}
86+
onClose={() => handleChange(-1)}
87+
backdropComponent={renderBackdrop}
88+
style={[props.styles.modal]}
89+
backgroundStyle={props.styles.container}
90+
handleComponent={null}
91+
handleStyle={{ display: "none" }}
92+
>
93+
<BottomSheetScrollView style={[{ flex: 1 }]} contentContainerStyle={{ paddingBottom: 16 }}>
94+
{props.content}
95+
</BottomSheetScrollView>
96+
</BottomSheet>
97+
)}
9998
</Modal>
10099
);
101100
};

‎packages/pluggableWidgets/bottom-sheet-native/src/components/NativeBottomSheet.tsx‎

Lines changed: 31 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import {
44
Appearance,
55
Modal,
66
Platform,
7+
Pressable,
78
StyleSheet,
89
Text,
910
TouchableHighlight,
1011
useWindowDimensions,
1112
View
1213
} from "react-native";
13-
import { GestureHandlerRootView } from "react-native-gesture-handler";
1414
import BottomSheet, {
1515
BottomSheetBackdrop,
1616
BottomSheetBackdropProps,
@@ -101,15 +101,17 @@ export const NativeBottomSheet = (props: NativeBottomSheetProps): ReactElement =
101101

102102
const renderBackdrop = useCallback(
103103
(backdropProps: BottomSheetBackdropProps) => (
104-
<BottomSheetBackdrop
105-
{...backdropProps}
106-
pressBehavior="close"
107-
opacity={0.3}
108-
appearsOnIndex={0}
109-
disappearsOnIndex={-1}
110-
/>
104+
<Pressable style={{ flex: 1 }} onPress={close}>
105+
<BottomSheetBackdrop
106+
{...backdropProps}
107+
pressBehavior="close"
108+
opacity={0.3}
109+
appearsOnIndex={0}
110+
disappearsOnIndex={-1}
111+
/>
112+
</Pressable>
111113
),
112-
[]
114+
[close]
113115
);
114116

115117
const actionHandler = useCallback(
@@ -178,28 +180,26 @@ export const NativeBottomSheet = (props: NativeBottomSheetProps): ReactElement =
178180

179181
return (
180182
<Modal onRequestClose={close} transparent animationType="none" visible={mounted} onShow={handleModalShow}>
181-
<GestureHandlerRootView style={{ flex: 1 }}>
182-
{ready && (
183-
<BottomSheet
184-
ref={bottomSheetRef}
185-
index={0}
186-
snapPoints={snapPoints}
187-
animateOnMount
188-
enablePanDownToClose
189-
onChange={handleChange}
190-
onClose={() => handleChange(-1)}
191-
style={getContainerStyle()}
192-
backdropComponent={renderBackdrop}
193-
backgroundStyle={props.styles.container}
194-
handleComponent={null}
195-
handleStyle={{ display: "none" }}
196-
>
197-
<BottomSheetScrollView contentContainerStyle={{ paddingBottom: SCROLL_PADDING_BOTTOM }}>
198-
{props.itemsBasic.map((item, index) => renderItem(item, index))}
199-
</BottomSheetScrollView>
200-
</BottomSheet>
201-
)}
202-
</GestureHandlerRootView>
183+
{ready && (
184+
<BottomSheet
185+
ref={bottomSheetRef}
186+
index={0}
187+
snapPoints={snapPoints}
188+
animateOnMount
189+
enablePanDownToClose
190+
onChange={handleChange}
191+
onClose={() => handleChange(-1)}
192+
style={getContainerStyle()}
193+
backdropComponent={renderBackdrop}
194+
backgroundStyle={props.styles.container}
195+
handleComponent={null}
196+
handleStyle={{ display: "none" }}
197+
>
198+
<BottomSheetScrollView contentContainerStyle={{ paddingBottom: SCROLL_PADDING_BOTTOM }}>
199+
{props.itemsBasic.map((item, index) => renderItem(item, index))}
200+
</BottomSheetScrollView>
201+
</BottomSheet>
202+
)}
203203
</Modal>
204204
);
205205
};

0 commit comments

Comments
 (0)