CODEWITHSUNDEEP
javascriptfirebaseimagereact-nativereact-native-flatlist
Diego Echenique
Diego Echenique

Reputation: 11

Images in FlatList not displayed

I am using react native and firebase to create an application that's somewhat similar to a social network. In the profile screen I am trying to display the images that the user posted in a FlatList that has 3 columns. My problem is, when trying to display the images so that they occupy the full width of the FlatList, they don't seem to get displayed. However, when I set a fixed height, they do. I would like to make it so that they are shown with a 1/1 aspect ratio without having to fix a height.

This is my code:

            <View style={styles.galleryContainer}>
                <FlatList
                    numColumns={3}
                    horizontal={false}
                    data={posts}
                    renderItem={({ item }) => (
                        <View style={styles.imageContainer}>
                            <Image
                                style={styles.image}
                                source={{ uri: item.downloadURL }}
                            />
                        </View>
                    )}
                />
            </View>

And the styles:

    galleryContainer: {
        flex: 1
    },
    image: {
        flex: 1,
        aspectRatio: 1/1,
        height: 120

    },
    imageContainer: {
        flex: 1 / 3
    }

I have tried setting the height to 100% and that did not work either, any ideas on what might be causing this?

Upvotes: 0

Views: 712

Answers (1)

Diego Echenique
Diego Echenique

Reputation: 11

Edit: I solved it by using useWindowDimensions and fetching the window size and dividing it by 3. This is the codethat I used to set the style:

const imageWidth = Math.floor(useWindowDimensions().width/3);


style={{width:imageWidth, aspectRatio:1/1, flex:1, height:imageWidth}}

Upvotes: 1

Related Questions