onMomentumScrollEnd & onTouchStartCapture: wrong index

[losikov]

Which OS ?

MacOS: both iOS and Android simulator

Version

Which versions are you using:

• react-native-swiper v? [email protected]

• react-native v0.?.? "0.61.5"

Expected behaviour

Valid indexes on swipe forward and back. Actual log using v1.6.0-rc.2 which doesn't have an issue:

LOG index: 1 << yes, 1, as 0 is just dismissed LOG index: 2 LOG index: 3 << just swiped to the last slide LOG index: 2 << going back LOG index: 1 LOG index: 0 << to the beginning

onTouchStartCapture has the same issue.

Actual behaviour

LOG index: 0 << it is an index of second view, expected "1" LOG index: 1 LOG index: 2 << just swiped to the last slide LOG index: 3 << I swiped back, but index is increased LOG index: 2 LOG index: 1 << I'm on the first slide

How to reproduce it>

examples/components/Swiper/index.js with loop={false} doesn't work. I couldn't build and run examples in forked project, too many errors (gyp, not found simulator, etc). So, I gave up fixing them and google solutions, and I just copied and pasted it to my own project.

Steps to reproduce

1. run the example examples/components/Swiper/index.js with loop={false}
2. swipe to the end and check log along the way
3. swipe to the beginning and check log along the way

[confidence68]

yes，it has this problem!

[paddy57]

We do get the correct index on expo though, On RN it's giving wrong index as described. Swiper version : 1.5.14 RN: 0.60.5

[ilyarudnitsky]

@losikov , I found temporary solution.

  const handleScrollEnd = useCallback((e, state, context) => {
    setTimeout(() => {
      console.log(context.state.index);  // here you will get right index
    });
  }, []);
  
  return (
      <Swiper
        onMomentumScrollEnd={handleScrollEnd}
        containerStyle={styles.wrapper}
        showsPagination={false}
      >
        {t.map((_t, index) => {
          return (
            <View key={index} style={styles.test}>
              <Text>{_t}</Text>
            </View>
          );
        })}
      </Swiper>
  )

[eat46]

Not working for me...

@losikov , I found temporary solution.

  const handleScrollEnd = useCallback((e, state, context) => {
    setTimeout(() => {
      console.log(context.state.index);  // here you will get right index
    });
  }, []);
  
  return (
      <Swiper
        onMomentumScrollEnd={handleScrollEnd}
        containerStyle={styles.wrapper}
        showsPagination={false}
      >
        {t.map((_t, index) => {
          return (
            <View key={index} style={styles.test}>
              <Text>{_t}</Text>
            </View>
          );
        })}
      </Swiper>
  )

[deyanskiq]

any update here?