CODEWITHSUNDEEP
react-nativeflexbox
lwisi
lwisi

Reputation: 303

Images disappearing when using Flex

Simple issue: Whenever I use flex on an image it simply doesn't show up when I preview my app on expo.

This is the way I'm doing it:

            <Image 
                style = {{flex: 1, height: undefined, width: undefined}}
                source = {require('./img/anyImage.png')}
            />

If I just define the height and width, no flex, they show up. Is there any particular reason as to why my images aren't showing up?

Note: I've tried giving set values to both height and width.

Thanks a lot!

Upvotes: 2

Views: 1500

Answers (1)

Amir Doreh
Amir Doreh

Reputation: 1429

passing null instead of undefined should do the trick for you.

 <Image 
                    style = {{flex: 1, height: null, width: null}}
                    source = {require('./img/anyImage.png')}
                />

According to your code you can use one of these two options if you want to use flex.

1.giving the flex:1 to the image with null width for taking the whole view

2.use flex with resizeMode for taking the whole view

{/* THIS IS THE FIRST OPTION YOU CAN USE  */}
        <View>
          <View style={{ width: 100, height: 100 }}>
            <Image
              style={{ flex: 1, width: null }}
              source={require("./img/cervecerias.png")}
            />
          </View>
        </View>



    {/* THIS IS THE SECOND OPTION YOU CAN USE  */}
    <View style={{ width: 200, height: 100 }}>
      <Image
        style={{ flex: 1 }}
        source={require("./img/Cocktails.png")}
        resizeMode="contain"
      />
      <Text style={styles.categoriesText}> Cocktails</Text>
    </View>

Upvotes: 2

Related Questions