Error: scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed

[kirtishjain9]

Describe the bug I've implemented this library to show item cards in a container which is modal view. I think it's due to prop bcoz when I remove this prop then it's showing me my view with all cards.

initialIndex

But I need to show my first item card which would be selected by user from list view and which has index "this.props.currentSelectedIndex"

<Carousel style = {styles.carouselContainer} data = {this.state.entries} initialIndex = {this.props.currentSelectedIndex} renderItem = {({item, index}) => this.renderItem({item, index})} itemWidth = {globalFunction.wp(70) + (globalFunction.wp(5) * 4)} containerWidth = {Constants.iDeviceWidth} inActiveScale = {0.95} separatorWidth = {10} ref = {(c) => { this._carousel = c; }} itemContainerStyle = {styles.slideContentContainer} />

and my renderItem function is like below

renderItem ({item, index}) { let jsonData = JSON.parse(item.jsonRepresentation); let activeIngredientDetails = jsonData; let ingredientDetailsDynamicTabsArray = globalFunction.getDynamicTabsForIngredient(activeIngredientDetails, this.props.userData.accesses); return <IngredientCard allIngredientsData = {this.state.entries} data = {item} ingredientIndex = {index} tabsArray = {ingredientDetailsDynamicTabsArray} userDetails = {this.props.userData} />; }

IngredientCard is a pure component within same class only.

But I'm getting an error - scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, otherwise there is no way to know the location of offscreen indices or handle failures.

and my Xcode console logs - Unhandled JS Exception: scrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed, otherwise there is no way to know the location of offscreen indices or handle failures.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS 12.4]

Smartphone (please complete the following information):

• Device: [e.g. iPhone8]
• OS: [e.g. iOS12.3]

Additional context my react-native environment from package.json

"react": "16.8.3", "react-native": "^0.59.9", "react-native-anchor-carousel": "^3.1.0",

Please tell me how to resolve this error.

And, If you have any logic for displaying large data say 2000 in batches then please share it as well.

Thanks in advance.

[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} />

[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]

Thanks you ^^