snapToItem does not work with an index larger than initialNumToRender

Is this a bug report or a feature request?

Bug report

Have you read the guidelines regarding bug report?

Yes.

Have you read the documentation in its entirety?

Yes.

Have you made sure that your issue hasn’t already been reported/solved?

I have seen multiple similar issues (#313, #63, #193, #235). I haven’t been able to find any duplicates, though. Most of these have ended up being issues with FlatList. However, I don’t see that being the case for this issue, as an implementation using FlatList’s scrollToOffset shouldn’t give any issues. I haven’t tested it, though.

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

To be honest, I haven’t tested it on iOS. I have only tested on Android 8.1.0

Is the bug reproductible in a production environment (not a debug one)?

Yes. I’ve reproduced it on Android with an app signed and bundled for release.

Have you made sure that it wasn’t a React Native bug?

It might be an issue with Flatlist, as setting initialNumToRender and windowSize to large values fixes it.

However, I think an implementation using FlatList’s scrollToOffset could fix it.

Have you been able to reproduce the bug in the provided example?

No, I have not reproduced it in the example. I have provided a minimal Snack.

Environment

Environment: React: 16.0.0-beta.5 React native: 0.55.4 react-native-snap-carousel: 3.7.0

Target Platform: Android (8.1.0)

Steps to Reproduce

1. Set up a carousel with a large dataset
2. Try to use carousel.snapToItem(index) with a large index
3. See that it doesn’t scroll all the way.

Expected Behavior

Carousel scrolls to the large index.

Actual Behavior

Carousel does not scroll to the large index. It only scrolls to the last item currently rendered.

Reproducible Demo

Have a snack!

Lastly, I just wanted to thank you. Awesome project, guys!

[rogerkerse]

Same problem, why is this thread closed when the issue remains?

[uday-brainium]

Hi @lukasgjetting,

Thanks for taking the time to put up a top quality bug report!

I ran the ultimate test to find out if this was a FlatList bug: I’ve set prop useScrollView to true on the carousel. Well, the bad news is that everything works properly when the prop is enabled, which therefore reveals a classic FlatList problem…

Your suggestion of using scrollToOffset is spot on in order to prevent a few FlatList bugs. But note that this has already been implemented a long time ago, based on the insights found in this comment.

Here are a few related threads from the RN repo. Unfortunately, no solution has emerged yet.

• facebook/react-native#1831
• facebook/react-native#8607
• facebook/react-native#13316
• facebook/react-native#13202
• facebook/react-native#15734
• facebook/react-native#16676
• facebook/react-native#19969

I’m still hoping for a proper solution, even though I’m now clearly leaning towards replacing FlatList altogether (see #250 for more info). Do not hesitate to share any info you can find or any workaround you can think of 😉

Hi @lukasgjetting,

Thanks for taking the time to put up a top quality bug report!

I ran the ultimate test to find out if this was a FlatList bug: I’ve set prop useScrollView to true on the carousel. Well, the bad news is that everything works properly when the prop is enabled, which therefore reveals a classic FlatList problem…

Your suggestion of using scrollToOffset is spot on in order to prevent a few FlatList bugs. But note that this has already been implemented a long time ago, based on the insights found in this comment.

Here are a few related threads from the RN repo. Unfortunately, no solution has emerged yet.

• facebook/react-native#1831
• facebook/react-native#8607
• facebook/react-native#13316
• facebook/react-native#13202
• facebook/react-native#15734
• facebook/react-native#16676
• facebook/react-native#19969

I’m still hoping for a proper solution, even though I’m now clearly leaning towards replacing FlatList altogether (see #250 for more info). Do not hesitate to share any info you can find or any workaround you can think of 😉

This workaround is saved my day. Thanks a lot.