diff --git a/native/bottom-sheets/bottom-sheet-backdrop.react.js b/native/bottom-sheets/bottom-sheet-backdrop.react.js new file mode 100644 --- /dev/null +++ b/native/bottom-sheets/bottom-sheet-backdrop.react.js @@ -0,0 +1,40 @@ +// @flow + +import { BottomSheetBackdrop as Backdrop } from '@gorhom/bottom-sheet'; +import * as React from 'react'; +import type { SharedValue } from 'react-native-reanimated'; + +type BackdropPressBehavior = 'none' | 'close' | 'collapse'; + +type Props = { + +animatedIndex: SharedValue, + +animatedPosition: SharedValue, + +opacity?: number, + +appearsOnIndex?: number, + +disappearsOnIndex?: number, + +enableTouchThrough?: boolean, + +pressBehavior?: BackdropPressBehavior | number, +}; + +function BottomSheetBackdrop(props: Props): React.Node { + const { + opacity, + appearsOnIndex, + disappearsOnIndex, + enableTouchThrough, + pressBehavior, + } = props; + + return ( + + ); +} + +export default BottomSheetBackdrop; diff --git a/native/bottom-sheets/bottom-sheet.react.js b/native/bottom-sheets/bottom-sheet.react.js --- a/native/bottom-sheets/bottom-sheet.react.js +++ b/native/bottom-sheets/bottom-sheet.react.js @@ -3,6 +3,7 @@ import { BottomSheetModal } from '@gorhom/bottom-sheet'; import * as React from 'react'; +import BottomSheetBackdrop from './bottom-sheet-backdrop.react.js'; import BottomSheetHandle from './bottom-sheet-handle.react.js'; import { useStyles } from '../themes/colors.js'; @@ -26,6 +27,7 @@ backgroundStyle={styles.background} snapPoints={snapPoints} handleComponent={BottomSheetHandle} + backdropComponent={BottomSheetBackdrop} > {children}