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

Fix Dimensions not updating on Android #31973

Closed
wants to merge 2 commits into from

Conversation

jonnyandrew
Copy link
Contributor

Summary

When retrieving the device dimensions through the JS Dimensions utility, the result of Dimensions.get can be incorrect on Android.

Related issues

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

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

Android-dimensions-issue.mp4

@facebook-github-bot
Copy link
Contributor

Hi @jonnyandrew!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@fb.com. Thanks!

Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

@analysis-bot
Copy link

analysis-bot commented Aug 6, 2021

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: fcead14

@analysis-bot
Copy link

analysis-bot commented Aug 6, 2021

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 9,188,736 -364
android hermes armeabi-v7a 8,714,359 -378
android hermes x86 9,630,600 -537
android hermes x86_64 9,598,343 -391
android jsc arm64-v8a 10,825,093 -285
android jsc armeabi-v7a 9,741,997 -281
android jsc x86 10,862,373 -446
android jsc x86_64 11,471,617 -295

Base commit: fcead14

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Aug 6, 2021
@facebook-github-bot
Copy link
Contributor

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

Copy link

@analysis-bot analysis-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code analysis results:

Copy link
Contributor

@lunaleaps lunaleaps left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting, it seems we have a lot of unused code in DisplayMetrics. I'm wondering if you've tested as well with split screen and verified there are no changes with that behavior.

@@ -85,8 +90,7 @@ public void emitUpdateDimensionsEvent() {

if (mReactApplicationContext.hasActiveReactInstance()) {
// Don't emit an event to JS if the dimensions haven't changed
WritableNativeMap displayMetrics =
DisplayMetricsHolder.getDisplayMetricsNativeMap(mFontScale);
WritableMap displayMetrics = DisplayMetricsHolder.getDisplayMetricsWritableMap(mFontScale);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What was the logic behind WritableNativeMap and WritableMap? Sorry I'm not familiar with the difference

Copy link
Contributor Author

@jonnyandrew jonnyandrew Aug 12, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WritableNativeMap is an implementation of the WritableMap interface (and that is the implementation that is returned from DisplayMetricsHolder). But in Java-only test code, WritableNativeMap is not supported and needs to be switched out for JavaOnlyMap. So in order to test this class, it needs to depend on WritableMap instead.

@jonnyandrew
Copy link
Contributor Author

Thanks for the review @lunaleaps! I have not tested in split screen but I will take a look. And if you have any particular split screen test cases in mind, please let me know.

@jonnyandrew
Copy link
Contributor Author

jonnyandrew commented Aug 12, 2021

@lunaleaps I have run a few manual tests in split screen mode as requested, and I did not see any change in behaviour (except this fix as expected).

Test case Before After
1. Given app is not in split screen, when entering split screen, then dimensions are not changed Pass ✅ Pass ✅
2. Given app is in split screen, when rotated, then dimensions are reversed Pass ✅ Pass ✅
3. Given app is initialising in split screen, when rotated, then final dimensions are correct Flaky ❌ Pass ✅

I ran the tests on a Pixel 3a emulator with Android 10. Let me know if you'd like me to post the video recordings.

@facebook-github-bot facebook-github-bot added the Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. label Aug 12, 2021
@facebook-github-bot
Copy link
Contributor

@lunaleaps has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

@facebook-github-bot
Copy link
Contributor

@lunaleaps merged this pull request in c18a492.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Aug 18, 2021
mahi8813 pushed a commit to myntra/react-native that referenced this pull request Aug 31, 2021
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 pull request Sep 1, 2021
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. Needs: React Native Team Attention Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants