Search code examples
cssreact-nativemasonry

How to delete spacing between my card in react Native (FlatList)?

As you can see, I want to display my items in masonry. But the existing packages so far don't let me to do it with different types of card.

This is my flatlist. The "PiinsStandard" could be videos, pictures or posts.

            <FlatList
                numColumns={2}
                style={styles.list}
                data={this.props.PiinsFeed.piins}
                keyExtractor={(item) => item.id.toString()}
                renderItem={({ item }) => (<PiinsStandard piins={item} navigation={this.props.navigation} />)}
                onScroll={this._onScroll}
                onEndReachedThreshold={0.5}
                onEndReached={() => this._getPiinsList()}
            />

This is my style for each card

    card: {
        marginVertical: 5,
        marginHorizontal: 4,
        borderRadius: 8,
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
        flex: 1,
    }

enter image description here

Thank you if you have the solution. I already tried this package : https://github.com/brh55/react-native-masonry but it's impossible to custom my card like I want

Solution

  • According to react-native FlatList, items should all be the same height - masonry layouts are not supported.

    So in order to achieve a masonry layout, you have to use custom library.

    Hope this helps you. Feel free for doubts.