javascript - React Native GIFs really low performance

Question

I am rendering 30 GIFs in a ScrollView (not in a FlatList because I have implemented a Masonry layout) using the Image component from "react-native" and the memory consumption comes from 130MB to 500MB...

As I am using react-navigation and rendering the gifs in a stack screen with mode="modal", I have added the screen option: detachPreviousScreen={true} but, when I go back from this stack screen (closing it), the RAM is still in 500MB.

Also, when I put the app in background mode (changing to another app, for example), and opening it again, the RAM goes to the initial value of 130... (seems that the GIFs memory consumption is freed)

Does anybody know how to solve this issue?

I have also tested with react-native-screens enableScreens(), but for some reasons, the apps is not showed after I upgraded my EXPO SDK to version 40 (it worked on previous SDKs)

question from:https://stackoverflow.com/questions/65646349/react-native-gifs-really-low-performance

Answer 1

Okey the problem I was getting was that I was not using the GIF which comes in the "preview_gif" body, in the JSON response from the API, which size is smaller.

Also, with RN default Image component, the loading is bit slow, so I have had to use my own optimized Image component. (Another solution is to use react-native-fast-image)