Why upgrading React Native is crucial?

To underscore the importance of upgrading React Native, consider this significant change: In March 2023, Google Play introduced revised criteria for Android SDK API levels. From August 31, any new app or update submitted to the Play Store must adhere to these new requirements. It's crucial to note that these updates happen annually, and the target API level may increase with each year. Currently, all apps intended for the Google Play Store must now comply with API target level 33.

However, upgrading React Native isn't just about compliance, it's also about ensuring your app remains accessible to users. Remember that if your React Native version is below 0.69+, your app will be available only on Android OS devices, the same or lower than your app's target API level. You won't be able to publish updates unless you first upgrade your React Native version to 0.71 or higher. On the other hand, if you're using React Native 0.70+, your app won't be visible to the latest Android phones running Android 13 and above but will still work on other devices for the next year.

Worth checking: Target API level requirements for Google Play apps

Understanding Expo Prebuild

Before we delve into the details of upgrading React Native in an Expo app, let's first understand a basic idea: What exactly is Expo Prebuild?

In Expo, Prebuild is an efficient way to automatically set up and configure your mobile app's iOS and Android elements. Usually, mobile app development involves modification of different configuration files for each platform, tweaking native code, adjusting build settings, and understanding unique platform details.

To initiate the Prebuild process, you can kickstart it by running the following command: npx expo prebuild. This command starts the creation of the necessary Android and iOS directories required to execute your React code. However, if you manually edit these directories, exercise caution, as your changes might lead to data loss when using the npx expo prebuild --clean command.

For a consistent and safe workflow, Expo CLI highly recommends the use of config plugins. These plugins are functions that can customize native projects during the Prebuild phase. It's essential to note that using Prebuild is optional, and you can discontinue its use whenever you prefer.

How to upgrade Expo SDK?

Upgrading the Expo SDK to at least version 48 is imperative to meet Google's requirements for this year. It's important to note that the Expo SDK version directly correlates with the target API level. The Expo SDK version corresponds to the Android API level that it supports. To find the required Expo version number for a specific target API level, refer to the official documentation or use their guidelines for matching Expo versions to Android API levels. It will ensure your project aligns with Google's expectations. Here's a step-by-step guide:

  1. Update EAS CLI (if using Expo Application Services CLI): Ensure you have the latest version installed globally on your system by running the following command: npm install -g eas-cli.
  2. Install Expo SDK: Upgrade the Expo package in your project to the new SDK version (at least version 48 to meet Google's conditions). Depending on your package manager preference, you can do this using npm or yarn. Use the following command: npm install expo@^48.0.0.
  3. Upgrade all dependencies: Guarantee that all your project's dependencies align with the new Expo SDK version requirements by using the following command: npx expo install --fix. This command automatically updates and resolves dependencies to match the SDK requirements.

TIP: To ensure the smoothest transition, use the following command to check for possible issues in your project dependencies: npx expo-doctor@latest

Also read: Expo SDK 48 Release

The impact of new React Native architecture

In 2023, React Native made major updates to improve the mobile app development process. They introduced Hermes as the main JavaScript engine, making apps start faster and use less memory. The C++ written TurboModules sped up module communication, leading to quicker UI responses. Plus, the Fabric engine efficiently manages UI updates, improving app smoothness and reducing lag.

When upgrading your Expo SDK, integrating this new architecture becomes essential. These enhancements elevate the framework's capabilities and ensure that your apps meet evolving performance and user experience standards.

How do you make your code compatible with new architecture?

This tool streamlines the challenging process of updating React Native projects. With React Native frequently releasing updates, developers can face compatibility problems and lengthy manual fixes. The Upgrade Helper helps by automatically spotting outdated components and dependencies and recommending code changes. It ensures a smooth upgrade to the newest React Native version. Using this tool saves time and minimizes potential bugs or issues during the update.

Key Features of React Native Upgrade Helper:

  • Inline comments - strategically placed comments offer insights into specific files, facilitating better comprehension of changes.
  • Resourceful links - the tool provides hyperlinks with detailed explanations for each upgrade version, enhancing your understanding of the changes.
  • Progress tracking - a "done" button next to each file helps you organize your upgrade process effectively.
  • Binary file downloads - a dedicated download button simplifies the integration of essential resources.
You may also like: Pavlos Vinieratos - Let's upgrade our React Native project

Upgrade guidance for expo prebuild projects

It's important to know that React Native Upgrade Helper mainly serves projects with the Bare workflow. If you're using the Expo Prebuild system, some extra steps are needed for a smooth upgrade. This article aims to deeply explore these crucial changes and clarify how they make the upgrade process smoother for projects using Expo Prebuild.

Below, you can explore correctly configured Expo Prebuild project files presented in the new architecture, categorized by platform.

iOS platform:

File: AppDelegate.h

File: AppDelegate.mm

File: Podfile

‍Android platform:

File: build.gradle

File: settings.gradle

File: MainActivity.java

Summary

In summary, updating React Native in Expo apps helps you meet platform standards and keeps your app relevant for longer. Tools like React Native Upgrade Helper and knowledge of Expo Prebuild make this transition smoother, leading to better app development and happier users.