react-native-swiper icon indicating copy to clipboard operation
react-native-swiper copied to clipboard

scrollTo works improperly

Open sowf opened this issue 4 years ago • 3 comments

Which OS ?

Windows 10 x64

Version

Which versions I am using:

  • react-native-swiper v 1.6.0-rc.3?
  • react-native v0.63.2

Expected behaviour

When using inside onIndexChanged() it lags behind by 1 slide.

const MyScreen= () => {
const [currentIndex, setCurrentIndex] = useState(0);
const swiper = React.createRef();
const onIndexChanged = (index) => {
    console.log('Changed to ' + index);
    console.log(swiper.current.state.index);
    if (index > currentIndex) {
      console.log('Inside');
      swiper.current.scrollTo(currentIndex);
    }
  };
return (
    <Swiper
      ref={swiper}
      onIndexChanged={onIndexChanged}
      paginationStyle={styles.swiperPagination}
      dotColor={appColors.primary.dark}
      activeDotColor={appColors.primary.light}
      buttonWrapperStyle={{borderColor: 'white'}}
      loop={false}
      showsButtons
      nextButton={<Text style={styles.swiperButton}>›</Text>}
      prevButton={<Text style={styles.swiperButton}>‹</Text>}>
      {slides}
    </Swiper>

If I swipe left index changes to 1 (initial index = 0) and condition (index > currentIndex = true) is met, so it should be scrolled to slide with index 0

Actual behaviour

After left swipe condition (index > currentIndex = true) is met, so console logs 'Inside', but swiper.current.scrollTo(currentIndex) doesn't work. It happens because swiper state index value is one unit behind real index value and scrollTo function checks whether is it on the same slide, state says yes and nothing changes.

START! image SWIPE! image image SWIPE! image image

So instead of immediate scrolling scrollTo function waits untill its state changes, and then it scrolls to slide with 0 index. As I have already mentioned it happens because swiper state index value is one unit behind real index value

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 Swiper
  2. Add onIndexChanged and ref props
  3. Try to call scrollTo function inside of onIndexChanged function

sowf avatar Aug 20 '20 18:08 sowf

+1

hellintonklein avatar Dec 15 '20 02:12 hellintonklein

+1

ScrollTo and ScrollBy either don't work or show a blank view when used.

Nesh108 avatar Oct 20 '21 09:10 Nesh108

Same here. Version 1.6.0

ithustle avatar Jan 03 '22 11:01 ithustle