App Size Matters: Tips and Tricks for Shrinking Your React Native App

Pooja Sharma
Engineering @ Housing/Proptiger/Makaan
6 min readFeb 12, 2024

In today’s competitive world of Mobile app development, it’s essential to create apps that are not only feature-rich but also lightweight. Studies show that for every 6MB increase in the app size, there’s a decrease in install conversion rate by 1%. Therefore, with the increasing demand for faster downloads and better user experiences, app size has become crucial to increase user engagement and retention.

Photo by Alvaro Reyes on Unsplash

In this article, we will explore new practices to optimize our app’s size, moving beyond the commonly mentioned techniques like using AABs, proguard, or enabling enableSeparateBuildPerCPUArchitecture. Assuming that you have already implemented these standard practices in your application, we will delve into new ways that can significantly reduce the app’s size by several Megabytes.

By incorporating these practices, we achieved an impressive reduction of over 10MBs in our own app 🤯! That’s right, a considerable reduction. So let’s dive in and explore these exciting new techniques to expand our knowledge today.

Before delving into the techniques, it’s crucial to perform an essential initial step — analyzing your APK with the insightful Android APK Analyzer tool. This tool allows us to:

  • Gain insights into the inner workings & hidden components
  • Identify bloated assets
  • Detect redundant resources
  • Uncover unnecessary dependencies

With a clear understanding of these elements, we can make informed decisions on what to optimize, remove, or replace, resulting in a leaner and more optimized app build.

To analyze your APK file, simply drag and drop it in the Android Studio and the APK Analyzer tool will take care of the rest.

Android APK Analyzer

1. Avoid Multiple Image Versions

To reduce app size, it is essential to eliminate the usage of multiple versions of images with suffixes like @2x, @3x, and @4x. While these versions may seem beneficial for accommodating different screen densities, they inadvertently result in unnecessary duplication within the APK.

This has been verified using the APK Analyzer tool, revealing the considerable impact of image duplication on the overall app size. Instead, it’s recommended to adopt more efficient techniques, such as using vector images or serving images dynamically based on screen densities, while leveraging the drawable folder as an alternative.

Multiple Image Versions are bundled in a single APK

2. Supercharge Optimization with ShrinkMe

Utilizing the effective ShrinkMe tool, you can supercharge your app size reduction efforts. Begin by converting your images to the WEBP format and then leverage ShrinkMe’s advanced compression algorithms to further shrink the WEBP images.

ShrinkMe Tool

Through our own experiments, we were able to achieve a significant reduction of more than 3MBs using this tool alone. While you can explore other tools, we found that ShrinkMe delivered the best outcomes.

3. Load Rarely Used Assets from the Cloud

If your app plays an animation, say for example when a user places an order or submits feedback, you can optimize it by implementing cloud-based loading for infrequently used assets. Instead of including all animations within the app package, you can fetch and play the required animation from the cloud when triggered by these specific user actions.

This approach reduces the app’s size and memory footprint while maintaining the desired functionality and providing engaging animations for important user interactions. Additionally, it allows for independent updates to the animations without requiring users to update the entire app package.

Several popular libraries provide support for remote asset loading:

  • react-native-fast-image— efficiently handles the loading and caching of images from remote URLs, ensuring fast rendering and improved loading speeds
  • lottie-react-native — allows you to effortlessly load lightweight JSON animation files, delivering engaging visual experiences
  • react-native-sound — simplifies audio file management and provides options for loading audio resources from remote locations

By utilizing these libraries and incorporating remote asset loading techniques, you can optimize app performance, deliver engaging visuals, and manage audio assets effectively, all while keeping the app’s size in check.

4. Rendering Images at the Right Dimensions

When dealing with large-sized images that are rendered on smaller dimensions or widgets, it is crucial to address the impact on app performance and storage. We used the shrink.media tool, which provides advanced compression and resizing capabilities that help in reducing the size of these images without compromising their visual quality.

shrink.media tool

Whether you are dealing with thumbnails, icons, or other elements, you can use such tools to shrink image sizes and create a more optimized and responsive app experience.

5. Optimizing with Tint Color and Transform

Another great technique is utilizing tintColor Image style prop, which allows you to change the color of all non-transparent pixels in an image to a specific color.

<Image
style={{ width: 200, height: 200, tintColor: "orange"}}
source={require('../../assets/reactLogo.webp')}
/>

By using tint color, you can replace exactly similar images with different background colors without the need for duplicate assets, resulting in significant space savings.

Using tintColor style prop

A similar approach can be used for transform. With transform, you can apply various transformations to images, such as flips, rotations, or scaling, to achieve different visual effects leading to reduced redundancy and optimized app.

6. Replace Gradient Images with Efficient Libraries

When it comes to creating gradients in your React Native app, you may want to consider replacing gradient images with more efficient alternatives like the react-native-linear-gradient or react-native-svg libraries. However, it is important to note that this suggestion applies only if your app already utilizes these libraries. By leveraging these libraries, you can dynamically generate gradients or simple shapes without the need for image assets.

7. Removing Unused Modules with npx unimported

One effective approach to reducing app size is by removing dead code, which refers to unused modules or dependencies in your project. To simplify this process, you can utilize a command called npx unimported. Running this command-line tool will scan your project’s codebase and identify any imported modules that are not being utilized. This allows you to safely remove these unnecessary dependencies, resulting in a leaner and more efficient app.

Identifying Unused files using npx unimported

However, it’s important to note that automated tools like npx unimported can provide valuable insights, but it’s always recommended to double-check the detected modules before removing them as sometimes, certain modules may be used in specific code paths or have dynamic imports that are not easily captured by the tool.

8. Analyzing Library Sizes

To optimize your React Native project’s app size, it is crucial to analyze the size of the libraries you are using. Tools like Bundlephobia and Cost of Modules can be immensely helpful in this regard. Bundlephobia allows you to estimate the size impact of installing or adding a specific npm package to your project. It provides valuable insights into the package’s size, including its dependency tree and potential optimizations.

Bundlephobia

Similarly, Cost of Modules analyzes your project’s package.json file to provide an overview of the installed libraries’ sizes. By regularly monitoring the size of your dependencies and making informed decisions based on these analyses, you can effectively manage and minimize the app’s overall size.

In conclusion, by embracing these powerful techniques, you have the opportunity to transform your React Native app into a lean, lightning-fast masterpiece.

With every reduction in size, you unlock greater speed, enhanced performance, and an exceptional user experience. So, don’t wait any longer — dive in, apply these techniques, and witness the remarkable results of a sleeker and more efficient app.

Your journey towards app size optimization begins now!!

--

--

Pooja Sharma
Engineering @ Housing/Proptiger/Makaan

Software Engineer 👩‍💻 @ REA India | Mobile App Developer 📱 & ML Fanatic 🤖 | Nature Enthusiast 🌿 | Bibliophile 📚 | Artistic Soul 🎨