[Android] Fail to render a large image

Issue Description

When I try to render a big image (5312 x 2988), the image container just shows an empty box. If the image is reasonably sized (~1024x1024) or comes directly from device instead from a remote url, it renders fine. Not sure if it’s a memory or networking issue. There’s another open issue(https://github.com/facebook/react-native/issues/7408) that seems to discuss a similar topic.

Steps to Reproduce / Code Snippets

Render a large image in a ListView. In a dev mode, the app will crash in a few seconds. In a production mode, the app just shows a white background in place of an image.

Inside a ListView I render an image like below:

<Image
  source={{uri: imageURI}}
  style={styles.canvas}
  resizeMode="cover"
/> : null

StyleSheet.create({
  canvas: {
    width: null,
    height: 300,
  },
})

<ListView
  dataSource={this.state.dataSource}
  renderRow={this.onRenderRow}
  enableEmptySections={true}
  initialListSize={5}
  pageSize={10}
/>

Expected Results

Image is rendered successfully.

Additional Information

• React Native version: 0.35.0
• Platform(s) (iOS, Android, or both?): Android 6
• Operating System (macOS, Linux, or Windows?): MacOS

Update

Unfortunately, trying to resize a large picture using ImageEditor also fails because of an OutOfMemory exception. I used the photos that are captured by device’s built-in camera.

10-20 16:38:47.511 19110 19154 E AndroidRuntime: FATAL EXCEPTION: AsyncTask #4
10-20 16:38:47.511 19110 19154 E AndroidRuntime: Process: com.kpopio, PID: 19110
10-20 16:38:47.511 19110 19154 E AndroidRuntime: java.lang.RuntimeException: An error occurred while executing doInBackground()
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at android.os.AsyncTask$3.done(AsyncTask.java:309)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:354)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at java.util.concurrent.FutureTask.setException(FutureTask.java:223)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at java.util.concurrent.FutureTask.run(FutureTask.java:242)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at java.lang.Thread.run(Thread.java:818)
10-20 16:38:47.511 19110 19154 E AndroidRuntime: Caused by: java.lang.OutOfMemoryError: Failed to allocate a 63489036 byte allocation with 16777216 free bytes and 53MB until OOM
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at dalvik.system.VMRuntime.newNonMovableArray(Native Method)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at android.graphics.BitmapFactory.nativeDecodeStream(Native Method)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at android.graphics.BitmapFactory.decodeStreamInternal(BitmapFactory.java:882)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at android.graphics.BitmapFactory.decodeStream(BitmapFactory.java:858)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at com.facebook.react.modules.camera.ImageEditingManager$CropTask.crop(ImageEditingManager.java:299)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at com.facebook.react.modules.camera.ImageEditingManager$CropTask.doInBackgroundGuarded(ImageEditingManager.java:270)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at com.facebook.react.modules.camera.ImageEditingManager$CropTask.doInBackgroundGuarded(ImageEditingManager.java:199)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at com.facebook.react.bridge.GuardedAsyncTask.doInBackground(GuardedAsyncTask.java:34)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at com.facebook.react.bridge.GuardedAsyncTask.doInBackground(GuardedAsyncTask.java:22)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at android.os.AsyncTask$2.call(AsyncTask.java:295)
10-20 16:38:47.511 19110 19154 E AndroidRuntime:    at java.util.concurrent.FutureTask.run(FutureTask.java:237)

References:

1. http://stackoverflow.com/questions/477572/strange-out-of-memory-issue-while-loading-an-image-to-a-bitmap-object/823966#823966

[jcharbo]

Has there been any progress on this?

[vbuch]

This issue still needs fixing in RN 0.46.4. It fails with images not that big (< 1600px on one side) Edit: Actually, when dealing with large images and using resizeMethod=resize all looks fine. The problem is that the heuristics the docs talk about happen in this piece of code and that’s a check for local files.