How We Modernized a Legacy React Native App for the App Store

Posted: 2020-09-27

The story of how our team tackled upgrading an ancient React Native app to meet modern App Store requirements - challenges, victories, and lessons learned along the way.

Ever had that sinking feeling when you look at a codebase and realize just how old it is? That's exactly what hit me when a client approached us with their React Native app built on version 0.47.1. For context, that's practically ancient in React Native years - we're talking 2017-era code!

The challenge? Apple had just dropped a bombshell: all App Store submissions needed to be built with Xcode 11, requiring macOS Mojave 10.14.3 or later. Our client's app wasn't even close to ready for that jump.

The Mission

We had to somehow get this app from React Native 0.47.1 all the way up to 0.63.2. If you've ever done a major React Native upgrade, you're probably wincing right now. If you haven't - imagine trying to renovate a house while people are still living in it, and you can't break anything along the way.

How We Tackled It

First things first - we needed a game plan. Here's what worked for us:

1. Version Control

Instead of cowboy coding our way through this (tempting as it was), we:

Created a separate branch for all our upgrade work
Tagged every stable point religiously (future us was very thankful for this)
Kept the production code isolated until we were ready to merge

2. Baby Steps > Giant Leaps

Rather than attempting a massive jump between versions (which would have been a nightmare), we broke it down into smaller, manageable upgrades. Think of it like climbing a ladder - much safer to go one rung at a time than trying to leap to the top.

3. Dependencies

Each React Native upgrade brought its own chaos with dependencies. We:

Updated what we could
Found alternatives for deprecated libraries
Sometimes had to bite the bullet and rewrite features when libraries were completely dead

4. Testing

We set up a pretty thorough testing approach:

Automated tests to catch the obvious breaks
Lots (and lots) of manual testing because, let's face it, automated tests can't catch everything
Performance testing to make sure we weren't making things worse

Challenges

API Changes

The biggest headache? React Native's API had changed dramatically since the app was first built. Functions that were standard in version 0.47.1 were now either deprecated or completely removed in 0.63.2. Opening the project in a modern environment was like walking into a minefield of red errors.

Third-Party Libraries

Some libraries used hadn't been updated since the app was first built. We had three options: 1. Update to newer versions (when available) 2. Find modern alternatives 3. Roll up our sleeves and write our own solutions

Build Process

Getting the app to actually build with the new React Native version was like solving a puzzle where the pieces kept changing shape. We had to:

Rewrite build scripts
Update the Podfile (several times)
Wrestle with Gradle configurations

What We Learned

Don't Wait Too Long Between Updates Seriously, staying somewhat current with React Native versions saves so much pain later.
Document Everything We started keeping detailed notes mainly for ourselves, but they've already saved us multiple times when helping other teams with similar upgrades.
The React Native Community is Amazing When we got stuck (which happened more than I'd like to admit), the community always came through with solutions or at least commiseration.
Testing Never Ends Just when you think you've tested everything, you'll find something new. Accept it, embrace it.
Stay Flexible Sometimes the "right" way doesn't work, and you need to get creative. That's okay!

The Takeaway

Upgrading legacy React Native apps is like performing surgery - it's delicate, sometimes messy, and requires a lot of patience. But with the right approach and mindset, it's totally doable.

If you're staring down a similar upgrade path, remember: take it step by step, keep good notes, and don't be afraid to reach out to the community when you need help. And maybe, just maybe, try to stay a bit more current with those React Native versions in the future. 😉