Make a multiple column FlatList where the rendered items' height do not match the one next to i-CodePudding

I have a 2 column FlatList in a React-Native project. It works perfectly except that each rendered item has a list within it. The lists can be different sizes. Right now, when one list is longer the one to the right or left of it grow to match its height. I would love to be able to have the height on each item set only to the amount of space that it needs to display the list.

Here's my code right now.

<View style={{ flex: 1 }}>
   <FlatList
      data={clothingCatogoryData}
      extraData={clothingCatogoryData}
      numColumns={2}
      renderItem={renderClothingCategories}
      columnWrapperStyle={{ justifyContent: 'space-between'}}
      style={{ flexGrow: 1 }}
      contentContainerStyle={{ paddingBottom: 80 }}
    />
</View>

const renderClothingCategories = ({ item }) => {
    return (
        <View style={{ width: '45%', marginBottom: 15 }}>
            <Row justifyContent={'space-between'} style={{ width: 150 }}>
            <View>
                <Text
                style={{
                    color: theme.colors.strong,
                }}
                >
                {item.id}
                </Text>
            </View>
            
            <Touchable
                onPress={() => {
                navigation.navigate('ClothingselectionScreen', {
                    selectedClothingType: item.id
                });
                }}
                style={{
                display: editing ? 'block' : 'none',
                }}
                justifyContent={'end'}
            >
                <Text style={{ color: '#5f92b8' }}>Edit</Text>
            </Touchable>
            <Touchable
                onPress={() => {
                let updatedCollapses = collapseCategory;
                if (updatedCollapses.includes(item.id)) {
                    for (let i = 0; i < updatedCollapses.length; i  ) {
                    if (updatedCollapses[i]['id'] == item.id) {
                        updatedCollapses.splice(i, i   1);
                        setCollapseCategory(updatedCollapses);
                        formatClothingData(Constants['collectionData']);
                    }
                    }
                } else {
                    updatedCollapses.push(item.id);
                    setCollapseCategory(updatedCollapses);
                    formatClothingData(Constants['collectionData']);
                }
                }}
                style={{
                display: editing ? 'block' : 'none',
                }}
            >
                <Icon
                name={item.expand ? 'AntDesign/up' : 'AntDesign/down'}
                color={theme.colors.medium}
                size={16}
                />
            </Touchable>
            </Row>
            <IndividualItems items={item.clothingItems} />
        </View>
    )
}

CodePudding user response：

These kind of list where the elements of the rows are of different heights is called a "Masonry List". React Native Flatlist component does not support this feature by default. There are different packages that would help.

You could try out:

1.https://www.npmjs.com/package/react-native-masonry-list

2.https://www.npmjs.com/package/@react-native-seoul/masonry-list

Hope this is helpful.