leecade / leecade/react-native-swiper

scrollTo works improperly

Open
#1,213 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
10.5k
Forks
2.3k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction in examples/components/Basic/index.js and trace the ref-based scrollTo call from onIndexChanged. Reproduce the one-slide lag described in the issue, then verify that scrollTo acts immediately on the requested index rather than waiting for the swiper state to update.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.