Images disappearing when using Flex - react-native

Question

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!

Answer 1

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>