Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anupriya13 opened this issue Apr 15, 2025 · 0 comments
Assignees
Labels
Area: Image enhancement Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Milestone

Comments

@anupriya13
Copy link
Contributor

anupriya13 commented Apr 15, 2025

facebook/react-native#50799

facebook/react-native#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

Steps To Reproduce

 <Image
              defaultSource={{uri: this.state.defaultImageUri}}
              source={{uri: this.state.imageUri}}
              crossOrigin="use-credentials"
              referrerPolicy="no-referrer"
            />

Expected Results

No response

CLI version

npx @react-native-community/cli -v

Environment

npx @react-native-community/cli info

Community Modules

No response

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

@anupriya13 anupriya13 added the bug label Apr 15, 2025
@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Apr 15, 2025
@anupriya13 anupriya13 self-assigned this Apr 15, 2025
@chiaramooney chiaramooney added Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs. enhancement and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) bug labels Apr 17, 2025
@chiaramooney chiaramooney added this to the Backlog milestone Apr 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Area: Image enhancement Workstream: Component Parity Close the parity gap between RNW and RN for core RN components and their supporting APIs.
Projects
Status: No status
2 participants