Merge pull request #13 from nelyousfi/1.2.1

1.2.1

Author: nelyousfi

README.md

@@ -63,10 +63,11 @@ render () {
 | visible                 | boolean  | false             | Controls the panel's visibility                                                                  |
 | animationDuration       | number   | 500               | Controls the duration in ms to show or hide the panel                                            |
 | expandable              | boolean  | false             | Controls if the panel can be expanded or not                                                     |
+| hideable                | boolean  | true              | Controls if the panel can be hidden when press outside or on the android physical back button    |
 | hideOnPressOutside      | boolean  | true              | Controls neither to hide the panel when user presses on the overlay or not                       |
 | overlayBackgroundColor  | Color    | black             | Controls the backgroundColor of the overlay                                                      |
 | overlayOpacity          | number   | 0.8               | Is a value between 0 and 1 that controls the overlay opacity                                     |
 | borderRadius            | number   | 0                 | Controls the panel top border radius                                                             |
-| initialHeight                  | number   | SCREEN_HEIGHT / 2 | Controls the panel initial height                                                                |
+| initialHeight           | number   | SCREEN_HEIGHT / 2 | Controls the panel initial height                                                                |
 | hideOnBackButtonPressed | boolean  | true              | Controls either the panel get dismissed on android physical button pressed or not [Android ONLY] |
 | onDismiss               | callback |                   | A callback function when the panel is dismissed                                                  |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-draggable-panel",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A react native draggable panel for Android and iOS",
   "author": "Naoufal ELYOUSSOUFI <[email protected]> (https://github.com/nelyousfi)",
   "main": "dist/index.js",

src/DraggablePanel.tsx

@@ -26,6 +26,7 @@ type Props = {
   visible?: boolean;
   animationDuration?: number;
   expandable?: boolean;
+  hideable?: boolean;
   hideOnPressOutside?: boolean;
   overlayBackgroundColor?: string;
   overlayOpacity?: number;
@@ -50,20 +51,26 @@ export const DraggablePanel = React.forwardRef<
       borderRadius = 0,
       initialHeight = DEFAULT_PANEL_HEIGHT / 2,
       hideOnBackButtonPressed = true,
+      hideable = true,
       onDismiss,
       children,
     }: Props,
     ref: React.Ref<ReactNativeDraggablePanelRef>,
   ) => {
     const [animatedValue] = React.useState(new Animated.Value(0));
+
     const [popupVisible, togglePopupVisibility] = React.useState(false);
+
     const [animating, setAnimating] = React.useState(false);
+
     const [height] = React.useState(
       Math.min(initialHeight, DEFAULT_PANEL_HEIGHT),
     );
+
     const [innerContentHeight, setInnerContentHeight] = React.useState(
       Math.min(initialHeight, DEFAULT_PANEL_HEIGHT),
     );
+
     const scrollViewRef: RefObject<ScrollView> = React.useRef(null);
 
     React.useEffect(() => {
@@ -77,7 +84,7 @@ export const DraggablePanel = React.forwardRef<
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [visible]);
 
-    const show = React.useCallback(() => {
+    const show = () => {
       if (!animating) {
         animatedValue.setValue(0);
         setInnerContentHeight(Math.min(initialHeight, DEFAULT_PANEL_HEIGHT));
@@ -96,9 +103,9 @@ export const DraggablePanel = React.forwardRef<
           setAnimating(false);
         });
       }
-    }, [animatedValue, animating, animationDuration, height, initialHeight]);
+    };
 
-    const hide = React.useCallback(() => {
+    const hide = () => {
       if (!animating) {
         setAnimating(true);
         Animated.timing(animatedValue, {
@@ -116,18 +123,19 @@ export const DraggablePanel = React.forwardRef<
           onDismiss && onDismiss();
         });
       }
-    }, [animatedValue, animating, animationDuration, onDismiss]);
+    };
 
