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.
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.