PATCH CONSIDERATION - Currently backdrop can't be shown with its touch event disabled
pristinejudah opened this issue Β· comments
Pristine Judah commented
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.