Hello all !, React Native has rollout the new architecture as default from version 0.68. And the following path of the react native community will be focused on the new architecture, the debugging support, library supports, etc. This has been another reason to migrate to new architecture, ofcourse the JSI based architecture (new architecture) has many advantages over the bridge based architecture.

Migrating a large codebase is an opportunity to learn about a lot of useful libraries and even refreshing the fundamentals of operation once again.

So, the migration is happening all over the globe, you know, to the new architecture. We at my internship, were also inclined to migrate. And I, hereby wanted to note the migration journey for the community.

Build Fails

Build failed for the

Task :app:checkDebugAarMetadata FAILED ``` Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0. updated the compiledSdkVersion and targetSdkVersion to 31 and also updated API version of virtual device to 31.

React native adoption to JSI brought the C++/ Java interface close to javascript UI developer. Going to directory android/ app /build.gradle . Seeing the flag enableHermes = false as a default setting, it dawned on me to update the flag enableHermes: true // clean and rebuild if changing

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-screens:compileDebugKotlin'.
> Compilation error. See log for more details

Solution

Installing Gradle on windows machine with manual latest version released on July 14, 2022

Welcome to Gradle 7.5!

Here are the highlights of this release:
 - Support for Java 18
 - Support for building with Groovy 4
 - Much more responsive continuous builds
 - Improved diagnostics for dependency resolution

Following the official react native docs, The --distribution-type=all tag is in difference with --distribution-type=bin tag on gradle official docs for installation.

*What Went wrong

Could not resolve all files for configuration ':classpath'. Could not download tink-1.3.0-rc2.jar (com.google.crypto.tink:tink:1.3.0-rc2) Could not get resource 'jcenter.bintray.com/com/google/crypto/tink/... java.io.IOException: Data error (cyclic redundancy check)

BUILD FAILED in 12s

    at makeError (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:174:9)
    at E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
 at async Command.handleAction (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli\build\index.js:192:9)

Solution: Added mavenlocal in the top-level build.gradle file ref

 repositories {
        mavenCentral() //added this line to solve classPath bug 
        google()
        jcenter()
    }

But this lead to another bug

* What went wrong:
A problem occurred configuring root project 'xyz.
> Failed to create MD5 hash for file content.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 14s

    at makeError (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:174:9)
    at E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\execa\index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
    at async Command.handleAction (E:\Work\april 10\pb_userModule\reactnative_ui\node_modules\@react-native-community\cli\build\index.js:192:9)
info Run CLI with --verbose flag for more details.

Solution: I uninstalled reactnative cli package which was installed globally( no idea about its impact)

github.com/invertase/react-native-gradle-pl..

Can look into this to confirm

With respect to Android

• Installed Codegen with yarn add --dev react-native-codegen

"The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets

• and bundleReleaseJsAndAssets" This react.gradle file is replaced by the react-native-gradle-plugin

* Added `react-native-gradle-plugin' with `yarn add --dev react-native-gradle-plugin`
Updated the setting.gradle file with

includeBuild('../node_modules/react-native-gradle-plugin')

include(":ReactAndroid") project(":ReactAndroid").projectDir = file('../node_modules/react-native/ReactAndroid')

