dhre-ui-kit 0.0.35 → 0.0.37

package/__mocks__/setup-tests.ts

@@ -19,3 +19,6 @@ jest.mock('react-native-webview', () => {
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
+jest.mock('react-native-gesture-handler', () => ({
+  PanGestureHandler: jest.fn(({children}) => children),
+}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dhre-ui-kit",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "main": "src/index.ts",
   "files": [
     "src",

package/src/components/bottomDrawer/BottomDrawer.interface.ts

@@ -11,10 +11,12 @@ export interface BottomDrawerProps {
   modalContainerStyle?: ViewStyle;
   blurAmount?: number;
   blurViewStyle?: ViewStyle;
+  showBlurView?: boolean;
   leftIcon?: React.ReactElement;
   rightIcon?: React.ReactElement;
   showLeftIcon?: boolean;
   showRightIcon?: boolean;
   onLeftIconPress?: () => void;
   titleStyle?: TextStyle;
+  titleVariant?: string;
 }

package/src/components/bottomDrawer/BottomDrawer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View, Modal} from 'react-native';
+import {PanGestureHandler} from 'react-native-gesture-handler';
 import {BlurView} from '@react-native-community/blur';
 import {BottomDrawerProps} from './BottomDrawer.interface';
 import styles from './BottomDrawer.styles';
@@ -17,51 +18,64 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
   modalContainerStyle,
   blurAmount = 10,
   blurViewStyle,
+  showBlurView = true,
   showLeftIcon = false,
   showRightIcon = true,
   leftIcon = <ArrowLeft />,
   rightIcon = <CrossIcon />,
   onLeftIconPress,
   titleStyle,
+  titleVariant = 'B2_REGULAR',
 }) => {
+  const onSwipDown = (event: {nativeEvent: {translationY: number}}) => {
+    const {translationY} = event.nativeEvent;
+    if (translationY > 50) {
+      toggleModal();
+    }
+  };
+
   return (
     <Modal
       animationType="slide"
       transparent={true}
       visible={isModalVisible}
       onRequestClose={toggleModal}>
-      <View style={[styles.mainContainer, style]} testID={testID}>
-        <BlurView
-          style={[styles.blurView, blurViewStyle]}
-          blurType="light"
-          blurAmount={blurAmount}
-        />
-        <View style={[styles.modalContainer, modalContainerStyle]}>
-          <View style={styles.separator} />
-          <View style={styles.headerContainer}>
-            {showLeftIcon &&
-              React.cloneElement(leftIcon, {
-                width: moderateScale(24),
-                height: moderateScale(24),
-                style: styles.leftIconStyle,
-                onPress: onLeftIconPress,
-              })}
-            <CustomTypography
-              variant="B2_REGULAR"
-              text={title}
-              style={[styles.title, titleStyle]}
+      <PanGestureHandler onGestureEvent={onSwipDown}>
+        <View style={[styles.mainContainer, style]} testID={testID}>
+          {showBlurView ? (
+            <BlurView
+              style={[styles.blurView, blurViewStyle]}
+              blurType="light"
+              blurAmount={blurAmount}
             />
-            {showRightIcon &&
-              React.cloneElement(rightIcon, {
-                width: moderateScale(24),
-                height: moderateScale(24),
-                style: styles.rightIconStyle,
-                onPress: toggleModal,
-              })}
+          ) : null}
+          <View style={[styles.modalContainer, modalContainerStyle]}>
+            <View style={styles.separator} />
+            <View style={styles.headerContainer}>
+              {showLeftIcon &&
+                React.cloneElement(leftIcon, {
+                  width: moderateScale(24),
+                  height: moderateScale(24),
+                  style: styles.leftIconStyle,
+                  onPress: onLeftIconPress,
+                })}
+              <CustomTypography
+                variant={titleVariant}
+                text={title}
+                style={{...styles.title, ...titleStyle}}
+              />
+              {showRightIcon &&
+                React.cloneElement(rightIcon, {
+                  width: moderateScale(24),
+                  height: moderateScale(24),
+                  style: styles.rightIconStyle,
+                  onPress: toggleModal,
+                })}
+            </View>
+            {children}
           </View>
-          {children}
         </View>
-      </View>
+      </PanGestureHandler>
     </Modal>
   );
 };

package/src/components/checkBox/CheckBox.tsx

@@ -29,10 +29,7 @@ const Checkbox: React.FC<CheckBoxProps> = ({
         testID={'Checkbox-Press'}
         onPress={handlePress}
         disabled={disable}
-        style={({pressed}) => [
-          styles.directionStyle,
-          {opacity: pressed ? 0.5 : 1},
-        ]}>
+        style={styles.directionStyle}>
         <View style={styles.checkboxContainer}>
           {React.cloneElement(checked ? checkedIcon : uncheckedIcon)}
         </View>