react-native-responsive-screen icon indicating copy to clipboard operation
react-native-responsive-screen copied to clipboard

Fixed an issue where screen height contained status bar in android

Open Hinaser opened this issue 5 years ago • 4 comments

This is a fix for #28

Before this PR:

After this PR:

Hinaser avatar May 13 '19 06:05 Hinaser

@marudy, @Hinaser That did not fix the problem for me, Android and ios started behaving very weirdly when testing on multiple devices This is what fixed it for me:

import { Dimensions, PixelRatio, StatusBar, Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';

// Retrieve initial screen's width
let screenWidth = Dimensions.get('window').width;

// Retrieve initial screen's height
let screenHeight = Dimensions.get('window').height;

if(!DeviceInfo.hasNotch()){
    if (Platform.OS === 'ios'){
        screenHeight -= 20;  //standard statusBar height for notchless iPhones
    } else {
        screenHeight -= (StatusBar.currentHeight || 0);
    }
} else {
    if(Platform.OS === 'ios') {
        screenHeight -= 64;  //statusBar height + bottom navigationHeight for iPhones like the iPhoneX
    }
}

I know its not optimal with the DeviceInfo library, but it works on every device I tested I tested about 10 different devices.

EDIT: Hi again, I'm reporting back, the problem is not solved even with this. The behaviour is weird on different devices Code:

// packages
import { Dimensions, PixelRatio, StatusBar, Platform } from 'react-native';
import DeviceInfo from 'react-native-device-info';

// Retrieve initial screen's width
let screenWidth = Dimensions.get('window').width;

// Retrieve initial screen's height
let screenHeight = Dimensions.get('window').height;

if(!DeviceInfo.hasNotch()){
  screenHeight -= (StatusBar.currentHeight || 0);
} else {
  if(Platform.OS === 'ios') {
    screenHeight -= 20;
  }
}

I was using this but the behaviour is like this: Huawei p20 lite: doesn't calculate in the bottom virtual navigator bar native to the device, works great in full screen. Pocophone f1: works great with the bottom navigator bar, if fullscreen (navigation hidden) its not calculating it Oneplus 6t and samsung galaxy s9 function great with the code above.

Now what I noticed is that the library on some devices does contain status bar and on other doesnt..

(Without my code its still not working properly on some of the mentioned devices)

Any help with this? I really like the library so far so i'd like to continue using it...

FortunaRegem avatar May 30 '19 09:05 FortunaRegem

Hey @Hinaser @GavricMario and happy new year! Sorry I haven't been active lately.

I don't think we should hardcode DP values like -20. Any other ideas?

marudy avatar Jan 04 '20 14:01 marudy

I think having a Calc function that works like the CSS one, wil help

Cmion avatar May 21 '20 18:05 Cmion

@marudy sorry for inactivity, the email notifications got lost I haven't worked on it in some time now But the last thing i did was:

// packages
import { Dimensions, PixelRatio, StatusBar, Platform} from 'react-native';


// Retrieve initial screen's width
let screenWidth = Dimensions.get('window').width;

// Retrieve initial screen's height
let screenHeight = Dimensions.get('screen').height;

if(Platform.OS !== 'ios') {
  screenHeight -= (StatusBar.currentHeight || 0);
  if (StatusBar.currentHeight !== 24){
    if (Dimensions.get('screen').height - Dimensions.get('window').height - StatusBar.currentHeight > 1) {
      screenHeight -= (Dimensions.get('screen').height - Dimensions.get('window').height - StatusBar.currentHeight);
    }
  } else {
    if (Dimensions.get('screen').height - Dimensions.get('window').height > 0) {
      screenHeight -= (Dimensions.get('screen').height - Dimensions.get('window').height);
    }
  }
}

I am not sure if it works perfectly, hadnt have the chance to test it on many devices... I would be glad if someone could run the tests (and even improve this) but i think its a step in the right direction!

As i have found StatusBar.currentHeight !== 24 the standard android StatusBar height is 24, except when there is a notch, how that could be prone to change there should be a better way to check for notch maybe...

FortunaRegem avatar May 22 '20 19:05 FortunaRegem