React-native: how to wrap FlatList items

user_2584835 0
Viewed 37225

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.

react-native-flexbox react-native-flatlist react-native
5 Answers

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

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>
    }
/>
user_16261220 
<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}
    />
user_120298380
Related