feat: add support for TurboModule #843

tido64 · 2022-03-31T17:22:13Z

Description

Adds support for TurboModule. I'm still seeing issues with Gradle not building things in the correct order. Until a new version of Gradle is released, we will have to point people at Android NDK: ERROR:/~/android/src/main/jni/Android.mk:fb: LOCAL_SRC_FILES points to a missing file.

Resolves #836.

Blocked by

~~Autolinking support on Android: TurboModule Deep Dive reactwg/react-native-new-architecture#2 (reply in thread)~~ Implemented in feat: autolinking for the new architecture on Android react-native-community/cli#1603

Platforms affected

Android
iOS
macOS
Windows

Test plan

Use react-native 0.69: yarn set-react-version 0.69

Use @react-native-community/cli 9.0:

diff --git a/package.json b/package.json
index c30ed18..792e470 100644
--- a/package.json
+++ b/package.json
@@ -138,6 +138,9 @@
   "resolutions": {
     "@commitlint/is-ignored/semver": "^7.3.5",
     "@microsoft/eslint-plugin-sdl/eslint-plugin-react": "^7.26.0",
+    "@react-native-community/cli": "^9.0.0-0",
+    "@react-native-community/cli-platform-android": "^9.0.0-0",
+    "@react-native-community/cli-platform-ios": "^9.0.0-0",
     "@react-native-community/cli-tools/shell-quote": "^1.7.3",
     "core-js-compat/semver": "^7.3.5",
     "npm/chalk": "^4.1.0"

Re-run yarn after making the changes above

Android:

Enable TurboModule:

diff --git a/example/android/gradle.properties b/example/android/gradle.properties
index 3cd810b..b19e049 100644
--- a/example/android/gradle.properties
+++ b/example/android/gradle.properties
@@ -36,7 +36,7 @@ android.enableJetifier=true

 # Enable new architecture, i.e. Fabric + TurboModule - implies USE_FABRIC=1.
 # Note that this is incompatible with web debugging.
-#newArchEnabled=true
+newArchEnabled=true

 # Uncomment the line below if building react-native from source
 #ANDROID_NDK_VERSION=21.4.7075529

Build: yarn android

iOS:
- Install Pods: RCT_NEW_ARCH_ENABLED=1 pod install
- Build: yarn ios

scripts/configure.js

kelset · 2022-07-05T11:39:45Z

couple of quick things about the test steps:

you forgot to mention that after the changes in the package.json in the example folder, one has to re-run yarn ;)
also, technically, you can also turn on the modules in the Podfile via the flag turbomodule_enabled 🤓

Now, talking about testing the example app:

on Android, for some reason the App(Modal) doesn't work - I don't know if that's expected
also, despite me only turning on the TM flag, the screen says I've also enabled Fabric, see screenshot:

it took 28 mins to build on my maxed intel Macbook pro 16', but I assume that's expected because Hermes needs to be built from source
on iOS, everything seems to work fine (both normal way and modal way) but again it tells me I've enabled Fabric:

tido64 · 2022-07-05T13:51:47Z

you forgot to mention that after the changes in the package.json in the example folder, one has to re-run yarn ;)

Oops… description should be updated now.

also, technically, you can also turn on the modules in the Podfile via the flag turbomodule_enabled 🤓

Correct. I wanted a focus on the flags that are the same in core. Less to teach.

on Android, for some reason the App(Modal) doesn't work - I don't know if that's expected

This shouldn't be broken. I'll have a look.

also, despite me only turning on the TM flag, the screen says I've also enabled Fabric, see screenshot:

This is expected. TM depends on code that is under the Fabric flag.

it took 28 mins to build on my maxed intel Macbook pro 16', but I assume that's expected because Hermes needs to be built from source

Unfortunately, yes.

on iOS, everything seems to work fine (both normal way and modal way) but again it tells me I've enabled Fabric:

This is expected. TM depends on code that is under the Fabric flag.

tido64 · 2022-07-05T14:38:16Z

on Android, for some reason the App(Modal) doesn't work - I don't know if that's expected

This shouldn't be broken. I'll have a look.

Did you test on a device or emulator? Which version of Android are you running? It works for me here:

This is what I'm running:

kelset · 2022-07-05T15:21:13Z

Tested on emulator, this device:

I can try to update Android Studio and clean it all up, and do from scratch then report back

Note that this requires some adjustments to your `build.gradle`: ```diff diff --git a/example/android/build.gradle b/example/android/build.gradle index 0c6c69d..2ed70f1 100644 --- a/example/android/build.gradle +++ b/example/android/build.gradle @@ -1,6 +1,7 @@ buildscript { def androidTestAppDir = "../node_modules/react-native-test-app/android" apply(from: "${androidTestAppDir}/dependencies.gradle") + apply(from: "${androidTestAppDir}/test-app-util.gradle") repositories { mavenCentral() @@ -8,8 +9,12 @@ buildscript { } dependencies { - classpath "com.android.tools.build:gradle:$androidPluginVersion" - classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion" + classpath("com.android.tools.build:gradle:${androidPluginVersion}") + + if (isNewArchitectureEnabled(project)) { + classpath("com.facebook.react:react-native-gradle-plugin") + classpath("de.undercouch:gradle-download-task:5.1.0") + } } } ``` If you're seeing build issues with `newArchEnabled=true`, please see https://github.com/microsoft/react-native-test-app/wiki/Troubleshooting.

kelset · 2022-07-22T14:51:50Z

