A more efficient way to render animated GIFs in React Native

Question

I'm working on a react native app which works with a lot of animated GIFs.

I've tried using the react native documented library com.facebook.fresco:animated-gif:1.3.0 for animated gif support, yet, the performance of the default Image component is terrible, but using FastImage package I am able to get, at maximum, 10 gifs.

As there is the possibility of integrating the native libraries in React Native, I was wondering what could a solution to this problem?

Thanks for sharing this useful information! Is it safe to assume that the 10-gif limit you describe means 10 gifs concurrently loaded into the current screen? Did you notice any performance issues with just 1 gif on the screen? — Aaron

Elis Mower Elis Mower · Accepted Answer · 2018-02-28T02:41:24

I've tested a couple ways to increase the performance of loading multiple animated GIFs in React Native:

The better format for animated pictures is webp (Why?). Once compressed, it can be around 90% more lightweight to be loaded whether in your web app or your mobile app.
Facebook's Fresco library which is the documented recommended library for rendering gifs and webp files should be upgraded as it provides a better performance for multiple gif loading, and also the original fresco library should be added as a dependency - at the moment, to at least, 1.5.0 or higher, if possible w/ react-native:0.54 -.
FlatList can be optimized to remove anything that is not on the screen using removeClippedSubviews prop. Alternatively, there are third-party libraries such as recyclerlistview or lazy loading lists out there.
Using fast-image for caching can also be advantageous in some cases.

A more efficient way to render animated GIFs in React Native

1 Answers