useWindowDimensions() wrong height on Android Fullscreen Landscape

[gomes042]

Android landscape, fullscreen without system's Status Bar or Navigation Bar.

Version

^0.65.2

Output of npx react-native info

System: OS: macOS 12.3.1 CPU: (8) arm64 Apple M1 Memory: 151.89 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.14.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.9.0 - /usr/local/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: API Levels: 28, 29, 30, 31, 32 Build Tools: 29.0.2, 30.0.2, 31.0.0, 32.0.0, 32.1.0, 33.0.0 System Images: android-32 | Google APIs ARM 64 v8a Android NDK: 23.1.7779620 IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: 13.3/13E113 - /usr/bin/xcodebuild Languages: Java: 11.0.14.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.65.2 => 0.65.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Snack, code example, screenshot, or link to a repository

My MainActivity.java's onCreate:

@Override
 protected void onCreate(Bundle savedInstanceState) {
   setTheme(R.style.AppTheme);
   super.onCreate(null);

   if(Build.VERSION.SDK_INT < 19){ 
       View v = this.getWindow().getDecorView();
       v.setSystemUiVisibility(View.GONE);
   } else {
       View decorView = getWindow().getDecorView(); 
       decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
       | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
       | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
       | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION 
       | View.SYSTEM_UI_FLAG_FULLSCREEN
       | View.SYSTEM_UI_FLAG_IMMERSIVE);
   }
 }

// Scenario 01
// I noticed that the "red rectangle" had a kind of vertical margin,

const {width, height} = useWindowDimensions();
<View style={{position: 'absolute', backgroundColor: 'red', width: width, height: height}}/>

// Scenario 02 
// Solved it using the height as "100%"

<View style={{position: 'absolute', backgroundColor: 'red', width: '100%', height: '100%'}}/>

Originally posted by @runtothedoor in https://github.com/facebook/react-native/issues/29290#issuecomment-1113730907

[gomes042]

Setting both padding and margin to 0 didn't solve the issue

{
        width: width,
        height: height,
        margin: 0,
        padding: 0
}

[cipolleschi]

Hi @3GOMESz, could you update the issue with one of the template we provide? It will give us more information to help you with the issue (if it is still valid)

[gomes042]

Hi @3GOMESz, could you update the issue with one of the template we provide? It will give us more information to help you with the issue (if it is still valid)

Done

[MetaBenji]

This bug also exists in portrait mode on Android when using full screen mode for react native version 0.67.4. You can easily verify it by getting the height from useWindowDimensions and then getting the height of any view covering the entire screen using the onLayout callback. You'll see that the height of the view is larger than the height returned from useWindowDimensions.

@cipolleschi this seems like a critical bug with useWindowDimension. What do you suggest we do?

[cipolleschi]

I just see that the version is 0.65. We don't support that version anymore. Could you try and verify if the error persists in 0.69, 0.70 or 0.71 which are the versions we are committed to support at the moment?

Thank you so much.

[github-actions[bot]]

:warning:

Unsupported Version of React Native

:information_source:

It looks like your issue or the example you provided uses an unsupported version of React Native. Due to the number of issues we receive, we're currently only accepting new issues against one of the supported versions. Please upgrade to latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If you cannot upgrade, please open your issue on StackOverflow to get further community support.

[MetaBenji]

@cipolleschi the bug in portrait mode exists in the supported versions. I think if the app is in full screen mode on Android, window height should include the status bar and bottom navigation bar

[cipolleschi]

@cortinico any idea on this? can we onboard someone else with more experience in the runtime to have a look at this issue?

[cortinico]

@cortinico any idea on this? can we onboard someone else with more experience in the runtime to have a look at this issue?

@javache do you have any insights here?

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions[bot]]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[brandtnewlabs]

The issue still exists. I worked around this limitation for Android by using Dimensions.get('screen').height instead of Dimensions.get('window').height.

[its-acarn]

Issue still happening. React-native v0.68.0

Workaround suggested by @brandtnewww works for me.

[cipolleschi]

Sorry @its-acarn, but React Native 0.68 is not supported anymore, as per our Support Window Policy. Please update to a supported version of React Native.

[its-acarn]

Will do - thanks.

[TheRealMikeD]

I'm still seeing this issue as of November 3, 2023, with the following library versions: react-native: 0.72.6 expo: 49.0.0 expo-dev-client: 2.4.11

I have been using a view with flex: 1 and catching the dimensions of that in its onLayout event, then using that to set state as a workaround. I'm going to try @brandtnewww's suggestion, though, as it sounds like it might be more elegant.

[joeporpeglia]

This issue applies to newer supported versions of react native too. Can we remove the "Unsupported Version" label?

[cortinico]

This issue applies to newer supported versions of react native too. Can we remove the "Unsupported Version" label?

As the original author is unresponsive, @joeporpeglia could you open a new issue + reproducer against 0.73?

[joeporpeglia]

Yup, see https://github.com/facebook/react-native/issues/41918

[cortinico]

Great thank you, closing in favor of https://github.com/facebook/react-native/issues/41918