Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
pristinejudah opened this issue Aug 28, 2022 · 0 comments

Comments

@pristinejudah
Copy link

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch [email protected] 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant