UPDATING YOUR REACT NATIVE APP TO A NEW MAJOR VERSION

Don’t you just love making major app upgrades? Isn’t it just the easiest and most enjoyable part of your week? If you’re like most developers, the thought of updating a React Native app to a new major version probably fills you with a sense of dread. But fear not! With a structured approach, we can make this process much smoother and less intimidating. Here's a step-by-step guide to help you through it.

Step 1: Evaluate Your Upgrade Path

Before diving in, it’s crucial to evaluate the size and scope of your source code. For smaller projects, the React Native Upgrade Assistant is an excellent tool that guides you through the upgrade process. However, for larger projects, this tool can sometimes be challenging, as I’ve experienced firsthand. If your project is large or complex, the manual approach outlined below might save you some headaches.

Step 2: Create a Brand New React Native App

Start by creating a new React Native project. This clean slate ensures you are working with the latest version of React Native. Use the following command to create a new app:

Step 2: Create a Brand New React Native App

Start by creating a new React Native project. This clean slate ensures you are working with the latest version of React Native. Use the following command to create a new app:

npx react-native init NewApp

Step 3: Install Updated Dependencies

In your new project, install all the necessary dependencies that your old project used. Make sure to install the latest versions to ensure compatibility and take advantage of new features and fixes. For example:

Using Yarn:

Using npm:

Step 4: Migrate Source Files Gradually

Start migrating your source files from the old project to the new one. Begin with the main app entry component, as this is the core of your application and ensures that the basic structure is in place. Then, proceed gradually, ensuring that each file or component works correctly before moving on to the next. This approach helps in isolating and fixing issues more efficiently.

Step 5: Replace Outdated Dependencies

Identify and replace any outdated dependencies that may not be compatible with the new version of React Native. Look for updated versions or alternative libraries that offer the same functionality.

Using Yarn:

Using npm:

Step 6: Ensure Code/Screens Function as Expected

After migrating the files, test each screen and component to ensure they function as expected. This is crucial to maintain the app’s functionality and user experience.

Step 7: Get All Tests to Pass

Run your test suite to ensure that all tests pass. This step is essential to verify that the migration did not introduce any bugs or regressions.

1. Dependency Conflicts: Sometimes, updated dependencies may conflict with each other or with the new version of React Native.

2. UI/Layout Changes: The new React Native version might handle certain styles or layout properties differently. For example, flexbox behavior might change subtly, causing layout shifts. In one project, I had to re-adjust several components' flex properties to restore the intended layout.

3. Deprecated APIs: New major versions often deprecate older APIs, leading to errors if those APIs are still in use. A typical example is the removal of certain lifecycle methods in favor of hooks. Migrating from componentWillMount to useEffect can be tricky and requires careful handling to avoid introducing new bugs.

4. Build Errors: Upgrading can also lead to build issues, especially with native modules. For example, I had a build fail due to a mismatch in Gradle versions required by a new React Native version and an older third-party library. Resolving such issues often involves updating the build configuration or finding newer library versions.

Pretty simple right?

There are many tools nowadays to make your upgrade successful. However, you still might run into some issues or questions. That’s where we come in. Have a problem you’ve been wracking your brain about? We love a good brain buster. Reach out to us here.

This article was written by Ehren Fox, Software Engineer