Add Image resizeMode center to iOS

facebook · Jul 14, 2016 · 039b293 · 039b293
1 parent b0c023c
commit 039b293
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
@@ -173,7 +173,7 @@ const Image = React.createClass({
      * - `repeat`: Repeat the image to cover the frame of the view. The
      * image will keep it's size and aspect ratio. (iOS only)
      */
-    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat']),
+    resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center']),
     /**
      * A unique identifier for this element to be used in UI Automation
      * testing scripts.

diff --git a/Libraries/Image/RCTImageUtils.m b/Libraries/Image/RCTImageUtils.m
@@ -53,9 +53,10 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize,
     destSize.height = destSize.width / aspect;
   }
 
-  // Calculate target aspect ratio if needed (don't bother if resizeMode == stretch)
+  // Calculate target aspect ratio if needed
   CGFloat targetAspect = 0.0;
-  if (resizeMode != UIViewContentModeScaleToFill) {
+  if (resizeMode != RCTResizeModeCenter &&
+      resizeMode != RCTResizeModeStretch) {
     targetAspect = destSize.width / destSize.height;
     if (aspect == targetAspect) {
       resizeMode = RCTResizeModeStretch;
@@ -110,6 +111,26 @@ CGRect RCTTargetRect(CGSize sourceSize, CGSize destSize,
           RCTCeilSize(sourceSize, destScale)
         };
       }
+
+    case RCTResizeModeCenter:
+
+      // Make sure the image is not clipped by the target.
+      if (sourceSize.height > destSize.height) {
+        sourceSize.width = destSize.width = destSize.width;
+        sourceSize.height = sourceSize.width / aspect;
+      }
+      if (sourceSize.width > destSize.width) {
+        sourceSize.height = destSize.height = destSize.height;
+        sourceSize.width = sourceSize.height * aspect;
+      }
+
+      return (CGRect){
+        {
+          RCTFloorValue((destSize.width - sourceSize.width) / 2, destScale),
+          RCTFloorValue((destSize.height - sourceSize.height) / 2, destScale),
+        },
+        RCTCeilSize(sourceSize, destScale)
+      };
   }
 }
 
@@ -131,6 +152,10 @@ CGSize RCTTargetSize(CGSize sourceSize, CGFloat sourceScale,
                      BOOL allowUpscaling)
 {
   switch (resizeMode) {
+    case RCTResizeModeCenter:
+
+      return RCTTargetRect(sourceSize, destSize, destScale, resizeMode).size;
+
     case RCTResizeModeStretch:
 
       if (!allowUpscaling) {
@@ -207,6 +232,7 @@ BOOL RCTUpscalingRequired(CGSize sourceSize, CGFloat sourceScale,
       }
 
     case RCTResizeModeRepeat:
+    case RCTResizeModeCenter:
 
       return NO;
   }

diff --git a/Libraries/Image/RCTResizeMode.h b/Libraries/Image/RCTResizeMode.h
@@ -13,6 +13,7 @@ typedef NS_ENUM(NSInteger, RCTResizeMode) {
   RCTResizeModeCover = UIViewContentModeScaleAspectFill,
   RCTResizeModeContain = UIViewContentModeScaleAspectFit,
   RCTResizeModeStretch = UIViewContentModeScaleToFill,
+  RCTResizeModeCenter = UIViewContentModeCenter,
   RCTResizeModeRepeat = -1, // Use negative values to avoid conflicts with iOS enum values.
 };
 

diff --git a/Libraries/Image/RCTResizeMode.m b/Libraries/Image/RCTResizeMode.m
@@ -15,6 +15,7 @@ @implementation RCTConvert(RCTResizeMode)
   @"cover": @(RCTResizeModeCover),
   @"contain": @(RCTResizeModeContain),
   @"stretch": @(RCTResizeModeStretch),
+  @"center": @(RCTResizeModeCenter),
   @"repeat": @(RCTResizeModeRepeat),
 }), RCTResizeModeStretch, integerValue)