kkemple/react-native-sideswipe

Unable to disable dragging on SideSwipe component

andrewsadowski opened this issue · 7 comments

andrewsadowski commented

After 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(R) Core(TM) 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)
rubycon commented

Hi @andrewsadowski, your issue is related to #59. For now sideswipe doesn't allow custom callback for the onStartShouldSetPanResponder event of the Pan Responder.

You can update sideswipe carousel.js as indicated in #59. Or even better make a pull request to fix it for everyone!

andrewsadowski commented

@rubycon - Thanks so much! Adjusting the onStartShouldSetPanResponder worked like a charm!

nasreekar commented

@andrewsadowski and @rubycon I see this issue is fixed and merged already but I still see it is set to true in carousel.js file.
Am I missing something here?

I tried changing it locally on my end and set
onStartShouldSetPanResponder: () => this.handleGestureCapture on carousel.js file and then while using it in the FE, I set shouldCapture={() => false} and it is still not working. Any help on the same is appreciated :)

andrewsadowski commented

I ended up forking this library and hard setting onStartShouldSetPanResponder: () => false, to solve this issue. I would suggest fiddling with it (maybe adding some props to toggle these settings if you need some to be swipe-able and others not, thats what I ended up doing).

  • 👍1
nasreekar commented

@andrewsadowski thanks for the inputs. I just want the swipe action to be disabled on certain conditions based on a boolean value which is something similar to what you started this thread for. do you have any of those changes saved like fiddler or github docs for reference?

andrewsadowski commented

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!

  • 👍1
  • 🚀1
nasreekar commented

@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)

  • 🎉1