Page MenuHomePhabricator
Files F3173743

D9374.diff
No OneTemporary
Actions

D9374.diff
View Options

diff --git a/native/bottom-sheet/bottom-sheet-backdrop.react.js b/native/bottom-sheet/bottom-sheet-backdrop.react.js
--- a/native/bottom-sheet/bottom-sheet-backdrop.react.js
+++ b/native/bottom-sheet/bottom-sheet-backdrop.react.js
@@ -1,40 +1,36 @@
// @flow
-import { BottomSheetBackdrop as Backdrop } from '@gorhom/bottom-sheet';
+import { useBottomSheet } from '@gorhom/bottom-sheet';
import * as React from 'react';
-import type { SharedValue } from 'react-native-reanimated';
-
-type BackdropPressBehavior = 'none' | 'close' | 'collapse';
+import { View, TouchableWithoutFeedback, StyleSheet } from 'react-native';
+import { type SharedValue } from 'react-native-reanimated';
type Props = {
+animatedIndex: SharedValue<number>,
- +animatedPosition: SharedValue<number>,
- +opacity?: number,
- +appearsOnIndex?: number,
- +disappearsOnIndex?: number,
- +enableTouchThrough?: boolean,
- +pressBehavior?: BackdropPressBehavior | number,
};
function BottomSheetBackdrop(props: Props): React.Node {
- const {
- opacity,
- appearsOnIndex,
- disappearsOnIndex,
- enableTouchThrough,
- pressBehavior,
- } = props;
+ const { animatedIndex } = props;
+
+ const { close } = useBottomSheet();
+
+ const onPressBackdrop = React.useCallback(() => {
+ if (animatedIndex.value >= 0) {
+ close();
+ }
+ }, [animatedIndex.value, close]);
return (
- <Backdrop
- {...props}
- opacity={opacity ?? 0.5}
- appearsOnIndex={appearsOnIndex ?? 0}
- disappearsOnIndex={disappearsOnIndex ?? -1}
- enableTouchThrough={enableTouchThrough ?? false}
- pressBehavior={pressBehavior ?? 'close'}
- />
+ <TouchableWithoutFeedback onPress={onPressBackdrop}>
+ <View style={styles.backdropContainer} />
+ </TouchableWithoutFeedback>
);
}
+const styles = StyleSheet.create({
+ backdropContainer: {
+ flex: 1,
+ },
+});
+
export default BottomSheetBackdrop;
diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js
--- a/native/navigation/root-navigator.react.js
+++ b/native/navigation/root-navigator.react.js
@@ -283,6 +283,7 @@
<Root.Screen
name={UserProfileBottomSheetRouteName}
component={UserProfileBottomSheet}
+ options={modalOverlayScreenOptions}
/>
</Root.Navigator>
);

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 8, 3:35 PM (1 h, 20 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2441245
Default Alt Text
D9374.diff (2 KB)

Event Timeline