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?

Kezer

Also try adding alignItems: 'flex-start' to the parent – Leakage

@PritishVaidya Tried. Not working – Kezer

I think they don't support it in FlatList for numerous reasons, check here. Alternative would be to use ScrollView – Leakage

Answer 1

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"
},

Wera

This should be accepted as best answer – Trencher

Answer 2

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 }}
    />

Victorvictoria

horizontal prop is using for rendering items next to each other horizontally instead of stacked vertically. – Kezer

Yes so if you give horizontal={false} and numColumns={5}, it will give you a row with 5 values and then wrap. – Victorvictoria

@YogarajSaravanan Actually, using both props raises an error: numColumns does not support horizontal – Selfdeprecating

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? – Tuba

Answer 3

Use ScrollView component for this purpose.

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

Effusion

II can confirm that <scrollview> is the good way. I had the same question and change my Flatlist by ScroolView and it works perfectly. Thank you Michael. – Brook

Answer 4

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>

Anthropomorphosis