Back in mid-2025, the devs at Horizon Tech, an Atlanta startup, hit a wall with their main mobile app. Their React Native app’s bundle size had gotten completely out of control. Users were complaining about glacial downloads and laggy performance, and we could see the damage in real time as our engagement numbers cratered, putting our growth plans on life support.
Key Takeaways
- Switch to the Hermes JS engine to cut Android app size by around 20% and get faster startup.
- Use a tool like React Native Bundle Visualizer to actually see what’s bloating your bundle and kill oversized dependencies.
- Shrink your native binaries by running ProGuard on Android and stripping unused architectures on iOS.
- Configure your Metro Bundler to toss out dev-only code and assets from your production builds.
- Crush your asset payload by up to 70% with WebP format and proper image resizing.
The Genesis of a Performance Problem
Horizon Tech’s app, “CityConnect,” was meant to be the go-to local guide for Atlanta, with everything from MARTA schedules to food spots in Virginia-Highland. In the first big push, we were all about shipping features, not watching the file size. “We were just trying to get it out the door,” said Sarah Chen, their lead dev. “Every new library felt like a shortcut to another feature.” It was fast, but it left them with a production Android APK over 100MB and an iOS IPA that wasn’t much smaller.
Then the user feedback hit. Our analytics showed a clear pattern: downloads were stalling out in places with bad internet, and people with older phones were uninstalling way more often. “We could draw a straight line from app size to user retention,” said Mark Johnson, the CEO. “Every 10% we added to the app’s size cost us about 2% of our users in the first week. We couldn’t keep going like that.”
Diagnostic Deep Dive: Uncovering the Bloat
First thing’s first: they had to figure out what was making CityConnect so fat. Sarah’s team fired up the React Native Bundle Visualizer which spits out a treemap that shows you exactly where the weight is in your JS bundle. “It was a real wake-up call,” Sarah said. “We had these huge libraries pulled in for tiny features we could’ve built ourselves.”
A huge mapping library was one of the worst offenders. They’d picked it for its long list of features but were only using a tiny piece of it. Same story with a slick UI component library that was dragging in a ton of code they never touched. It’s a classic mistake a lot of devs make, you import the whole kitchen sink when all you really need is a single spoon.
Implementing Hermes: A Foundational Shift
One of the first and biggest wins for Horizon Tech was switching to Hermes for their Android JS engine. “For the benefits we got, flipping the switch to Hermes was ridiculously easy,” Sarah mentioned. It’s an engine built for React Native that pre-compiles your JS to bytecode, making it smaller and quicker to load. Just doing that cut their Android APK size by about 20% and made startup way faster, especially on cheaper phones.
While this trick didn’t work for iOS, since Apple’s JavaScriptCore is so deeply embedded, the gains on Android were so massive they couldn’t be ignored. The team also made sure their iOS builds were stripping unused architectures, which is a simple checkbox in Xcode that a lot of people miss. That tiny change alone knocked several megabytes off the final iOS IPA.
Strategic Dependency Management and Code Splitting
Now that they could see the bloat, the team started cutting. They went through their package.json line by line, asking the hard questions: “Do we actually use this? Is there a smaller library that does the same thing?” That became the new rule. The giant mapping library got replaced with a lightweight one that did just enough to show points of interest in Midtown Atlanta and nothing more.
They also got into dynamic imports and code splitting. For parts of the app that most users don’t hit every time they open it, like the deep user profile settings or the advanced search, they set up their Metro Bundler to only load that code when it was needed. This kept the initial download lean, fetching more code only when a user went to a specific screen. You have to think carefully about user paths and network latency when you do this, but the improvement in initial load time was huge and absolutely worth the effort.
Asset Optimization: The Often-Underestimated Factor
It’s not just JavaScript. Assets, images, fonts, you name it, can really bloat an app. CityConnect was full of photos of landmarks and restaurant menus, so its asset load was a big problem. “It turned out our designers were just dropping in high-res images meant for the web,” Mark explained. “Every single one was a byte hog.”
So, the team built a real asset pipeline. All images got run through compression tools that slash file size without making them look grainy. They switched to the WebP format on Android because of its great compression and used optimized JPEGs and PNGs on iOS, making sure to serve up the right resolution for the right screen size. Just doing that cut their asset payload by almost 60%, a huge victory for a visual app like theirs.
Fonts were another target. Custom fonts look nice, but they’re heavy. Horizon Tech made the call to only use custom fonts for big headings and stick to system fonts for all the body text, which cut their font bundle by more than 75%. It sounds like a small thing, but these little optimizations really add up.
ProGuard and Native Module Pruning
On the Android side, you absolutely have to use ProGuard (or its successor, R8) to shrink your native code. Sarah’s team went into their android/app/build.gradle file and dialed in their ProGuard rules to make sure it was stripping out unused classes from third-party Java libraries. You have to test carefully so you don’t cause random runtime crashes, but it’s worth it for the smaller APK. So many teams just leave the default settings, thinking they’re good enough. For any non-trivial app, they almost never are.
They also audited their native module dependencies. A lot of RN modules have a JS interface but also bundle native code. If they weren’t using all the native features of a module, they’d hunt for a lighter alternative or even try manual linking to pull in only the specific native bits they needed. This is definitely more advanced work, and you need to be comfortable in Android Studio and Xcode to pull it off, but for an app where performance is everything, it’s a step you have to take.
The Outcome: A Lighter, Faster CityConnect
After a few weeks of this focused work, Horizon Tech pushed out the new, leaner CityConnect. The numbers spoke for themselves. The Android APK plummeted from over 100MB to just 48MB, with the iOS IPA seeing a similar drop. App startup got 35% faster on Android and 20% faster on iOS. Suddenly, the user reviews got better, and their key metrics, download completions and first-week retention, shot back up, even surpassing their original goals.
“There was no silver bullet,” Mark concluded. “It was just a grind of careful analysis, making smart tradeoffs, and actually caring about performance. We learned that every megabyte matters when you want a big audience.” For Horizon Tech, the lesson was clear: your React Native bundle size is a product feature that directly impacts user happiness and whether your business sinks or swims.
Their story proves something we should all know by now in mobile development: performance is a feature, and if you ignore it, you can have the best ideas in the world and your app will still fail.
Ideal React Native app bundle size
There’s no magic number, but try to keep your Android APK and iOS IPA under 50MB. Anything smaller is a win because it means faster downloads and less data burned, which convinces more people to actually install your app, especially if they’re on a slow or metered connection.
How Hermes reduces Android app size
Hermes is a JS engine built for React Native. It compiles your JavaScript into a compact bytecode format when you build the app, not on the user’s device. This bytecode is much smaller than raw JS and loads faster, which shrinks your APK size and speeds up how quickly the app starts on Android.
Tools for analyzing React Native bundle size
The go-to for your JavaScript is React Native Bundle Visualizer. It gives you a treemap showing what packages are taking up all the space. For your native code, you can use Android Studio’s APK Analyzer and the build reports in Xcode to see what’s going on with the binary size.
The impact of image optimization on bundle size
Yes, massively. Images and other assets are often the biggest part of an app’s size. If you compress your images, switch to formats like WebP on Android, and serve images at the correct resolution for the device, you can easily cut your asset payload by 50% or more. This makes a huge dent in the total bundle size.
What code splitting is in React Native
Code splitting means breaking your app’s JavaScript into smaller pieces that can be loaded on demand. Instead of forcing the user to download everything at once when the app starts, you only load the code for a specific feature (like a settings screen) when they actually go to it. This makes the initial bundle smaller and the app feel much faster when it first opens.
