question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to disable dragging on SideSwipe component

See original GitHub issue

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® 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:closed
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

2reactions
andrewsadowskicommented, Jul 15, 2020

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!

1reaction
nasreekarcommented, Jul 17, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot disable dragging element · Issue #1167 · react-dnd ...
Hi guys, It is a great plugin indeed. But what I cannot achieve is disabling dragging. I posted this on Stack Overflow but...
Read more >
Disable Drag and Drop on HTML elements? - Stack Overflow
You can disable dragging simply by using draggable="false" attribute. ... I implemented it on a custom input component in Angular 4, ...
Read more >
How do I disable Chrome's two-finger back/forward navigation?
It's a pity that the BetterTouchTools can't just disable the 2-finger swipe gesture for Google Chrome and leave default behaviour for different apps....
Read more >
Sideswipe (RID) - Transformers Wiki
Sphere of Influence Sideswipe and Blurr took part in a mission to capture the Decepticons Drag Strip and Wildbreak, though they had to...
Read more >
Add or remove Edge panels on your Galaxy phone or tablet
To open up the menu, swipe left on the Edge panel handle; it's a gray tab on the right side of the screen....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found