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 '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
repositories {
mavenCentral()
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:
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
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.
- 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
