Performance issues

[nicolasbrugneaux]

I have this image sequence of 90 images say myImages created like this:

export const myImages = [
  require('../assets/img/img0-png'),
  require('../assets/img/img1-png'),
  // ...,
  require('../assets/img/img89-png')
];

If I use ImageSequence with all of them, the app simply crashed at startup, if I slice it into 30, still crashes, 25 is fine.

My usage (as in the README):

<ImageSequence
                images={myImages}
                repeat={false}
                style={styles.backgroundImage}
                framesPerSecond={24}>

Could you look into this? I also took the liberty of adding a repeat react prop in my fork (https://github.com/DataWallet/react-native-image-sequence/commit/d503e1b0f313a382a69c9c7bd0d4d2b9e359660c) Since I found it impractical to have no control of that. Would be nice to have it merged upstream.

Cheers!

[gijoehosaphat]

I am also having this issue, basically running out of memory. I get this from Crashlytics:

Fatal Exception: java.lang.RuntimeException: An error occured while executing doInBackground() at android.os.AsyncTask$3.done(AsyncTask.java:300) at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:355) at java.util.concurrent.FutureTask.setException(FutureTask.java:222) at java.util.concurrent.FutureTask.run(FutureTask.java:242) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587) at java.lang.Thread.run(Thread.java:841) Caused by java.lang.OutOfMemoryError at android.graphics.BitmapFactory.nativeDecodeAsset(BitmapFactory.java) at android.graphics.BitmapFactory.decodeStream(BitmapFactory.java:677) at android.graphics.BitmapFactory.decodeResourceStream(BitmapFactory.java:507) at android.graphics.BitmapFactory.decodeResource(BitmapFactory.java:535) at android.graphics.BitmapFactory.decodeResource(BitmapFactory.java:565) at dk.madslee.RCTImageSequenceView$DownloadImageTask.doInBackground(RCTImageSequenceView.java:60) at dk.madslee.RCTImageSequenceView$DownloadImageTask.doInBackground(RCTImageSequenceView.java:41) at android.os.AsyncTask$2.call(AsyncTask.java:288) at java.util.concurrent.FutureTask.run(FutureTask.java:237) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587) at java.lang.Thread.run(Thread.java:841)

I can alleviate crashes by simply reducing the number of images in the sequence, but once I go over a certain threshold, it runs out of memory.

[BWJesseR]

@nicolasbrugneaux do you have a stack trace for your crash? I was also getting a crash when using a large number of images. It looked it it had something with the view changing before the sequence animation was fully loaded. The error in the app was shown as Error while updating property 'images' of a view managed by: RCTImageSequence.

I am testing out this fix: https://github.com/BWJesseR/react-native-image-sequence/blob/master/android/src/main/java/dk/madslee/imageSequence/RCTImageSequenceView.java.

We were only getting this crash on Android and while it isn't related to the out of memory issue that @gijoehosaphat is having it does seem like it could be related to yours.

[eduduardo]

I tried to play a PNG sequence with 150 files and it stops the app on Android. I guess is an out of memory problem. Maybe if add some recycle or garbage collector ?

[pabeda-bt]

The same issue here, I'm unable to run 80 images in a sequence. It crashes application if images count is more than 30

[eduduardo]

Another solution for PNG's animation is using webp format, you can convert using tools like: https://ezgif.com/webp-maker

And enable webp on the react native project using: https://github.com/TGPSKI/react-native-webp-support