leecade / react-native-swiper

The best Swiper component for React Native.
MIT License
10.4k stars 2.34k forks source link

Programatic scrollling getting stuck #1134

Open tcodes0 opened 4 years ago

tcodes0 commented 4 years ago

Which OS ?

macos 10.14.6

Version

Which versions are you using:

Expected behaviour

When controlling image swiping programatically using scrollBy, with scrollEnabled={false}, the component does not become unresponsive

Actual behaviour

scrolling feels stuck and unresponsive

How to reproduce it>

To help us, please fork this component, modify one example in examples folder to reproduce your issue and include link here.

I've made a patch for it, below, it's a simple fix:

diff --git a/node_modules/react-native-swiper/src/index.js b/node_modules/react-native-swiper/src/index.js
index d9deeb4..bac7954 100644
--- a/node_modules/react-native-swiper/src/index.js
+++ b/node_modules/react-native-swiper/src/index.js
@@ -455,14 +455,21 @@ export default class extends Component {
    */

   scrollBy = (index, animated = true) => {
-    if (this.internals.isScrolling || this.state.total < 2) return
+    if (this.internals.isScrolling || this.state.total < 2) {
+      return
+    }
     const state = this.state
     const diff = (this.props.loop ? 1 : 0) + index + this.state.index
     let x = 0
     let y = 0
     if (state.dir === 'x') x = diff * state.width
     if (state.dir === 'y') y = diff * state.height
-
+    // prevent diff from reflecting children that don't exist
+    // which will cause this.internals.isScrolling to get stuck in true
+    // and this method will bounce is the first if, causing the user to get stuck
+    if (diff > this.props.children.length -1 || diff < 0) {
+      return
+    }
     if (Platform.OS !== 'ios') {
       this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
     } else {
meowcorp commented 4 years ago

Create a pull request, please