ReactNative FlatList render all items at once?

Question

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.

Answer 1

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.