[MEDIUM] [Android] Large images crashing the App - 'Canvas trying to draw too large'

[Julesssss]

Problem

The Android app crashes due to a Canvas OOM exception when the image dimensions are extremely large. This has been fixed in the past, but we recently switched to Expo Image so I believe we'll need a new solution.

FATAL EXCEPTION: main
    Process: com.expensify.chat, PID: 28882
    java.lang.RuntimeException: Canvas: trying to draw too large(149730560bytes) bitmap.
    	at android.graphics.RecordingCanvas.throwIfCannotDraw(RecordingCanvas.java:266)
    	at android.graphics.BaseRecordingCanvas.drawBitmap(BaseRecordingCanvas.java:94)
    	at android.graphics.drawable.BitmapDrawable.draw(BitmapDrawable.java:549)
    	at android.widget.ImageView.onDraw(ImageView.java:1446)
    	at expo.modules.image.ExpoImageView.onDraw(ExpoImageView.kt:204)
    	at android.view.View.draw(View.java:23900)
    	at expo.modules.image.ExpoImageView.draw(ExpoImageView.kt:200)
    	at android.view.View.updateDisplayListIfDirty(View.java:22767)
    	at android.view.View.draw(View.java:23631)
    	at android.view.ViewGroup.drawChild(ViewGroup.java:4559)
    	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4320)
    	at android.view.View.updateDisplayListIfDirty(View.java:22758)
    	at android.view.View.draw(View.java:23631)
    	at android.view.ViewGroup.drawChild(ViewGroup.java:4559)
    	at android.view.ViewGroup.dispatchDraw(ViewGroup.java:4320)

We have spent time on different image libraries and many related issues, and I am now trying to combine our current issues and resolve the remaining canvas OOM exception.

• Share a large image similar to this
• Attempt to view the image as either a receipt upload or a regular image attachment

Solution

Collect all past attempts, recent merged PRs, and determine the best path forward for resolving the crash:

• Here's where we merged Expo-Image
• Here was a prior attempt to fix the image in react-native-fast-image
• Another PR which attempted to fix the issue with an upstream react-native-fast-image PR
• We introduced AttachmentGallary as an improvement to image scaling and a replacement to ImageZoom

Next question: Do we need a fix in Expo Image?

[Julesssss]

No C+ required yet

[Julesssss]

I reached out 1:1 to @WojtekBoman who implemented Expo Image, as I'm not 100% sure whether the exception is fixable within Expo Image or not. I can see some people suggesting that we disable native Android hardware acceleration -- but this worries me as this will likely reduce performance elsewhere...

I'm thinking that we might need to enable it just for the React Views that render potentially lage images

[Julesssss]

I'm going to generate a couple of test builds to verify the fix and compare performance.

[Julesssss]

The crash is resolved... but at great cost.

As expected, disabling hardware acceleration leads to horrendous performance. We can't make this an app-wide change. My plan is to disable hardware acceleration just for the specific View/Window that displays image attachments -- this should resolve the crash without harming app performance.

[Julesssss]

Before:

android-perf-before.mp4

After:

android-perf-after.mp4

[Julesssss]

My plan is to disable hardware acceleration just for the specific View/Window that displays image attachments

To achieve this we could build our own module, or use this existing (but unknown) HardwareAccelerationViewManager library.

I'd much prefer to resolve this upstream within the Expo Image library though, so I'm going to ask SWM for help.

[Julesssss]

This is being passed onto the Expo team, we'll hopefully hear back soon.

[chrispader]

Can't we just add a similar ResizeTransformation class to the expo-image library like in DylanVann/react-native-fast-image#1017 ?

expo-image also uses Glide, so shouldn't we just be able to attach it with .transform(new ResizeTransformation()) here, or somewhere else ?

(i just looked up this spot, might be a different line file/line)

[chrispader]

Either upstream or in a patch, since i'm not sure if this would be the ideal fix for all users. But it most likely should fix the problem for E/App

[Julesssss]

Can't we just add a similar ResizeTransformation class to the expo-image library like in DylanVann/react-native-fast-image#1017 ?

That sounds good, but let's first see what Expo team says 👍

[Julesssss]

Waiting on response.

[Julesssss]

Expo have released expo-image version 1.10.6, which should resolve this exception with changes to the native Android canvas.

This PR bumps the expo-image library and resolves the issue, but I'm having unrelated issues trying to build the Android app...

[Julesssss]

The fix seemed to have not resolved our issue. We're in contact with the Expo team again

[Julesssss]

No update yet

[Julesssss]

Hey @chrispader, just wondering if you've heard anything else from Expo, or whether this conversation is taking place on a public GH repo?

[Julesssss]

Awaiting response from Expo and @chrispader

[Julesssss]

Asked for an update here

[Julesssss]

Fixed by #38671

[chrispader]

Nice stuff! Sorry for not replying fast enough 🥲 I think this solution is valid, as long as expo-image takes care of the downsampling