status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix Modal on Android 

Summary: When I first did Modal on Android, I incorrectly set the styleWidth and styleHeight on the ModalHostShadowNode.  This corresponded to RCTModalHostView in Modal.js.  This node is actually really just a dummy node in the tree.  The proper node to set the width and height on is the inner <View/> that has top and left position set on it.  This updates the code to set the width and height on that inner node.

Reviewed By: mkonicek

Differential Revision: D3077415

fb-gh-sync-id: e9aee0a21333ed0b5bdde11f453381b0a13470c9
shipit-source-id: e9aee0a21333ed0b5bdde11f453381b0a13470c9
This commit is contained in:
Dave Miller 2016-03-21 14:34:52 -07:00 committed by Facebook Github Bot 7
parent 4d39b1d6b5
commit dfce55a034
1 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ReactAndroid/src/main/java/com/facebook/react/views/modal/ModalHostShadowNode.java
View File

@ -16,14 +16,16 @@ import android.view.Display;
import android.view.Surface;
import android.view.WindowManager;
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 as if they can fill the entire window. To do that, we need to explicitly set the
* styleWidth and styleHeight on the LayoutShadowNode to be the window size. This will then cause
* the children to layout as if they can fill the window.
* 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.
*
* To get that we use information from the WindowManager and default Display. We don't use
* DisplayMetricsHolder because it returns values that include the status bar. We only want the
@ -33,15 +35,15 @@ class ModalHostShadowNode extends LayoutShadowNode {
private final Point mMinPoint = new Point();
private final Point mMaxPoint = new Point();
/**
* Once we have all the properties for the we need to measure the window and set the style
* width and height appropriately so that layout is done properly for the view assuming it
* fills the entire window instead of the place it is in the view tree
* 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
@TargetApi(16)
public void onAfterUpdateTransaction() {
super.onAfterUpdateTransaction();
public void addChildAt(CSSNode child, int i) {
super.addChildAt(child, i);
Context context = getThemedContext();
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
@ -60,7 +62,7 @@ class ModalHostShadowNode extends LayoutShadowNode {
width = mMaxPoint.x;
height = mMinPoint.y;
}
setStyleWidth(width);
setStyleHeight(height);
child.setStyleWidth(width);
child.setStyleHeight(height);
}
}