Unable to disable dragging on SideSwipe component

[andrewsadowski]

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!

• [X] 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]

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]

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

[nasreekar]

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

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

[nasreekar]

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

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!

[nasreekar]

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