This [ReactAndroid](https://github.com/facebook/react-native/blob/main/ReactAndroid/DevExperience.md) project is the new build of reactnative for android, it uses react-native-gradle-plugin for all the java and kotlin logic that lived inside the react.gradle This helps React Native to build and compile native code/ C++ in the CMake.Android.mk files

* Added ```     // Add those lines
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:4.1.2")

in the android/build.gradle directory in dependencies obejct to provide the link to reactnative -gradle-plugin so that it can use it during build process.

• Added apply plugin: "com.facebook.react" // Add those lines as well react { reactRoot = rootProject.file("../node_modules/react-native/") codegenDir = rootProject.file("../node_modules/react-native-codegen/") } int he module level build.gradle file and Finally added implementation project(":ReactAndroid") under dependencies so that react-native uses source code from the ReactAndroid project. Read here

• Install the new Gradle plugin for new Architecture

Ran the following command

npx react-native run-android

Packages Out of Date

• Evidently, React Native version 69 has 18.0.0 as mininmum version of react. The react 18.0.0 version has introduced many revolutionary changes and advanced support methods and hooks for better UI development access.

• Following react, it was obvious for react-test-rendererto break. Updating the architecture, I came to know alot about the code and portion of code I haven't worked upon.

Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or jsdom.( definition copied from docs)

• React Query for React Native is limited evolved as it is for react-web. Whatever be the reason, it broke with version 3.34.1 and now upgraded to version 3.39.2

It is a library that simplifies the way we fetch, cache and synchronize data from a server. Basic react library is insufficient when requirements like caching, retries and deduping comes into picture.

• The wonderful library react-native-async-storage/async-storage@"^1.15.11" also breaks support for the new architecture. This package has latest release [version@"1.17.7"]

• After seeing the breaking version compatibility of almost every package, I moved on to upgrade the all packages with npm update

  
  "dependencies": {
    "@azure/msal-browser": "^2.19.0",
    "@microsoft/microsoft-graph-client": "^3.0.1",
    "@react-native-async-storage/async-storage": "^1.17.7",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/netinfo": "^7.1.7",
    "@react-native-community/viewpager": "^5.0.11",
    "@react-native-firebase/app": "^14.5.1",
    "@react-native-google-signin/google-signin": "^6.0.1",
    "@react-native-picker/picker": "^2.2.0",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@twotalltotems/react-native-otp-input": "^1.3.11",
    "axios": "^0.21.4",
    "buffer": "^6.0.3",
    "d3-scale": "^4.0.2",
    "email-validator": "^2.0.4",
    "install": "^0.13.0",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "npm": "^7.24.2",
    "password-validator": "^5.2.1",
    "react": "18.0.0",
    "react-native": "0.69",
    "react-native-animatable": "^1.3.3",
    "react-native-app-auth": "^6.4.0",
    "react-native-calendars": "^1.1268.0",
    "react-native-contacts": "^7.0.2",
    "react-native-countdown-component": "^2.7.1",
    "react-native-date-picker": "^4.1.1",
    "react-native-dropdown-picker": "^5.2.3",
    "react-native-email-link": "^1.12.2",
    "react-native-geocoder": "^0.5.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-google-places-autocomplete": "^2.4.1",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-network-info": "^5.2.1",
    "react-native-numeric-input": "^1.9.0",
    "react-native-pager-view": "^5.4.9",
    "react-native-picker-scrollview": "^1.0.1",
    "react-native-popup-menu": "^0.15.11",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0",
    "react-native-select-dropdown": "^2.0.4",
  
    "react-native-svg": "^12.1.1",
    "react-native-svg-charts": "^5.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^8.1.0",
    "react-native-webview": "^11.15.0",
    "react-native-wheel-scroll-picker": "^0.2.4",
    "react-native-wheel-scrollview-picker": "^1.2.2",
    "react-query": "^3.39.2"
  },
  "devDependencies": {
    "@babel/core": "7.15.0",
    "@babel/runtime": "7.15.3",
    "@react-native-community/eslint-config": "2.0.0",
    "babel-jest": "26.6.3",
    "eslint": "7.14.0",
    "jest": "26.6.3",
    "metro-react-native-babel-preset": "0.64.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-test-renderer": "18.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
  }
  

• The command failed with error on react-native-picker/picker package

  npm ERR! Could not resolve dependency:
  npm ERR! peer react@"16 || 17" from @react-native-picker/picker@2.4.2
  

This error shows that certain packages are lacking compatibiltiy with reactnative version 0.69 .

• Package react-native-numeric-input just shown a dependency error of another package react-native-vector-icons@"^8.1.0".

• So, after updating the react-native-vector-icons to version 9.2.0 and removing the wro packages from codebase. command npm i ran without an error.

• Launching my app with usual react-native android command for starting after building. react-native-google-signin/google-signin package throws a warning for invalid configuration

  "dependency.platforms.ios.project" is not allowed.
  

  Again my package was outdated. Upgrade it to 8.0.0 version

• Found another package react-native-svg which was to be updated from 12.1.1 to 12.4.0 but another package react-native-svg-charts dependent on lower versions of svg is out of date with new version of react-native-svg. Maintainers have not released a new version from last 2 years