leecade/react-native-swiper

Loop={true} + initialIndex leads to brief off by one error flicker

Open

#1003 opened on Jun 30, 2019

View on GitHub
 (8 comments) (0 reactions) (0 assignees)JavaScript (10,334 stars) (2,346 forks)batch import
component: ViewPagerhelp wanted🐛bug🔎investigate

Description

Which OS ?

iOS

Version

1.6

  • react-native-swiper v1.6
  • react-native v0.59.8

Expected behaviour

I was debugging an issue where setting the index param briefly showed the wrong data (off by one earlier) for a brief second before a redraw happened.

In debugging, this seems to be related to the loop={true} behavior (the default), since eliminating looping causes the offset to be calculated correctly and no flicker.

I'm guessing the implementation has some kind of 'extra' item at the front to handle the left-swipe when looping, and the initialOffset is not accounting for this?

Actual behaviour

Setting index causes it to start drawing on the correct position without a flicker.

Steps to reproduce

  1. Create a Swiper with multiple items, and loop={true}
  2. Set the initial index.
  3. Observe that it is briefly off by one before correcting itself.

Contributor guide

Tech stack
javascriptreact native
Domain
mobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
React Native basicsUnderstanding of swiper component logic
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Investigate the offset calculation logic in the Swiper component when loop is enabled. Examine how initialIndex is applied and whether an extra placeholder item causes the initial offset to be miscalculated. Compare with non loop behavior where no flicker occurs. Look at the source file, likely Swiper.js, and trace the initialOffset setup. Check comments in the issue for any hints from maintainers.