WhoBuilt

5 Lessons Learned From A Major React Native Upgrade

Oct 22, 2020· 22 min· 412 views·Watch on YouTube

Speaker

Freelance software developer Ramón Huidobro shares lessons from upgrading a client’s React Native app at React Native EU 2020, presented by Callstack.

An outdated app that would not build

Huidobro took on a freelance project for an app that needed Android 64-bit support and updates for iOS 13. Its last commit was about a year old, and it used React Native 0.55. The iOS build could not find its simulator, and the Android build also failed.

Use community guidance and split the work

Huidobro’s first lesson was that developers are not alone: React Native Upgrade Helper provides diffs and setup guidance between versions, though it is not a complete solution. His second lesson was to break the upgrade into smaller tasks, such as enabling autolinking, fixing compiler errors, repairing UI issues, and addressing crashes and warnings. He tackled iOS first, then Android, resolving one problem at a time.

Choose a useful upgrade target and keep changes isolated

React Native 0.59 would have added Android 64-bit support, while 0.60 introduced autolinking; Huidobro chose 0.62 to stay closer to the current release and reduce future upgrade work. He used a bleeding-edge branch for small, potentially broken commits, then cleaned up the history with rebasing and squashing before integrating the work.

Stop at a practical point and keep learning

The project had 72 listed dependencies, but Huidobro did not need to make a major upgrade to every one. He used semantic versioning to choose when a minor or patch update was sufficient, balancing improvements against a timely delivery. He also emphasized patience, thanking open-source contributors, and expecting future platform changes to require more upgrades.

Takeaways

  • Break large upgrades into platform-specific tasks and fix one failure at a time.
  • Use React Native Upgrade Helper as a baseline, then check project-specific changes yourself.
  • Choose an upgrade target based on current needs and likely future maintenance.
  • Use an isolated branch for small experiments, then clean up the commit history.
  • Set a delivery boundary: upgrade only the dependencies that the project needs now.

Mentioned in this talk

Search inside this talk

What was claimed 7

  • role at
    Ramón Huidobro is Tech Speaker at Mozilla
    “I've also been a Mozilla Tech Speaker for almost two years now”
    YouTube
    Unverified1 source· Talk
  • metric
    React Native: The app's starting version was 0.55 and the upgrade target was 0.62
    “The React Native version being used at the time ... was version 0.55.”
    YouTube
    Unverified1 source· Talk
  • uses
    Upgraded an app from React Native 0.55 to 0.62
    “I set it to 0.55.4, and then selected the version I’d like to upgrade to. I went straight to React Native 0.62.”
    YouTube
    Unverified1 source· Talk
  • feature
    React Native Upgrade Helper: Provides instructions and diffs for upgrading React Native core files between selected versions
    “It spits out a series of instructions, as well as diffs of the core files”
    YouTube
    Unverified1 source· Talk
  • feature
    React Native: React Native 0.59 adds Android 64-bit compatibility
    “Looking at React Native 59, that already solves the problem I was having with Android; it adds 64-bit compatibility.”
    YouTube
    Unverified1 source· Talk
  • feature
    React Native: React Native 0.60 introduces autolinking
    “It introduces autolinking, which is already a huge boost in productivity”
    YouTube
    Unverified1 source· Talk
  • uses
    Uses small commits on bleeding-edge branches, then squashes, rebases, or reverts them
    “I was able to make tiny, very small commits”
    YouTube
    Unverified1 source· Talk

Related talks