Fix Modal freeze
Summary: In some cases, the size of the content view changes before we add views to the Modal. That means that the size of that view will not be set through the `onSizeChanged` method. This can result in some apps apparently freezing, since the dialog is created, but there are no actual views in it. For that reason, we still need the ModalHostShadowNode to set the size of the initial view, so that by the time the view gets added it already has the correct size. There's a new helper class so that we can reuse the modal size computation. Reviewed By: foghina Differential Revision: D3892795 fbshipit-source-id: 6a32bd7680a74d9912a21bfebb4ebd7a3c3c3e38
This commit is contained in:
parent
21fda19ca9
commit
922cd6ddfc
|
@ -0,0 +1,45 @@
|
||||||
|
// Copyright 2004-present Facebook. All Rights Reserved.
|
||||||
|
|
||||||
|
package com.facebook.react.views.modal;
|
||||||
|
|
||||||
|
import android.annotation.TargetApi;
|
||||||
|
import android.content.Context;
|
||||||
|
import android.graphics.Point;
|
||||||
|
import android.view.Display;
|
||||||
|
import android.view.Surface;
|
||||||
|
import android.view.WindowManager;
|
||||||
|
|
||||||
|
import com.facebook.infer.annotation.Assertions;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helper class for Modals.
|
||||||
|
*/
|
||||||
|
/*package*/ class ModalHostHelper {
|
||||||
|
|
||||||
|
private static final Point MIN_POINT = new Point();
|
||||||
|
private static final Point MAX_POINT = new Point();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* To get the size of the screen, we use information from the WindowManager and
|
||||||
|
* default Display. We don't use DisplayMetricsHolder, or Display#getSize() because
|
||||||
|
* they return values that include the status bar. We only want the values of what
|
||||||
|
* will actually be shown on screen.
|
||||||
|
* This should only be called on the native modules/shadow nodes thread.
|
||||||
|
*/
|
||||||
|
@TargetApi(16)
|
||||||
|
public static Point getModalHostSize(Context context) {
|
||||||
|
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
|
||||||
|
Display display = Assertions.assertNotNull(wm).getDefaultDisplay();
|
||||||
|
// getCurrentSizeRange will return the min and max width and height that the window can be
|
||||||
|
display.getCurrentSizeRange(MIN_POINT, MAX_POINT);
|
||||||
|
|
||||||
|
final int rotation = display.getRotation();
|
||||||
|
if (rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180) {
|
||||||
|
// If we are vertical the width value comes from min width and height comes from max height
|
||||||
|
return new Point(MIN_POINT.x, MAX_POINT.y);
|
||||||
|
} else {
|
||||||
|
// If we are horizontal the width value comes from max width and height comes from min height
|
||||||
|
return new Point(MAX_POINT.x, MIN_POINT.y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,38 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) 2015-present, Facebook, Inc.
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the BSD-style license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||||||
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||||||
|
*/
|
||||||
|
|
||||||
|
package com.facebook.react.views.modal;
|
||||||
|
|
||||||
|
import android.graphics.Point;
|
||||||
|
|
||||||
|
import com.facebook.csslayout.CSSNode;
|
||||||
|
import com.facebook.react.uimanager.LayoutShadowNode;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* We implement the Modal by using an Android Dialog. That will fill the entire window of the
|
||||||
|
* application. To get layout to work properly, we need to layout all the elements within the
|
||||||
|
* Modal's inner content view as if they can fill the entire window. To do that, we need to
|
||||||
|
* explicitly set the styleWidth and styleHeight on the LayoutShadowNode of the child of this node
|
||||||
|
* to be the window size. This will then cause the children of the Modal to layout as if they can
|
||||||
|
* fill the window.
|
||||||
|
*/
|
||||||
|
class ModalHostShadowNode extends LayoutShadowNode {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* We need to set the styleWidth and styleHeight of the one child (represented by the <View/>
|
||||||
|
* within the <RCTModalHostView/> in Modal.js. This needs to fill the entire window.
|
||||||
|
*/
|
||||||
|
@Override
|
||||||
|
public void addChildAt(CSSNode child, int i) {
|
||||||
|
super.addChildAt(child, i);
|
||||||
|
Point modalSize = ModalHostHelper.getModalHostSize(getThemedContext());
|
||||||
|
child.setStyleWidth(modalSize.x);
|
||||||
|
child.setStyleHeight(modalSize.y);
|
||||||
|
}
|
||||||
|
}
|
|
@ -17,6 +17,7 @@ import android.content.DialogInterface;
|
||||||
|
|
||||||
import com.facebook.react.bridge.ReactApplicationContext;
|
import com.facebook.react.bridge.ReactApplicationContext;
|
||||||
import com.facebook.react.common.MapBuilder;
|
import com.facebook.react.common.MapBuilder;
|
||||||
|
import com.facebook.react.uimanager.LayoutShadowNode;
|
||||||
import com.facebook.react.uimanager.PixelUtil;
|
import com.facebook.react.uimanager.PixelUtil;
|
||||||
import com.facebook.react.uimanager.ThemedReactContext;
|
import com.facebook.react.uimanager.ThemedReactContext;
|
||||||
import com.facebook.react.uimanager.UIManagerModule;
|
import com.facebook.react.uimanager.UIManagerModule;
|
||||||
|
@ -47,6 +48,16 @@ public class ReactModalHostManager extends ViewGroupManager<ReactModalHostView>
|
||||||
return new ReactModalHostView(reactContext);
|
return new ReactModalHostView(reactContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public LayoutShadowNode createShadowNodeInstance() {
|
||||||
|
return new ModalHostShadowNode();
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public Class<? extends LayoutShadowNode> getShadowNodeClass() {
|
||||||
|
return ModalHostShadowNode.class;
|
||||||
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void onDropViewInstance(ReactModalHostView view) {
|
public void onDropViewInstance(ReactModalHostView view) {
|
||||||
super.onDropViewInstance(view);
|
super.onDropViewInstance(view);
|
||||||
|
|
|
@ -17,10 +17,8 @@ import android.app.Dialog;
|
||||||
import android.content.Context;
|
import android.content.Context;
|
||||||
import android.content.DialogInterface;
|
import android.content.DialogInterface;
|
||||||
import android.graphics.Point;
|
import android.graphics.Point;
|
||||||
import android.view.Display;
|
|
||||||
import android.view.KeyEvent;
|
import android.view.KeyEvent;
|
||||||
import android.view.MotionEvent;
|
import android.view.MotionEvent;
|
||||||
import android.view.Surface;
|
|
||||||
import android.view.View;
|
import android.view.View;
|
||||||
import android.view.ViewGroup;
|
import android.view.ViewGroup;
|
||||||
import android.view.WindowManager;
|
import android.view.WindowManager;
|
||||||
|
@ -267,8 +265,6 @@ public class ReactModalHostView extends ViewGroup implements LifecycleEventListe
|
||||||
static class DialogRootViewGroup extends ReactViewGroup implements RootView {
|
static class DialogRootViewGroup extends ReactViewGroup implements RootView {
|
||||||
|
|
||||||
private final JSTouchDispatcher mJSTouchDispatcher = new JSTouchDispatcher(this);
|
private final JSTouchDispatcher mJSTouchDispatcher = new JSTouchDispatcher(this);
|
||||||
private final Point mMinPoint = new Point();
|
|
||||||
private final Point mMaxPoint = new Point();
|
|
||||||
|
|
||||||
public DialogRootViewGroup(Context context) {
|
public DialogRootViewGroup(Context context) {
|
||||||
super(context);
|
super(context);
|
||||||
|
@ -282,33 +278,9 @@ public class ReactModalHostView extends ViewGroup implements LifecycleEventListe
|
||||||
new Runnable() {
|
new Runnable() {
|
||||||
@Override
|
@Override
|
||||||
public void run() {
|
public void run() {
|
||||||
// To get the size of the screen, we use information from the WindowManager and
|
Point modalSize = ModalHostHelper.getModalHostSize(getContext());
|
||||||
// default Display. We don't use DisplayMetricsHolder, or Display#getSize() because
|
|
||||||
// they return values that include the status bar. We only want the values of what
|
|
||||||
// will actually be shown on screen.
|
|
||||||
Context context = getContext();
|
|
||||||
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
|
|
||||||
Display display = Assertions.assertNotNull(wm.getDefaultDisplay());
|
|
||||||
// getCurrentSizeRange will return the min and max width and height that the window
|
|
||||||
// can be
|
|
||||||
display.getCurrentSizeRange(mMinPoint, mMaxPoint);
|
|
||||||
|
|
||||||
int width, height;
|
|
||||||
int rotation = display.getRotation();
|
|
||||||
if (rotation == Surface.ROTATION_0 || rotation == Surface.ROTATION_180) {
|
|
||||||
// If we are vertical the width value comes from min width and height comes from
|
|
||||||
// max height
|
|
||||||
width = mMinPoint.x;
|
|
||||||
height = mMaxPoint.y;
|
|
||||||
} else {
|
|
||||||
// If we are horizontal the width value comes from max width and height comes from
|
|
||||||
// min height
|
|
||||||
width = mMaxPoint.x;
|
|
||||||
height = mMinPoint.y;
|
|
||||||
}
|
|
||||||
|
|
||||||
((ReactContext) getContext()).getNativeModule(UIManagerModule.class)
|
((ReactContext) getContext()).getNativeModule(UIManagerModule.class)
|
||||||
.updateNodeSize(getChildAt(0).getId(), width, height);
|
.updateNodeSize(getChildAt(0).getId(), modalSize.x, modalSize.y);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue