From c9d401f09a32cace28b05cb58160b205373b4d1a Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sun, 23 Oct 2016 14:50:25 -0700
Subject: [PATCH] [fix] Image resizeMode style

Fixes an issue in production where 'resizeMode' is deleted from style
simple objects, preventing it from being applied at render time.

Fix #233
---
 src/components/Image/index.js | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/Image/index.js b/src/components/Image/index.js
index ad344722..85cec69d 100644
--- a/src/components/Image/index.js
+++ b/src/components/Image/index.js
@@ -94,19 +94,22 @@ class Image extends Component {
 
     const displayImage = resolveAssetSource(!isLoaded ? defaultSource : source);
     const backgroundImage = displayImage ? `url("${displayImage}")` : null;
-    let style = StyleSheet.flatten(this.props.style);
-
-    const resizeMode = this.props.resizeMode || style.resizeMode || ImageResizeMode.cover;
-    // remove 'resizeMode' style, as it is not supported by View (N.B. styles are frozen in dev)
-    style = process.env.NODE_ENV !== 'production' ? { ...style } : style;
+    const flatStyle = StyleSheet.flatten(this.props.style);
+    const resizeMode = this.props.resizeMode || flatStyle.resizeMode || ImageResizeMode.cover;
+    const style = StyleSheet.flatten([
+      styles.initial,
+      flatStyle,
+      backgroundImage && { backgroundImage },
+      resizeModeStyles[resizeMode]
+    ]);
+    // View doesn't support 'resizeMode' as a style
     delete style.resizeMode;
 
     /**
-     * Image is a non-stretching View. The image is displayed as a background
-     * image to support `resizeMode`. The HTML image is hidden but used to
-     * provide the correct responsive image dimensions, and to support the
-     * image context menu. Child content is rendered into an element absolutely
-     * positioned over the image.
+     * The image is displayed as a background image to support `resizeMode`.
+     * The HTML image is hidden but used to provide the correct responsive
+     * image dimensions, and to support the image context menu. Child content
+     * is rendered into an element absolutely positioned over the image.
      */
     return (
       <View
@@ -114,12 +117,7 @@ class Image extends Component {
         accessibilityRole='img'
         accessible={accessible}
         onLayout={onLayout}
-        style={[
-          styles.initial,
-          style,
-          backgroundImage && { backgroundImage },
-          resizeModeStyles[resizeMode]
-        ]}
+        style={style}
         testID={testID}
       >
         {createDOMElement('img', { src: displayImage, style: styles.img })}