[Android] Image drops `source.headers` for a single-object source since 0.86 (only array sources forward headers)

Lỗi nằm trong Libraries/Image/Image.android.js. Hãy bắt đầu bằng cách đọc hàm render xung quanh dòng 300. Cách sửa là giải cấu trúc headers từ source đối tượng đơn và gán chúng cho nativeProps.headers, phản chiếu nhánh source mảng. Kiểm tra bằng cách xây dựng một ứng dụng React Native tối giản trên Android tải một hình ảnh đã xác thực, hoặc chạy các bài kiểm tra Image hiện có để đảm bảo thay đổi hoạt động.

Description

Since React Native 0.86, <Image source={{uri, headers}} /> on Android no longer sends the headers with the image request when source is a single object. The headers are still forwarded when source is an array of sources.

Cause (Libraries/Image/Image.android.js, 0.86.3): in the render function the native headers prop is only set inside the if (Array.isArray(source_)) branch:

if (Array.isArray(source_)) {
  const {headers: sourceHeaders, width: sourceWidth, height: sourceHeight} = source_[0];
  if (sourceHeaders != null) {
    nativeProps.headers = sourceHeaders;
  }
  …
} else {
  const {uri, width: sourceWidth, height: sourceHeight} = source_;   // headers are dropped here
  …
  nativeProps.source = [source_];
}

The Android native view (ReactImageView) takes request headers only from the separate headers prop (ReactImageManager.setHeaders → ReactNetworkImageRequest.fromBuilderWithHeaders), not from the per-source entries, so the request is made without them. In 0.79 the prop was built as headers: source?.[0]?.headers || source?.headers, which covered both forms. iOS is not affected (headers are read from the source natively).

Real-world impact: every authenticated image (e.g. headers: {Authorization: 'Bearer …'}) silently fails with HTTP 401 on Android after upgrading to 0.86; onError reports Unexpected HTTP code Response{protocol=h2, code=401, …}.

Steps to reproduce

1. Render an image whose server requires a request header, single-object source:

   <Image source={{uri: 'https://example.com/protected.png', headers: {Authorization: 'Bearer <token>'}}} style={{width: 96, height: 96}} onError={e => console.log(e.nativeEvent.error)} />
   

2. On Android 0.86.x the request is sent without Authorization (server answers 401, onError fires, the image never loads).
3. The same element with an array source works: source={[{uri: '…', headers: {…}}]}.
4. On 0.79.x (and on iOS) both forms send the header.

React Native Version

0.86.3

Affected Platforms

Runtime - Android

Output of npx @react-native-community/cli info

System:
  OS: macOS 26.6.2
  CPU: (10) arm64 Apple M4
  Memory: 2.56 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 24.16.0
    path: /opt/homebrew/opt/node@24/bin/node
  Yarn:
    version: 4.16.0
    path: /opt/homebrew/opt/node@24/bin/yarn
  npm:
    version: 11.13.0
    path: /opt/homebrew/opt/node@24/bin/npm
  Watchman:
    version: 2026.06.01.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 27.0
      - iOS 27.0
      - macOS 27.0
      - tvOS 27.0
      - visionOS 27.0
      - watchOS 27.0
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
      - 36.1.0
      - 37.0.0
    System Images:
      - android-36 | Google APIs ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2026.1 AI-261.23567.138.2611.15503007
  Xcode:
    version: 27.0/27A266a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.19
    path: /usr/bin/javac
  Ruby:
    version: 4.0.5
    path: /opt/homebrew/opt/ruby/bin/ruby

Stacktrace or Logs

[Image onError] Unexpected HTTP code Response{protocol=h2, code=401, message=, url=https://…/image?v=…}

(Replaying the exact URL with the same Authorization header via curl returns 200; the header simply is not attached by the Android image request.)

MANDATORY Reproducer

Minimal snippet above; the defect is a one-line omission in Libraries/Image/Image.android.js. Proposed fix (we run it as a patch-package patch on 0.86.3):

   } else {
-    const {uri, width: sourceWidth, height: sourceHeight} = source_;
+    const {
+      uri,
+      headers: sourceHeaders,
+      width: sourceWidth,
+      height: sourceHeight,
+    } = source_;
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    if (sourceHeaders != null) {
+      nativeProps.headers = sourceHeaders;
+    }

A harness that transpiles Image.android.js with @react-native/babel-preset, renders it with a mocked native component and asserts the headers prop for object and array sources fails on 0.86.3 and passes with the change; happy to open a PR with it if that helps.

Screenshots and Videos

Not needed: the image never loads (401), onError fires.