octopitus / rn-sliding-up-panel

Draggable sliding up panel implemented in React Native https://octopitus.github.io/rn-sliding-up-panel/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

PATCH CONSIDERATION - Currently backdrop can't be shown with its touch event disabled

pristinejudah opened this issue Β· comments

Hi! πŸ‘‹

Firstly, thanks for your work on this project! πŸ™‚

Today I used patch-package to patch rn-sliding-up-panel@2.4.5 for the project I'm working on.

I noticed there's no way to disable the backdrop click event while still showing it, so the fix that worked for me was adding a new boolean prop that determines if the backdrop should be allowed to hide the panel, with its default value being true to allow for backward compatibility.

Here is the diff that solved my problem:

diff --git a/node_modules/rn-sliding-up-panel/SlidingUpPanel.js b/node_modules/rn-sliding-up-panel/SlidingUpPanel.js
index 09bb2d1..2bfd960 100644
--- a/node_modules/rn-sliding-up-panel/SlidingUpPanel.js
+++ b/node_modules/rn-sliding-up-panel/SlidingUpPanel.js
@@ -54,6 +54,7 @@ class SlidingUpPanel extends React.PureComponent {
     allowMomentum: PropTypes.bool,
     allowDragging: PropTypes.bool,
     showBackdrop: PropTypes.bool,
+    shouldBackdropHidePanel: PropTypes.bool,
     backdropOpacity: PropTypes.number,
     friction: PropTypes.number,
     containerStyle: ViewPropTypes.style,
@@ -77,6 +78,7 @@ class SlidingUpPanel extends React.PureComponent {
     allowMomentum: true,
     allowDragging: true,
     showBackdrop: true,
+    shouldBackdropHidePanel: true,
     backdropOpacity: 0.75,
     friction: Constants.DEFAULT_FRICTION,
     onBottomReached: () => null,
@@ -402,13 +404,17 @@ class SlidingUpPanel extends React.PureComponent {
       extrapolate: 'clamp'
     })
 
+    const handleOnTouchEnd = () => {
+      this.props.shouldBackdropHidePanel && this.hide()
+    }
+
     return (
       <Animated.View
         key="backdrop"
         pointerEvents={this._backdropPointerEvents}
         ref={c => (this._backdrop = c)}
         onTouchStart={() => this._flick.stop()}
-        onTouchEnd={() => this.hide()}
+        onTouchEnd={() => handleOnTouchEnd()}
         style={[styles.backdrop, backdropStyle, {opacity: backdropOpacity}]}
       />
     )
diff --git a/node_modules/rn-sliding-up-panel/index.d.ts b/node_modules/rn-sliding-up-panel/index.d.ts
index 95c6d7b..e13676a 100644
--- a/node_modules/rn-sliding-up-panel/index.d.ts
+++ b/node_modules/rn-sliding-up-panel/index.d.ts
@@ -24,6 +24,7 @@ export interface SlidingUpPanelProps {
   allowMomentum?: boolean
   allowDragging?: boolean
   showBackdrop?: boolean
+  shouldBackdropHidePanel?: boolean
   backdropOpacity?: number
   friction?: number
   containerStyle?: StyleProp<ViewStyle>

This issue body was partially generated by patch-package.