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.

score 43 · Answer 1 · answered Aug 08 '17 at 07:29

43

How I was able to wrap the components was like below

flatlist: {
   flexDirection: 'column',
},

and in my FlatList component added this props

numColumns={3}

answered Aug 08 '17 at 07:29

Mozak

2,388
4
28
44

1

For use of numColumns with `SectionLlist`, see https://stackoverflow.com/questions/47833581/react-native-sectionlist-numcolumns-support – fionbio May 17 '18 at 06:20
1

This solution only works if you don't need to calculate the numColumns on the fly, because numColumns cannot be changed after render. – BoKKeR Aug 17 '19 at 16:12

score 12 · Answer 2 · answered Feb 09 '20 at 13:47

12

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

answered Feb 09 '20 at 13:47

John Prem Kumar Srinivasan

133
2
5

Accepted answer requires the numColumns, this answer is better. Thanks – SamChen Apr 06 '20 at 05:24
7

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`. – Ryan Pergent Jun 17 '20 at 12:10

score 4 · Answer 3 · answered Sep 26 '17 at 13:06

4

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

answered Sep 26 '17 at 13:06

sinewave440hz

935
5
18

score 0 · Answer 4 · answered Jan 21 '21 at 10:50

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

score 0 · Answer 5 · answered Apr 07 '21 at 06:07

Solution 1:

you can add numColumns props

numColumns={3}

like this

   <FlatList
      numColumns={3}
      data={data}
      renderItem={({ item }) => 
        <Button>
            <Text>{item.key}</Text>
        </Button>
    }
/>

Solution 2:

You can remove the horizontal prop and add contentContainerStyle

contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}}

like this

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

React-native: how to wrap FlatList items

5 Answers5

Solution 1:

Solution 2:

Linked