Add hideable prop

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                                                  |

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(() => {
@@ -123,7 +130,8 @@ export const DraggablePanel = React.forwardRef<
         Platform.OS === 'android' &&
         hideOnBackButtonPressed &&
         !animating &&
-        popupVisible
+        popupVisible &&
+        hideable
       ) {
         hide();
       }
@@ -213,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>