fix: prevent SVG crash on iOS and enable rendering on Android

[Rohit3523]

Proposed changes

This pull request fixes issues related to SVG image handling in channel messages.

iOS app crashed when a room contained an SVG image, and Android failed to render SVG images altogether. This update ensures consistent and stable behavior across both platforms by preventing the crash on iOS and enabling proper SVG rendering on Android.

Issue(s)

Closes: #6947
https://rocketchat.atlassian.net/browse/CORE-1764
https://rocketchat.atlassian.net/browse/CORE-1812

How to test or reproduce

1. Send an SVG image using the web application
2. Open the same channel in the iOS mobile app
3. Observe the app crash when the room loads

Screenshots

Before	After

SVG image is not crashing iOS App and rendering without any issue

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

Took reference from expo/expo#38323

Summary by CodeRabbit

• Bug Fixes
  • Downloaded message images are now constrained to a maximum size (reducing oversized images) for more stable and consistent display.
  • Image loading for downloaded attachments has improved reliability, reducing layout issues and unexpected large-image rendering.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

Walkthrough

When message image status is 'downloaded', Image.loadAsync is now called with maxHeight and maxWidth set to 1000; the success path still updates image dimensions and existing error handling remains unchanged.

Changes

Cohort / File(s)	Summary
Image loading app/containers/message/Components/Attachments/Image/Image.tsx	For 'downloaded' images, Image.loadAsync is invoked with { maxHeight: 1000, maxWidth: 1000 }. No exported signatures changed; success path still updates dimensions and error handling logic is preserved.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hop through bytes and frames anew,
I stretch to thousand, snug and true.
A careful load, the pixels bloom,
No sudden crash, no frantic zoom.
Hooray — the images stay blue ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The PR title claims to 'fix SVG crash on iOS and enable rendering on Android', but the actual code change only constrains image dimensions (maxHeight/maxWidth: 1000) in the Image component, with no SVG-specific handling or Android-specific changes.	Clarify the title to accurately reflect the actual change (constraining image dimensions), or update the code to include actual SVG-specific fixes and Android-specific handling as described in the title.
Linked Issues check	⚠️ Warning	The code change (constraining loaded image dimensions) does not directly address the core objectives: preventing iOS crashes or enabling SVG rendering on Android. The PR lacks SVG-specific error handling and Android-specific implementation.	Implement SVG-specific handling (e.g., skip loading or use alternative rendering) and Android-specific fixes as described in the linked issues #6947, CORE-1764, and CORE-1812.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Out of Scope Changes check	✅ Passed	The code change appears narrowly scoped to constraining image dimensions, which is reasonably related to image handling but doesn't directly implement the stated SVG crash prevention or Android rendering objectives.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Rohit3523]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/containers/message/Components/Attachments/Image/Image.tsx (1)

26-38: Add a .catch() handler to prevent unhandled promise rejections.

The maxHeight and maxWidth options are correctly supported in [email protected] and are the recommended approach for preventing memory exhaustion from large SVGs on iOS. However, the promise chain lacks a .catch() handler, which could result in unhandled promise rejections if image loading fails:

Suggested improvement

 	useEffect(() => {
 		if (status === 'downloaded') {
 			Image.loadAsync(uri, {
 				onError: e => {
 					log(e);
 				},
 				maxHeight: 1000,
 				maxWidth: 1000
-			}).then(image => {
+			})
+			.then(image => {
 				setImageDimensions({ width: image.width, height: image.height });
-			});
+			})
+			.catch(e => {
+				log(e);
+			});
 		}
 	}, [uri, status]);

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@app/containers/message/Components/Attachments/Image/Image.tsx`:
- Around line 28-36: The Image.loadAsync call is using hardcoded maxHeight: 100
and maxWidth: 100 which caps iOS-loaded images to tiny thumbnails; update the
Image.loadAsync options in the Image.loadAsync(...) call so it does not hardcode
100px—either remove maxHeight/maxWidth entirely or replace them with a
computed/layout-aware value (e.g. reuse the maxSize pattern from Urls.tsx) and
only apply restrictive max dimensions for SVG mime-types if needed; ensure
setImageDimensions({ width: image.width, height: image.height }) receives the
full/respected dimensions and test on both iOS and Android.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f9af09c and edbc092.

📒 Files selected for processing (1)

• app/containers/message/Components/Attachments/Image/Image.tsx

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6930
File: package.json:101-101
Timestamp: 2026-02-05T13:55:06.688Z
Learning: The RocketChat/Rocket.Chat.ReactNative repository uses a fork of react-native-image-crop-picker (RocketChat/react-native-image-crop-picker) with custom Android edge-to-edge fixes, not the upstream ivpusic/react-native-image-crop-picker package. Dependencies should reference commit pins from the RocketChat fork.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: ESLint and Test / run-eslint-and-test
• GitHub Check: format

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.}

[Rohit3523]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[OtavioStasiak]

Looks good to me!
Run e2e tests and you can merge it :)