research for enabling new architecture in react-native

[siddarthkay]

Feature Issue

This issue will contain research for enabling new architecture in react-native.

• Implement a mechanism to use patch files -> apply patches with patch files #19451
• Upgrade react-native-camera-roll lib to 7.2.x & move code in fork to a patch. -> swap @react-native-camera-roll/camera-roll fork with patches & upgrade to 7.5.2 #19664
• Upgrade react-native-permissions lib to 4.x -> upgrade react-native-permissions library #19695
• iOS still runs on JSC we need to enable Hermes there first. -> [iOS Only] Enable new architecture for react-native #19748
• For iOS we need to do prepend RCT_NEW_ARCH_ENABLED=1 flag along with pod install to enable new architecture. We run pod install during our build process here : nix/mobile/ios/shells/cocoapods.nix -> [iOS Only] Enable new architecture for react-native #19748
• Upgrade react-native-linear-gradient lib to 3.0.0-alpha.1 -> deps: bump react-native-linear-gradient library #20329
• For Android we need to set newArchEnabled flag to true at android/gradle.properties-> enable new architecture for android PR,Release builds only #20950

Libraries that support new architecture and WIP : reactwg/react-native-new-architecture#6 (comment)

[siddarthkay]

When we enable new architecture for iOS the first thing that breaks is the react-native-permissions library :

[React-RCTFabric] Building library libReact-RCTFabric.a
⚠️  /Users/siddarthkumar/code/experiments/status-mobile/ios/Pods/Pods.xcodeproj: The iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 11.0, but the range of supported deployment target versions is 12.0 to 17.0.99. (in target 'RNPermissions' from project 'Pods')
WriteAuxiliaryFile /Users/siddarthkumar/Library/Developer/Xcode/DerivedData/StatusIm-fxiitjbbybrcsqcxqartjfyvqxdo/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RNPermissions.build/RNPermissions-project-headers.hmap (in target 'RNPermissions' from project 'Pods')
    cd /Users/siddarthkumar/code/experiments/status-mobile/ios/Pods
[RNPermissions] Compiling RNPermissions-dummy.m
[RNPermissions] Compiling RNPermissionsModule.mm
❌ /Users/siddarthkumar/code/experiments/status-mobile/ios/Pods/Headers/Public/RCTTypeSafety/RCTTypeSafety/RCTConvertHelpers.h:46:53: 'value' is unavailable: introduced in iOS 12.0
  return vec.has_value() ? RCTConvertVecToArray(vec.value(), convertor) : nil;
                                                    ^
[RNPermissions] Compiling RNPermissionsHelper.m
[RNPermissions] Compiling RNPermissionsModule.mm
❌ /Users/siddarthkumar/code/experiments/status-mobile/ios/Pods/Headers/Public/RCTTypeSafety/RCTTypeSafety/RCTConvertHelpers.h:46:53: 'value' is unavailable: introduced in iOS 12.0
  return vec.has_value() ? RCTConvertVecToArray(vec.value(), convertor) : nil;
                                                    ^
[RNPermissions] Compiling RNPermissionsHelper.m

seems like https://github.com/zoontek/react-native-permissions/releases/tag/4.0.0 release has a fix for this.

[siddarthkay]

When we enable new architecture for Android the first thing that breaks is the react-native-gesture-handler library :

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/siddarthkumar/code/experiments/status-mobile/node_modules/react-native-gesture-handler/android/build.gradle' line: 197

* What went wrong:
A problem occurred evaluating project ':react-native-gesture-handler'.
> Project with path ':ReactAndroid' could not be found in project ':react-native-gesture-handler'.

* 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 42s
error Failed to install the app.
make: *** [run-android] Error 1

seems like https://github.com/software-mansion/react-native-gesture-handler/releases/tag/2.12.0 has support for new architecture.

[siddarthkay]

update : react-native-gesture-handler error went away after upgrading that library to 2.12.0

The next thing to break is react-native-camera-roll
with the following message

> Task :react-native-camera-kit:compileDebugKotlin
'compileDebugJavaWithJavac' task (current target is 11) and 'compileDebugKotlin' task (current target is 1.8) jvm target compatibility should be set to the same Java version.

> Task :react-native-camera-roll_camera-roll:compileDebugJavaWithJavac FAILED

and

