Re-Render takes some time

[xempie]

I tried this and seems it fixed some of the FlatList issues but I noticed when I scroll back (top or bottom) (specially when I'm using images) it takes some time to re-render and display the blocks.

So it would be good if it has an offeset to pre-load some items before displaying in viewport in order to prevent the blank space between blocks which doen't look good.

Any idea?

[cjcheshire]

I'm also experiencing this. It can take a few seconds once it's scrolled to the top to render the items.

[st0ffern]

is it after refresh or if you scroll fast?

[cjcheshire]

Only tested this on iOS so far by tapping the status bar clock to return to the top of the list.

[thame]

I noted the same issue on iOS. Interestingly, the React FlatList component wasn't having any performance issues on iOS but was extremely slow on Android. I created a new PlatformFlatList component that serves OptimizedFlatList on Android and it worked great - including on relatively underpowered Android devices that were really struggling.

https://gist.github.com/thame/a7e5c61e7bb3a6d56406db37da090a76

[st0ffern]

@thame, feel free to create a PR. I think that this solution also should be implemented.

[thame]

@stoffern Would love to, complete git/React noob so no idea how :) But, this is an awesome component, thank you!

[st0ffern]

@xempie is this issue only related to ios or android to?

[thame]

@stoffern Sorry for the delay, I'm subscribed now. The performance issue I was having was mostly on Android (which is why I preferred the basic FlatList on iOS).

[gonzaloreciog]

Quick and patchy fix for this is to never hide the first items. Make sure to add enough to fill the screen but not much more.

So in our case maximum items is 3, so we will never hide the first 3 items to avoid this 2-3 seconds white screen when scrolling to top.

So the _updateItem() function on OptimizedFlatList.js would look like this:

if (index != 0 && index != 1 && index != 2) {
  if (!this.rowRefs[index].ref) {
    return false;
  }
  this.rowRefs[index].ref.setVisibility(visibility);
  return visibility;
}

So basically: just wrapping the function content within an IF stating which items not to hide.

[udarts]

This is still happening. Not fixed yet.

[twsuneth]

Quick and patchy fix for this is to never hide the first items. Make sure to add enough to fill the screen but not much more.

So in our case maximum items is 3, so we will never hide the first 3 items to avoid this 2-3 seconds white screen when scrolling to top.

So the _updateItem() function on OptimizedFlatList.js would look like this:

if (index != 0 && index != 1 && index != 2) {
  if (!this.rowRefs[index].ref) {
    return false;
  }
  this.rowRefs[index].ref.setVisibility(visibility);
  return visibility;
}

So basically: just wrapping the function content within an IF stating which items not to hide.

Thanks...! This solved another issue of not showing the 1st item when data resets (Refresh func).