-
Notifications
You must be signed in to change notification settings - Fork 24.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Dimensions not updating on Android (#31973)
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
- Loading branch information
1 parent
842bcb9
commit c18a492
Showing
5 changed files
with
185 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
168 changes: 168 additions & 0 deletions
168
ReactAndroid/src/test/java/com/facebook/react/modules/deviceinfo/DeviceInfoModuleTest.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,168 @@ | ||
/* | ||
* Copyright (c) Facebook, Inc. and its affiliates. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
|
||
package com.facebook.react.modules.deviceinfo; | ||
|
||
import static org.fest.assertions.api.Assertions.assertThat; | ||
import static org.mockito.ArgumentMatchers.eq; | ||
import static org.mockito.Mockito.mock; | ||
import static org.mockito.Mockito.spy; | ||
import static org.mockito.Mockito.times; | ||
import static org.mockito.Mockito.verify; | ||
import static org.mockito.Mockito.verifyNoMoreInteractions; | ||
import static org.mockito.Mockito.when; | ||
import static org.powermock.api.mockito.PowerMockito.mockStatic; | ||
|
||
import com.facebook.react.bridge.Arguments; | ||
import com.facebook.react.bridge.CatalystInstance; | ||
import com.facebook.react.bridge.JavaOnlyMap; | ||
import com.facebook.react.bridge.ReactApplicationContext; | ||
import com.facebook.react.bridge.ReactTestHelper; | ||
import com.facebook.react.bridge.WritableMap; | ||
import com.facebook.react.modules.core.DeviceEventManagerModule; | ||
import com.facebook.react.uimanager.DisplayMetricsHolder; | ||
import java.util.Arrays; | ||
import java.util.List; | ||
import junit.framework.TestCase; | ||
import org.junit.After; | ||
import org.junit.Before; | ||
import org.junit.Rule; | ||
import org.junit.Test; | ||
import org.junit.runner.RunWith; | ||
import org.mockito.ArgumentCaptor; | ||
import org.mockito.invocation.InvocationOnMock; | ||
import org.mockito.stubbing.Answer; | ||
import org.powermock.core.classloader.annotations.PowerMockIgnore; | ||
import org.powermock.core.classloader.annotations.PrepareForTest; | ||
import org.powermock.modules.junit4.rule.PowerMockRule; | ||
import org.robolectric.RobolectricTestRunner; | ||
import org.robolectric.RuntimeEnvironment; | ||
|
||
@RunWith(RobolectricTestRunner.class) | ||
@PrepareForTest({Arguments.class, DisplayMetricsHolder.class}) | ||
@PowerMockIgnore({"org.mockito.*", "org.robolectric.*", "androidx.*", "android.*"}) | ||
public class DeviceInfoModuleTest extends TestCase { | ||
|
||
@Rule public PowerMockRule rule = new PowerMockRule(); | ||
|
||
private DeviceInfoModule mDeviceInfoModule; | ||
private DeviceEventManagerModule.RCTDeviceEventEmitter mRCTDeviceEventEmitterMock; | ||
|
||
private WritableMap fakePortraitDisplayMetrics; | ||
private WritableMap fakeLandscapeDisplayMetrics; | ||
|
||
@Before | ||
public void setUp() { | ||
initTestData(); | ||
|
||
mockStatic(DisplayMetricsHolder.class); | ||
|
||
mRCTDeviceEventEmitterMock = mock(DeviceEventManagerModule.RCTDeviceEventEmitter.class); | ||
|
||
final ReactApplicationContext context = | ||
spy(new ReactApplicationContext(RuntimeEnvironment.application)); | ||
CatalystInstance catalystInstanceMock = ReactTestHelper.createMockCatalystInstance(); | ||
context.initializeWithInstance(catalystInstanceMock); | ||
when(context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)) | ||
.thenReturn(mRCTDeviceEventEmitterMock); | ||
|
||
mDeviceInfoModule = new DeviceInfoModule(context); | ||
} | ||
|
||
@After | ||
public void teardown() { | ||
DisplayMetricsHolder.setWindowDisplayMetrics(null); | ||
DisplayMetricsHolder.setScreenDisplayMetrics(null); | ||
} | ||
|
||
@Test | ||
public void test_itDoesNotEmitAnEvent_whenDisplayMetricsNotChanged() { | ||
givenDisplayMetricsHolderContains(fakePortraitDisplayMetrics); | ||
|
||
mDeviceInfoModule.getTypedExportedConstants(); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
|
||
verifyNoMoreInteractions(mRCTDeviceEventEmitterMock); | ||
} | ||
|
||
@Test | ||
public void test_itEmitsOneEvent_whenDisplayMetricsChangedOnce() { | ||
givenDisplayMetricsHolderContains(fakePortraitDisplayMetrics); | ||
|
||
mDeviceInfoModule.getTypedExportedConstants(); | ||
givenDisplayMetricsHolderContains(fakeLandscapeDisplayMetrics); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
|
||
verifyUpdateDimensionsEventsEmitted(mRCTDeviceEventEmitterMock, fakeLandscapeDisplayMetrics); | ||
} | ||
|
||
@Test | ||
public void test_itEmitsJustOneEvent_whenUpdateRequestedMultipleTimes() { | ||
givenDisplayMetricsHolderContains(fakePortraitDisplayMetrics); | ||
mDeviceInfoModule.getTypedExportedConstants(); | ||
givenDisplayMetricsHolderContains(fakeLandscapeDisplayMetrics); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
|
||
verifyUpdateDimensionsEventsEmitted(mRCTDeviceEventEmitterMock, fakeLandscapeDisplayMetrics); | ||
} | ||
|
||
@Test | ||
public void test_itEmitsMultipleEvents_whenDisplayMetricsChangedBetweenUpdates() { | ||
givenDisplayMetricsHolderContains(fakePortraitDisplayMetrics); | ||
|
||
mDeviceInfoModule.getTypedExportedConstants(); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
givenDisplayMetricsHolderContains(fakeLandscapeDisplayMetrics); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
givenDisplayMetricsHolderContains(fakePortraitDisplayMetrics); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
givenDisplayMetricsHolderContains(fakeLandscapeDisplayMetrics); | ||
mDeviceInfoModule.emitUpdateDimensionsEvent(); | ||
|
||
verifyUpdateDimensionsEventsEmitted( | ||
mRCTDeviceEventEmitterMock, | ||
fakeLandscapeDisplayMetrics, | ||
fakePortraitDisplayMetrics, | ||
fakeLandscapeDisplayMetrics); | ||
} | ||
|
||
private static void givenDisplayMetricsHolderContains(final WritableMap fakeDisplayMetrics) { | ||
when(DisplayMetricsHolder.getDisplayMetricsWritableMap(1.0)).thenReturn(fakeDisplayMetrics); | ||
} | ||
|
||
private static void verifyUpdateDimensionsEventsEmitted( | ||
DeviceEventManagerModule.RCTDeviceEventEmitter emitter, WritableMap... expectedEvents) { | ||
List<WritableMap> expectedEventList = Arrays.asList(expectedEvents); | ||
ArgumentCaptor<WritableMap> captor = ArgumentCaptor.forClass(WritableMap.class); | ||
verify(emitter, times(expectedEventList.size())) | ||
.emit(eq("didUpdateDimensions"), captor.capture()); | ||
|
||
List<WritableMap> actualEvents = captor.getAllValues(); | ||
assertThat(actualEvents).isEqualTo(expectedEventList); | ||
} | ||
|
||
private void initTestData() { | ||
mockStatic(Arguments.class); | ||
when(Arguments.createMap()) | ||
.thenAnswer( | ||
new Answer<Object>() { | ||
@Override | ||
public Object answer(InvocationOnMock invocation) throws Throwable { | ||
return new JavaOnlyMap(); | ||
} | ||
}); | ||
|
||
fakePortraitDisplayMetrics = Arguments.createMap(); | ||
fakePortraitDisplayMetrics.putInt("width", 100); | ||
fakePortraitDisplayMetrics.putInt("height", 200); | ||
|
||
fakeLandscapeDisplayMetrics = Arguments.createMap(); | ||
fakeLandscapeDisplayMetrics.putInt("width", 200); | ||
fakeLandscapeDisplayMetrics.putInt("height", 100); | ||
} | ||
} |