NativeBase card fitting/scaling the image within the card - react-native

Question

First: I have looked at this, but didn't find what I was looking for.
I wanna create something like this
But I have some problems with the resizing of an large image.. I found out that I can fix the pixels by doing inline style and using height and width. But I want it to look good on an iPad as well... What to do?
Here is my code
import React, { Component } from 'react';
import { Image } from 'react-native';
import { List, Card, CardItem, Thumbnail, Text, Button, Icon } from 'native-base';
class ListEquipment extends Component {
constructor() {
super();
}
render () {
return (
<List style={{padding: 5}}
dataArray={this.props.items}
renderRow={(item) =>
<Card >
<CardItem>
<Thumbnail source={require('../img/Robot-96.png')} />
<Text>Card</Text>
<Text note>Bonus Info</Text>
</CardItem>
<CardItem cardBody>
<Image source={require('../img/micscrope.jpg')} />
<Text>
Information goes here..
</Text>
<Button >
<Icon name="ios-beer" />
<Text>Cheers</Text>
</Button>
</CardItem>
</Card>
}
/>
)
}
};
export default ListEquipment;

Answer 1

Are you looking to size the images based on the size of the device?
If so, you can use:
import SCREEN_IMPORT from 'Dimensions'
const SCREEN_WIDTH = SCREEN_IMPORT.get('window').width,
const SCREEN_HEIGHT = SCREEN_IMPORT.get('window').height,
You will then be able to set the width/height inline as a percentage of SCREEN_HEIGHT and SCREEN_WIDTH.
Additionally you will want to consider the pixelRatio, it is recommended to store varying sizes of an image so that downsizing/upscaling will not effect image quality.
var image = getImage({
width: PixelRatio.getPixelSizeForLayoutSize(200),
height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />
Where getImage will return the nearest sized image for the device screen/pixel ratio.

Answer 2

First thing I would do is to wrap the Image on a View. Then, set a height that matches the aspect ratio of the image and then use resizeMode: 'contain'.
Anyway, this is the closest I could get:
<View style={{backgroundColor: 'green', margin: 10, borderColor: 'yellow', borderWidth: 2}}>
<View style={{backgroundColor: 'green', padding: 10, borderBottomColor: 'yellow', borderBottomWidth: 2}}>
<Text style={{fontSize: 20}}>Header</Text>
</View>
<View style={{backgroundColor: 'red'}}>
<View style={{alignItems: 'center', height: 150}}>
<Image source={require('./test.png')} style={{flex: 1, resizeMode: 'contain'}}/>
</View>
<View style={{backgroundColor: 'violet'}}>
<Text style={{color: 'blue'}}>Description</Text>
</View>
</View>
</View>
With a 500x300(px) image this generates:
By using an image with the correct aspect ratio it looks way better: