21

I'm using ReactNative's new List component - FlatList.

It seems like FlatList renders all items at once even though the cell isn't actually visible on the screen.

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

Setting 30 items and seems like 'rendered' warning was called according to the total number of the items.

I thought FlatList is similar to the way RecycleView in Android works, render an item only when it's about to be visible on the screen.

Am I missing something? Won't it decrease performance?
I wished it could render an item only when it's about to be shown.

Rom Shiri
  • 1,390
  • 4
  • 16
  • 29
  • I've faced the same issue. All rows was rendered at once without the need to scroll down – itinance Aug 10 '17 at 12:15
  • I'm seeing this issue on a physical device, but not on the simulator. It is rendering all rows before it displays anything to the screen. – Josh Aug 25 '17 at 00:29
  • @itinance Josh did you somehow resolve that issue? – n1ru4l Oct 04 '17 at 17:08

3 Answers3

16

Had the same issue in one of my Apps. It cost me a couple of hours to solve this Issue for me.

⇓⇓⇓

TDLR; Check out, that you don't nest your FlatList in a ScrollList (or other kind of lists).

⇑⇑⇑

Detailed Description:

ISSUE

Same as the Thread-Opener, at first, my Flatlist render only the amount of renders I defined in initialNumToRender, but immediately after that, the app starts to render the whole rest of the List.

Enviroment

I use native-base.io as UI-Library and encapsulated the Content of the Screen with the Component

Solution

I've figured out, that native-base component <Content> replace ScrollList. A FlatList inside of a ScrollList will pipe you to strange results. As I replaced the -Component for the given Screen with an <View>, all things work like expected.

suther
  • 12,600
  • 4
  • 62
  • 99
  • Hey, @suther I've faced the same issue :), but I can't understand your solution well? you mean replace ` with ` ? – Oliver D Feb 20 '20 at 23:57
  • See "TDLR". With that in mind, you'll find, that ``-Component of `NativeBase.io` provide *an own* `ScrollLists` [see the SourceCode here,](https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Content.js#L36). To make sure, you don't nest FlatList into an ScrollList, might solve your issue. Good Luck. – suther Feb 21 '20 at 13:22
1

FlatList renders too many items in advance to get better fill rate. We have similar issues. We build RecyclerListView to workaround such problems. Very similar to RecyclerView but it is JS only. It is faster than FlatList and battle tested at Flipkart. You can try it.

Link: https://github.com/Flipkart/ReactEssentials

You can read more about it here: https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

naqvitalha
  • 793
  • 5
  • 9
  • 1
    I have checked it, it is great, it would be greater if there is an example with hooks instead of cleasses – Rami Salim Oct 14 '21 at 09:17
-1

it is same. In the documentation you can find the following:

In order to constrain memory and enable smooth scrolling, content is rendered asynchronously offscreen. This means it's possible to scroll faster than the fill rate ands momentarily see blank content. This is a tradeoff that can be adjusted to suit the needs of each application, and we are working on improving it behind the scenes.

So it doesn't render all items at once.

and besides:

This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.

Let me know if you need further details.

EnriqueDev
  • 1,207
  • 2
  • 12
  • 25
  • 1
    I have a FlatList with 10 items. Only 2 of them are visible at the same time. Each of the renderChild returned components renders an Image. However all requests for those Images are made upon rendering the FlatList (altough there are only 2 items visible) – n1ru4l Oct 04 '17 at 17:31
  • I have a Flatlist with 1000 items with pain enabled. It still rendering more than 100 items. this is creepy. And cause I use redux, each time I swipe a page, all 100 items and increasing render again. – Daniel Jose Padilla Peña Dec 22 '17 at 11:03
  • @DanielJosePadillaPeña i am facing the same issue, have you found the solution? FlatList is rendering ScrollView inside and i can't seem to find a solution. No amount of checking on stack overflow or checking github issue seems to solve this. – Yash Kalwani Sep 15 '19 at 15:49
  • @DanielJosePadillaPeña Are you found a solution? – Oliver D Feb 21 '20 at 00:05