Modal Animation Types

Summary:
Currently the Modal component uses the slide up / down animation for presenting and hiding the Modal with no options. This PR gives users a choice to use a fade in / out animation or the current slide animation (slide is the default). Android and iOS.

![](http://g.recordit.co/nfJSg487Ox.gif)  ![](http://g.recordit.co/QHGDuUFbPy.gif)

I've updated the UIExplorer and documentation.

![image](https://cloud.githubusercontent.com/assets/4265163/14743130/0bd8282c-086e-11e6-93eb-3d344431337d.png)

Thanks!
Closes https://github.com/facebook/react-native/pull/7156

Differential Revision: D3237809

Pulled By: javache

fb-gh-sync-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a
fbshipit-source-id: 813e56ada8b19990dc5018527dc3a81b2c8b349a

Libraries/Modal/Modal.js

@@ -16,6 +16,7 @@ const PropTypes = require('ReactPropTypes');
 const React = require('React');
 const StyleSheet = require('StyleSheet');
 const View = require('View');
+const deprecatedPropType = require('deprecatedPropType');
 
 const requireNativeComponent = require('requireNativeComponent');
 const RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
@@ -35,7 +36,11 @@ const RCTModalHostView = requireNativeComponent('RCTModalHostView', null);
  */
 class Modal extends React.Component {
   static propTypes = {
-    animated: PropTypes.bool,
+    animated: deprecatedPropType(
+      PropTypes.bool,
+      'Use the `animationType` prop instead.'
+    ),
+    animationType: PropTypes.oneOf(['none', 'slide', 'fade']),
     transparent: PropTypes.bool,
     visible: PropTypes.bool,
     onRequestClose: Platform.OS === 'android' ? PropTypes.func.isRequired : PropTypes.func,
@@ -55,9 +60,18 @@ class Modal extends React.Component {
       backgroundColor: this.props.transparent ? 'transparent' : 'white',
     };
 
+    let animationType = this.props.animationType;
+    if (!animationType) {
+      // manually setting default prop here to keep support for the deprecated 'animated' prop
+      animationType = 'none';
+      if (this.props.animated) {
+        animationType = 'slide';
+      }
+    }
+
     return (
       <RCTModalHostView
-        animated={this.props.animated}
+        animationType={animationType}
         transparent={this.props.transparent}
         onRequestClose={this.props.onRequestClose}
         onShow={this.props.onShow}
@@ -88,4 +102,4 @@ const styles = StyleSheet.create({
   }
 });
 
-module.exports = Modal;
+module.exports = Modal;