How to load large data set (2000 items) with smooth scrooling between item cards

Is this a bug report, a feature request, or a question?

I don’t know whether it’s a bug or implementation issues but need an effective solution.

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

iOS 12.2 & higher.

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

Yes.

Environment

Environment: “react”: “16.8.3”, “react-native”: “^0.59.9”, “react-native-snap-carousel”: “^3.8.0”,

Target Platform: iOS (12.2) & Higher

Expected Behavior

Carousel item should be loaded instantaneously and scrolling must be smooth.

Actual Behavior

Currently my Carousel modal window is displayed after 10 seconds and then data (9-10 items out of 2000) would be loaded after few seconds in which scrolling is not smooth either.

Reproducible Demo

(Paste the link to a Snack example in which the issue can be reproduced. Please follow the guidelines for providing a Minimal, Complete, and Verifiable example.)

Sorry, but I couldn’t share my code on any public site as we’ve signed an NDA with the client.

Steps to Reproduce

So basically my problem is using Carousel item card with large data set, say - 2000.

I’ve a collection view of items on one of my views and then if user taps on any collection item then a modal view is displayed with details of that item in a card like UIVisualEffectView and that item card has dynamic buttons created in PureComponent of each card.

So my carousel component is like below:

<Carousel style = {styles.carouselContainer} ref = {(c) => { this._carousel = c; }} layout = {'default'} data = {this.state.entries} firstItem = {this.props.currentSelectedIndex} // initialNumToRender = {10} // windowSize = {10} onEndReachedThreshold = {0.01} renderItem = {item => this.renderItem(item)} sliderWidth = {Constants.iDeviceWidth} itemWidth = {globalFunction.wp(70) + (globalFunction.wp(5) * 4)} inactiveSlideScale = {0.95} enableMomentum = {true} decelerationRate = {'fast'} slideStyle = {styles.slideContentContainer} activeSlideAlignment = {'center'} scrollEndDragDebounceValue = {0} // enableSnap = {true} useScrollView = {false} removeClippedSubviews = {true} onLoadEnd = {this.carouselLoaded.bind(this)} onEndReached = {(item) => this.loadFurtherData(item)}/>

and my PureComponent for each item card to render is like below:

`renderItem ({item, index}) { let jsonData = JSON.parse(item.jsonRepresentation); let activeDataDetails = jsonData; let ingredientDetailsDynamicTabsArray = globalFunction.getDynamicTabsForIngredient(activeDataDetails, this.props.userData.accesses);

return <IngredientCard allIngredientsData = {this.state.entries} data = {item} ingredientIndex = {index} tabsArray = {ingredientDetailsDynamicTabsArray} userDetails = {this.props.userData} />;

}`

So, I want proper imaplemtation of my Carousel component so that my large data set (2000 items) would be displayed without any time lagging and horizontal scrolling of items must be smooth.

Indeed, everything is fine if I just load 20-30 items with useScrollView = {true} prop. But I understand that for large data set this can’t be wise idea to use useScrollView = {true}.

Thanks in advance.

[rossjohnsonMP]

I too have this kind of issue. I have 200 items, with initial items of 10. But if I try to snapToItem(50), the 51st item is not yet rendered, so it will only snap on the 10th item instead.

Any diretctions is appreciated.

@jeffreybello - if you’re still having this issue try using the useScrollView prop, the underlying implementation is a virtualisedList which has built in lazy loading if you set useScrollView it will change the underlying implementation to a scrollview.

[Shivendra30]

@jeffreybello I had a similar problem but with a smaller volume of data, perhaps. What I did is reordered the array to put the item that I want to snap to, as the first item. This also meant that I had to re-arrange all items.

So if it’s [1,2,3,4,5,6,7,8,9,10] and let’s assume the initial render is 5, then to snap to the 9th item, I rearranged the array to be [9,10,1,2,3,4,5,6,7,8]. It seems a bit hacky to me and also works since I need a loop.

When I increased the initialNumToRender prop, it caused the UI to become glitchy and performance went down