Walk Through Example of Updating React Native for Mobile Development

To update your project from React Native 0.72.5 to 0.81.4, you should not directly "update" NativeBase. NativeBase is a UI library built on top of React Native, and your primary task is to upgrade the React Native version itself. Use the official React Native Upgrade Helper and proceed incrementally for such a significant version jump. 

Warning: Don't jump directly

Upgrading directly from 0.72.5 to 0.81.4 is not recommended. It is a very large leap and will almost certainly cause unexpected issues and breakage.

The recommended approach is to upgrade one or two minor versions at a time (e.g., from 0.72.x to 0.73.x, then to 0.74.x, and so on). This allows you to address any breaking changes in smaller, more manageable steps.

Alternatively, for a jump of this size, many developers recommend creating a new project with the target version and migrating your application code over. 

Step 1: Use the React Native Upgrade Helper

The React Native Upgrade Helper is the official tool for this process. It shows a file-by-file comparison of what has changed between any two versions. 

Go to the React Native Upgrade Helper website: https://react-native-community.github.io/upgrade-helper/.

Select 0.72.5 in the "from" version and 0.73.6 (the next minor version) in the "to" version.

Click "Show me how to upgrade" to see the list of file changes. 

Step 2: Perform the incremental upgrade

Follow these steps for each version jump (e.g., 0.72.5 to 0.73.6, then 0.73.6 to 0.74.x, etc.). 

Backup your project or commit your current code to version control.

Update dependencies in package.json: Modify your package.json to change the react-native and react versions to the new target version specified by the Upgrade Helper.

Install dependencies: Run npm install or yarn to install the updated packages.

Apply file changes: Go through the list of changes provided by the Upgrade Helper and manually apply them to your project's files. The helper shows a "diff" view, similar to a Git commit.

Address breaking changes: Review the release notes for the new version to see what has changed. For example, older versions require Node 18, but later ones might need Java 17 for Android builds.

Resolve third-party conflicts: If you encounter issues with other packages (like React Navigation or Reanimated), update them to versions compatible with the new React Native version.

Rebuild and test:

Delete the node_modules and Podfile.lock folders and clear your watchman cache.

Run npm install again.

Rebuild your native project:

For iOS: Navigate to the ios directory and run pod install.

For Android: Navigate to the android directory and run ./gradlew clean.

Run your app and test for any regressions.

Repeat: Once the new version is stable, repeat this process for the next minor version until you reach your final target of 0.81.4. 

Step 3: Check NativeBase and other libraries

After each incremental React Native upgrade, you should check for compatibility with NativeBase.

Check compatibility: Visit the NativeBase documentation to see which versions are compatible with your target React Native version.

Update NativeBase: If a new version is required, update it: npm install native-base or yarn add native-base.

Review NativeBase changelogs: Look for any breaking changes, especially for a major React Native jump. Some large updates may require rewriting components due to significant changes in the underlying UI library. 

Alternative: Create a new project

For a large upgrade, creating a new project is often the most straightforward solution, especially if you have a complex build setup.

Scaffold a new project:

sh

npx react-native@0.81.4 init MyNewProject

Add NativeBase: Install the correct version of NativeBase and its dependencies in the new project.

Migrate your code: Copy your source files (src or app folder) from the old project to the new one.

Re-add dependencies: Install your other third-party libraries one by one, checking for compatibility and addressing any issues.

Reconfigure native files: Re-apply any custom native changes you made to the iOS and Android projects in the new project's native folders.