-    const onBackButtonPress = React.useCallback(() => {
+    const onBackButtonPress = () => {
       if (
         Platform.OS === 'android' &&
         hideOnBackButtonPressed &&
         !animating &&
-        popupVisible
+        popupVisible &&
+        hideable
       ) {
         hide();
       }
-    }, [hideOnBackButtonPressed, animating, popupVisible, hide]);
+    };
 
     React.useImperativeHandle<
       ReactNativeDraggablePanelRef,
@@ -137,51 +145,46 @@ export const DraggablePanel = React.forwardRef<
       hide,
     }));
 
-    const onScroll = React.useCallback(
-      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-        if (!animating) {
-          const {y} = event.nativeEvent.contentOffset;
-          if (
-            !expandable &&
-            y < SCREEN_HEIGHT - (SCREEN_HEIGHT * height) / DEFAULT_PANEL_HEIGHT
-          ) {
-            return;
-          }
-          animatedValue.setValue(1 - Math.floor(y) / Math.floor(SCREEN_HEIGHT));
-          // >= Fix the android issue, cause for some reason it goes for more than SCREEN_HEIGHT
-          // if the use swipes faster
-          if (Math.floor(y) >= Math.floor(SCREEN_HEIGHT)) {
-            togglePopupVisibility(false);
-            setAnimating(false);
-            onDismiss && onDismiss();
-          }
+    const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!animating) {
+        const {y} = event.nativeEvent.contentOffset;
+        if (
+          !expandable &&
+          y < SCREEN_HEIGHT - (SCREEN_HEIGHT * height) / DEFAULT_PANEL_HEIGHT
+        ) {
+          return;
         }
-      },
-      [animatedValue, animating, expandable, height, onDismiss],
-    );
-
-    const onScrollBeginDrag = React.useCallback(
-      (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-        if (e.nativeEvent.contentOffset.y !== 0 && expandable) {
-          setInnerContentHeight(DEFAULT_PANEL_HEIGHT);
+        animatedValue.setValue(1 - Math.floor(y) / Math.floor(SCREEN_HEIGHT));
+        // >= Fix the android issue, cause for some reason it goes for more than SCREEN_HEIGHT
+        // if the use swipes faster
+        if (Math.floor(y) >= Math.floor(SCREEN_HEIGHT)) {
+          togglePopupVisibility(false);
+          setAnimating(false);
+          onDismiss && onDismiss();
         }
-      },
-      [expandable],
-    );
+      }
+    };
 
-    const onMomentumScrollEnd = React.useCallback(
-      (e: NativeSyntheticEvent<NativeScrollEvent>) => {
-        if (expandable) {
-          const {y} = e.nativeEvent.contentOffset;
-          if (y !== 0) {
-            setInnerContentHeight(height);
-          } else {
-            setInnerContentHeight(DEFAULT_PANEL_HEIGHT);
-          }
+    const onScrollBeginDrag = (
+      event: NativeSyntheticEvent<NativeScrollEvent>,
+    ) => {
+      if (event.nativeEvent.contentOffset.y !== 0 && expandable) {
+        setInnerContentHeight(DEFAULT_PANEL_HEIGHT);
+      }
+    };
+
+    const onMomentumScrollEnd = (
+      event: NativeSyntheticEvent<NativeScrollEvent>,
+    ) => {
+      if (expandable) {
+        const {y} = event.nativeEvent.contentOffset;
+        if (y !== 0) {
+          setInnerContentHeight(height);
+        } else {
+          setInnerContentHeight(DEFAULT_PANEL_HEIGHT);
         }
-      },
-      [height, expandable],
-    );
+      }
+    };
 
     return (
       <Modal
@@ -218,7 +221,7 @@ export const DraggablePanel = React.forwardRef<
               SCREEN_HEIGHT,
             ]}>
             <TouchableWithoutFeedback
-              disabled={!hideOnPressOutside || animating}
+              disabled={!hideOnPressOutside || animating || !hideable}
               onPress={hide}>
               <View style={styles.hideContainer} />
             </TouchableWithoutFeedback>