From 2070efa019f6b5dfb38500d41e4d7e263f59f0d2 Mon Sep 17 00:00:00 2001
From: Corentin Smith <corentin.smith@gmail.com>
Date: Tue, 8 Mar 2016 12:09:17 -0800
Subject: [PATCH] Convert Image resizeMode `contain` to FIT_CENTER

Summary:Convert from `CENTER_INSIDE` to `FIT_CENTER`.
The difference between those is that `CENTER_INSIDE` will not upscale if the image is too small.
See the Fresco docs: http://frescolib.org/javadoc/reference/com/facebook/drawee/drawable/ScalingUtils.ScaleType.html

Original issue: https://github.com/facebook/react-native/issues/4031
Closes https://github.com/facebook/react-native/pull/5738

Differential Revision: D2959473

Pulled By: mkonicek

fb-gh-sync-id: 8f76944e53b3d56fec0dc7303db339a71d0c389e
shipit-source-id: 8f76944e53b3d56fec0dc7303db339a71d0c389e
---
 Examples/UIExplorer/ImageExample.js           | 66 ++++++++++---------
 .../uimanager/UIManagerModuleConstants.java   |  2 +-
 .../react/views/image/ImageResizeMode.java    |  2 +-
 .../views/image/ImageResizeModeTest.java      |  2 +-
 4 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/Examples/UIExplorer/ImageExample.js b/Examples/UIExplorer/ImageExample.js
index 1a9af6c877c..a15aa38ddef 100644
--- a/Examples/UIExplorer/ImageExample.js
+++ b/Examples/UIExplorer/ImageExample.js
@@ -381,37 +381,41 @@ exports.examples = [
       'rendered within the frame.',
     render: function() {
       return (
-        <View style={styles.horizontal}>
-          <View>
-            <Text style={[styles.resizeModeText]}>
-              Contain
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.contain}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Cover
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.cover}
-              source={fullImage}
-            />
-          </View>
-          <View style={styles.leftMargin}>
-            <Text style={[styles.resizeModeText]}>
-              Stretch
-            </Text>
-            <Image
-              style={styles.resizeMode}
-              resizeMode={Image.resizeMode.stretch}
-              source={fullImage}
-            />
-          </View>
+        <View>
+          {[smallImage, fullImage].map((image, index) => {
+            return <View style={styles.horizontal} key={index}>
+              <View>
+                <Text style={[styles.resizeModeText]}>
+                  Contain
+                </Text>
+                <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 style={styles.leftMargin}>
+                <Text style={[styles.resizeModeText]}>
+                  Stretch
+                </Text>
+                <Image
+                  style={styles.resizeMode}
+                  resizeMode={Image.resizeMode.stretch}
+                  source={image}
+                />
+            </View>
+          </View>;
+        })}
         </View>
       );
     },
diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java
index b8363917e12..18626ba32f1 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/UIManagerModuleConstants.java
@@ -87,7 +87,7 @@ import com.facebook.react.uimanager.events.TouchEventType;
             "ContentMode",
             MapBuilder.of(
                 "ScaleAspectFit",
-                ImageView.ScaleType.CENTER_INSIDE.ordinal(),
+                ImageView.ScaleType.FIT_CENTER.ordinal(),
                 "ScaleAspectFill",
                 ImageView.ScaleType.CENTER_CROP.ordinal())));
 
diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.java b/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.java
index fd7a6f67f2b..30648f18306 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.java
+++ b/ReactAndroid/src/main/java/com/facebook/react/views/image/ImageResizeMode.java
@@ -25,7 +25,7 @@ public class ImageResizeMode {
    */
   public static ScalingUtils.ScaleType toScaleType(@Nullable String resizeModeValue) {
     if ("contain".equals(resizeModeValue)) {
-      return ScalingUtils.ScaleType.CENTER_INSIDE;
+      return ScalingUtils.ScaleType.FIT_CENTER;
     }
     if ("cover".equals(resizeModeValue)) {
       return ScalingUtils.ScaleType.CENTER_CROP;
diff --git a/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.java b/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.java
index f74b4528e7e..a247f184753 100644
--- a/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.java
+++ b/ReactAndroid/src/test/java/com/facebook/react/views/image/ImageResizeModeTest.java
@@ -34,7 +34,7 @@ public class ImageResizeModeTest {
         .isEqualTo(ScalingUtils.ScaleType.CENTER_CROP);
 
     assertThat(ImageResizeMode.toScaleType("contain"))
-        .isEqualTo(ScalingUtils.ScaleType.CENTER_INSIDE);
+        .isEqualTo(ScalingUtils.ScaleType.FIT_CENTER);
 
     assertThat(ImageResizeMode.toScaleType("cover"))
         .isEqualTo(ScalingUtils.ScaleType.CENTER_CROP);