Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#58,659 2 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
75/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
android, javascript, react-native
Domain
mobile-dev

Research direction

The bug is in Libraries/Image/Image.android.js. Start by reading the render function around line 300. The fix is to destructure headers from the single-object source and assign them to nativeProps.headers, mirroring the array-source branch. Test by building a minimal React Native app on Android that loads an authenticated image, or run existing Image tests to ensure the change works.

Written by the indexing model from the issue text.

Description

Needs: Author Feedback Needs: Repro
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.

Dominant language
C++
Stars
127k
Forks
25.3k
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react/react-native

All issues in react/react-native

Similar issues

More C++ issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.