Support headers [crossOrigin and referralPolicy] in Image without src and srcSet and only remote source.uri

[anupriya13]

Description

Type of Change

• New feature (non-breaking change which adds functionality)

Why

What is the motivation for this change? Add a few sentences describing the context and overall goals of the pull request's commits.

Implement the crossOrigin property for Image in RNW Fabric.

For reference, check the public API documentation: https://reactnative.dev/docs/image#crossorigin

Implement the referrerPolicy property for Image in RNW Fabric.

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

Resolves #14537

Related #13746 and #13754

What

What changes were made to the codebase to solve the bug, add the functionality, etc. that you specified above.

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:

react-native-windows/vnext/src-win/Libraries/Image/Image.windows.js

Line 26 in 7777a30

import {getImageSourcesFromImageProps} from './ImageSourceUtils';

Added below code in line 76 of ImageSourceUtils.js:

 else if (source != null && source.uri) {
    sources = [{...source, headers}];
  }

Screenshots

Add any relevant screen captures here from before or after your changes.
Before

After

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

 <Image
              defaultSource={{uri: this.state.defaultImageUri}}
              source={{uri: this.state.imageUri}}
              loadingIndicatorSource={{uri: loadingImageUri}}
              resizeMode={this.state.selectedResizeMode}
              blurRadius={this.state.blurRadius}
              onLoad={() => console.log('onLoad')}
              onLoadStart={() => console.log('onLoadStart')}
              onLoadEnd={() => console.log('onLoadEnd')}
              onProgress={this.handleOnProgress}
              crossOrigin="use-credentials"
              referrerPolicy="no-referrer"
              /* srcSet={this.state.imageUri}*/
            />

Changelog

Should this change be included in the release notes: indicate yes or no Yes

Add a brief summary of the change to use in the release notes for the next release.
Support headers [crossOrigin and referralPolicy] in Image without src and srcSet and only remote source.uri

Microsoft Reviewers: Open in CodeFlow

[acoates-ms]

Why is this different on windows? -- Is this something that is missing on the other platforms in core too?

[anupriya13]

It should be on other platforms too. Not able to test exactly in other platforms. I followed instructions for overriding and it mentioned to add comment for Windows.

[TatianaKapos]

Next, make you changes to that new file. Be sure to clearly mark your changes by surrounding code blocks with starting // [Windows and ending // Windows] comments. For this example, here we're adding a new else if clause to an if statement performing a platform check:

Just clarifying here, the instructions state to surround any changes you made in the file with window comments. Did you change this file at all? Are the changes here not in the upstream file? If not, we can follow-up and fix it upstream :)

[anupriya13]

Yes I did change the file and added this else if condition.
Shall I remove the "Windows" comment then as the fix would be required in all
Platforms?

[anupriya13]

Added below code in line 76 of ImageSourceUtils.js:

 else if (source != null && source.uri) {
    sources = [{...source, headers}];
  }

[TatianaKapos]

Is the patch made in ImageSourceUtils.js needed in upstream too? If so, we will want to create an issue and link it here to fix upstream

[anupriya13]

Oh okay, I have already created an issue. Let me update the issue number then.
Yes, it's needed in upstream! It looks like a bug.

[acoates-ms]

If this is a bug in upstream, and one that doesn't have any current partner ask to require an immediate fix in windows, we should just fix the issue upstream and save the effort of forking/unforking.

[anupriya13]

@acoates-ms Do you mean I should raise this PR in react-native repo instead?

[anupriya13]

@acoates-ms @TatianaKapos I have raised issue for Meta here facebook/react-native#50778