Image Resizing in React Native

It appears that it is difficult to create a same sized Views or Images for every device in React Native. So i have created a class name “ImageResizer” that has some methods which returns the height and width in pixels. Its like calculating percentages of the image on the device screen.
Its covers two types of devices aspect ratio
1) 4:3 (Resolution 2048 x 1536).
2) 1.6 (Resolution 2560 x 1600)

Although we have almost 4 types of aspect ratios.
1) 4:3 which is “1.3” (Resolution 2048 x 1536).
2) 16:10 which is 1.6 (Resolution 2560 x 1600)
3) 17:10 which is 1.7 (Resolution 1024 x 600)
4) 16:9 which is 1.78

So what i think covering these two types of device ratios can also solve others too because the ratios 1.6,1.7 and 1.78 have a little bit difference.

/**
* Created by Atif Mukhtiar on 6/10/2017.
*/

import {
Dimensions
}from 'react-native';

maxCanvasWidth1600 = 1600;
maxCanvasHeight2560 = 2560;


maxCanvasWidth1536 = 1536;
maxCanvasHeight2048 = 2048;

export default class ImageResizer {
constructor() {
deviceHeight = Dimensions.get('window').height;
deviceWidth = Dimensions.get('window').width;
}// end of constructor


getHeight(imgHeight) {
if (this.getCurrentDeviceAspectRadio() === this.get2048DeviceAspectRatio()) {
return ((imgWidth / maxCanvasHeight2048) * deviceScreenWidth);
} else {
return ((imgHeight / maxCanvasHeight2560) * deviceHeight);
}
}// end of getHeight

getWidth(imgWidth) {
if (this.getCurrentDeviceAspectRadio() === this.get2048DeviceAspectRatio()) {
return ((imgWidth / maxCanvasWidth1536) * deviceWidth);
} else {
return ((imgWidth / maxCanvasWidth1600) * deviceWidth);
}
}// end of getHeight


getCurrentDeviceAspectRadio() {
return (deviceWidth / deviceHeight);
}// end of getCurrentAspectRadio

get2048DeviceAspectRatio() {
return (maxCanvasHeight2048 / maxCanvasWidth1536);
}// end of getCurrentDeviceAspectRatio

}// end of class ImageResizer

Resizing the Images

Now giving the height, width and margins to the Views and Images.

/**
* Created by Atif Mukhtiar on 6/10/2017.
*/
import React, {Component} from 'react';
import {
View,
StyleSheet,
Text,
Image
}from 'react-native';
import ImageResizing from '../Utils/ImageResizer';
let imageResizerObj = new ImageResizing();
export default class Home extends Component {

render() {
return (
<View style={style.mainContainer}>

<View style={style.topHeader}>

<Image style={style.topLeftButton}
resizeMode={'contain'}
source={require('../assets/Images/icon_menu.png')}
>
</Image>

</View>


<Image
resizeMode=
{'contain'}
style={style.imgMinion}
source={require('../assets/Images/img_minions.png')}
></Image>

</View>
);
}
}// end of Home
const style = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: 'white',
},
topHeader: {
height: imageResizerObj.getHeight(200),
backgroundColor: '#cecece',
},
topLeftButton: {
height: imageResizerObj.getHeight(72),
width: imageResizerObj.getWidth(110),
marginTop: imageResizerObj.getHeight(60),
marginLeft: imageResizerObj.getWidth(40),
},
imgMinion:{
height:imageResizerObj.getHeight(601),
width:imageResizerObj.getWidth(1591),
marginLeft:imageResizerObj.getWidth(5),
marginRight:imageResizerObj.getWidth(5)
}
})// end of StyleSheet Create

Screens shots of two devices

Nexus S, Screen size 480 x 800

Nexus S (400 x 800)

Nexus 5, Screen size 1080 x 1920

Nexus 5 (1080 x 1920)

This is it. :) Enjoy resizing :P

Please let me know if anyone wants some information or help regarding devices screen sizes their ratios etc.
Email : atif.mukhtar1992@gmail.com