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

Answer 1

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

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

How I was able to wrap the components was like below

flatlist: {
   flexDirection: 'column',
},

and in my FlatList component added this props

numColumns={3}