duguyihou / react-native-turbo-image

Performant image component for React Native
https://www.npmjs.com/package/react-native-turbo-image
MIT License
167 stars 8 forks source link

Crash app trying to load image in Android #286

Closed ng-ha closed 3 months ago

ng-ha commented 3 months ago

Describe the bug Crash app trying to load image in Android

To Reproduce <TurboImage source={{ uri: 'https://sample-videos.com/img/Sample-jpg-image-5mb.jpg', }} style={{width: 300, height: 300}} />

Screenshot 2024-08-01 at 17 28 46

duguyihou commented 3 months ago

hey @ng-ha , it crashed on my side as well. As the error you attached, the image is too large.

image

Loading a large image will consume more memory. So it makes sense to me when the app crashes. Try resize, it will help you to reduce the memory.

      <Card
        source={{
          uri: 'https://sample-videos.com/img/Sample-jpg-image-5mb.jpg',
        }}
        style={{ width: 200, height: 200 }}
        resize={200}
        onStart={handleStart}
        onSuccess={handleSuccess}
        onCompletion={handleCompletion}
        placeholder={{
          blurhash: 'UBIr4u9}00Rj?yEzxu%LIQ%1%6xt-ks,tAIU',
        }}
      />

https://github.com/user-attachments/assets/25ff9b98-c79f-43e2-bba8-3a8f986d42f4

duguyihou commented 3 months ago

btw, I also tried the Image which is provided by React Native. It crashed.

image
      <Image
        source={{
          uri: 'https://sample-videos.com/img/Sample-jpg-image-5mb.jpg',
        }}
        style={{ width: 200, height: 200 }}
      />
ng-ha commented 3 months ago

@duguyihou i tried the Image by React Native version 0.74.3. It didn't crash in Android.

 <Image
        source={{
          uri: 'https://sample-videos.com/img/Sample-jpg-image-5mb.jpg',
        }}
        style={{width: 5200, height: 5200}}
        onLoad={e => console.log(e.nativeEvent)}
      />
{"source": {"height": 1691, "uri": "https://sample-videos.com/img/Sample-jpg-image-5mb.jpg", "width": 1268}}

It seems like Image automatically scales the image down to avoid crashing. Maybe, can you consider to implement this feature too?

Btw, the resize prop worked!

duguyihou commented 3 months ago

@ng-ha interesting, the version of RN in the example is 0.73.6. And yes, I will think about this feature later. But my current plan is to re-write TurboImage with fabric component. It supports the New Architecture because of Interop layer.

Do you mind closing this ticket if your problem got solved?