# Migrating to Reactnative version 0.69 (part 1) 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](https://gradle.org/) ``` 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](https://reactnative.dev/docs/new-architecture-app-intro#android-specifics), The `--distribution-type=all` tag is in difference with `--distribution-type=bin` tag on [gradle official docs](https://gradle.org/install/) 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 'https://jcenter.bintray.com/com/google/crypto/tink/tink/1.3.0-rc2/tink-1.3.0-rc2.jar'. > 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](https://stackoverflow.com/questions/69205327/could-not-resolve-com-google-guavaguava30-1-jre-gradle-project-sync-failed) ``` 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) ### https://github.com/invertase/react-native-gradle-plugin Can look into [this to confirm](https://reactnative.dev/docs/hermes#confirming-hermes-is-in-use) # 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](https://github.com/facebook/react-native/blob/main/ReactAndroid) * 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-renderer]( )to 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](https://reactjs.org/docs/test-renderer.html)) * [React Query for React Native](https://react-query-v3.tanstack.com/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"](https://www.npmjs.com/package/@react-native-async-storage/async-storage) 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](https://www.npmjs.com/package/@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](https://www.npmjs.com/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](https://www.npmjs.com/package/@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](https://www.npmjs.com/package/react-native-svg) which was to be updated from 12.1.1 to 12.4.0 but another package [react-native-svg-charts](https://www.npmjs.com/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