Skip to content

Updating

Tommy Nguyen edited this page Mar 12, 2024 · 2 revisions

One of the core features of react-native-test-app is taking away a lot of the pains related to the upgrade process. This goes both for when you need to update the version of react-native-test-app in your codebase, and when changing the React Native version of the app (up or down, we support many versions).

Here is what you need to do to update successfully and with minimum hassle for both cases:

Updating react-native in an RNTA app

Updating react-native in an RNTA based app is in most cases very simple:

  1. change the version of react-native in the app's package.json
  2. install npm dependencies:
    • Yarn: yarn install
    • npm: npm install
    • pnpm: pnpm install
  3. rebuild the app again

In most cases, this is enough to see your app working with the new version of RN. If some native-side tooling, like Gradle or CocoaPods, need to be upgraded to work against that version of React Native, you should see a descriptive error message at build time, like so:

% yarn android

Starting a Gradle Daemon (subsequent builds will be faster)
Configuration on demand is an incubating feature.

Latest Gradle 8.1.x is recommended for React Native 0.73 and newer.
> Run the following command in the 'android' folder to install a supported version:
   > ./gradlew wrapper --gradle-version=8.1.1
> If the command above fails, you can manually modify 'gradle/wrapper/gradle-wrapper.properties'.

Follow the instructions, or as per the previous section, you can run yarn configure-test-app (or equivalent, ex. npx configure-test-app) and RNTA will take care of modifying all the right files accordingly.

On top of that, in case your app has many dependencies (ex. on some other RN libraries), you might want to consider using align-deps instead of manually changing the version in the package.json (example command: npx @rnx-kit/align-deps --requirements react-native@0.73 --write), to ensure that all the dependencies are correctly set.

Updating react-native-test-app

When changing the version of RNTA in your app, there are a few easy steps:

  1. change the version in the app's package.json
  2. install npm dependencies:
    • Yarn: yarn install
    • npm: npm install
    • pnpm: pnpm install
  3. run configure-test-app:
    • Yarn: yarn configure-test-app
    • npm: npx configure-test-app
    • pnpm: pnpm configure-test-app
  4. with the help of a git diff tool, verify that all changes are correct: nothing significant or custom got overwritten, and remove any unnecessary files (ex. if you are iOS and Android only, remove any newly added references to Windows or macOS platforms).
  5. rebuild your newly upgraded app and verify that everything works as expected

What configure-test-app does is basically regenerate a new project following the template for the version of RNTA you have bumped to. If the jump is significant, we recommend that you remove as little changes as possible as we might have introduced new quality of life improvements. And because of that, there's less code you have to manually managed. In other words, if you see changes in a file but you don't remember changing anything yourself, try running the code. To better understand what this means, you can find an example of the outcome of upgrading from RNTA 2.x to 3.x in this react-native-menu PR: https://github.com/react-native-menu/menu/pull/712

Adding platforms to an existing app

You can reconfigure an existing app to add more platforms by running configure-test-app and listing all the platforms you want to support with the -p flag. For example, to add visionOS support to an app that supports Android and iOS:

  • Yarn: yarn configure-test-app -p android -p ios -p visionos
  • npm: npx configure-test-app -p android -p ios -p visionos
  • pnpm: pnpm configure-test-app -p android -p ios -p visionos

The script will warn you if the procedure will overwrite existing files. Make sure you've committed any pending changes before continuing. When you are ready, re-run with --force to proceed. Use a diff tool to review the changes and revert any customizations that have been undone.