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?
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.