Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed an issue where screen height contained status bar in android #29

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Hinaser
Copy link

@Hinaser Hinaser commented May 13, 2019

This is a fix for #28

Before this PR:

After this PR:

@FortunaRegem
Copy link

FortunaRegem commented May 30, 2019

@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...

@marudy
Copy link
Owner

marudy commented Jan 4, 2020

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?

@Cmion
Copy link

Cmion commented May 21, 2020

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

@FortunaRegem
Copy link

@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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants