Created dragOutEnabled prop in BottomSheet

Author: Canciller

packages/react-native-eyecandy/src/components/ActionSheet/ActionSheet.tsx

@@ -7,7 +7,7 @@ import Color from 'color';
 
 import { ActionSheetAndroid } from '../../modules';
 import { Body } from '../../typography';
-import BottomSheet from '../BottomSheet';
+import { BottomSheet } from '../BottomSheet';
 import Menu from '../Menu';
 import MenuItemBase from '../MenuItemBase';
 

packages/react-native-eyecandy/src/components/BottomSheet/BottomSheet.tsx

@@ -24,6 +24,7 @@ function ContentWrapper({
   testID,
   disableAnimations,
   setModalInvisible,
+  dragOutEnabled,
 }: {
   children?: React.ReactNode;
   visible?: boolean;
@@ -35,6 +36,7 @@ function ContentWrapper({
   testID?: string;
   disableAnimations?: boolean;
   setModalInvisible: () => void;
+  dragOutEnabled?: boolean;
 }) {
   return (
     <View
@@ -62,6 +64,7 @@ function ContentWrapper({
           visible={visible}
           onDismiss={onClose}
           onClose={setModalInvisible}
+          dragOutEnabled={dragOutEnabled}
         >
           {children}
         </Content>
@@ -82,9 +85,10 @@ export interface BottomSheetProps {
   handleStyle?: StyleProp<ViewStyle>;
   testID?: string;
   disableAnimations?: boolean;
+  dragOutEnabled?: boolean;
 }
 
-function BottomSheet({
+export function BottomSheet({
   children,
   visible = false,
   height,
@@ -94,6 +98,7 @@ function BottomSheet({
   handleStyle,
   testID,
   disableAnimations,
+  dragOutEnabled,
 }: BottomSheetProps) {
   const [modalVisible, setModalVisible] = useState<boolean | undefined>(
     visible,
@@ -126,6 +131,7 @@ function BottomSheet({
         testID={testID}
         disableAnimations={disableAnimations}
         setModalInvisible={setModalInvisible}
+        dragOutEnabled={dragOutEnabled}
       >
         {children}
       </ContentWrapperWithHoc>
@@ -143,5 +149,3 @@ const styles = StyleSheet.create({
     flex: 1,
   },
 });
-
-export default BottomSheet;

packages/react-native-eyecandy/src/components/BottomSheet/Content.tsx

@@ -28,6 +28,7 @@ export interface ContentProps {
   handleStyle?: StyleProp<ViewStyle>;
   testID?: string;
   disableAnimations?: boolean;
+  dragOutEnabled?: boolean;
 }
 
 const clamp = (value: number, lowerBound: number, upperBound: number) => {
@@ -51,6 +52,7 @@ export default function Content({
   handleStyle,
   testID,
   disableAnimations,
+  dragOutEnabled,
 }: ContentProps) {
   const { background, divider } = useColors(c => ({
     background: c.background.default,
@@ -59,7 +61,8 @@ export default function Content({
 
   const fullHeight = 2 * height + handleHeight;
 
-  const topY = -height;
+  // const topY = -height;
+  const topY = dragOutEnabled ? -height : 0;
   const bottomY = height + handleHeight;
 
   const y = useSharedValue(bottomY);

packages/react-native-eyecandy/src/components/BottomSheet/index.ts

@@ -1,2 +1 @@
-export { default } from './BottomSheet';
 export * from './BottomSheet';

packages/react-native-eyecandy/src/components/SwipeConfirmation/SwipeConfirmation.tsx

@@ -7,7 +7,7 @@ import {
 } from 'react-native';
 
 import { Body } from '../../typography';
-import BottomSheet, { BottomSheetProps } from '../BottomSheet';
+import { BottomSheet, BottomSheetProps } from '../BottomSheet';
 import SwipeButton from '../SwipeButton';
 
 export interface SwipeConfirmationProps extends BottomSheetProps {

packages/react-native-eyecandy/src/components/index.ts

@@ -76,8 +76,7 @@ export {
 export { default as SwipeConfirmation } from './SwipeConfirmation';
 export type { SwipeConfirmationProps } from './SwipeConfirmation';
 
-export { default as BottomSheet } from './BottomSheet';
-export type { BottomSheetProps } from './BottomSheet';
+export { BottomSheet, BottomSheetProps } from './BottomSheet';
 
 // export { default as DatePicker } from './DatePicker';
 // export type { DatePickerProps } from './DatePicker';