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

錯誤位於 Libraries/Image/Image.android.js 中。首先閱讀第 300 行附近的 render 函式。修復方法是從單一物件的 source 中解構 headers 並將其分配給 nativeProps.headers，以鏡像陣列 source 分支。透過構建一個在 Android 上載入認證圖像的最小 React Native 應用進行測試，或執行現有的 Image 測試以確保更改有效。

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.