Home > Software design >  For What people need this line of Code (Device Height)?
For What people need this line of Code (Device Height)?

Time:01-09

I have seen this line of code:

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

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

const deviceUtils = (function () {
  const iPhone6Height = 667,
    iphoneSEHeight = 568,
    iPhoneXHeight = 812,
    iPhoneXWidth = 375;

  return {
    dimensions: {
      height,
      width,
    },
    iPhone6Height,
    iphoneSEHeight,
    iPhoneXHeight,
    iPhoneXWidth,
    isIOS14: ios && parseFloat(Platform.Version as string) >= 14,
    isLargePhone: width >= iPhoneXWidth,
    isNarrowPhone: width < iPhoneXWidth,
    isSmallPhone: height <= iPhone6Height,
    isTallPhone: height >= iPhoneXHeight,
    isTinyPhone: height <= iphoneSEHeight,
  };
})();

export default deviceUtils;

I want to ask you why People need this exact height of iPhones ?

CodePudding user response:

It seems someone plans to write different code for “wide” and “narrow” and “wide”, and for three different classes of heights. They use the exact width / height of an iPhone X for example to make sure that an iPhone X falls into the wide and tall categories.

This is not usually what you should do. Decide what you want to be on a screen. Use constraints to fit everything. If you have problems fitting everything use a smaller font or an adjustable font, or put everything in a scroll view. Anyway, with notch and things at the bottom of the screen, things are more complicated than just “width” and “height”.

  •  Tags:  
  • Related