scrollBy behaves differently on iOS works perfectly fine on Android

[jayzyaj]

Which OS ?

iOS

Version

Which versions are you using:

• react-native-swiper v? ^1.6.0
• react-native v0.?.? 0.62.2

Expected behaviour

Swiping programmatically when tapping the next button by calling swiperEl.current!.scrollBy(1) works perfectly on Android but not on iOS. It only works for the first time when I tap on next button but when I do it for the second time it persists on the second component and it didn't move to the third screen or component.

Gif below:

Full code below:

const Slider = ({ index }: SliderProps) => {
  const swiperEl = useRef<Swiper>(null);

  useEffect(() => {
      swiperEl.current!.scrollBy(1);
  }, [index, swiperEl]);

  return (
    <View style={styles.sliderContainer}>
      <Swiper
        scrollEnabled={false}
        // index={index}
        activeDotColor={colors.secondary}
        ref={swiperEl}
        paginationStyle={{ position: 'relative' }}
      >
        <View style={styles.slideContent}>
          <LottieView
            style={styles.wrapperContent}
            hardwareAccelerationAndroid
            source={careAnimation}
            autoPlay
            loop={false}
          />
        </View>
        <View style={styles.slideContent}>
          <LottieView
            style={styles.wrapperContent}
            hardwareAccelerationAndroid
            source={connectAnimation}
            autoPlay
            loop={false}
          />
        </View>
        <View style={styles.slideContent}>
          <LottieView
            style={styles.wrapperContent}
            hardwareAccelerationAndroid
            source={celebrateAnimation}
            autoPlay
            loop={false}
          />
        </View>
      </Swiper>
    </View>
  );

Actual behaviour

It should behave the sameway as Android.

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.

Steps to reproduce

1. Create an index useState hook if which slider component is active.
2. Update that index when clicking a button. By using useEffect hook at Slider component.
3. Trigger swiperEl.current!.scrollBy(1) when index is changed.

[wmonecke]

I am experiencing the same issue but on android after upgrading to RN 0.62.2. It was working fine on RN 0.60.4.

[Satya5614]

Having same issue

[BeKnowDo]

Same issue here - if you're leverage useState hook it screws up the current swipe index on iOS. For our purposes, we're using useState hook to hide/show the previous navigation button if the user is on the first index (zero)

[srswain2]

I am having the exact same issue. Any solution/workaround for this?

[AndyPSI]

I'm also experiencing the same issue, regardless of using ScrollBy or ScrollTo the swiper.current.state.index value remains at 0 and fails unless hardcoded.

[jmmunoz14]

Same issue. no fix yet.