Unable to disable dragging on SideSwipe component
See original GitHub issueAfter updating React-Native to v.0.59.1, I’m no longer able to disable the user’s ability to swipe through cards in the SideSwipe component with shouldCapture={() => false}
.
I’ve tried disabling this via the onIndexChange
prop, but also no dice. I’ve also tried disabling gestures with the pointerEvents
prop, but that also seemingly will not work for this use case.
This is an excerpt of our render method for the component that houses our instance of SideSwipe. Any help would be greatly appreciated!
<View style={styles.alignCenter}>
<SideSwipe
index={indexOfScreen}
itemWidth={MACHINE_CARD_WIDTH + 8}
style={styles.carousel}
data={screens}
shouldCapture={() => false}
contentOffset={contentOffset}
renderItem={({ currentIndex, item }) => this._renderCarouselItem({ currentIndex, item })}
/>
</View>
EnvInfo: System: OS: macOS 10.14.6 CPU: (4) x64 Intel® Core™ i5-7360U CPU @ 2.30GHz Memory: 3.20 GB / 16.00 GB Shell: 5.3 - /bin/zsh Binaries: Node: 11.9.0 - /usr/local/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.10.2 - ~/.npm-global/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Utilities: Make: 3.81 - /usr/bin/make GCC: 10.14. - /usr/bin/gcc Git: 2.20.1 - /usr/local/bin/git Servers: Apache: 2.4.34 - /usr/sbin/apachectl Virtualization: Docker: 18.09.2 - /usr/local/bin/docker SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 18, 19, 21, 23, 25, 26, 27, 28, 29 Build Tools: 27.0.3, 28.0.3 System Images: android-21 | ARM EABI v7a, android-21 | Intel x86 Atom, android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.4 AI-183.6156.11.34.5522156 Atom: 1.38.2 Emacs: 22.1.1 - /usr/bin/emacs Nano: 2.0.6 - /usr/bin/nano VSCode: 1.36.1 - /usr/local/bin/code Vim: 8.0 - /usr/bin/vim Xcode: 10.1/10B61 - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Go: 1.12.5 - /usr/local/go/bin/go Java: 1.8.0_201 - /usr/bin/javac Perl: 5.18.4 - /usr/bin/perl PHP: 7.3.4 - /usr/local/bin/php Python: 2.7.10 - /usr/bin/python Ruby: 2.3.7 - /usr/bin/ruby Databases: SQLite: 3.24.0 - /usr/bin/sqlite3 Browsers: Chrome: 76.0.3809.87 Firefox Developer Edition: 69.0 Safari: 12.1.2
Please make sure these boxes are checked before submitting your issue!
- I ran
[envinfo](https://www.npmjs.com/package/envinfo)
and added results to issue (if bug related) - I created a reproduction example in expo (if bug related)
Issue Analytics
- State:
- Created 4 years ago
- Comments:7
Top GitHub Comments
What I ended up doing is adding a boolean page prop that toggles swipe-ability in this way:
onStartShouldSetPanResponder: () => false, onMoveShouldSetPanResponder: () => this.props.page === 'swipeablePage' ? this.handleGestureCapture : false,
If the page prop is true its swipe-able, other wise it doesn’t respond to swipes. Hope that helps!@andrewsadowski thanks for the suggestion. I finally managed to fix the disabling of swipe. I just didn’t want to go through the entire hassle of changing the code… instead I created a dummy view like an overlay on the entire swipe view panning the entire width(mine is not a full-page sideswipe but instead a mini side swipe similar to a carousel of offers in any of the food delivery apps or ride sharing apps)