React-native: Dimensions.get('window').width incorrect in Android 6.0.1

[bennyguitar]

Phone

• Nexus 5
• Android 6.0.1

React Native

• 0.28.0 stable release

Problem

When running in release mode, whenever the orientation changes, the screen width/height are never updated usingDimensions.get('window'). No matter what, whether I'm in Portrait or Landscape mode, I receive this value back from the Dimensions.get call:

{ width: 360, height: 592 }

This really is only a problem because on iOS the Dimensions will get updated correctly. So I can't just take the min of the two and call it a day.

[st0ffern]

workaround would be to check rotation on android

[jskuby]

I ran into the same issue, and came up with the same workaround, as @stoffern. We created a service that uses the react-native-orientation package to register a listener on orientation change that determines which values from the Dimensions.get('window') call are cached as the current height and width. Here's a simplified version of what we did:

// screenService.js
import { Dimensions } from 'react-native';
import Orientation from 'react-native-orientation';

let screen = {};

Orientation.addOrientationListener(orientation => {
  const { height, width } = Dimensions.get('window');
  const min = Math.min(height, width);
  const max = Math.max(height, width);
  const isLandscape = orientation === 'LANDSCAPE';
  screen = {
    height: isLandscape ? min : max,
    width: isLandscape ? max : min,
  };
});

export default { screen };

Then we just call our module like screenService.screen.height to get the current value. The logic works for Android and iOS, so no conditional code is required. Hope that can help someone until the issue is resolved.

[samuelkraft]

You can also listen on the onLayout event on your root view in order to get the correct width & height. This works on orientation change without any other packages. Check out this blogpost for an example https://corbt.com/posts/2016/03/16/detecting-orientation-in-react-native.html

[jskuby]

My original approach was to use onLayout, however our use case is to support dynamic styles for rotation and the onLayout callback was being fired after rotation completed, meaning you could see the components getting restyled after the rotation animation finished.

With the react-native-orientation package our callback is fired right after the screen begins to rotate, which means our new styles are applied during rotation and we get no jank once the rotate animation completes. Maybe something to keep in mind depending on the use case.

EDIT: I should note the delay for onLayout was on Android, I did not test that on iOS.

[samuelkraft]

Good point! The delay is visible on both android and iOS unfortunately.
I had some mixed results with the orientation package when testing it, although that was a while ago and things might have improved since!

[ayyoobcastro]

Can you please any one show a example of

how to get window width in react-native

[saravanannnallasamy]

Use react-native Dimensions
const window = Dimensions.get('window');

or

Dimensions.get('window').width;

[tjswk2008]

I ran into the same issue. Expected height is 640.
I think this is an issue with Nexus devices, as they have navigation bars. I don't know if there is any method to get the navigation bar's height.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.