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:
parent
4301998e15
commit
7f9ec4e4c8
|
@ -15,6 +15,7 @@ var NativeMethodsMixin = require('NativeMethodsMixin');
|
||||||
var NativeModules = require('NativeModules');
|
var NativeModules = require('NativeModules');
|
||||||
var ImageResizeMode = require('ImageResizeMode');
|
var ImageResizeMode = require('ImageResizeMode');
|
||||||
var ImageStylePropTypes = require('ImageStylePropTypes');
|
var ImageStylePropTypes = require('ImageStylePropTypes');
|
||||||
|
var ViewStylePropTypes = require('ViewStylePropTypes');
|
||||||
var PropTypes = require('ReactPropTypes');
|
var PropTypes = require('ReactPropTypes');
|
||||||
var React = require('React');
|
var React = require('React');
|
||||||
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
|
var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
|
||||||
|
@ -26,6 +27,8 @@ var flattenStyle = require('flattenStyle');
|
||||||
var merge = require('merge');
|
var merge = require('merge');
|
||||||
var requireNativeComponent = require('requireNativeComponent');
|
var requireNativeComponent = require('requireNativeComponent');
|
||||||
var resolveAssetSource = require('resolveAssetSource');
|
var resolveAssetSource = require('resolveAssetSource');
|
||||||
|
var Set = require('Set');
|
||||||
|
var filterObject = require('fbjs/lib/filterObject');
|
||||||
|
|
||||||
var {
|
var {
|
||||||
ImageLoader,
|
ImageLoader,
|
||||||
|
@ -63,6 +66,9 @@ var ImageViewAttributes = merge(ReactNativeViewAttributes.UIView, {
|
||||||
shouldNotifyLoadEvents: true,
|
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({
|
var Image = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
...View.propTypes,
|
...View.propTypes,
|
||||||
|
@ -222,12 +228,15 @@ var Image = React.createClass({
|
||||||
|
|
||||||
if (nativeProps.children) {
|
if (nativeProps.children) {
|
||||||
// TODO(6033040): Consider implementing this as a separate native component
|
// 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, {
|
const imageProps = merge(nativeProps, {
|
||||||
style: styles.absoluteImage,
|
style: [imageStyle, styles.absoluteImage],
|
||||||
children: undefined,
|
children: undefined,
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={nativeProps.style}>
|
<View style={containerStyle}>
|
||||||
<RKImage {...imageProps}/>
|
<RKImage {...imageProps}/>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</View>
|
</View>
|
||||||
|
|
Loading…
Reference in New Issue