React-native-swiper: 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>
  )