Skip to content

Commit

Permalink
Align android image style / source logic with ios (#34655)
Browse files Browse the repository at this point in the history
Summary:
This aligns the logic of setting style (width / height) and source of Android with iOS.
iOS handles nullish uris with set width and heigth by passing them through. Android did not.

## Changelog

[Android] [Fixed] - Align android image style / source logic with ios

Pull Request resolved: #34655

Test Plan:
```
<Image source={{width: 100, height: 100}} />
```

Before this Patch:
* iOS: Renders a blank image with 100x100
* Android: Renders a blank image with 0x0

After this Patch:
* iOS: Renders a blank image with 100x100
* Android: Renders a blank image with 100x100

Reviewed By: sammy-SC

Differential Revision: D39423391

Pulled By: cipolleschi

fbshipit-source-id: 997c06dea42e9b69fda12b678a1b82ad8319537f
  • Loading branch information
danilobuerger authored and facebook-github-bot committed Sep 13, 2022
1 parent 0cae495 commit 6bdcb49
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 14 deletions.
24 changes: 12 additions & 12 deletions Libraries/Image/Image.android.js
Expand Up @@ -129,7 +129,11 @@ export type ImageComponentStatics = $ReadOnly<{|
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
* LTI update could not be added via codemod */
const BaseImage = (props: ImagePropsType, forwardedRef) => {
let source = getImageSourcesFromImageProps(props);
let source = getImageSourcesFromImageProps(props) || {
uri: undefined,
width: undefined,
height: undefined,
};
const defaultSource = resolveAssetSource(props.defaultSource);
const loadingIndicatorSource = resolveAssetSource(
props.loadingIndicatorSource,
Expand All @@ -147,22 +151,19 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
);
}

if (source && !source.uri && !Array.isArray(source)) {
source = null;
}

let style;
let sources;
if (!Array.isArray(source) && source?.uri != null) {
if (Array.isArray(source)) {
style = flattenStyle([styles.base, props.style]);
sources = source;
} else {
const {width = props.width, height = props.height, uri} = source;
style = flattenStyle([{width, height}, styles.base, props.style]);
sources = [{uri: uri, width: width, height: height}];
sources = [source];

if (uri === '') {
console.warn('source.uri should not be an empty string');
}
} else {
style = flattenStyle([styles.base, props.style]);
sources = source;
}

const {height, width, ...restProps} = props;
Expand Down Expand Up @@ -212,13 +213,12 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
<TextAncestor.Consumer>
{hasTextAncestor => {
if (hasTextAncestor) {
let src = Array.isArray(sources) ? sources : [sources];
return (
<TextInlineImageNativeComponent
style={style}
resizeMode={resizeMode}
headers={nativeProps.headers}
src={src}
src={sources}
ref={forwardedRef}
/>
);
Expand Down
4 changes: 3 additions & 1 deletion Libraries/Image/ImageViewNativeComponent.js
Expand Up @@ -35,7 +35,9 @@ type Props = $ReadOnly<{

// Android native props
shouldNotifyLoadEvents?: boolean,
src?: ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}>,
src?:
| ?ResolvedAssetSource
| ?$ReadOnlyArray<?$ReadOnly<{uri?: ?string, ...}>>,
headers?: ?{[string]: string},
defaultSrc?: ?string,
loadingIndicatorSrc?: ?string,
Expand Down
2 changes: 1 addition & 1 deletion Libraries/Image/TextInlineImageNativeComponent.js
Expand Up @@ -22,7 +22,7 @@ import type {ColorValue} from '../StyleSheet/StyleSheet';
type NativeProps = $ReadOnly<{
...ViewProps,
resizeMode?: ?ImageResizeMode,
src?: ?$ReadOnlyArray<?$ReadOnly<{uri: string, ...}>>,
src?: ?$ReadOnlyArray<?$ReadOnly<{uri?: ?string, ...}>>,
tintColor?: ?ColorValue,
headers?: ?{[string]: string},
}>;
Expand Down

0 comments on commit 6bdcb49

Please sign in to comment.