Skip to content

Commit 49ea9d8

Browse files
anupriya13facebook-github-bot
authored andcommitted
Support headers [crossOrigin and referralPolicy] in Image without src and srcSet and only remote source.uri (#50799)
Summary: Resolves #50778 ### Problem Description Implement the crossOrigin property for Image in RNW Fabric when only source.uri is passed and not src/ srcSet. For reference, check the public API documentation: https://reactnative.dev/docs/image#crossorigin Implement the referrerPolicy property for Image in RNW Fabric when only source.uri is passed and not src/ srcSet. For reference, check the public API documentation: https://reactnative.dev/docs/image#referrerpolicy Also refer docs for source, src, srcSet https://reactnative.dev/docs/image#source https://reactnative.dev/docs/image#src https://reactnative.dev/docs/image#srcset It's not mentioned in the doc that when src / srcSet is missing then crossOrigin / referralPolicy would be ignored when source uri is a remote URL that is passed. Currently these were ignored if src / srcSet was not passed and not added to sources headers. This change adds headers support even without passing src / srcSet and only sources uri that consists of remote URL. crossOrigin and referrerPolicy are passed as source.headers here: ![Image](https://github.com/user-attachments/assets/6df1a274-353e-4e03-9033-75695d04e2c0) ### Steps to reproduce ``` <Image defaultSource={{uri: this.state.defaultImageUri}} source={{uri: this.state.imageUri}} crossOrigin="use-credentials" referrerPolicy="no-referrer" /> ``` Pass this in React Native and check source headers ## Changelog: [GENERAL] [ADDED] - Support headers [crossOrigin and referralPolicy] in Image without src and srcSet and only remote source.uri Pull Request resolved: #50799 Test Plan: Refer this PR for testing; microsoft/react-native-windows#14521 ## Screenshots _Add any relevant screen captures here from before or after your changes._ Before ![image](https://github.com/user-attachments/assets/21804411-91f4-4a27-b6e9-971675cbd546) After <img width="790" alt="image" src="https://github.com/user-attachments/assets/8e0a2522-7009-430d-b848-da80896670f4" /> ## Testing _If you added tests that prove your changes are effective or that your feature works, add a few sentences here detailing the added test scenarios._ Tested in playground and RNW Tester and Visual Studio Debugger _Optional_: Describe the tests that you ran locally to verify your changes. 1. Tested with only source remote uri passed 2. Tested with both source, src 3. Tested with source, src, srcSet Reviewed By: javache Differential Revision: D73427747 Pulled By: cipolleschi fbshipit-source-id: f09174d1e4eaa2173b27970a6079eeb8ba6f3069
1 parent 0e11e6a commit 49ea9d8

File tree

1 file changed

+4
-2
lines changed

1 file changed

+4
-2
lines changed

packages/react-native/Libraries/Image/ImageSourceUtils.js

+4-2
Original file line numberDiff line numberDiff line change
@@ -52,14 +52,14 @@ export function getImageSourcesFromImageProps(
5252
// 1x scale is provided in `srcSet` prop so ignore the `src` prop if provided.
5353
shouldUseSrcForDefaultScale =
5454
scale === 1 ? false : shouldUseSrcForDefaultScale;
55-
sourceList.push({headers: headers, scale, uri, width, height});
55+
sourceList.push({headers, scale, uri, width, height});
5656
}
5757
}
5858
});
5959

6060
if (shouldUseSrcForDefaultScale && src != null) {
6161
sourceList.push({
62-
headers: headers,
62+
headers,
6363
scale: 1,
6464
uri: src,
6565
width,
@@ -73,6 +73,8 @@ export function getImageSourcesFromImageProps(
7373
sources = sourceList;
7474
} else if (src != null) {
7575
sources = [{uri: src, headers: headers, width, height}];
76+
} else if (source != null && source.uri && Object.keys(headers).length > 0) {
77+
sources = [{...source, headers}];
7678
} else {
7779
sources = source;
7880
}

0 commit comments

Comments
 (0)