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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Do you have any idea what am i doing incorrectly?

CodePudding user response：

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.