Add center ImageResizeMode option

Summary:Adds a `center` option to `Image`'s `resizeMode` prop, which doesn't enlarge images.
This is how it looks in UIExplorer:
{F60386921}

Reviewed By: dmmiller

Differential Revision: D3064284

fb-gh-sync-id: 79cd2da8f44c5b3da2e42d3bebf3131335f53c28
shipit-source-id: 79cd2da8f44c5b3da2e42d3bebf3131335f53c28

Examples/UIExplorer/ImageExample.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -383,38 +390,54 @@ exports.examples = [
       return (
         <View>
           {[smallImage, fullImage].map((image, index) => {
-            return <View style={styles.horizontal} key={index}>
+            return (
-              <View>
+            <View key={index}>
-                <Text style={[styles.resizeModeText]}>
+              <View style={styles.horizontal}>
-                  Contain
+                <View>
-                </Text>
+                  <Text style={[styles.resizeModeText]}>
-                <Image
+                    Contain
-                  style={styles.resizeMode}
+                  </Text>
-                  resizeMode={Image.resizeMode.contain}
+                  <Image
-                  source={image}
+                    style={styles.resizeMode}
-                />
+                    resizeMode={Image.resizeMode.contain}
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Cover
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.cover}
+                    source={image}
+                  />
+                </View>
               </View>
-              <View style={styles.leftMargin}>
+              <View style={styles.horizontal}>
-                <Text style={[styles.resizeModeText]}>
+                <View>
-                  Cover
+                  <Text style={[styles.resizeModeText]}>
-                </Text>
+                    Stretch
-                <Image
+                  </Text>
-                  style={styles.resizeMode}
+                  <Image
-                  resizeMode={Image.resizeMode.cover}
+                    style={styles.resizeMode}
-                  source={image}
+                    resizeMode={Image.resizeMode.stretch}
-                />
+                    source={image}
+                  />
+                </View>
+                <View style={styles.leftMargin}>
+                  <Text style={[styles.resizeModeText]}>
+                    Center
+                  </Text>
+                  <Image
+                    style={styles.resizeMode}
+                    resizeMode={Image.resizeMode.center}
+                    source={image}
+                  />
+                </View>
               </View>
-              <View style={styles.leftMargin}>
-                <Text style={[styles.resizeModeText]}>
-                  Stretch
-                </Text>
-                <Image
-                  style={styles.resizeMode}
-                  resizeMode={Image.resizeMode.stretch}
-                  source={image}
-                />
             </View>
-          </View>;
+          );
         })}
         </View>
       );
@@ -459,7 +482,7 @@ exports.examples = [
   {
     title: 'Image Size',
     render: function() {
-      return <ImageSizeExample source={fullImage} />; 
+      return <ImageSizeExample source={fullImage} />;
     },
     platform: 'ios',
   },

Libraries/Image/ImageResizeMode.js

@@ -34,6 +34,12 @@ var ImageResizeMode = keyMirror({
    * distorting it.
    */
   stretch: null,
+  /**
+  * center - The image will be scaled down such that it is completely visible,
+  * if bigger than the area of the view.
+  * The image will not be scaled up.
+  */
+  center: null,
 });
 
 module.exports = ImageResizeMode;

ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java

@@ -89,7 +89,9 @@ import com.facebook.react.uimanager.events.TouchEventType;
                 "ScaleAspectFit",
                 ImageView.ScaleType.FIT_CENTER.ordinal(),
                 "ScaleAspectFill",
-                ImageView.ScaleType.CENTER_CROP.ordinal())));
+                ImageView.ScaleType.CENTER_CROP.ordinal(),
+                "ScaleAspectCenter",
+                ImageView.ScaleType.CENTER_INSIDE.ordinal())));
 
     DisplayMetrics displayMetrics = DisplayMetricsHolder.getWindowDisplayMetrics();
     DisplayMetrics screenDisplayMetrics = DisplayMetricsHolder.getScreenDisplayMetrics();

ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.java

@@ -33,6 +33,9 @@ public class ImageResizeMode {
     if ("stretch".equals(resizeModeValue)) {
       return ScalingUtils.ScaleType.FIT_XY;
     }
+    if ("center".equals(resizeModeValue)) {
+      return ScalingUtils.ScaleType.CENTER_INSIDE;
+    }
     if (resizeModeValue == null) {
       // Use the default. Never use null.
       return defaultValue();

ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.java

@@ -42,6 +42,9 @@ public class ImageResizeModeTest {
     assertThat(ImageResizeMode.toScaleType("stretch"))
         .isEqualTo(ScalingUtils.ScaleType.FIT_XY);
 
+    assertThat(ImageResizeMode.toScaleType("center"))
+        .isEqualTo(ScalingUtils.ScaleType.CENTER_INSIDE);
+
     // No resizeMode set
     assertThat(ImageResizeMode.defaultValue())
         .isEqualTo(ScalingUtils.ScaleType.CENTER_CROP);