research for enabling new architecture in react-native #18138

siddarthkay · 2023-12-11T06:36:56Z

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
Upgrade react-native-gesture-handler lib to 2.12.x
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
For Android we need to set newArchEnabled flag to true at android/gradle.properties

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

The text was updated successfully, but these errors were encountered:

siddarthkay · 2023-12-11T06:59:48Z

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 · 2023-12-11T07:11:13Z

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 · 2023-12-11T08:01:22Z

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

This PR does many things : - Upgrade `react-native ` to `0.72.5` - Upgrade `react-native-reanimated` to `3.5.4` - Upgrade `react-native-navigation` to `7.37.0` - `ndkVersion` has been bumped to `25.2.9519653` - `cmakeVersion` has been bumped to `3.22.1` - `kotlinVersion` has been bumped to `1.7.22` - `AGP` has been bumped to `7.4.2` - `Gradle` has been upgraded to `8.0.1` - Android `CompileSDK` and `TargetSDK` have been bumped to 33 - `@react-native-async-storage/async-storage` has been upgraded to `1.19.3` - `@walletconnect/client` has been nuked - some of the old `react-native-reanimated` code has been nuked - `react-native-keychain` fork has been replaced with `8.1.2` - On Android we are currently relying on `Hermes` Engine. - On iOS we are currently relying on JSC - We are not enabling new architecture for now (I have plans for that in the future) ref: #18138 IOS only PR : #16721 Android only PR : #17062 - `make run-metro` now has a target of `android` which was `clojure` earlier, this will increase the time it takes to start metro terminal but this is needed otherwise you will get a nasty error while developing for android locally.

This commit does many things : - Upgrade `react-native ` to `0.72.5` - Upgrade `react-native-reanimated` to `3.5.4` - Upgrade `react-native-navigation` to `7.37.0` - `ndkVersion` has been bumped to `25.2.9519653` - `cmakeVersion` has been bumped to `3.22.1` - `kotlinVersion` has been bumped to `1.7.22` - `AGP` has been bumped to `7.4.2` - `Gradle` has been upgraded to `8.0.1` - Android `CompileSDK` and `TargetSDK` have been bumped to 33 - `@react-native-async-storage/async-storage` has been upgraded to `1.19.3` - `@walletconnect/client` has been nuked - some of the old `react-native-reanimated` code has been nuked - `react-native-keychain` fork has been replaced with `8.1.2` - On Android we are currently relying on `Hermes` Engine. - On iOS we are currently relying on JSC - We are not enabling new architecture for now (I have plans for that in the future) ref: #18138 IOS only PR : #16721 Android only PR : #17062 - `make run-metro` now has a target of `android` which was `clojure` earlier, this will increase the time it takes to start metro terminal but this is needed otherwise you will get a nasty error while developing for android locally.

This commit does many things : - Upgrade `react-native ` to `0.72.5` - Upgrade `react-native-reanimated` to `3.5.4` - Upgrade `react-native-navigation` to `7.37.0` - `ndkVersion` has been bumped to `25.2.9519653` - `cmakeVersion` has been bumped to `3.22.1` - `kotlinVersion` has been bumped to `1.7.22` - `AGP` has been bumped to `7.4.2` - `Gradle` has been upgraded to `8.0.1` - Android `CompileSDK` and `TargetSDK` have been bumped to 33 - `@react-native-async-storage/async-storage` has been upgraded to `1.19.3` - `@walletconnect/client` has been nuked - some of the old `react-native-reanimated` code has been nuked - `react-native-keychain` fork has been replaced with `8.1.2` - On Android we are currently relying on `Hermes` Engine. - On iOS we are currently relying on `JSC` - We are not enabling new architecture for now (I have plans for that in the future) ref: #18138 IOS only PR : #16721 Android only PR : #17062 - `make run-metro` now has a target of `android` which was `clojure` earlier, this will increase the time it takes to start metro terminal but this is needed otherwise you will get a nasty error while developing for android locally.

siddarthkay · 2023-12-12T10:52:18Z

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 · 2024-03-29T07:39:17Z

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 · 2024-04-05T08:36:01Z

@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)

This commit swaps the fork of @react-native-camera-roll/camera-roll with a patch and upgrades this library to the latest version. needed for : #18138 Verify if camera album related features still work. - iOS status: ready

## Summary This commit upgrades `react-native-permissions` library to latest version 4.1.5 needed for : #18138 ## Review & Test notes Please test permissions related flows on onboarding, selecting images, notifications and any other areas you can think of. ## Platforms - iOS - Android status: ready

## Summary This commit swaps the fork of react-native-mail with a patch. needed for : #18138 ## Review & Test notes Verify if mailing logs still works. ## Platforms - iOS - Android status: ready

## Summary This commit swaps the fork of @react-native-community/blur with a patch and upgrades the library to latest version of 4.4.0 needed for : #18138 ## Review & Test notes Verify if blur stuff still works. ## Platforms - iOS - Android status: ready

