React native FlatList rendering only after a scroll

Question

I have a FlatList that weirdly renders correctly only after a scroll. Also, upon a refresh it is rendered for a split-second and then disappears again. The FlatList itself has only 3 items.

The FlatList is defined like this in the View:

 <View style={{flex: 1}}> <FlatList data={cartItems} renderItem={({item}) => ( <CartItemCard event={item.event_name} ticketType={item.title} ticketImage={item.image} price={item.price} /> )} keyExtractor={item => item.id} style={{ flex: 1, backgroundColor: "#49424D", paddingVertical: 60, }} contentContainerStyle={{ alignItems: 'center', paddingVertical: 10, }} /> </View>

Do you have any idea what am i doing incorrectly?

Answer 1

It seems to be a known issue: https://github.com/facebook/react-native/issues/13316

According to the doc you should pass extraData to the FlatList so it knows to re-render:

By passing extraData={selectedId} to FlatList we make sure FlatList itself will re-render when the state changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is a PureComponent and the prop comparison will not show any changes.