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.

Start with the Carousel configuration and renderItem implementation shown in the issue, then review the project's known issues documentation for large-data and virtualization guidance. Reproduce with a comparable large dataset if possible; done would mean the modal opens promptly and horizontal scrolling remains smooth, but the report provides no public demo or named test.