35

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.

Mileta Dulovic
  • 1,036
  • 1
  • 14
  • 33
mrmagoo
  • 453
  • 1
  • 4
  • 5

5 Answers5

53

How I was able to wrap the components was like below

flatlist: {
   flexDirection: 'column',
},

and in my FlatList component added this props

numColumns={3}
Mozak
  • 2,738
  • 4
  • 30
  • 49
  • 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
  • 3
    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
  • 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. – Ger Jul 09 '21 at 11:15
  • 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. – Mozak Jul 23 '21 at 14:22
  • I'm referring to the question being asked above. – Ger Jul 24 '21 at 21:04
  • Ok @Ger. Got it. – Mozak Jul 25 '21 at 13:03
20

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>
    }
/>
.................
..............
John Prem Kumar Srinivasan
  • 313
  • 3
  • 5
  • Accepted answer requires the numColumns, this answer is better. Thanks – SamChen Apr 06 '20 at 05:24
  • 19
    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
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

sinewave440hz
  • 1,265
  • 9
  • 22
0

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>
    }
/>
Subodha
  • 44
  • 5
0
<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}
    />
Mileta Dulovic
  • 1,036
  • 1
  • 14
  • 33
nuzulhaq prilude
  • 1
  • 1
    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](/help/how-to-ask). – Community Sep 21 '21 at 12:03