React-native-snap-carousel: activeSlideAlignment not always honored

[akyker20]

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 think so

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

Have not tested on Android.

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

Yes, have this app in testflight (release mode) and this behavior exists.

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

(Write your answer here.)

Environment

(Write your answer here.)

Steps to Reproduce

(Write your steps here:)

1. Set activeSlideAlignment to 'center'
2. Have large number of items (20+) slides,
3. Start carousel with firstItem > 10
4. First item is left aligned rather than centered.

Expected Behavior

No matter how many slides I have, if activeSlideAlignment is 'center', I expect the slide to be centered in the view (so that the previous and next slides can be seen).

Actual Behavior

*** This should give you what you need

Here is a video of the project I am working on and the bug in action:

https://www.youtube.com/watch?v=DMq1Q1-RWus&feature=youtu.be

Here is a snack. Read comments at top

https://snack.expo.io/@akyker20/react-native-snap-carousel-bug

Lastly, just wanna say thanks. I really like this project. You guys are awesome!

---

Reproducible Demo

(Paste the link to an example project or paste the entirety of the relevant source code. Then provide instructions to reproduce the issue.)

[bd-arc]

Hi @akyker20,

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

Regarding the issue, this is indeed pretty strange. I fear an internal FlatList bug, but I'll dig around to find out what's really at stake. I'll probably be able to keep you posted next week.

By the way, congratulations for your app; it looks awesome ;-)

[bd-arc]

Hi @akyker20,

Can you tell me if you're still able to reproduce the issue when using the latest commit from branch v3.5.0 and setting the new prop useScrollView to true? I'm trying to determine if this is a FlatList-specific bug...

If needed, you can take a look at this note about using a commit not already published on npm.

[bd-arc]

I've just had an idea and tried overriding the default initialNumToRender by setting it to 30. Result: it works! This means that the issue is, as I feared, a FlatList one and that I have no control over this behavior. It seems like the FlatList component is not able to properly keep track of the items that are not in the currently rendered batch...

Those are the options I see at this point:

• Set useScrollView to true. Note that you will loose all FlatList optimizations by doing that and keep in mind that it's not a viable solution if you have a huge dataset to display.
• Use a FlatList component instead of the Carousel one (you can reuse props data and renderItem). Do you still experience the issue? If the answer is no, please let me know because this might indicate that some FlatList defaults are better left unchanged...
• Play with the following FlatList props until you find something that suits your needs: initialNumToRender, maxToRenderPerBatch, windowSize and updateCellsBatchingPeriod.
• Pray that the Facebook team will, some day, fix all those ridiculous issues...