Skip to content

Commit

Permalink
Fixed incorrect style props passed to Android Image when using children
Browse files Browse the repository at this point in the history
Summary:
Hi there,

Here is a fix for #7538 (and #5085).

I had originally discovered this issue when using `resizeMode` through the style props. Although this might arguably be an incorrect usage (see #4759 (comment)) the same issue would happen with the `tintColor` and `overlayColor` style props.

To  test this, you can render the following:

```jsx
const imageContainerStyle = {width: 100, height: 100, backgroundColor: 'green', marginLeft: 10, marginTop: 10, };
const imageStyle = {flex: 1, width: undefined, height: undefined, resizeMode: 'contain', };

return (
  <View style={styles.container}>
    <View style={imageContainerStyle}>
      <Image style={imageStyle} source={
        {uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}
      }>
      </Image>
    </View>
    <View style={imageContainerStyle}>
      <Image style={imageStyle} source={
        {
Closes #8410

Differential Revision: D3488010

Pulled By: andreicoman11

fbshipit-source-id: e9d1283cce8426c8878f9c3c66a43a2141232277
  • Loading branch information
jeanregisser authored and Facebook Github Bot 2 committed Jun 27, 2016
1 parent 4301998 commit 7f9ec4e
Showing 1 changed file with 11 additions and 2 deletions.
13 changes: 11 additions & 2 deletions Libraries/Image/Image.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
var NativeModules = require('NativeModules');
var ImageResizeMode = require('ImageResizeMode');
var ImageStylePropTypes = require('ImageStylePropTypes');
var ViewStylePropTypes = require('ViewStylePropTypes');
var PropTypes = require('ReactPropTypes');
var React = require('React');
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
Expand All @@ -26,6 +27,8 @@ var flattenStyle = require('flattenStyle');
var merge = require('merge');
var requireNativeComponent = require('requireNativeComponent');
var resolveAssetSource = require('resolveAssetSource');
var Set = require('Set');
var filterObject = require('fbjs/lib/filterObject');

var {
ImageLoader,
Expand Down Expand Up @@ -63,6 +66,9 @@ var ImageViewAttributes = merge(ReactNativeViewAttributes.UIView, {
shouldNotifyLoadEvents: true,
});

var ViewStyleKeys = new Set(Object.keys(ViewStylePropTypes));
var ImageSpecificStyleKeys = new Set(Object.keys(ImageStylePropTypes).filter(x => !ViewStyleKeys.has(x)));

var Image = React.createClass({
propTypes: {
...View.propTypes,
Expand Down Expand Up @@ -222,12 +228,15 @@ var Image = React.createClass({

if (nativeProps.children) {
// TODO(6033040): Consider implementing this as a separate native component
const containerStyle = filterObject(style, (val, key) => !ImageSpecificStyleKeys.has(key));
const imageStyle = filterObject(style, (val, key) => ImageSpecificStyleKeys.has(key));
const imageProps = merge(nativeProps, {
style: styles.absoluteImage,
style: [imageStyle, styles.absoluteImage],
children: undefined,
});

return (
<View style={nativeProps.style}>
<View style={containerStyle}>
<RKImage {...imageProps}/>
{this.props.children}
</View>
Expand Down

0 comments on commit 7f9ec4e

Please sign in to comment.