## Summary This commit swaps the fork of react-native-mail with a patch. needed for : #18138 ## Review & Test notes Verify if mailing logs still works. ## Platforms - iOS - Android status: ready

## Summary This commit swaps the fork of @react-native-community/blur with a patch and upgrades the library to latest version of 4.4.0 needed for : #18138 ## Review & Test notes Verify if blur stuff still works. ## Platforms - iOS - Android status: ready

## Summary This commit upgrades `react-native-permissions` library to latest version 4.1.5 needed for : #18138 ## Review & Test notes Please test permissions related flows on onboarding, selecting images, notifications and any other areas you can think of. ## Platforms - iOS - Android status: ready

## Summary This commit swaps the fork of @react-native-community/blur with a patch and upgrades the library to latest version of 4.4.0 needed for : #18138 ## Review & Test notes Verify if blur stuff still works. ## Platforms - iOS - Android status: ready

## Summary This commit upgrades `react-native-permissions` library to latest version 4.1.5 needed for : #18138 ## Review & Test notes Please test permissions related flows on onboarding, selecting images, notifications and any other areas you can think of. ## Platforms - iOS - Android status: ready

siddarthkay · 2024-04-19T12:23:28Z

iOS Works flawlessly but Android Fails with a runtime error
AndroidBlurView is not Fabric compatible yet

## Summary This commit swaps the fork of @react-native-community/blur with a patch and upgrades the library to latest version of 4.4.0 needed for : #18138 ## Review & Test notes Verify if blur stuff still works. ## Platforms - iOS - Android status: ready

## Summary This commit upgrades `react-native-permissions` library to latest version 4.1.5 needed for : #18138 ## Review & Test notes Please test permissions related flows on onboarding, selecting images, notifications and any other areas you can think of. ## Platforms - iOS - Android status: ready

This PR enables `Fabric` and `Hermes` for `iOS` and in my initial tests the app seemed to behave well. We can't do this for Android yet because the blur view implementation is not ported to `Fabric` properly. needed for #18138 Please check builds from this PR to see if you notice any performance improvements or degradation. Please smoke test the iOS builds to see if there are any crashes. - iOS status: ready

This commit enables `Fabric` and `Hermes` for `iOS` and in my initial tests the app seemed to behave well. We can't do this for Android yet because the blur view implementation is not ported to `Fabric` properly. needed for #18138 Please check builds from this PR to see if you notice any performance improvements or degradation. Please smoke test the iOS builds to see if there are any crashes. - iOS status: ready

This commit enables `Fabric` and `Hermes` for `iOS` and in my initial tests the app seemed to behave well. We can't do this for Android yet because the blur view implementation is not ported to `Fabric` properly. needed for #18138

siddarthkay · 2024-05-14T10:44:28Z

we're not done yet

siddarthkay added E:Mobile Performance MVP feature feature requests E:Mobile React Native labels Dec 11, 2023

siddarthkay self-assigned this Dec 11, 2023

siddarthkay mentioned this issue Dec 11, 2023

PR to upgrade react-native to 0.72.5 and many other things #17241

Merged

4 tasks

siddarthkay mentioned this issue Dec 11, 2023

fix: support for new architecture on Android side status-im/react-native-camera-roll#2

Closed

This was referenced Apr 16, 2024

swap @react-native-camera-roll/camera-roll fork with patches & upgrade to 7.5.2 #19664

Merged

move blur lib fork to a patch #19681

Merged

swap react-native-mail fork with patch #19688

Merged

upgrade react-native-permissions library #19695

Merged

siddarthkay mentioned this issue Apr 20, 2024

[iOS Only] Enable new architecture for react-native #19748

Merged

siddarthkay linked a pull request Apr 20, 2024 that will close this issue

[iOS Only] Enable new architecture for react-native #19748

Merged

siddarthkay closed this as completed in #19748 Apr 30, 2024

siddarthkay reopened this May 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

research for enabling new architecture in react-native #18138

research for enabling new architecture in react-native #18138

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 12, 2023 •

edited

siddarthkay commented Mar 29, 2024

siddarthkay commented Apr 5, 2024 •

edited

siddarthkay commented Apr 19, 2024

siddarthkay commented May 14, 2024

research for enabling new architecture in react-native #18138

research for enabling new architecture in react-native #18138

Comments

siddarthkay commented Dec 11, 2023 • edited

Feature Issue

siddarthkay commented Dec 11, 2023 • edited

siddarthkay commented Dec 11, 2023 • edited

siddarthkay commented Dec 11, 2023 • edited

siddarthkay commented Dec 12, 2023 • edited

siddarthkay commented Mar 29, 2024

siddarthkay commented Apr 5, 2024 • edited

siddarthkay commented Apr 19, 2024

siddarthkay commented May 14, 2024

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 11, 2023 •

edited

siddarthkay commented Dec 12, 2023 •

edited

siddarthkay commented Apr 5, 2024 •

edited