by Jignesh Kakadiya

Finding memory leaks react-native app (iOS)

Problem:
Our react-native app was working well on all devices and except iPhone 6 it was resulting in a crash. After high level profiling we found out that its a memory issue. While using some heavy features in the app memory was shooting up to 600+ MB. And since iPhone 6 has 1GB of ram, iPhone automatically kills the app.

Solution:
This is what I did to reduce app total memory usage from 600MB to 60MB.

1. While profiling for memory leaks we need to make sure app is built with the release Scheme. Since dev build includes logging/warning, hot reloading features we don’t need them when checking for leaks. This is how you can change the release build with xcode.
2. Start tracking for leaks
   Go to XCode → Product → Profile (⌘ + i)
   It will popup profiling templates. Please select whichever is required.
   Select Leaksand click on choose.

3. This should open the leaks profiler on your screen. Then you can click on the `red dot` on top left corner which will restart the app in simulator and you can start playing with the app.

4. This is how it looks after performing some swipes in the screen and carousel operations. I realised when I jump into the carousel screen and select an image from carousel of 12 images, memory shoots up for every single image. Result below shows us the memory taken by “in memory” image objects.

5. Finding the cause.
We were using the react-native-fast-image package for caching the images on that screen and since react-native doesn’t have a “better” way to cache fetched images we ended up using react-native-fast-image. So I decided to remove this wonderful package from my app, and result was shocking. This is what the result looks like after removing it.

PS: Just so you know we ended up using react-native-cached-image, which doesn’t store image in memory.

If you are building something with react-native and need help. Please let me know.