Title: NativeBase card fitting/scaling the image within the card
Tags: 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) =&gt;
<Card &gt;
<CardItem&gt;
<Thumbnail source={require('../img/Robot-96.png')} /&gt;
<Text&gt;Card</Text&gt;
<Text note&gt;Bonus Info</Text&gt;
</CardItem&gt;
<CardItem cardBody&gt;
<Image source={require('../img/micscrope.jpg')} /&gt;
<Text&gt;
Information goes here..
</Text&gt;
<Button &gt;
<Icon name="ios-beer" /&gt;
<Text&gt;Cheers</Text&gt;
</Button&gt;
</CardItem&gt;
</Card&gt;
}
/&gt;
export default ListEquipment;

Here is the accepted answer: 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}} /&gt;
Where getImage will return the nearest sized image for the device screen/pixel ratio.

Here is another answer: 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}}&gt;
<View style={{backgroundColor: 'green', padding: 10, borderBottomColor: 'yellow', borderBottomWidth: 2}}&gt;
<Text style={{fontSize: 20}}&gt;Header</Text&gt;
</View&gt;
<View style={{backgroundColor: 'red'}}&gt;
<View style={{alignItems: 'center', height: 150}}&gt;
<Image source={require('./test.png')} style={{flex: 1, resizeMode: 'contain'}}/&gt;
</View&gt;
<View style={{backgroundColor: 'violet'}}&gt;
<Text style={{color: 'blue'}}&gt;Description</Text&gt;
</View&gt;
</View&gt;
</View&gt;
With a 500x300(px) image this generates:
By using an image with the correct aspect ratio it looks way better:

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2016:00:12/14/16', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<react-native>', 'Title': 'NativeBase card fitting/scaling the image within the card', 'ViewCount': 5990, 'id': 41153201, 'user_AboutMe': '<p>Always learning something new \u200d</p>\n', 'user_AccountId': 307026.0, 'user_DisplayName': 'Norfeldt', 'user_Reputation': 6846.0, 'user_Views': 998.0, 'user_id': 618099.0}}