A newbie to react-native. I have been given a design prototype referencing an iPhone 6. So, when I make a view of 320*50px it looks exactly like the prototype but on the iPhone 5s it looks too large and inconsistent. Similar issue for the images. What considerations do I need to make so the images, fonts and design (if not pixel perfect) but atleast looks consistent on multiple devices.
Asked
Active
Viewed 480 times
1 Answers
0
what i do is write a file that scale for
'use strict';
let React = require('react-native')
, Dimensions = React.Dimensions || require('Dimensions')
, {width, height} = Dimensions.get('window');
let units = {
vw: Math.min(width, height)/100
, vh: Math.max(width, height)/100
};
units.vmin = Math.min(units.vw, units.vh);
units.vmax = Math.max(units.vw, units.vh);
units.wid=width;
units.hei=height;
module.exports = units;
then i import it when i want it
Text: {
width: 60 * vw,
fontSize: vw * 4,
color: 'black',
fontFamily: 'B Yekan',
height: vh * 7,
},
but is not recommended to set size is better not
by doing this you will almost look alike design in iphone,ipad,android phone and android tablet

nima moradi
- 2,300
- 21
- 34