How to Wrap Flatlist items in React Native

Question

I am trying to render the list of items like in this image.

Items in each row will vary based on their text size. Flatlist is using for rendering items.

TagView.js

<View style={styles.tagView}>
    <FlatList 
        scrollEventThrottle={1900} 
        data={this.state.interests} 
        numColumns={5}
        renderItem={({ item }) => (
           <View style={styles.tag}>
               <Text>{item.tagName}</Text>
           </View>
        )}
        keyExtractor={(item, index) => index}
        contentContainerStyle={{ paddingBottom: 100 }}
    />
</View>

Style

tagView: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap"
},
tag: {
    borderWidth: 1,
    borderRadius: 10,
    borderColor: "black",
    backgroundColor: "white",
    padding: 3,
    marginTop: 5
}

Result

But here items are not wrapping with device width. Is there any to wrap the contents?

I think they don't support it in `FlatList` for numerous reasons, check [here](https://github.com/facebook/react-native/issues/13939). Alternative would be to use `ScrollView` — Pritish Vaidya, Aug 13 '18 at 11:11

Hashim pk · Answer 1 · 2022-09-14T10:11:05.897

FlatList with columnWrapperStyle

<FlatList 
    columnWrapperStyle={styles.tagView}
    scrollEventThrottle={1900} 
    data={this.state.interests} 
    numColumns={5}
    renderItem={({ item }) => (
       <View style={styles.tag}>
           <Text>{item.tagName}</Text>
       </View>
    )}
    keyExtractor={(item, index) => index}
    contentContainerStyle={{ paddingBottom: 100 }}
/>

Style

tagView: {
  flexWrap: "wrap"
},

score 4 · Answer 2 · answered Aug 13 '18 at 12:11

4

Add Horizontal Prop and try,

      <FlatList 
        scrollEventThrottle={1900} 
        data={this.state.interests} 
        numColumns={5}
        horizontal={false}
        renderItem={({ item }) => (
           <View style={styles.tag}>
               <Text>{item.tagName}</Text>
           </View>
        )}
        keyExtractor={(item, index) => index}
        contentContainerStyle={{ paddingBottom: 100 }}
    />

answered Aug 13 '18 at 12:11

Yogaraj Saravanan

423
3
10

horizontal prop is using for rendering items next to each other horizontally instead of stacked vertically. – Muhsin Keloth Aug 13 '18 at 14:22
Yes so if you give horizontal={false} and numColumns={5}, it will give you a row with 5 values and then wrap. – Yogaraj Saravanan Aug 14 '18 at 11:25
@YogarajSaravanan Actually, using both props raises an error: `numColumns does not support horizontal` – Arnaud Feb 11 '19 at 21:25
This can still cause overlap with the last item in the row and the edge of the screen depending on the size of the items. Anyway to make sure this doesn't happen? – yam55 Aug 16 '19 at 19:09

score 1 · Answer 3 · answered Jun 09 '20 at 13:00

1

Use ScrollView component for this purpose.

<ScrollView contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}>
  {tags.map(({ id, name }) => (
     <Text key={id}>{name}</Text>
  ))}
</ScrollView>

answered Jun 09 '20 at 13:00

Mihail

1,246
1
9
8

II can confirm that is the good way. I had the same question and change my Flatlist by ScroolView and it works perfectly. Thank you Michael. – Joachim de Bernis Feb 24 '21 at 17:40

score 0 · Answer 4 · answered Aug 12 '21 at 13:56

try scroolview and flatlist.

                <ScrollView
                  horizontal
                  showsVerticalScrollIndicator={false}
                  showsHorizontalScrollIndicator={false}
                  contentContainerStyle={{
                    flexDirection: 'row',
                    flexWrap: 'wrap',
                  }}>
                  <FlatList
                    data={this.state.carouselItems}
                    renderItem={this.renderItem}
                    keyExtractor={item => `${item.id_news}`}
                    showsHorizontalScrollIndicator={false}
                    numColumns={this.state.carouselItems.length / 2}
                  />
                </ScrollView>

How to Wrap Flatlist items in React Native

4 Answers4