1

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.

Surily
  • 121
  • 2
  • 10

1 Answers1

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