Configure Fresco in React Native
Recently while carrying out some Android performance profiling on a new React Native feature at Hudl, I noticed some potential memory issues when loading and displaying a large amount of images. The feature consists of a FlatList component with each list-item containing a user’s avatar and a video thumbnail (where all images are loaded from a backend API). What I noticed was as I scrolled through the list, the memory used by the app would keep increasing and never seemed to dissipate, which was quite scary at first glance.
So what the heck was going on? Was this an issue? Turns out no, this was actually expected behaviour. Under the hood the React Native <Image/> component uses another Facebook library for Android called Fresco which caches images automatically (amongst other things). When I dug deeper I could see that the default configuration that React Native sets for Fresco will have a cache size of about 1/4 of your apps upper allocated memory limit (which will be higher for powerful devices like my Pixel and lower for low-end ones like that HTC Wildfire your Dad is still using).
Awesome, problem solved right? Well not exactly… Yes it’s good to know that this was expected behaviour but what if I wanted my image cache to be 1/8 of my apps allocated memory limit or something else entirely? The question I was asking myself was how do I configure Fresco in a React Native app? Turns out this is quite easy (once I dug through the React Native Java code and worked out how) so let me show you…
In your android folder of your React Native project open MainApplication.java and update the getPackages() method like so…
You’ll notice I’m creating a new Fresco configuration and passing in a custom Supplier to setBitmapMemoryCacheParamsSupplier which looks something like this…
I’ve kept my custom cache configuration pretty much the same as the default because I like that it caters for low-end devices but feel free to use any configuration you want. For a full list of every way Fresco can be configured check out their documentation.
And that’s all folks!
