react-native-masonry-layout icon indicating copy to clipboard operation
react-native-masonry-layout copied to clipboard

Not loading bulk data (say 2000) at one go

Open kirtishjain9 opened this issue 6 years ago • 4 comments

Hi,

Thanks a lot for this amazing library. It's easy to implement and use. But I've some time latency issues to load bulk data at one go.

So what I'm doing exactly is: I've around 2000 data in an array and for each item there is tappable view (TouchableHighlight , like pinterest) so that user can tap any item to see corresponding detail view. see my code below for your reference:

`<TouchableHighlight style = {styles.ingredientItem} key = {item.identifier.toString()} onPress = {() => this.didSelectIngredientCell(item)} underlayColor = 'transparent'>

    <View style = {styles.ingredientCellView}>
      <FastImage style = {styles.ingredientImage}
                  source = {{
                        uri: JSON.stringify(item.imageURLString),
                        headers: { 'atipik-custom-key': Constants.atipikCustomKey },
                        cache: FastImage.cacheControl.cacheOnly }}
                 resizeMode = {FastImage.resizeMode.cover}/>
      <Text style = {styles.ingredientNameText}>{item.name.toUpperCase()}</Text>
      <Text style = {styles.ingredientRestDetailsText}>{item.upn}</Text>
      {(item.typeName != null && item.typeName != '') && <Text style = {styles.ingredientRestDetailsText}>{item.typeName}</Text>}
      {(item.primaryFamily != null && item.primaryFamily.name != '') &&
      <View style = {styles.bgViewForObjects}>
         <View style = {{width: 14, height: 14, borderRadius: 7, backgroundColor: item.primaryFamily.colorString}} />
         <Text style = {styles.ingredientRestDetailsText}>{item.primaryFamily.name.toUpperCase()}</Text>
      </View>}
      {(item.secondaryFamily != null && item.secondaryFamily.name != '') &&
        <View style = {[styles.bgViewForObjects, {paddingTop: 3}]}>
          <View style = {{width: 14, height: 14, borderRadius: 7, backgroundColor: item.secondaryFamily.colorString}} />
          <Text style = {styles.ingredientRestDetailsText}>{item.secondaryFamily.name.toUpperCase()}</Text>
      </View>}
      <Text style = {{paddingBottom: 0}}></Text>
    </View>
  </TouchableHighlight>

` Now, when i load these 2000 data then it's not loading at one go. Initially it's loading 50-70 data views and then as I scroll, further views are loading but with very normal speed which means it'll take sufficient amount to load all 2000 data which is not acceptable.

Could you please assist me how do i load all 2000 data instantaneously?

thanks & regards

kirtishjain9 avatar Aug 07 '19 12:08 kirtishjain9

Do you use addItemsWithHeight to add data?

manyuanrong avatar Aug 08 '19 03:08 manyuanrong

@manyuanrong: No, I'm not using addItemsWithHeight instead m using addItems() method to pass my data array.

kirtishjain9 avatar Aug 12 '19 11:08 kirtishjain9

he correct typesetting of a waterfall flow requires knowing the height of each item. The addItems method automatically measures the height one by one. It's very accurate, but it's a bit slow; and the addItemWithHeight doesn't measure the height, it's very fast. If you load many items at once, you should use addItemWithHeight

manyuanrong avatar Aug 13 '19 07:08 manyuanrong

@manyuanrong: I've tried what you have suggested but still bulk loading is not happening. I've added height: 150 for each object dictionary of my array and then use addItemWithHeight method to add items in grid (pinterest like view) but still initially 100 cells are loaded and then as I scroll the list loading is going to load 15-20 objects and then halt for a second and goes on further like this but with very slow speed.

Any further suggestion from your side.

Thanks in advance.

kirtishjain9 avatar Aug 13 '19 14:08 kirtishjain9