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.

Sign up for GitHub

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

Jump to bottom

Dimensions.get('screen') is returning reversed values for height and width #29105

Closed
snigdhaDhanireddy29 opened this issue Jun 10, 2020 · 6 comments
Closed

Dimensions.get('screen') is returning reversed values for height and width #29105

snigdhaDhanireddy29 opened this issue Jun 10, 2020 · 6 comments
Labels
API: Dimensions Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@snigdhaDhanireddy29
Copy link

snigdhaDhanireddy29 commented Jun 10, 2020 •
edited
Loading

Description

When I am using Dimensions.get('screen').width and Dimensions.get('screen').height, I am getting the values as reversed sometimes (i.e width is coming as height and height as width).
This is occurring randomly when the application is launched.
The application is supported only in landscape mode.

React Native version:

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 22.54 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.16.1 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6241897
Xcode: 11.4.1/11E503a - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
npmGlobalPackages:
react-native-cli: 2.0.1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Use Dimensions.get('screen').width and Dimensions.get('screen').height, its populating reversed values. This is happening randomly sometimes.

Expected Results

The width and height should be populated correctly

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

The expected result is the below screen.
image

But since the width and height are reversed, we are getting the screen as below.
image
@chrisglein chrisglein added Needs: Environment Info Please run `react-native info` and edit your issue with that command's output. Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. and removed Needs: Triage 🔍 labels Jun 10, 2020
@github-actions
Copy link

⚠️ Missing Reproducible Example
ℹ️ It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

@github-actions
Copy link

⚠️ Missing Environment Information
ℹ️ Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

@react-native-bot react-native-bot removed the Needs: Environment Info Please run `react-native info` and edit your issue with that command's output. label Jun 10, 2020
@chrisglein chrisglein mentioned this issue Jul 21, 2020
Closed
@chrisglein
Copy link

Are you seeing this on iOS or Android or both?
Related to #29290?

@ajpaulingalls ajpaulingalls mentioned this issue Nov 5, 2020
Closed
@ejanzer
Copy link

ejanzer commented Nov 11, 2020

Hey @snigdhaDhanireddy29, I think the issue you're seeing is happening because Dimensions.get('screen') is returning a stale value - the best way to deal with this will be to subscribe to the dimensions changes using Dimensions.addEventListener() to make sure you have the latest value. I was seeing this issue on Android - even if I launch the app with the device in landscape mode, I'd still initially get portrait mode display metrics.

If you're using hooks, this hook will do all the work of subscribing to the event for you: https://reactnative.dev/docs/usewindowdimensions

