meliorence / meliorence/react-native-snap-carousel
initialScrollIndex does not work all the time
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 10.5k
- Forks
- 2.3k
- PR merge metrics
- No merged PRs in 30d
Description
Is this a bug report, a feature request, or a question?
This is a bug report.
The possibility to be able to use the props getItemLayout & initialScrollIndex (which I believe is a very good idea because of the optimisation of getItemLayout) does not work all the time.
Sometimes, the initialScrollIndex() does not work and renders the first item. The bug does not appear all the time, sometimes it works perfectly and sometimes it doesn't. I have tried with a normal Flatlist in which all the items are the size of the screen to be sure if it is not a bug from Flatlist but it never failed. So the problem comes from SnapCarousel.
To explain what I am doing, I use the snap-carousel to show pictures fullscreen and the user can swipe between the pictures. The first picture rendered depends on what picture the user pressed before in a kind of gallery. I always tried with the last item of the list (9 items), and sometimes it show me indeed the last item and sometimes the first item. I do exactly the same actions each time.
I tried also with initialNumToRender() with a value of the index of the first item to show (it was necessary with firstIndex prop) but it does not change anything.
Have you followed the required steps before opening a bug report?
(Check the step you've followed - put an x character between the square brackets ([]).)
- I have read the guidelines regarding bug report.
- I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
- I have searched for existing issues and made sure that the problem hasn't already been reported.
- I am using the latest plugin version.
- I am following the issue template closely in order to produce a useful bug report.
Have you made sure that it wasn't a React Native bug?
Yes, because it works perfectly with a normal Flatlist all the time.
Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?
Tried on two android devices : android 8.1 android 9 => both has the problem
Is the bug reproductible in a production environment (not a debug one)?
I tried without the debug on. The problem appears.
Environment
Environment:
React: 16.8.6
React native: 0.60.5
react-native-snap-carousel: 3.8.4
Target Platform:
Android (8.0 / 0.9)
iOS (latest)
Expected Behavior
I expect that initialScrollIndex() show me the index I passed
Actual Behavior
initialScrollIndex() does not show me all the time the index passed and show me the first item of the list.
Reproducible Demo
I will try to post a reproductible demo. But maybe some other people has encountered the same problem so this post is for that.
Steps to Reproduce
Code used:
getItemLayout = (data, index) => {
return { length: SCREEN_WIDTH, offset: SCREEN_WIDTH * index, index };
}
render() {
<Carousel
ref={this.refCarousel}
data={this.state.render_list}
renderItem={this.renderItem}
sliderWidth={SCREEN_WIDTH}
itemWidth={SCREEN_WIDTH}
containerCustomStyle={[styles.CarouselStyle]}
onBeforeSnapToItem={this.onBeforeSnapToItem}
initialScrollIndex={this.state.initial_index}
contentContainerCustomStyle={styles.contentContainerCustomStyle}
removeClippedSubviews
windowSize={10}
scrollEventThrottle={16}
getItemLayout={this.getItemLayout}
keyExtractor={this.keyExtractor}
shouldOptimizeUpdates={false}
/>
);
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided Carousel usage, especially getItemLayout and initialScrollIndex, and reproduce the intermittent behavior on Android using the stated React Native and carousel versions. Compare the carousel behavior with the reported FlatList behavior; done means the passed initial index is shown consistently instead of the first item.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100