Driving into the Future: Navigating the Road to React Native’s New Architecture at Cars24!

by — Sukumar Abhijeet (Software Engineer — React Native)

At Cars24, our teams operate in specialized pods catering to diverse geographical regions, each with unique in-house applications. These applications are developed using React Native, exclusively or as a blend of React Native and native technologies.

In response to the evolving landscape of React Native, particularly with the introduction of Facebook’s New Architecture, we recognize the significance of transitioning to this innovative framework. We are encountering challenges related to the bridge concept and experiencing inevitable application crashes. To address these issues, we are eager to embrace the future possibilities offered by the latest versions of React Native and leverage the advancements introduced in the New Architecture.

However, upgrading to React Native version 72 presents a formidable task. Our existing codebases are reliant on outdated packages, and they encompass a combination of numerous dependencies, many of which have undergone significant breaking changes. Navigating this intricate web of dependencies requires meticulous attention to detail to ensure a seamless and successful transition.

New Architecture ??

First of lets see what is the issue in OLD ARCHITECTURE aka THE BRIDGE ARCHITECTURE.

• It was asynchronous: one layer submitted the data to the bridge and asynchronously “waited” for the other layer to process them, even when this was not really necessary. 😴
• It was single-threaded: JS used to work on a single thread; therefore, the computation that happened in that world had to be performed on that single thread. 🧵
• It imposed extra overheads: every time one layer had to use the other one, it had to serialize some data. The other layer had to deserialize them. The format was JSON for its simplicity and human-readability, but despite being lightweight, it was a cost to pay. 😲

LEGENDARY BRIDGE !!

Soin simple terms your app will have to wait for the bridge to make the communication to happen between the JS side and Native Side.

( NEW ARC; 🌉 — — ; JSI ++ )

Wanna know the details in full, then jump over to : PORTAL || VIDEO

Let's see what this New Arc does for us!!

• Synchronous execution: it is now possible to execute synchronously those functions that should not have been asynchronous in the first place.
• Concurrency: it is possible from JavaScript to invoke functions that are executed on different threads.
• Lower overhead: The new Architecture doesn’t have to serialize/deserialize the data anymore; therefore there are no serialization taxes to pay.
• Code sharing: by introducing C++, it is now possible to abstract all the platform-agnostic code and to easily share it between the platforms.
• Type safety: to make sure that JS can properly invoke methods on C++ objects and vice-versa, a layer of code automatically generated has been added. The code is generated starting from some JS specification that must be typed through Flow or TypeScript

Check out TURBO MODULES !! — we can create our own as well.

FABRIC

Coooooooool, So what is FABRIC 😕 ?? We all have heard FABRIC is the new Architecture, but what is it actually ?

• It’s New rendering system (evolved from the legacy render system)
• It can measure and render React surfaces synchronously.
  The layout was asynchronous, which led to a layout “jump” issue when embedding a React Native rendered view in a host view. (Legacy Render System)
• Multi-priority and synchronous events, the renderer can prioritize certain user interactions to ensure they are handled promptly
• Easier to implement server-side rendering for React Native. (SSR)
• Supports React 18.
• Integrated React-Suspense, which allows for a more intuitive design of data fetching in React apps.

JSI

LETS CODE!!🧑‍💻

• Take the help of RN-UPGRADE-HELPER.
  You can manually see and change the differences; HECTIC WORK !!
• You can Ask Satya Nadella for help. no kidding 😂,
  MICROSOFT: RNX-KIT — this will make your life a lot more smooth.
• Automates your dependencies version bumps and finds the most compatible versions as per your package json. (MUST TRY) — It's super cool
• You can fix your existing dependencies with this

Some Cool Scripts to add to your package json.

"check-dependencies": "yarn rnx-align-deps - requirements react-native@0.72.3", : this will check your packages wrt 72.3 version of RN and shows you a list of packages that needs attention.
"fix-dependencies": "rnx-align-deps --requirements react-native@0.72.3 --write", : this will auto write the compatible dependancies to your package json.
"check-rn-compatible": "yarn check-dependencies && yarn fix-dependencies"

PACKAGES / DEPENDANCIES: EASTER EGGS

• @react-native-community: some packages are removed from their repo. Need to update them like @react-native-clipboard/clipboard; check as per packages used in your pod.
• You can upgrade by enabling the Architecture or by disabling the Architecture (more info at the bottom)
  The major difference is the packages are different WRT enabled or disabled.
• react-native-fast-image: this will simply work if the architecture is disabled. But have to use https://github.com/numandev1/react-native-fast-image#feat/fabric-wolewicki — to use the new architecture. The current package is yet to support the fabric render.
• react-native-radial-gradient: this doesn’t support fabric yet and has no alternatives yet.
• react-native-linear-gradient@next: use this pre-release, which supports fabric for linear gradient. GIT_ISSUE
• react-native-ultimate-config: this has a build IOS_ISSUE. , need to wait for it.
• smartlook-react-native-wrapper has to be replaced with react-native-smartlook-analytics for using Fabric.
• react-native-video: not supported yet.
• @react-native/metro-config: this has to be used to configure the metro. please check the config file of the metro as well; there are changes in usage, and some packages might get affected as well, like
  react-native-svg, react-native-svg-transformer.
• rnx-kit: if you are adding this, then please add the capabilities as well; for better understanding, please read through RNX-KIT.

Should start / plan moving the reanimated to at least v2+ versions.

The lower versions might not support the new architecture support; hence, it will be tough to move forward in the future.

MANDATORY CHANGES WE DID!

• IOS platform support needs a minimum of 13.
• If you are upgrading from a lower navigation version to 6 or above, look for Navigation.stack ScreenOptions changes.
• Gradle needs to be upgraded.
• Compile and target SDK versions are minimum set to 33.
• Adding namespace to build.gradle
• Android needs to update the entry point in the MainActivity
  DefaultNewArchitectureEntryPoint.getFabricEnabled());

ACTIVATE THE NEW ARC !!

• Android: newArchEnabled=true (in gradle.properties)
• iOS:

"new-arc:pods": "cd ios && RCT_NEW_ARCH_ENABLED=1 pod install", - ENABLE
"new-arc:pods": "cd ios && RCT_NEW_ARCH_ENABLED=0 pod install", - DISABLE

Build Issues

• Flipper: Undefined symbol: OBJC_CLASS$_FlipperClient — GIT_ISSUE
  Solution downgrade flipper to 0.163.0.
• BVLinearGradient is not found in case you are using a pre-release version.
  I'm pretty sure you have messed up your pods. (reinstall node_modules and pods)

Thanks for reading through. 🫂 Appreciate your time for this. Comments are most welcome!!