facebook-github-bot pushed a commit that referenced this issue Nov 11, 2020
@ajpaulingalls @facebook-github-bot
Update the cached dimensions when orientation changes (#30324)
0e9296b 
Summary:
Currently the dimensions are created once, and then cached.  This change will reload the dimensions when the device orientation changes to insure that dimension update events follow orientation changed events.

this should help address the following issues, that I know of:
#29105
#29451
#29323

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Dimension update events are now properly sent following orientation change

Pull Request resolved: #30324

Test Plan: Open up RNTester app.  Select the Dimensions API list item.  Rotate the device and verify that the dimensions are correct based on orientation.

Reviewed By: fkgozali

Differential Revision: D24874733

Pulled By: ejanzer

fbshipit-source-id: 867681ecb009d368a2ae7b67d94d6355e67dea7b
alloy pushed a commit to alloy/react-native that referenced this issue Nov 19, 2020
@ajpaulingalls @alloy
Update the cached dimensions when orientation changes (facebook#30324)
9c132c4 
Summary:
Currently the dimensions are created once, and then cached.  This change will reload the dimensions when the device orientation changes to insure that dimension update events follow orientation changed events.

this should help address the following issues, that I know of:
facebook#29105
facebook#29451
facebook#29323

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Dimension update events are now properly sent following orientation change

Pull Request resolved: facebook#30324

Test Plan: Open up RNTester app.  Select the Dimensions API list item.  Rotate the device and verify that the dimensions are correct based on orientation.

Reviewed By: fkgozali

Differential Revision: D24874733

Pulled By: ejanzer

fbshipit-source-id: 867681ecb009d368a2ae7b67d94d6355e67dea7b
kelset pushed a commit that referenced this issue Nov 27, 2020
@ajpaulingalls @kelset
Update the cached dimensions when orientation changes (#30324)
00a942c 
Summary:
Currently the dimensions are created once, and then cached.  This change will reload the dimensions when the device orientation changes to insure that dimension update events follow orientation changed events.

this should help address the following issues, that I know of:
#29105
#29451
#29323

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Dimension update events are now properly sent following orientation change

Pull Request resolved: #30324

Test Plan: Open up RNTester app.  Select the Dimensions API list item.  Rotate the device and verify that the dimensions are correct based on orientation.

Reviewed By: fkgozali

Differential Revision: D24874733

Pulled By: ejanzer

fbshipit-source-id: 867681ecb009d368a2ae7b67d94d6355e67dea7b
brentvatne pushed a commit to expo/react-native that referenced this issue Dec 3, 2020
@ajpaulingalls @brentvatne
Update the cached dimensions when orientation changes (facebook#30324)
eef1744 
Summary:
Currently the dimensions are created once, and then cached.  This change will reload the dimensions when the device orientation changes to insure that dimension update events follow orientation changed events.

this should help address the following issues, that I know of:
facebook#29105
facebook#29451
facebook#29323

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Dimension update events are now properly sent following orientation change

Pull Request resolved: facebook#30324

Test Plan: Open up RNTester app.  Select the Dimensions API list item.  Rotate the device and verify that the dimensions are correct based on orientation.

Reviewed By: fkgozali

Differential Revision: D24874733

Pulled By: ejanzer

fbshipit-source-id: 867681ecb009d368a2ae7b67d94d6355e67dea7b
savv pushed a commit to savv/react-native-savv that referenced this issue May 18, 2021
@ajpaulingalls @savv
Update the cached dimensions when orientation changes (facebook#30324)
7180b86 
Summary:
Currently the dimensions are created once, and then cached.  This change will reload the dimensions when the device orientation changes to insure that dimension update events follow orientation changed events.

this should help address the following issues, that I know of:
facebook#29105
facebook#29451
facebook#29323

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Dimension update events are now properly sent following orientation change

Pull Request resolved: facebook#30324

Test Plan: Open up RNTester app.  Select the Dimensions API list item.  Rotate the device and verify that the dimensions are correct based on orientation.

Reviewed By: fkgozali

Differential Revision: D24874733

Pulled By: ejanzer

fbshipit-source-id: 867681ecb009d368a2ae7b67d94d6355e67dea7b
(cherry picked from commit 0e9296b)
luisnaranjo733 added a commit to luisnaranjo733/react-native that referenced this issue May 25, 2021
@luisnaranjo733
Update the cached dimensions when orientation changes (facebook#30324)
4726c63 
Summary:
Currently the dimensions are created once, and then cached.  This change will reload the dimensions when the device orientation changes to insure that dimension update events follow orientation changed events.

this should help address the following issues, that I know of:
facebook#29105
facebook#29451
facebook#29323

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Dimension update events are now properly sent following orientation change

Pull Request resolved: facebook#30324

Test Plan: Open up RNTester app.  Select the Dimensions API list item.  Rotate the device and verify that the dimensions are correct based on orientation.

Reviewed By: fkgozali

Differential Revision: D24874733

Pulled By: ejanzer

fbshipit-source-id: 867681ecb009d368a2ae7b67d94d6355e67dea7b
kelset pushed a commit that referenced this issue May 26, 2021
@ajpaulingalls @kelset
Update the cached dimensions when orientation changes (#30324)
a6a4d33 
Summary:
Currently the dimensions are created once, and then cached.  This change will reload the dimensions when the device orientation changes to insure that dimension update events follow orientation changed events.

this should help address the following issues, that I know of:
#29105
#29451
#29323

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Android] [Fixed] - Dimension update events are now properly sent following orientation change

Pull Request resolved: #30324

Test Plan: Open up RNTester app.  Select the Dimensions API list item.  Rotate the device and verify that the dimensions are correct based on orientation.

Reviewed By: fkgozali

Differential Revision: D24874733

Pulled By: ejanzer

fbshipit-source-id: 867681ecb009d368a2ae7b67d94d6355e67dea7b
@jonnyandrew jonnyandrew mentioned this issue Aug 6, 2021
Closed
facebook-github-bot pushed a commit that referenced this issue Aug 18, 2021
@jonnyandrew @facebook-github-bot
Fix Dimensions not updating on Android (#31973)
c18a492 
Summary:
When retrieving the device dimensions through the JS `Dimensions` utility, the result of `Dimensions.get` can be incorrect on Android.

### Related issues

- #29105
- #29451
- #29323

The issue is caused by the Android `DeviceInfoModule` that provides initial screen dimensions and then subsequently updates those by emitting `didUpdateDimensions` events. The assumption in that implementation is that the initial display metrics will not have changed prior to the first check for updated metrics. However that is not the case as the device may be rotated (as shown in the attached video).

The solution in this PR is to keep track of the initial dimensions for comparison at the first check for updated metrics.

## Changelog

[Android] [Fixed] - Fix Dimensions not updating

Pull Request resolved: #31973

Test Plan:
### Steps to reproduce
1. Install the RNTester app on Android from the `main` branch.
2. Set the device auto-rotation to ON
3. Start the RNTester app
4. While the app is loading, rotate the device
5. Navigate to the `Dimensions` screen
6. Either
 a. Observe the screen width and height are reversed, or
 b. Quit the app and return to step 3.

### Verifying the fix

#### Manually
Using the above steps, the issue should no longer be reproducible.

#### Automatically
See unit tests in `ReactAndroid/src/test/java/com/facebook/react/modules/deviceinfo/DeviceInfoModuleTest.java`

### Video

https://user-images.githubusercontent.com/4940864/128485453-2ae04724-4ac5-4267-a59a-140cc3af626b.mp4

Reviewed By: JoshuaGross

Differential Revision: D30319919

Pulled By: lunaleaps

fbshipit-source-id: 52a2faeafc522b1c2a196ca40357027eafa1a84b
mahi8813 pushed a commit to myntra/react-native that referenced this issue Aug 31, 2021
@jonnyandrew
Fix Dimensions not updating on Android (facebook#31973)
aaaf728 
Summary:
When retrieving the device dimensions through the JS `Dimensions` utility, the result of `Dimensions.get` can be incorrect on Android.

- facebook#29105
- facebook#29451
- facebook#29323

The issue is caused by the Android `DeviceInfoModule` that provides initial screen dimensions and then subsequently updates those by emitting `didUpdateDimensions` events. The assumption in that implementation is that the initial display metrics will not have changed prior to the first check for updated metrics. However that is not the case as the device may be rotated (as shown in the attached video).

The solution in this PR is to keep track of the initial dimensions for comparison at the first check for updated metrics.

[Android] [Fixed] - Fix Dimensions not updating

Pull Request resolved: facebook#31973

Test Plan:
1. Install the RNTester app on Android from the `main` branch.
2. Set the device auto-rotation to ON
3. Start the RNTester app
4. While the app is loading, rotate the device
5. Navigate to the `Dimensions` screen
6. Either
 a. Observe the screen width and height are reversed, or
 b. Quit the app and return to step 3.

Using the above steps, the issue should no longer be reproducible.

See unit tests in `ReactAndroid/src/test/java/com/facebook/react/modules/deviceinfo/DeviceInfoModuleTest.java`

https://user-images.githubusercontent.com/4940864/128485453-2ae04724-4ac5-4267-a59a-140cc3af626b.mp4

Reviewed By: JoshuaGross

Differential Revision: D30319919

Pulled By: lunaleaps

fbshipit-source-id: 52a2faeafc522b1c2a196ca40357027eafa1a84b
mahi8813 pushed a commit to myntra/react-native that referenced this issue Sep 1, 2021
@jonnyandrew
Fix Dimensions not updating on Android (facebook#31973)
102bf56 
Summary:
When retrieving the device dimensions through the JS `Dimensions` utility, the result of `Dimensions.get` can be incorrect on Android.

- facebook#29105
- facebook#29451
- facebook#29323

The issue is caused by the Android `DeviceInfoModule` that provides initial screen dimensions and then subsequently updates those by emitting `didUpdateDimensions` events. The assumption in that implementation is that the initial display metrics will not have changed prior to the first check for updated metrics. However that is not the case as the device may be rotated (as shown in the attached video).

The solution in this PR is to keep track of the initial dimensions for comparison at the first check for updated metrics.

[Android] [Fixed] - Fix Dimensions not updating

Pull Request resolved: facebook#31973

Test Plan:
1. Install the RNTester app on Android from the `main` branch.
2. Set the device auto-rotation to ON
3. Start the RNTester app
4. While the app is loading, rotate the device
5. Navigate to the `Dimensions` screen
6. Either
 a. Observe the screen width and height are reversed, or
 b. Quit the app and return to step 3.

Using the above steps, the issue should no longer be reproducible.

See unit tests in `ReactAndroid/src/test/java/com/facebook/react/modules/deviceinfo/DeviceInfoModuleTest.java`

https://user-images.githubusercontent.com/4940864/128485453-2ae04724-4ac5-4267-a59a-140cc3af626b.mp4

Reviewed By: JoshuaGross

Differential Revision: D30319919

Pulled By: lunaleaps

fbshipit-source-id: 52a2faeafc522b1c2a196ca40357027eafa1a84b
@github-actions
Copy link

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 github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Mar 10, 2023
@github-actions
Copy link

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

@facebook facebook locked as resolved and limited conversation to collaborators Mar 18, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
API: Dimensions Needs: Author Feedback Needs: Repro This issue could be improved with a clear list of steps to reproduce the issue. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ejanzer @chrisglein @react-native-bot @snigdhaDhanireddy29