React Native FlatList Warning

Question

Im trying to implement a FlatList with dynamic item sizes, to be more specific, my items sometimes take the full screen width and sometimes only half of it, thus setting numColumns={2} isn't working, my workaround looks like this:

     <FlatList
      ListHeaderComponent={this.header}
      keyExtractor={item => item.id.toString()}
      data={data}
      contentContainerStyle={{ flexDirection: 'row' }}
      renderItem={({ item }) => <Item item={item} />}
    />

everything is working as expected, the width of an item is applied via item.width. However the issue is that every time it's rendering the list, im getting this log warning:

Warning: `flexWrap: `wrap`` is not supported with the `VirtualizedList` components.Consider using `numColumns` with `FlatList` instead.

Does anybody know how this is affecting the performance of the list and if it has an affect, how I can improve my code ?

This is how I would like it to look like:

[Here](https://stackoverflow.com/questions/45526443/react-native-how-to-wrap-flatlist-items) — Vencovsky, Mar 21 '19 at 16:29
Yes I made a replica with all the unnecessary stuff removed: https://snack.expo.io/SJxjkMLM_4 — Konstantin Paulus, Mar 22 '19 at 12:18

score 0 · Answer 1 · answered Mar 21 '19 at 16:43

0

to fix numColumns={2} you have to set with it horizontal={false} so it becomes

      <FlatList
        ListHeaderComponent={this.header}
        keyExtractor={item => item.id.toString()}
        data={data}
        horizontal={false}
        numColumns={2} 
        contentContainerStyle={{ flexDirection: 'row' }}
        renderItem={({ item }) => <Item item={item} />}
       />

answered Mar 21 '19 at 16:43

Asma_Kh

93
2
15

1

When using numColums it renders Items outside of the screen, it allways placing 2 items next to each other however I would like to have items that take the full screen width – Konstantin Paulus Mar 21 '19 at 17:08

React Native FlatList Warning

1 Answers1