Make <Modal> visible by default

Summary: Make <Modal> visible by default and fix the scenario where we present a modal immediately when adding it to the view hierarchy.

Closes #3724
Closes #2952

public

Reviewed By: nicklockwood

Differential Revision: D2595938

fb-gh-sync-id: 1571790d36fe486f1fbbed9f2d66f1e6add73d91

Examples/UIExplorer/ModalExample.js

@@ -143,6 +143,7 @@ var styles = StyleSheet.create({
   },
   innerContainer: {
     borderRadius: 10,
+    alignItems: 'center',
   },
   row: {
     alignItems: 'center',
@@ -158,6 +159,7 @@ var styles = StyleSheet.create({
     borderRadius: 5,
     flex: 1,
     height: 44,
+    alignSelf: 'stretch',
     justifyContent: 'center',
     overflow: 'hidden',
   },

Libraries/Modal/Modal.js

@@ -59,9 +59,14 @@ class Modal extends React.Component {
 Modal.propTypes = {
   animated: PropTypes.bool,
   transparent: PropTypes.bool,
+  visible: PropTypes.bool,
   onDismiss: PropTypes.func,
 };
 
+Modal.defaultProps = {
+  visible: true,
+};
+
 var styles = StyleSheet.create({
   modal: {
     position: 'absolute',

React/Views/RCTModalHostView.m

@@ -76,15 +76,22 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:coder)
   }
 }
 
+- (void)didMoveToWindow
+{
+  [super didMoveToWindow];
+
+  if (!_isPresented && self.window) {
+    RCTAssert(self.reactViewController, @"Can't present modal view controller without a presenting view controller");
+    [self.reactViewController presentViewController:_modalViewController animated:self.animated completion:nil];
+    _isPresented = YES;
+  }
+}
+
 - (void)didMoveToSuperview
 {
   [super didMoveToSuperview];
 
-  if (self.superview) {
-    RCTAssert(self.reactViewController, @"Can't present modal view controller without a presenting view controller");
-    [self.reactViewController presentViewController:_modalViewController animated:self.animated completion:nil];
-    _isPresented = YES;
-  } else {
+  if (_isPresented && !self.superview) {
     [self dismissModalViewController];
   }
 }