CODEWITHSUNDEEP
cssreact-nativemasonry
Raphaël Etang-Salé
Raphaël Etang-Salé

Reputation: 390

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

Upvotes: 0

Views: 739

Answers (1)

SDushan
SDushan

Reputation: 4631

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.

Upvotes: 1

Related Questions