[ React Native ] Canvas: trying to draw too large (...bytes) bitmap.

출근 후 아침 일과는, 구글 crashlytics 를 확인하는 것으로 시작한다.

 

비정상 종료가 발생하지 않은 세션이 거의 100프로가 돼야 마음이 편하기 때문이다.

 

새로운 문제가 생겼다.

 

Fatal Exception: java.lang.RuntimeException: Canvas: trying to draw too large(239788192bytes) bitmap.

 

해당 문제는 지금 react-native-fastimage 를 사용하고있는데,

 

해당 부분에서 안드로이드가(IOS 는 괜찮았다)

 

너무나 큰 이미지를 랜더링 할때 발생한다.

 

react-native-fastimage 는 내부적으로 안드로이드 glide 를 사용하기에, 해당 부분을 수정해주면 된다.

 

patch package 로 진행해줬으며

 

diff --git a/node_modules/@d11/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageGlideModule.java b/node_modules/@d11/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageGlideModule.java
index 6708bb8..bf70145 100644
--- a/node_modules/@d11/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageGlideModule.java
+++ b/node_modules/@d11/react-native-fast-image/android/src/main/java/com/dylanvann/fastimage/FastImageGlideModule.java
@@ -1,9 +1,65 @@
 package com.dylanvann.fastimage;
 
+import android.content.Context;
+import android.util.Log;
+
+import androidx.annotation.NonNull;
+
+import com.bumptech.glide.Glide;
+import com.bumptech.glide.GlideBuilder;
+import com.bumptech.glide.Registry;
 import com.bumptech.glide.annotation.GlideModule;
+import com.bumptech.glide.load.DecodeFormat;
+import com.bumptech.glide.load.engine.bitmap_recycle.LruBitmapPool;
+import com.bumptech.glide.load.engine.cache.InternalCacheDiskCacheFactory;
+import com.bumptech.glide.load.engine.cache.LruResourceCache;
 import com.bumptech.glide.module.AppGlideModule;
+import com.bumptech.glide.request.RequestOptions;
 
-// We need an AppGlideModule to be present for progress events to work.
+/**
+ * FastImage GlideModule with optimizations for large images.
+ * Prevents "Canvas: trying to draw too large bitmap" crash.
+ * 
+ * - PREFER_RGB_565: 50% memory reduction (2 bytes per pixel vs 4 bytes)
+ * - disallowHardwareConfig: Prevents hardware bitmap crashes
+ * - Memory/disk cache size limits
+ */
 @GlideModule
 public final class FastImageGlideModule extends AppGlideModule {
+
+    @Override
+    public void applyOptions(@NonNull Context context, @NonNull GlideBuilder builder) {
+        // Memory cache size (30 MB)
+        int memoryCacheSizeBytes = 1024 * 1024 * 30;
+        builder.setMemoryCache(new LruResourceCache(memoryCacheSizeBytes));
+
+        // Bitmap pool size (30 MB)
+        int bitmapPoolSizeBytes = 1024 * 1024 * 30;
+        builder.setBitmapPool(new LruBitmapPool(bitmapPoolSizeBytes));
+
+        // Disk cache size (250 MB)
+        int diskCacheSizeBytes = 1024 * 1024 * 250;
+        builder.setDiskCache(new InternalCacheDiskCacheFactory(context, diskCacheSizeBytes));
+
+        // Use RGB_565 format to save memory (no alpha channel)
+        // ARGB_8888 = 4 bytes per pixel, RGB_565 = 2 bytes per pixel
+        builder.setDefaultRequestOptions(
+            new RequestOptions()
+                .format(DecodeFormat.PREFER_RGB_565)
+                .disallowHardwareConfig() // Prevent hardware bitmap crashes
+        );
+
+        // Set log level
+        builder.setLogLevel(Log.WARN);
+    }
+
+    @Override
+    public void registerComponents(@NonNull Context context, @NonNull Glide glide, @NonNull Registry registry) {
+        // No additional components needed
+    }
+
+    @Override
+    public boolean isManifestParsingEnabled() {
+        return false;
+    }
 }

 

이런식으로, glide 의 옵션을 변경해줬다.