React-native: how to wrap FlatList items

Question

I have a list of Terms that are returned by a query. Each is a single word. Currently my FlatList renders each word into a button on the same row (horizontal={true}) I would like the buttons to wrap like normal text would. But I absolutely do not want to use the column feature, because that would not look as natural. Is this possibly a bad use-case for FlatList? Are there any other components I could use?

    const styles = StyleSheet.create({
      flatlist: {
        flexWrap: 'wrap'
      },
      content: {
        alignItems: 'flex-start'
      }})

    render() {
        return (
          <Content>
            <Header searchBar rounded iosStatusbar="light-content" androidStatusBarColor='#000'>
              <Item>
                <Icon name="ios-search" />
                <Input onChangeText={(text) => this.setState({searchTerm: text})} value={this.state.searchTerm} placeholder="enter word"/>
                <Icon name="ios-people" />

                <Button transparent onPress={this._executeSearch}>
                <Text>Search</Text>
              </Button>
              </Item>
            </Header>

            <FlatList style={styles.flatlist} contentContainerStyle={styles.content}
                horizontal={true} data={this.state.dataSource} renderItem={({item}) =>
                      <Button>
                        <Text>{item.key}</Text>
                      </Button>
                  }>
            </FlatList>
          </Content>
        );
      }

One error message amongst others I've gotten is:

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

Shashaban

Answer 1

How I was able to wrap the components was like below

flatlist: {
   flexDirection: 'column',
},

and in my FlatList component added this props

numColumns={3}

Pain

For use of numColumns with SectionLlist, see #47834081 – Usher

This solution only works if you don't need to calculate the numColumns on the fly, because numColumns cannot be changed after render. – Hymanhymen

They categorically stated that they did NOT want to use the columns feature. This is understandable, as their items are not of uniform width. This should not be the accepted answer. – Ruiz

Hi @Ger. Thanks for the comment. Can you share the link, I answered this a long time back so if something has been changed then I would like to know. – Pain

I'm referring to the question being asked above. – Ruiz

Ok @Ger. Got it. – Pain

Answer 2

You can remove the horizontal prop to achieve the wrapping effect

................
..................

<FlatList
    contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}} 
    data={this.state.dataSource} renderItem={({item}) =>
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>
.................
..............

Tum

Accepted answer requires the numColumns, this answer is better. Thanks – Mouse

Even though the result looks satisfying on Android, this generates the warning 'flexWrap: 'wrap'' is not supported with the 'VirtualList' components. Consider using numColumns with 'FlatList' instead. – Aciculate

Answer 3

Unfortunately flexWrap is indeed unsupported in FlatLists. We are recommended to use a ScrollView instead of a FlatList to create this effect. This is the issue: https://github.com/facebook/react-native/issues/13939

Thallic

Answer 4

When we use horizontal flatList it is not possible to use flexWrap: wrap is not supported with the VirtualizedList components. you can use numColumns with FlatList to made some columns in the flat list. However,

If you need to stack flatlist item you can use

contentContainerStyle={{ justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap' }}

Full code will be like below

<FlatList
      data={data}
      keyExtractor={(item) => item.type.id}
      contentContainerStyle={{ justifyContent: 'center', flexDirection: 'row', flexWrap: 'wrap' }}
      renderItem={({ item }) => 
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>

Annotate

Answer 5

You can simply use the map function instead of FlatList.

Aurita

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Related

Found it pretty simple and useful tbh. I did use a map and worked perfectly. Thanks. – Bookkeeper

Answer 6

<FlatList 
            contentContainerStyle={{ flexDirection: 'row',flexWrap: 'wrap' ,maxWidth:1900,maxHeight:130}}
            data={data} 
            horizontal
            renderItem={({item,index }) => (
            <ScrollView
            // contentContainerStyle={{ flexDirection: 'row',flexWrap: 'wrap' ,maxWidth:1900,maxHeight:130}}
            >
                <TouchableOpacity
                    key={index}
                        style={apply('row py-1 px-2 bg-white shadow mt-1 mx-1 rounded-lg mb-1')}>
                        <Image
                            source={{
                                uri: `${lokasi + item.worker_type_image}`,
                            }}
                                style={{
                                    width: (width / 4) - 72,
                                    height: (width / 4) - 72,
                                    opacity: 0.85,
                                    borderRadius:5
                                }}
                            />
                        <Text style={apply('p-0 text/4 text-gray-400 mx-2')}>
                            {item.worker_type_name}
                        </Text>
                </TouchableOpacity>
            </ScrollView>
        )}
        keyExtractor={(item, index) => index}
    />

Pedlar

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Related

Answer 7

**This Code is code work for me to **

<ScrollView 
     style={{}}
     nestedScrollEnabled={true}
     contentContainerStyle={{alignContent:'flex-start',flexWrap:'wrap', maxWidth:wp('85%')}}
     horizontal={true}
     showsVerticalScrollIndicator={false}>
      {Data.map((item,index)=>{
        return(
          <View key={index} style={{backgroundColor:colors.lightgrey,paddingHorizontal:wp('3%'),paddingVertical:wp('1%'),borderRadius:25, marginHorizontal:wp('2.5%'), marginVertical:hp('0.5%') }}>
            <Text style={styles.TextInputStyle}>
              {item}
            </Text>
          </View>
        )
      })}

    </ScrollView>

Separate

FlatList, This is the Example for scrollView it's different – Lappet