I'd like make View will be looked the same at different sizes (for Android 4+) and dpi (240+), as well IPhone 4+ and IPad. When I define size, ex. 270x65, it looks double size in screen with 640 dpi than same size in screen 320 dpi (2560x1600 real screen size).

Is this a good solution?

  containerButton: {
    width: calcDimension(270),
    height: calcDimension(65)
  }

const calcDimension = size =>
  size / (screenScale() > 2 ? (screenScale() / 2) : 1);

const screenScale = () =>
  (Dimensions.get('window').scale);

Or there could be better solution? Thank you.

I'd like make View will be looked the same at different sizes (for Android 4+) and dpi (240+), as well IPhone 4+ and IPad. When I define size, ex. 270x65, it looks double size in screen with 640 dpi than same size in screen 320 dpi (2560x1600 real screen size).

Is this a good solution?

  containerButton: {
    width: calcDimension(270),
    height: calcDimension(65)
  }

const calcDimension = size =>
  size / (screenScale() > 2 ? (screenScale() / 2) : 1);

const screenScale = () =>
  (Dimensions.get('window').scale);

Or there could be better solution? Thank you.

• javascript
• react-native

• P.S. I don't look how to calculate screen size. The main question is why View with same size take more screen size (twice more) in 640 dpi screen in pare with same view size in screen 320 dpi? – CodeBy Commented Feb 13, 2017 at 23:08
• same view size for 'button' Start and same font size, same screen size, different dpi gyazo./6e575eebde3bb5f42226691f293dffec gyazo./972c9f33a54a039421c0f35f6191006f – CodeBy Commented Feb 14, 2017 at 0:12
• same size of view and fonts, but smaller screen and lower dpi gyazo./be947791d6fb6505ef9e59d1c0adaf10 – CodeBy Commented Feb 14, 2017 at 0:37
• Let me know if following blog Responsive Design in React Native helped you. – Pir Shukarullah Shah Commented Feb 16, 2017 at 11:44

3 Answers 3

You can use Dimensions in react native to get device height and width calculated automatically.

First import Dimensions

import { Dimensions, Platform, StyleSheet } from 'react-native

Get device height and width

var deviceHeight = Dimensions.get('window').height;
var deviceWidth = Dimensions.get('window').width;

Now you can use this global variable in your styles. for example:

const styles = StylSheet.create({
     mainContainer: {
          height: deviceHeight/2;
          width: deviceWidth/2;
     }
});

You can also dynamically calculate statusbar height and width standard way:

var STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 20 : 25;
var HEADER_HEIGHT = Platform.OS === 'ios' ? 44 + STATUS_BAR_HEIGHT : 44 + STATUS_BAR_HEIGHT;

I have just gone through your query and i think it would be great if you try using "dimensions" . Dimensions is another important parameter which is provided by react native it self. What you need to do is just import the dimension in your ponent.

var {height, width} = Dimensions.get('window');

The above mand will set height and width of the device according no matter it is iphone or android.

Just go throung the link: https://facebook.github.io/react-native/docs/dimensions.html

Cheers :)

you can use vw or vh to set the dimensions.

for example: height:"90vh", width:"50vw" will set height of the respective element 90% to the window size and width 50%.

Hope this helped.