Skip to content

Updating

Tommy Nguyen edited this page Sep 30, 2024 · 6 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@latest --requirements [email protected] --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. Rebuild your newly upgraded app and verify that everything works as expected

If you find that something is not working correctly, consider resetting RNTA to its original state with configure-test-app. 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

See Reconfiguring/Resetting RNTA for how to use this command.

Adding platforms to an existing app

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

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

See Reconfiguring/Resetting RNTA for how to use this command.

Reconfiguring/Resetting RNTA

You can reconfigure or reset your app to its original state by running configure-test-app. The command will list files that will be overwritten and you will have to confirm before any destructive changes are made.

Warning

This command should only be used if:

  1. something's not working right and you want to start over by adding back customizations one by one
  2. you want to add a new platform (see Adding platforms to an existing app)

Because this command will overwrite all customizations, including ones provided by your template, please make sure you don't have any uncommitted changes before running it. This is to ensure that you can use a diff tool to verify that the changes are correct after running the command.