react-native: useWindowDimensions() wrong height on Android Fullscreen Landscape

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%'}}/>

<div>

</div>

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 22 (7 by maintainers)

Most upvoted comments

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

brandtnewlabs on Oct 8, 2023

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?

MetaBenji on Feb 15, 2023

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.

TheRealMikeD on Nov 3, 2023

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.

cipolleschi on Oct 11, 2023

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)

cipolleschi on May 18, 2022