Just tested the branch once again - everything is working as intended:

example/android/gradle.properties

ios/use_react_native-0.68.rb

kelset

### Platforms Impacted - [x] iOS - [x] macOS - [ ] win32 (Office) - [ ] windows - [x] android ### Description of changes Let's bump us to the latest release of react-native-test-app, which gets us a lot of goodies :) 1) Turbomodule support. microsoft/react-native-test-app#843 2) App icon support. microsoft/react-native-test-app#1022 3) iPad Slide Over window / multi-tasking support. microsoft/react-native-test-app#1032 We also got a designer to make us icons =). I chose the blue set over the pink set. ### Verification I didn't test building with turbo modules, we don't quite support this yet anyway. Verified that SlideOver windows work on iOS. Some additional JS fixes are needed to make layout act properly though. Android icon: ![Screen Shot 2022-08-03 at 11 54 53 AM](https://user-images.githubusercontent.com/6722175/182688353-ecc6d603-88de-42f6-8c4e-8141aecd0dc3.png) macOS icon (dock): ![image](https://user-images.githubusercontent.com/6722175/182688427-30fcd29a-2fe4-48b8-a720-96202a2e36e2.png) iOS icon ![Screen Shot 2022-08-03 at 10 45 12 AM](https://user-images.githubusercontent.com/6722175/182688298-3925cd20-eb9b-4d64-adb6-7dd74662b84d.png) ### Pull request checklist This PR has considered (when applicable): - [ ] Automated Tests - [ ] Documentation and examples - [ ] Keyboard Accessibility - [ ] Voiceover - [ ] Internationalization and Right-to-left Layouts

github-actions bot added platform: Android This affects Android platform: iOS This affects iOS platform: macOS This affects macOS labels Mar 31, 2022

tido64 force-pushed the tido/enable-turbomodule branch 10 times, most recently from f575155 to 1ee3eac Compare May 10, 2022 10:30

tido64 force-pushed the tido/enable-turbomodule branch 17 times, most recently from 53bd827 to 6ab1ccf Compare May 20, 2022 20:33

tido64 force-pushed the tido/enable-turbomodule branch from 133eada to 033e6fe Compare June 14, 2022 12:14

github-actions bot reviewed Jun 14, 2022

View reviewed changes

scripts/configure.js Outdated Show resolved Hide resolved

tido64 force-pushed the tido/enable-turbomodule branch from 033e6fe to 0ab7370 Compare June 14, 2022 12:52

tido64 force-pushed the tido/enable-turbomodule branch 2 times, most recently from eeef457 to 2e7ee77 Compare June 30, 2022 08:33

tido64 marked this pull request as ready for review June 30, 2022 08:34

tido64 requested review from arazabishov and sweggersen as code owners June 30, 2022 08:34

tido64 requested a review from kelset June 30, 2022 08:34

tido64 force-pushed the tido/enable-turbomodule branch from 2e7ee77 to 6dbe56b Compare July 8, 2022 09:27

tido64 mentioned this pull request Jul 15, 2022

chore(deps): update dependency com.android.tools.build:gradle to v7.2.1 - autoclosed #981

Closed

1 task

tido64 force-pushed the tido/enable-turbomodule branch from 6dbe56b to ce4d31d Compare July 15, 2022 19:21

tido64 mentioned this pull request Jul 17, 2022

fix: declare support for react-native 0.70 #997

Merged

17 tasks

tido64 force-pushed the tido/enable-turbomodule branch from da7c91c to 394fea7 Compare July 20, 2022 10:25

accommodate for breaking changes in 0.70

4f19883

tido64 force-pushed the tido/enable-turbomodule branch from 394fea7 to 4f19883 Compare July 20, 2022 12:08

M1 support

5558313

kelset reviewed Jul 22, 2022

View reviewed changes

example/android/gradle.properties Show resolved Hide resolved

kelset reviewed Jul 22, 2022

View reviewed changes

ios/use_react_native-0.68.rb Show resolved Hide resolved

kelset approved these changes Jul 22, 2022

View reviewed changes

tido64 merged commit 76eddc0 into trunk Jul 22, 2022

tido64 deleted the tido/enable-turbomodule branch July 22, 2022 18:09

Saadnajmi mentioned this pull request Aug 3, 2022

Fluent Tester: App Icons + iPad multitasking support + app icons microsoft/fluentui-react-native#1952

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add support for TurboModule #843

feat: add support for TurboModule #843

Uh oh!

tido64 commented Mar 31, 2022 •

edited

Loading

Uh oh!

Uh oh!

kelset commented Jul 5, 2022

Uh oh!

tido64 commented Jul 5, 2022

Uh oh!

tido64 commented Jul 5, 2022

Uh oh!

kelset commented Jul 5, 2022

Uh oh!

kelset commented Jul 22, 2022

Uh oh!

Uh oh!

Uh oh!

kelset left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: add support for TurboModule #843

feat: add support for TurboModule #843

Uh oh!

Conversation

tido64 commented Mar 31, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Blocked by

Platforms affected

Test plan

Uh oh!

Uh oh!

kelset commented Jul 5, 2022

Uh oh!

tido64 commented Jul 5, 2022

Uh oh!

tido64 commented Jul 5, 2022

Uh oh!

kelset commented Jul 5, 2022

Uh oh!

kelset commented Jul 22, 2022

Uh oh!

Uh oh!

Uh oh!

kelset left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tido64 commented Mar 31, 2022 •

edited

Loading