Skip to content
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

headers defined in Image source prop are not sent along with the request for a remote image #45404

Open
pklatka opened this issue Jul 12, 2024 · 3 comments
Labels
Component: Image Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)

Comments

@pklatka
Copy link

pklatka commented Jul 12, 2024

Description

When defining a headers object in source prop in Image component, the custom headers are not passed to the http request (on iOS platform). On the old architecture everything works correctly.

Steps to reproduce

  1. Clone the reproducer
  2. Install project dependencies with npm
  3. Run the app with npm run ios
  4. Run the server with npm run server
  5. Observe logs on a server - custom headers are not set when requesting a remote image

React Native Version

0.74.3

Affected Platforms

Runtime - iOS

Areas

Fabric - The New Renderer

Output of npx react-native info

System:
  OS: macOS 14.5
  CPU: (11) arm64 Apple M3 Pro
  Memory: 73.56 MB / 18.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.11.1
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.21
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.2.4
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.07.08.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 18.0.2
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.3
    wanted: 0.74.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Stacktrace or Logs

This issue does not produce a crash.

Reproducer

https://github.com/pklatka/image-source-headers-obj-repro

Screenshots and Videos

No response

@pklatka pklatka added Needs: Triage 🔍 Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules) labels Jul 12, 2024
@cortinico cortinico added Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. and removed Needs: Triage 🔍 labels Jul 12, 2024
@deepanshushuklad11
Copy link
Contributor

@cortinico Raised a PR for the same , please have a look

@pafry7
Copy link

pafry7 commented Jul 16, 2024

@deepanshushuklad11 @pklatka Do headers work on Android?

@pklatka
Copy link
Author

pklatka commented Jul 16, 2024

On Android this works properly.

facebook-github-bot pushed a commit that referenced this issue Jul 16, 2024
Summary:
FIXES [45404](#45404)

 sending headers from Image  component  not working in new arch , implementation was missing
```
<Image
        source={{
          uri: "http://localhost:3000/image",
          headers: {
            "test-header": 'test',
              "hello":"tested"
          }
        }}
        style={{
          width: 300,
          height: 300,
        }}
      />
```

## Changelog:
[IOS] [ADDED]- sending missing **headers** field with **Image** component in fabric

Pull Request resolved: #45415

Test Plan:
# Tested
Attaching the below video to show how headers are getting received on server from Image component running in new arch

https://github.com/user-attachments/assets/c816265d-0bb5-4670-bde0-cfec72d7618f

Reviewed By: javache, cipolleschi

Differential Revision: D59807462

Pulled By: blakef

fbshipit-source-id: dffa4d80db58de6a81947ac876aa76ec7e62dd48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Image Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Type: New Architecture Issues and PRs related to new architecture (Fabric/Turbo Modules)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants