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.Surface;
import android.view.WindowManager; import android.view.WindowManager;
import com.facebook.csslayout.CSSNode;
import com.facebook.react.uimanager.LayoutShadowNode; import com.facebook.react.uimanager.LayoutShadowNode;
/** /**
* We implement the Modal by using an Android Dialog. That will fill the entire window of the * 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 * 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 * Modal's inner content view as if they can fill the entire window. To do that, we need to
* styleWidth and styleHeight on the LayoutShadowNode to be the window size. This will then cause * explicitly set the styleWidth and styleHeight on the LayoutShadowNode of the child of this node
* the children to layout as if they can fill the window. * 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 * 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 * 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 mMinPoint = new Point();
private final Point mMaxPoint = 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 * We need to set the styleWidth and styleHeight of the one child (represented by the <View/>
* width and height appropriately so that layout is done properly for the view assuming it * within the <RCTModalHostView/> in Modal.js. This needs to fill the entire window.
* fills the entire window instead of the place it is in the view tree
*/ */
@Override @Override
@TargetApi(16) @TargetApi(16)
public void onAfterUpdateTransaction() { public void addChildAt(CSSNode child, int i) {
super.onAfterUpdateTransaction(); super.addChildAt(child, i);
Context context = getThemedContext(); Context context = getThemedContext();
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
@ -60,7 +62,7 @@ class ModalHostShadowNode extends LayoutShadowNode {
width = mMaxPoint.x; width = mMaxPoint.x;
height = mMinPoint.y; height = mMinPoint.y;
} }
setStyleWidth(width); child.setStyleWidth(width);
setStyleHeight(height); child.setStyleHeight(height);
} }
} }