Error: scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed about react-native-anchor-carousel

[kirtishjain9]

OK friend. No issues. I that case I would need to switch the library.
BTW thanks a lot once again for your amazing work.

[namlehoangdev]

Hi Jain, I can not reproduce the bug, but according to your screenshot, I had just implement getItemLayout function which I think can fix that bug and improve performance. Please try carousel version 3.1.1 and let me know if this bug still persists. About render large amount of data, you can take a look at this link to add some FlatList props into the carousel for performance : https://github.com/filipemerker/flatlist-performance-tips.

[kirtishjain9]

Hi lehoangnam97,

Thanks a lot for your prompt response.
Yes, your modification did trick for me. But I'm wondering why First and Last item cards are not center positioned and stick to Left and Right side of the screen respectively. You can see this also in your example provided.

Is there any way to make First and Last item cards center positioned?

Also, regarding large amount of data, I've seen provided link but I need a working example of using those Flatlist properties. So, if you can make it for me using your library then it's very much appreciated.

Thanks in advance.

[namlehoangdev]

Hi Jane, I'm sorry to say that the purpose of this carousel library was created to deal with the first and last element being in the middle of the other common libraries (because some specific design requires 2 anchor elements 2. side). So if you want to have a carousel with all elements render at center. I prefer you to use these libraries like: https://github.com/archriss/react-native-snap-carousel, https://github.com/kkemple/react-native-sideswipe, https://github.com/machadogj/react-native-carousel-control.
With both react-native-anchor-carousel and react-native-snap-carousel, you can implement some Flatlist properties like this below (depend your project these numbers may different):
<Carousel .... removeClippedSubviews={true} // Be aware that this implementation can have bugs initialNumToRender={5} maxToRenderPerBatch={10} windowSize={100} maxToRenderPerBatch={30} keyExtractor={item => item.id} />

[namlehoangdev]

Thanks you ^^