Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add support for TurboModule #843

Merged
merged 3 commits into from
Jul 22, 2022
Merged

feat: add support for TurboModule #843

merged 3 commits into from
Jul 22, 2022

Conversation

tido64
Copy link
Member

@tido64 tido64 commented Mar 31, 2022

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

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

@github-actions github-actions bot added platform: Android This affects Android platform: iOS This affects iOS platform: macOS This affects macOS labels Mar 31, 2022
@tido64 tido64 force-pushed the tido/enable-turbomodule branch 10 times, most recently from f575155 to 1ee3eac Compare May 10, 2022 10:30
@tido64 tido64 force-pushed the tido/enable-turbomodule branch 17 times, most recently from 53bd827 to 6ab1ccf Compare May 20, 2022 20:33
@tido64 tido64 force-pushed the tido/enable-turbomodule branch from 133eada to 033e6fe Compare June 14, 2022 12:14
scripts/configure.js Outdated Show resolved Hide resolved
@tido64 tido64 force-pushed the tido/enable-turbomodule branch from 033e6fe to 0ab7370 Compare June 14, 2022 12:52
@tido64 tido64 force-pushed the tido/enable-turbomodule branch 2 times, most recently from eeef457 to 2e7ee77 Compare June 30, 2022 08:33
@tido64 tido64 marked this pull request as ready for review June 30, 2022 08:34
@tido64 tido64 requested a review from kelset June 30, 2022 08:34
@kelset
Copy link
Contributor

kelset commented Jul 5, 2022

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:

Screenshot 2022-07-05 at 12 23 56

  • 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:

Screenshot 2022-07-05 at 12 37 51

@tido64
Copy link
Member Author

tido64 commented Jul 5, 2022

  • 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
Copy link
Member Author

tido64 commented Jul 5, 2022

  • 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:

Screenshot_1657031749

This is what I'm running:

image

@kelset
Copy link
Contributor

kelset commented Jul 5, 2022

Tested on emulator, this device:
Screenshot 2022-07-05 at 16 20 22

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.
@tido64 tido64 force-pushed the tido/enable-turbomodule branch from 6dbe56b to ce4d31d Compare July 15, 2022 19:21
@tido64 tido64 force-pushed the tido/enable-turbomodule branch from da7c91c to 394fea7 Compare July 20, 2022 10:25
@tido64 tido64 force-pushed the tido/enable-turbomodule branch from 394fea7 to 4f19883 Compare July 20, 2022 12:08
@kelset
Copy link
Contributor

kelset commented Jul 22, 2022

Just tested the branch once again - everything is working as intended:
Screenshot 2022-07-22 at 15 49 42

Copy link
Contributor

@kelset kelset left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

:shipit:

@tido64 tido64 merged commit 76eddc0 into trunk Jul 22, 2022
@tido64 tido64 deleted the tido/enable-turbomodule branch July 22, 2022 18:09
ghost pushed a commit to microsoft/fluentui-react-native that referenced this pull request Aug 7, 2022
### 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
platform: Android This affects Android platform: iOS This affects iOS platform: macOS This affects macOS
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add support for TurboModule
2 participants