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

See original GitHub issue

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

Simulator Screen Shot - iPhone X - 2019-08-29 at 20 13 41

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
kirtishjain9commented, Aug 29, 2019

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

0reactions
namlehoangdevcommented, Aug 30, 2019

Thanks you ^^

Read more comments on GitHub >

github_iconTop Results From Across the Web

Flat List - ScrollToIndex should be used in conjunction with ...
I had a similar error with a horizontal list showing images where the selected image should be shown in a carousel when pressed....
Read more >
[FlatList] `scrollToIndex () ` · Issue #14198 - GitHub
'scrollToIndex should be used in conjunction with getItemLayout, ' + ... I have this bug on 0.50.3, when scrollTo is scrolling at the...
Read more >
Flat List - ScrollToIndex should be used in conjunction with ...
Coding example for the question Flat List - ScrollToIndex should be used in conjunction with getItemLayout or onScrollToIndexFailed-Reactjs.
Read more >
invariant violation: scrolltoindex should be used in conjunction ...
invariant violation: scrolltoindex should be used in conjunction with getitemlayout or onscrolltoindexfailed, otherwise there is no way to know the location ...
Read more >
React Native FlatList scrollToIndex with Fixed or ... - YouTube
In this video, I show you how to use the scrollToIndex function to scroll to a row with a certain index in a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found