Note: Recompile with -Xlint:deprecation for details.
/Users/siddarthkumar/code/experiments/status-mobile/node_modules/@react-native-camera-roll/camera-roll/android/src/main/java/com/reactnativecommunity/cameraroll/CameraRollModule.java:67: error: CameraRollModule is not abstract and does not override abstract method getPhotoThumbnail(String,ReadableMap,Promise) in NativeCameraRollModuleSpec
public class CameraRollModule extends NativeCameraRollModuleSpec {
       ^
Note: /Users/siddarthkumar/code/experiments/status-mobile/node_modules/@react-native-camera-roll/camera-roll/android/src/main/java/com/reactnativecommunity/cameraroll/CameraRollModule.java uses or overrides a deprecated API.
Note: Recompile with -Xlint:deprecation for details.
Note: /Users/siddarthkumar/code/experiments/status-mobile/node_modules/@react-native-camera-roll/camera-roll/android/src/main/java/com/reactnativecommunity/cameraroll/CameraRollPackage.java uses unchecked or unsafe operations.
Note: Recompile with -Xlint:unchecked for details.
1 error

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':react-native-camera-roll_camera-roll:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* 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 1m 26s
error Failed to install the app.
info Run CLI with --verbose flag for more details.
make: *** [run-android] Error 1

[siddarthkay]

If I just remove the fork of react-native-camera-roll and use the library's latest version 7.2.0 I get the builds to work on android, but the onboarding screens crash within a few seconds with this message :

Fatal signal 6 (SIGABRT), code -1 (SI_QUEUE) in tid 9378 (.ethereum.debug), pid 9378 (.ethereum.debug)
Abort message: '/Users/siddarthkumar/code/experiments/status-mobile/node_modules/
react-native-reanimated/Common/cpp/NativeModules/NativeReanimatedModule.cpp:539: 
function operator(): assertion failed (family.getSurfaceId() == surfaceId_)'

[siddarthkay]

Now that react-native upgrade is merged -> #18563

Resuming work on this and I think its better at this point to first fix how we apply patches to status-mobile.

Due to the limitations of patch phase we mostly relied on making forks of libraries and these forks are often outdated.
If we move to a mechanism of applying patches we could then perform library upgrades with ease and it would be neater too.

We should also begin research into effort it would take to migrate native modules to JSI.

[siddarthkay]

@BalogunofAfrica suggested we use this npx package -> npx new-arch to keep track of what libraries support new architecture and below were the results.

This forms a good checklist for us

Scanned packages:

🔴 react-native-config: you have v1.5.0 – tested, may not work

❔ react-native-image-resizer: 1.2.3 – not tested

⬆️  @react-native-community/blur – update at least to 4.4.0 (currently 4.3.3)

⬆️  @react-native-async-storage/async-storage – update at least to 1.22.3 (currently 1.19.3)

❔ @react-native-camera-roll/camera-roll: 5.10.0 – not tested

🔴 @react-native-clipboard/clipboard: you have v1.13.2 – tested, may not work
     🔄 expo-clipboard - recommended alternative

❔ @react-native-community/audio-toolkit: 2.0.3 – not tested

🔴 @react-native-community/masked-view: you have v0.1.9 – tested, may not work
     🔄 @react-native-masked-view/masked-view - recommended alternative

⬆️  @react-native-community/netinfo – update at least to 11.3.1 (currently 4.7.0)

❔ @react-native-community/push-notification-ios: 1.4.1 – not tested

🔴 @react-native-community/slider: you have v3.0.0 – tested on RN0.74.0-nightly-20240123-cbd818dad, may not work

❔ react-native-background-timer: 2.2.0 – not tested

❔ react-native-biometrics: 3.0.1 – not tested

⬆️  react-native-blob-util – update at least to 0.19.6 (currently 0.13.18)

❔ react-native-camera-kit: 14.0.0-beta13 – not tested

❔ react-native-dialogs: 1.1.2 – not tested

🔴 react-native-fast-image: you have v8.5.11 – tested, may not work
     🔄 expo-image - recommended alternative
     😴 PR open / waiting for response from maintainer

🔴 react-native-fs: you have v2.16.6 – tested, may not work
     🔄 react-native-fs by @birdofpreyru or expo-file-system - recommended alternative

⬆️  react-native-gesture-handler – update at least to 2.16.0-rc.0 (currently 2.14.1)

❔ react-native-hole-view: 3.0.0-alpha4 – not tested

🔴 react-native-image-crop-picker: you have v0.40.0 – tested, may not work
     🔄 expo-image-picker - recommended alternative
     😴 PR open / contacted

⬆️  react-native-keychain – update at least to 8.2.0 (currently 8.1.2)

⬆️  react-native-linear-gradient – update at least to 2.8.3 (currently 2.8.0)

❔ react-native-lottie-splash-screen: 1.1.2 – not tested

❔ react-native-mail: 6.1.1 – not tested

❔ react-native-navigation: 7.38.3 – not tested

❔ react-native-orientation-locker: 1.5.0 – not tested

⬆️  react-native-permissions – update at least to 4.1.4 (currently 3.8.0)

🔴 react-native-reanimated: you have v3.6.1 – tested on RN0.74.0-nightly-20240123-cbd818dad, may not work
     ⏳ Ready, pending release

❔ react-native-shake: 3.4.0 – not tested

🟢 react-native-share: 10.0.2 – tested successfully on RN0.74.0-rc.3

❔ react-native-static-safe-area-insets: 2.2.0 – not tested

⬆️  react-native-svg – update at least to 15.2.0-rc.0 (currently 13.10.0)

❔ react-native-transparent-video: 0.1.0 – not tested

⬆️  react-native-webview – update at least to 13.8.4 (currently 13.6.3)