Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 15 additions & 35 deletions packages/react-native/Libraries/Image/Image.android.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,8 @@ import type {HostInstance} from '../../src/private/types/HostInstance';
import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
import type {RootTag} from '../Types/RootTagTypes';
import type {ImageProps} from './ImageProps';
import type {ImageSourceHeaders} from './ImageSourceUtils';
import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';

import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
import flattenStyle from '../StyleSheet/flattenStyle';
import StyleSheet from '../StyleSheet/StyleSheet';
import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
Expand Down Expand Up @@ -196,55 +194,37 @@ let BaseImage: AbstractImageAndroid = ({
);
}

let style_: ImageStyleProp;
let sources_;
let headers_: ?ImageSourceHeaders;
const nativeProps = restProps as {
...React.PropsOf<ImageViewNativeComponent>,
};

if (Array.isArray(source_)) {
const {
headers: sourceHeaders,
width: sourceWidth,
height: sourceHeight,
} = source_[0];
headers_ = sourceHeaders;
// Default to the first source's width and height if only one is provided
if (ReactNativeFeatureFlags.fixImageSrcDimensionPropagation()) {
style_ = [
source_.length === 1 && {width: sourceWidth, height: sourceHeight},
styles.base,
style,
];
} else {
style_ = [styles.base, style];
if (sourceHeaders != null) {
nativeProps.headers = sourceHeaders;
}
sources_ = source_;
// Default to the first source's width and height if only one is provided
nativeProps.style = [
source_.length === 1 && {width: sourceWidth, height: sourceHeight},
styles.base,
style,
];
nativeProps.source = source_;
} else {
const {uri, width: sourceWidth, height: sourceHeight} = source_;
if (uri === '') {
console.warn('source.uri should not be an empty string');
}
style_ = [
nativeProps.style = [
{width: sourceWidth ?? width, height: sourceHeight ?? height},
styles.base,
style,
];
sources_ = [source_];
}

const nativeProps = restProps as {
...React.PropsOf<ImageViewNativeComponent>,
};

// Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
// (for historical reasons). So in the latter case we populate both "src" and "source",
// in order to have a better alignment between platforms in the future.
// TODO: `src` should be eventually removed from the API on Android.
nativeProps.src = sources_;
nativeProps.source = sources_;

nativeProps.style = style_;

if (headers_ != null) {
nativeProps.headers = headers_;
nativeProps.source = [source_];
}

if (onLoadStart != null) {
Expand Down
27 changes: 8 additions & 19 deletions packages/react-native/Libraries/Image/__tests__/Image-itest.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,13 @@
* LICENSE file in the root directory of this source tree.
*
* @flow strict-local
* @fantom_flags fixImageSrcDimensionPropagation:*
* @format
*/

import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';

import type {AccessibilityProps, HostInstance} from 'react-native';

import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
import * as Fantom from '@react-native/fantom';
import * as React from 'react';
import {createRef} from 'react';
Expand Down Expand Up @@ -477,23 +475,14 @@ describe('<Image>', () => {
.getRenderedOutput({props: ['source', 'width', 'height']})
.toJSX(),
).toEqual(
ReactNativeFeatureFlags.fixImageSrcDimensionPropagation() ? (
<rn-image
source-scale="1"
source-type="remote"
source-size="{40, 40}"
source-uri="https://reactnative.dev/img/tiny_logo.png"
width="40"
height="40"
/>
) : (
<rn-image
source-scale="1"
source-type="remote"
source-size="{40, 40}"
source-uri="https://reactnative.dev/img/tiny_logo.png"
/>
),
<rn-image
source-scale="1"
source-type="remote"
source-size="{40, 40}"
source-uri="https://reactnative.dev/img/tiny_logo.png"
width="40"
height="40"
/>,
);
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1076,16 +1076,6 @@ const definitions: FeatureFlagDefinitions = {
},
ossReleaseStage: 'none',
},
fixImageSrcDimensionPropagation: {
defaultValue: true,
metadata: {
description:
'Fix image dimensions not being passed through when src is used',
expectedReleaseValue: true,
purpose: 'release',
},
ossReleaseStage: 'none',
},
fixVirtualizeListCollapseWindowSize: {
defaultValue: false,
metadata: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<8c2aa180526563dbaaeb91f1428e0c77>>
* @generated SignedSource<<d929e85924c23746edd258449cdb2d42>>
* @flow strict
* @noformat
*/
Expand Down Expand Up @@ -34,7 +34,6 @@ export type ReactNativeFeatureFlagsJsOnly = $ReadOnly<{
deferFlatListFocusChangeRenderUpdate: Getter<boolean>,
disableMaintainVisibleContentPosition: Getter<boolean>,
externalElementInspectionEnabled: Getter<boolean>,
fixImageSrcDimensionPropagation: Getter<boolean>,
fixVirtualizeListCollapseWindowSize: Getter<boolean>,
isLayoutAnimationEnabled: Getter<boolean>,
shouldUseAnimatedObjectForTransform: Getter<boolean>,
Expand Down Expand Up @@ -170,11 +169,6 @@ export const disableMaintainVisibleContentPosition: Getter<boolean> = createJava
*/
export const externalElementInspectionEnabled: Getter<boolean> = createJavaScriptFlagGetter('externalElementInspectionEnabled', true);

/**
* Fix image dimensions not being passed through when src is used
*/
export const fixImageSrcDimensionPropagation: Getter<boolean> = createJavaScriptFlagGetter('fixImageSrcDimensionPropagation', true);

/**
* Fixing an edge case where the current window size is not properly calculated with fast scrolling. Window size collapsed to 1 element even if windowSize more than the current amount of elements
*/
Expand Down
Loading