Image is not showing up or covering the whole available area of the View in react-native-element card component

0
votes

I want to set up a card from react-native-elements, which has an Image and the title of the card. I want the image to take the whole of the width available in the view and adjust the height keeping the aspect ratio. So basically I have neither height nor width.

As I understand, the Image component requires height/width props. But setting it up won't make it responsive. I was trying few things with flex but it's not working

<Card>
 <Image
    style={{
    flex: 1,
    alignSelf: 'stretch',
    width: null,
    height: null
  }}
    resizeMode="contain"
    source={{
    uri: "url-of-the-image.png"
  }}/>
  <View>
    <Text>Image Title</Text>
  </View>
</Card>

Image is not showing up

2
react-nativereact-native-imagereact-native-elements
<View style={{flex:1}}> <Card> <Image style={{ width: 30, height: 30 }} source={{uri:'gettyimages.in/gi-resources/images/frontdoor/creative/…'}} /> <View> <Text>Image Title</Text> </View> </Card> </View > use this – lovepreet singh
Do you know the width of the Card? – Ashwin Mothilal
by default it use full width and you can give width in style also – lovepreet singh

2 Answers

0
votes

You have two options: either use ImageBackground tag with resizeMode="cover" instead of View tag or Use resizeMode="cover" inside image tag.

This should solve your problem.

0
votes

After trying some of the things, it appears that i had missed the props of the react-native-element Card Component.

There is an image prop in the react-native-element which does all that what is required.

To someone who may find it useful, this is what i did finally

<Card image={{uri: "url-of-the-image.png"}}>
  <View>
    <Text style={styles.tag}>{tags}</Text>
    <Text style={styles.title}>{title}</Text>
  </View>
</Card>