Fix: RNImage resize causes very long images to become blurryFix: Add maxBitmapSize prop to Android Image component to prevent blu…

[harshitydv1]

Description

This PR addresses issue #54749 where resizing very long images on Android causes them to become blurry. This is due to Fresco's default maximum bitmap size limitation (often 2048px).

I have added a new prop maxBitmapSize to the Android Image component. This allows developers to specify a custom maximum bitmap size for resizing, overriding the default limit.

Changes

• JavaScript: Added maxBitmapSize to ImagePropsAndroid in Libraries/Image/ImageProps.js.
• Android:
  • Added maxBitmapSize field and setter in ReactImageView.kt.
  • Updated resizeOptions in ReactImageView.kt to use the new maxBitmapSize.
  • Exposed the maxBitmapSize prop in ReactImageManager.kt.
• Tests: Added a unit test testMaxBitmapSize in ReactImagePropertyTest.kt.

Test Plan

• Verified that the maxBitmapSize prop is correctly passed from ReactImageManager to ReactImageView using the new unit test.
• Manual verification should be done by loading a large image (e.g., > 2048px height) and setting maxBitmapSize to a value larger than the image dimension (e.g., 4096) to ensure it renders clearly.

Related Issue

Fixes #54749…rry images

Summary:

Changelog:

Test Plan:

[meta-cla]

Hi @harshitydv1!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[react-native-bot]

	Fails
🚫	📋 Verify Changelog Format - See Changelog format

Generated by 🚫 dangerJS against 04ad517

[meta-cla]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

[Abbondanzo]

I left a comment on the original issue but the existing resizeMethod prop is more tailored for this purpose
https://reactnative.dev/docs/image#resizemethod-android

Could you also provide screenshots in your test plan?

[harshitydv1]

Thank you for the feedback! I understand the concern, but I'd like to clarify why maxBitmapSize is needed in addition to the existing resizeMethod prop.

The Key Difference

resizeMethod controls whether and how to resize:

• auto: Use heuristics to pick between resize and scale
• resize: Software operation to change encoded image
• scale: Hardware-accelerated scaling
• none: No sampling (can cause OOM errors)

maxBitmapSize controls the maximum dimension limit before Fresco downsamples.

The Problem

When resizeMethod="resize" is used, React Native calls Fresco's ResizeOptions(width, height) constructor. However, Fresco has a hardcoded 2048px limit in its default ResizeOptions constructor. From the original issue #54749:

"I know it uses Fresco under the hood and Fresco has a limitation of up to 2K resolution, but at least it accepts a configurable max size"

Even with resizeMethod="resize", images larger than 2048px in any dimension get downsampled, causing blurriness for very tall/wide images.

The Solution

Fresco's ResizeOptions accepts a third parameter maxBitmapSize (source). This PR exposes that parameter to React Native developers.

Example use case:

// A 1000x4000px image
<Image
  source={{ uri: 'https://example.com/very-tall-image.jpg' }}
  style={{ width: 300, height: 1200 }}
  resizeMethod="resize"        // HOW to resize
  maxBitmapSize={4096}         // MAXIMUM size before downsample
/>

Without maxBitmapSize, Fresco downsamples to 2048px → blurry image
With maxBitmapSize={4096}, the full 4000px height is preserved → sharp image