Skip to content

Commit

Permalink
[fix] Image resizeMode style
Browse files Browse the repository at this point in the history
Fixes an issue in production where 'resizeMode' is deleted from style
simple objects, preventing it from being applied at render time.

Fix #233
  • Loading branch information
necolas committed Oct 23, 2016
1 parent 8aeeed0 commit c9d401f
Showing 1 changed file with 14 additions and 16 deletions.
30 changes: 14 additions & 16 deletions src/components/Image/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -94,32 +94,30 @@ 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
accessibilityLabel={accessibilityLabel}
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 })}
Expand Down

0 comments on commit c9d401f

Please sign in to comment.