How I Reduced Size of My React Native App

Big size of Apps is a common problem now-a-days. If your app uses many Assets like Images, Sounds, Animations and Fonts, then it’s bound to impact the app size. So looking out for options to reduce it is a Must.

Photo by Oskar Yildiz on Unsplash

I did a lot of research and explored a lot of content through Medium, Youtube, React Native and Android Documentations and many other Articles but there was not much I could benefit from. Most of the above mentioned sites gave very archaic and cliche methods like enabling shrinkResources, Proguard and architecture based Split APKs in build.gradle file or using Android App Bundles. Well my app was already doing all of that so I was looking for something else!

The very first thing I did was to Analyze my APK because inorder to reduce its size, I need to know what’s causing it. So, I used Android APK Analyzer which gives you a complete breakdown of what’s inside your APK. You can follow Android’s documentation for using this tool — https://developer.android.com/studio/debug/apk-analyzer .

APK Analyzed by The Android APK Analyzer Tool

This tool helped me to find out what all was causing the app size to increase. In my case, it was obviously the assets in the res folder.

So, what did I do to reduce it?

  1. Remove GARBAGE!!!
    All the assets that were not being used in my app including images, animations and fonts, were all removed. We might think that our app wouldn’t have unused assets but that’s not true. You must check it file by file (sadly there’s no other way for RN apps) and get rid of it. There were multiple animation, image and font files my app did not require and so I removed it. It took me some time but was worth the effort as I saved 1.2MBs from it :D
  2. Let Your Animations Render From CLOUD!
    If animations are being used heavily in your app, then consider going for remote rendering. I used React Native Lottie in my app and it supports remote animations (https://github.com/lottie-react-native/lottie-react-native/releases/tag/v5.1.0) so I moved all the large animation files to cloud and saved a whopping 2.3MBs from it!
  3. Switch to WEBPs Right NOW!
    Whether you use PNG or JPEG format it doesn’t matter, just convert them all to WebP. You will see a huge difference. WebP formats are really compact and offer a great image quality. Make sure no images in your app are in those old and heavy PNG or JPEG format! This helped me to remove 0.6MB from my app.
  4. Shrink! Shrink! AND SHRINKKK!
    Yes! Shrinking really helps. Whether it’s a WebP, PNG or JPEG image, they can all be compressed. You can explore any tool of your choice online like https://tinypng.com/ and you’ll be sorted. To my surprise, this removed 1.8MBs and that’s why I strongly recommend doing it!
  5. Get those Sounds outta hereee.
    Finally, the last thing I did was to move sound files to cloud and remotely loading them. As my app used around 30 sound files, this came out as a great option for me and so I removed 1.4MB using this. I use React Native Sound library and if your app uses it as well, then you should surely explore this option!

That’s it! Doing the above steps helped me reduce my App size by 7.3MBs which I think is really cool. Would really encourage everyone to make use of each and every step fully and get their app size reduced. Thanks!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Healthy Words

Sharing thoughts and views on lifestyle, fitness, music, health, food and nature 🌸🌿🌴💜