Updates from Fri 22 May

Libraries/CustomComponents/Navigator/Navigator.js

@@ -1298,6 +1298,14 @@ var Navigator = React.createClass({
     if (i !== this.state.presentedIndex) {
       disabledSceneStyle = styles.disabledScene;
     }
+    var originalRef = child.ref;
+    if (originalRef != null && typeof originalRef !== 'function') {
+      console.warn(
+        'String refs are not supported for navigator scenes. Use a callback ' +
+        'ref instead. Ignoring ref: ' + originalRef
+      );
+      originalRef = null;
+    }
     return (
       <View
         key={this.state.idStack[i]}
@@ -1307,7 +1315,12 @@ var Navigator = React.createClass({
         }}
         style={[styles.baseScene, this.props.sceneStyle, disabledSceneStyle]}>
         {React.cloneElement(child, {
-          ref: this._handleItemRef.bind(null, this.state.idStack[i], route),
+          ref: component => {
+            this._handleItemRef(this.state.idStack[i], route, component);
+            if (originalRef) {
+              originalRef(component);
+            }
+          }
         })}
       </View>
     );

Libraries/Image/RCTImageDownloader.h

@@ -33,6 +33,8 @@ typedef void (^RCTImageDownloadBlock)(UIImage *image, NSError *error);
 - (id)downloadImageForURL:(NSURL *)url
                      size:(CGSize)size
                     scale:(CGFloat)scale
+               resizeMode:(UIViewContentMode)resizeMode
+          backgroundColor:(UIColor *)backgroundColor
                     block:(RCTImageDownloadBlock)block;
 
 /**

Libraries/Image/RCTImageDownloader.m

@@ -10,6 +10,7 @@
 #import "RCTImageDownloader.h"
 
 #import "RCTCache.h"
+#import "RCTLog.h"
 #import "RCTUtils.h"
 
 typedef void (^RCTCachedDataDownloadBlock)(BOOL cached, NSData *data, NSError *error);
@@ -121,34 +122,134 @@ static NSString *RCTCacheKeyForURL(NSURL *url)
   }];
 }
 
-- (id)downloadImageForURL:(NSURL *)url size:(CGSize)size
-                    scale:(CGFloat)scale block:(RCTImageDownloadBlock)block
+/**
+ * Returns the optimal context size for an image drawn using the clip rect
+ * returned by RCTClipRect.
+ */
+CGSize RCTTargetSizeForClipRect(CGRect);
+CGSize RCTTargetSizeForClipRect(CGRect clipRect)
+{
+  return (CGSize){
+    clipRect.size.width + clipRect.origin.x * 2,
+    clipRect.size.height + clipRect.origin.y * 2
+  };
+}
+
+/**
+ * This function takes an input content size & scale (typically from an image),
+ * a target size & scale that it will be drawn into (typically a CGContext) and
+ * then calculates the optimal rectangle to draw the image into so that it will
+ * be sized and positioned correctly if drawn using the specified content mode.
+ */
+CGRect RCTClipRect(CGSize, CGFloat, CGSize, CGFloat, UIViewContentMode);
+CGRect RCTClipRect(CGSize sourceSize, CGFloat sourceScale,
+                   CGSize destSize, CGFloat destScale,
+                   UIViewContentMode resizeMode)
+{
+  // Precompensate for scale
+  CGFloat scale = sourceScale / destScale;
+  sourceSize.width *= scale;
+  sourceSize.height *= scale;
+
+  // Calculate aspect ratios if needed (don't bother is resizeMode == stretch)
+  CGFloat aspect = 0.0, targetAspect = 0.0;
+  if (resizeMode != UIViewContentModeScaleToFill) {
+    aspect = sourceSize.width / sourceSize.height;
+    targetAspect = destSize.width / destSize.height;
+    if (aspect == targetAspect) {
+      resizeMode = UIViewContentModeScaleToFill;
+    }
+  }
+
+  switch (resizeMode) {
+    case UIViewContentModeScaleToFill: // stretch
+
+      sourceSize.width = MIN(destSize.width, sourceSize.width);
+      sourceSize.height = MIN(destSize.height, sourceSize.height);
+      return (CGRect){CGPointZero, sourceSize};
+
+    case UIViewContentModeScaleAspectFit: // contain
+
+      if (targetAspect <= aspect) { // target is taller than content
+        sourceSize.width = destSize.width = MIN(sourceSize.width, destSize.width);
+        sourceSize.height = sourceSize.width / aspect;
+      } else { // target is wider than content
+        sourceSize.height = destSize.height = MIN(sourceSize.height, destSize.height);
+        sourceSize.width = sourceSize.height * aspect;
+      }
+      return (CGRect){CGPointZero, sourceSize};
+
+    case UIViewContentModeScaleAspectFill: // cover
+
+      if (targetAspect <= aspect) { // target is taller than content
+
+        sourceSize.height = destSize.height = MIN(sourceSize.height, destSize.height);
+        sourceSize.width = sourceSize.height * aspect;
+        destSize.width = destSize.height * targetAspect;
+        return (CGRect){{(destSize.width - sourceSize.width) / 2, 0}, sourceSize};
+
+      } else { // target is wider than content
+
+        sourceSize.width = destSize.width = MIN(sourceSize.width, destSize.width);
+        sourceSize.height = sourceSize.width / aspect;
+        destSize.height = destSize.width / targetAspect;
+        return (CGRect){{0, (destSize.height - sourceSize.height) / 2}, sourceSize};
+      }
+
+    default:
+
+      RCTLogError(@"A resizeMode value of %zd is not supported", resizeMode);
+      return (CGRect){CGPointZero, destSize};
+  }
+}
+
+- (id)downloadImageForURL:(NSURL *)url
+                     size:(CGSize)size
+                    scale:(CGFloat)scale
+               resizeMode:(UIViewContentMode)resizeMode
+          backgroundColor:(UIColor *)backgroundColor
+                    block:(RCTImageDownloadBlock)block
 {
   return [self downloadDataForURL:url block:^(NSData *data, NSError *error) {
 
+    if (!data || error) {
+      block(nil, error);
+      return;
+    }
+
+    if (CGSizeEqualToSize(size, CGSizeZero)) {
+      // Target size wasn't available yet, so abort image drawing
+      block(nil, nil);
+      return;
+    }
+
     UIImage *image = [UIImage imageWithData:data scale:scale];
     if (image) {
 
-      // Resize (TODO: should we take aspect ratio into account?)
-      CGSize imageSize = size;
-      if (CGSizeEqualToSize(imageSize, CGSizeZero)) {
-        imageSize = image.size;
-      } else {
-        imageSize = (CGSize){
-          MIN(size.width, image.size.width),
-          MIN(size.height, image.size.height)
-        };
-      }
+      // Get scale and size
+      CGFloat destScale = scale ?: RCTScreenScale();
+      CGRect imageRect = RCTClipRect(image.size, image.scale, size, destScale, resizeMode);
+      CGSize destSize = RCTTargetSizeForClipRect(imageRect);
 
-      // Rescale image if required size is smaller
-      CGFloat imageScale = scale;
-      if (imageScale == 0 || imageScale < image.scale) {
-        imageScale = image.scale;
+      // Opacity optimizations
+      UIColor *blendColor = nil;
+      BOOL opaque = !RCTImageHasAlpha(image.CGImage);
+      if (!opaque && backgroundColor) {
+        CGFloat alpha;
+        [backgroundColor getRed:NULL green:NULL blue:NULL alpha:&alpha];
+        if (alpha > 0.999) { // no benefit to blending if background is translucent
+          opaque = YES;
+          blendColor = backgroundColor;
+        }
       }
 
       // Decompress image at required size
-      UIGraphicsBeginImageContextWithOptions(imageSize, NO, imageScale);
-      [image drawInRect:(CGRect){{0, 0}, imageSize}];
+      UIGraphicsBeginImageContextWithOptions(destSize, opaque, destScale);
+      if (blendColor) {
+        [blendColor setFill];
+        UIRectFill((CGRect){CGPointZero, destSize});
+      }
+      [image drawInRect:imageRect];
       image = UIGraphicsGetImageFromCurrentImageContext();
       UIGraphicsEndImageContext();
     }

Libraries/Image/RCTImageLoader.m

@@ -26,8 +26,6 @@ static dispatch_queue_t RCTImageLoaderQueue(void)
   static dispatch_once_t onceToken;
   dispatch_once(&onceToken, ^{
     queue = dispatch_queue_create("com.facebook.rctImageLoader", DISPATCH_QUEUE_SERIAL);
-    dispatch_set_target_queue(queue,
-                              dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0));
   });
 
   return queue;

Libraries/Image/RCTNetworkImageView.m

@@ -13,6 +13,7 @@
 #import "RCTGIFImage.h"
 #import "RCTImageDownloader.h"
 #import "RCTUtils.h"
+#import "UIView+React.h"
 
 @implementation RCTNetworkImageView
 {
@@ -26,8 +27,7 @@
 
 - (instancetype)initWithFrame:(CGRect)frame imageDownloader:(RCTImageDownloader *)imageDownloader
 {
-  self = [super initWithFrame:frame];
-  if (self) {
+  if ((self = [super initWithFrame:frame])) {
     _deferSentinel = 0;
     _imageDownloader = imageDownloader;
     self.userInteractionEnabled = NO;
@@ -37,20 +37,44 @@
 
 - (NSURL *)imageURL
 {
-  // We clear our backing layer's imageURL when we are not in a window for a while,
+  // We clear our imageURL when we are not in a window for a while,
   // to make sure we don't consume network resources while offscreen.
   // However we don't want to expose this hackery externally.
   return _deferred ? _deferredImageURL : _imageURL;
 }
 
+- (void)setBackgroundColor:(UIColor *)backgroundColor
+{
+  super.backgroundColor = backgroundColor;
+  [self _updateImage];
+}
+
+- (void)reactSetFrame:(CGRect)frame
+{
+  [super reactSetFrame:frame];
+  [self _updateImage];
+}
+
+- (void)_updateImage
+{
+  [self setImageURL:_imageURL resetToDefaultImageWhileLoading:NO];
+}
+
 - (void)setImageURL:(NSURL *)imageURL resetToDefaultImageWhileLoading:(BOOL)reset
 {
+  if (![_imageURL isEqual:imageURL] && _downloadToken) {
+    [_imageDownloader cancelDownload:_downloadToken];
+    _downloadToken = nil;
+  }
+
+  _imageURL = imageURL;
+
   if (_deferred) {
     _deferredImageURL = imageURL;
   } else {
-    if (_downloadToken) {
-      [_imageDownloader cancelDownload:_downloadToken];
-      _downloadToken = nil;
+    if (!imageURL) {
+      self.layer.contents = nil;
+      return;
     }
     if (reset) {
       self.layer.contentsScale = _defaultImage.scale;
@@ -62,25 +86,35 @@
       _downloadToken = [_imageDownloader downloadDataForURL:imageURL block:^(NSData *data, NSError *error) {
         if (data) {
           dispatch_async(dispatch_get_main_queue(), ^{
+            if (imageURL != self.imageURL) {
+              // Image has changed
+              return;
+            }
             CAKeyframeAnimation *animation = RCTGIFImageWithData(data);
             self.layer.contentsScale = 1.0;
             self.layer.minificationFilter = kCAFilterLinear;
             self.layer.magnificationFilter = kCAFilterLinear;
             [self.layer addAnimation:animation forKey:@"contents"];
           });
+        } else if (error) {
+          RCTLogWarn(@"Unable to download image data. Error: %@", error);
         }
-        // TODO: handle errors
       }];
     } else {
-      _downloadToken = [_imageDownloader downloadImageForURL:imageURL size:self.bounds.size scale:RCTScreenScale() block:^(UIImage *image, NSError *error) {
+      _downloadToken = [_imageDownloader downloadImageForURL:imageURL size:self.bounds.size scale:RCTScreenScale() resizeMode:self.contentMode backgroundColor:self.backgroundColor block:^(UIImage *image, NSError *error) {
         if (image) {
           dispatch_async(dispatch_get_main_queue(), ^{
+            if (imageURL != self.imageURL) {
+              // Image has changed
+              return;
+            }
             [self.layer removeAnimationForKey:@"contents"];
             self.layer.contentsScale = image.scale;
             self.layer.contents = (__bridge id)image.CGImage;
           });
+        } else if (error) {
+          RCTLogWarn(@"Unable to download image. Error: %@", error);
         }
-        // TODO: handle errors
       }];
     }
   }

Libraries/Interaction/InteractionManager.js

@@ -19,6 +19,13 @@ var invariant = require('invariant');
 var keyMirror = require('keyMirror');
 var setImmediate = require('setImmediate');
 
+type Handle = number;
+
+/**
+ * Maximum time a handle can be open before warning in DEV.
+ */
+var DEV_TIMEOUT = 2000;
+
 var _emitter = new EventEmitter();
 var _interactionSet = new Set();
 var _addInteractionSet = new Set();
@@ -83,17 +90,25 @@ var InteractionManager = {
   /**
    * Notify manager that an interaction has started.
    */
-  createInteractionHandle(): number {
+  createInteractionHandle(): Handle {
     scheduleUpdate();
     var handle = ++_inc;
     _addInteractionSet.add(handle);
+    if (__DEV__) {
+      // Capture the stack trace of what created the handle.
+      var error = new Error(
+        'InteractionManager: interaction handle not cleared within ' +
+        DEV_TIMEOUT + ' ms.'
+      );
+      setDevTimeoutHandle(handle, error, DEV_TIMEOUT);
+    }
     return handle;
   },
 
   /**
    * Notify manager that an interaction has completed.
    */
-  clearInteractionHandle(handle: number) {
+  clearInteractionHandle(handle: Handle) {
     invariant(
       !!handle,
       'Must provide a handle to clear.'
@@ -151,4 +166,19 @@ function processUpdate() {
   _deleteInteractionSet.clear();
 }
 
+/**
+ * Wait until `timeout` has passed and warn if the handle has not been cleared.
+ */
+function setDevTimeoutHandle(
+  handle: Handle,
+  error: Error,
+  timeout: number
+): void {
+  setTimeout(() => {
+    if (_interactionSet.has(handle)) {
+      console.warn(error.message + '\n' + error.stack);
+    }
+  }, timeout);
+}
+
 module.exports = InteractionManager;

Libraries/JavaScriptAppEngine/System/JSTimers/JSTimers.js

@@ -43,7 +43,6 @@ var JSTimers = {
     var newID = JSTimersExecution.GUID++;
     var freeIndex = JSTimers._getFreeIndex();
     JSTimersExecution.timerIDs[freeIndex] = newID;
-    JSTimersExecution.callbacks[freeIndex] = func;
     JSTimersExecution.callbacks[freeIndex] = function() {
       return func.apply(undefined, args);
     };
@@ -60,12 +59,15 @@ var JSTimers = {
     var newID = JSTimersExecution.GUID++;
     var freeIndex = JSTimers._getFreeIndex();
     JSTimersExecution.timerIDs[freeIndex] = newID;
-    JSTimersExecution.callbacks[freeIndex] = func;
     JSTimersExecution.callbacks[freeIndex] = function() {
-      return func.apply(undefined, args);
+      var startTime = Date.now();
+      var ret = func.apply(undefined, args);
+      var endTime = Date.now();
+      RCTTiming.createTimer(newID, Math.max(0, duration - (endTime - startTime)), endTime, false);
+      return ret;
     };
     JSTimersExecution.types[freeIndex] = JSTimersExecution.Type.setInterval;
-    RCTTiming.createTimer(newID, duration, Date.now(), /** recurring */ true);
+    RCTTiming.createTimer(newID, duration, Date.now(), /** recurring */ false);
     return newID;
   },
 
@@ -77,7 +79,6 @@ var JSTimers = {
     var newID = JSTimersExecution.GUID++;
     var freeIndex = JSTimers._getFreeIndex();
     JSTimersExecution.timerIDs[freeIndex] = newID;
-    JSTimersExecution.callbacks[freeIndex] = func;
     JSTimersExecution.callbacks[freeIndex] = function() {
       return func.apply(undefined, args);
     };