status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fixed incorrect style props passed to Android Image when using children 

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 https://github.com/facebook/react-native/issues/4759#issuecomment-164301166) 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 https://github.com/facebook/react-native/pull/8410

Differential Revision: D3488010

Pulled By: andreicoman11

fbshipit-source-id: e9d1283cce8426c8878f9c3c66a43a2141232277
This commit is contained in:
Jean Regisser 2016-06-27 03:17:33 -07:00 committed by Facebook Github Bot 2
parent 4301998e15
commit 7f9ec4e4c8
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Libraries/Image/Image.android.js
View File

@ -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');
@ -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,
@ -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,
@ -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>