Merge pull request facebook#1761 from frantic/updates-26-jun

Updates from Fri, 26 Jun

Examples/UIExplorer/NavigatorIOSColorsExample.js

@@ -66,6 +66,7 @@ var NavigatorIOSColors = React.createClass({
         tintColor="#FFFFFF"
         barTintColor="#183E63"
         titleTextColor="#FFFFFF"
+        translucent="true"
       />
     );
   },

Libraries/Animation/LayoutAnimation.js

@@ -23,6 +23,7 @@ var TypesEnum = {
   easeInEaseOut: true,
   easeIn: true,
   easeOut: true,
+  keyboard: true,
 };
 var Types = keyMirror(TypesEnum);
 
@@ -113,4 +114,10 @@ var LayoutAnimation = {
   }
 };
 
+for (var key in LayoutAnimation.Presets) {
+  LayoutAnimation[key] = LayoutAnimation.configureNext.bind(
+    null, LayoutAnimation.Presets[key]
+  );
+}
+
 module.exports = LayoutAnimation;

Libraries/Components/MapView/MapView.js

@@ -35,6 +35,34 @@ type MapRegion = {
 var MapView = React.createClass({
   mixins: [NativeMethodsMixin],
 
+  checkAnnotationIds: function (annotations: Array<Object>) {
+
+    var newAnnotations = annotations.map(function (annotation) {
+      if (!annotation.id) {
+        // TODO: add a base64 (or similar) encoder here
+        annotation.id = encodeURIComponent(JSON.stringify(annotation));
+      }
+
+      return annotation;
+    });
+
+    this.setState({
+      annotations: newAnnotations
+    });
+  },
+
+  componentWillMount: function() {
+    if (this.props.annotations) {
+      this.checkAnnotationIds(this.props.annotations);
+    }
+  },
+
+  componentWillReceiveProps: function(nextProps: Object) {
+    if (nextProps.annotations) {
+      this.checkAnnotationIds(nextProps.annotations);
+    }
+  },
+
   propTypes: {
     /**
      * Used to style and layout the `MapView`.  See `StyleSheet.js` and
@@ -84,14 +112,14 @@ var MapView = React.createClass({
 
     /**
      * The map type to be displayed.
-     * 
+     *
      * - standard: standard road map (default)
      * - satellite: satellite view
      * - hybrid: satellite view with roads and points of interest overlayed
      */
     mapType: React.PropTypes.oneOf([
-      'standard', 
-      'satellite', 
+      'standard',
+      'satellite',
       'hybrid',
     ]),
 
@@ -126,11 +154,34 @@ var MapView = React.createClass({
       latitude: React.PropTypes.number.isRequired,
       longitude: React.PropTypes.number.isRequired,
 
+      /**
+       * Whether the pin drop should be animated or not
+       */
+      animateDrop: React.PropTypes.bool,
+
       /**
        * Annotation title/subtile.
        */
       title: React.PropTypes.string,
       subtitle: React.PropTypes.string,
+
+      /**
+       * Whether the Annotation has callout buttons.
+       */
+      hasLeftCallout: React.PropTypes.bool,
+      hasRightCallout: React.PropTypes.bool,
+
+      /**
+       * Event handlers for callout buttons.
+       */
+      onLeftCalloutPress: React.PropTypes.func,
+      onRightCalloutPress: React.PropTypes.func,
+
+      /**
+       * annotation id
+       */
+      id: React.PropTypes.string
+
     })),
 
     /**
@@ -158,6 +209,11 @@ var MapView = React.createClass({
      * Callback that is called once, when the user is done moving the map.
      */
     onRegionChangeComplete: React.PropTypes.func,
+
+    /**
+     * Callback that is called once, when the user is clicked on a annotation.
+     */
+    onAnnotationPress: React.PropTypes.func,
   },
 
   _onChange: function(event: Event) {
@@ -170,15 +226,42 @@ var MapView = React.createClass({
     }
   },
 
+  _onPress: function(event: Event) {
+    if (event.nativeEvent.action === 'annotation-click') {
+      this.props.onAnnotationPress && this.props.onAnnotationPress(event.nativeEvent.annotation);
+    }
+
+    if (event.nativeEvent.action === 'callout-click') {
+      if (!this.props.annotations) {
+        return;
+      }
+
+      // Find the annotation with the id of what has been pressed
+      for (var i = 0; i < this.props.annotations.length; i++) {
+        var annotation = this.props.annotations[i];
+        if (annotation.id === event.nativeEvent.annotationId) {
+          // Pass the right function
+          if (event.nativeEvent.side === 'left') {
+            annotation.onLeftCalloutPress && annotation.onLeftCalloutPress(event.nativeEvent);
+          } else if (event.nativeEvent.side === 'right') {
+            annotation.onRightCalloutPress && annotation.onRightCalloutPress(event.nativeEvent);
+          }
+        }
+      }
+
+    }
+  },
+
   render: function() {
-    return <RCTMap {...this.props} onChange={this._onChange} />;
+    return <RCTMap {...this.props} onPress={this._onPress} onChange={this._onChange} />;
   },
 });
 
 if (Platform.OS === 'android') {
   var RCTMap = createReactNativeComponentClass({
     validAttributes: merge(
       ReactNativeViewAttributes.UIView, {
+        active: true,
         showsUserLocation: true,
         zoomEnabled: true,
         rotateEnabled: true,

Libraries/Components/Navigation/NavigatorIOS.ios.js

@@ -57,6 +57,7 @@ var RCTNavigatorItem = createReactNativeComponentClass({
     backButtonIcon: true,
     backButtonTitle: true,
     tintColor: true,
+    translucent: true,
     navigationBarHidden: true,
     titleTextColor: true,
     style: true,
@@ -300,6 +301,11 @@ var NavigatorIOS = React.createClass({
      */
     titleTextColor: PropTypes.string,
 
+    /**
+     * A Boolean value that indicates whether the navigation bar is translucent
+     */
+    translucent: PropTypes.bool,
+
   },
 
   navigator: (undefined: ?Object),
@@ -609,6 +615,7 @@ var NavigatorIOS = React.createClass({
           navigationBarHidden={this.props.navigationBarHidden}
           tintColor={this.props.tintColor}
           barTintColor={this.props.barTintColor}
+          translucent={this.props.translucent}
           titleTextColor={this.props.titleTextColor}>
           <Component
             navigator={this.navigator}

Libraries/CustomComponents/ListView/ListView.js

@@ -276,7 +276,9 @@ var ListView = React.createClass({
   },
 
   componentDidUpdate: function() {
-    this._measureAndUpdateScrollProps();
+    this.requestAnimationFrame(() => {
+      this._measureAndUpdateScrollProps();
+    });
   },
 
   onRowHighlighted: function(sectionID, rowID) {