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.

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} 

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

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