React-native 0.68.* is not compatible with RNN right now - exposing createReactActivityDelegate - and support for new architecture (Fabric)

[SudoPlz]

🐛 Bug Report

Hey there,

I'm opening that issue to keep track of react-native 0.68 support. Right now it seems that react-native navigation doesn't work with 0.68 and the new architecture.

Specifically the part where we're supposed to inject ReactRootViews seems to be the pain point, since RNN doesn't export any way to do that currently.

https://github.com/react-native-community/rn-diff-purge/blob/release/0.68.0-rc.1/RnDiffApp/android/app/src/main/java/com/rndiffapp/MainActivity.java#L23

cc'ing @yogevbd on this to hear some thoughts.

[yogevbd]

Hey @SudoPlz,
We currently don't have an Android developer working on RNN, we will have to somehow support it soon though.

[danilobuerger]

@SudoPlz as far as I can tell this only affects 0.68 when trying to enable the new architecture, right? 0.68 should work when keeping the old way, right?

[SudoPlz]

@danilobuerger not really sure to be honest, this requires testing.

[danilobuerger]

Alright, I will take a look at that once 0.68 rc2 is out.

[danilobuerger]

So, I investigated this using the old architecture for now.

iOS

There is a breaking change in the app template, that we should communicate in the docs:

diff --git a/ios/feastr/Classes/AppDelegate.m b/ios/feastr/Classes/AppDelegate.m
index d29d69933..8b67f1d11 100644
--- a/ios/feastr/Classes/AppDelegate.m
+++ b/ios/feastr/Classes/AppDelegate.m
@@ -111,7 +111,7 @@ - (void)applicationWillEnterForeground:(UIApplication *)application {
 
 - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
 #if DEBUG
-    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
 #else
     return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
 #endif

Android

We need a new product flavor. The RootView interface added two more methods that we need to implement in ModalContentLayout:

  /**
   * Called when a child starts a native gesture (e.g. a scroll in a ScrollView). Should be called
   * from the child's onTouchIntercepted implementation.
   */
  void onChildStartedNativeGesture(View childView, MotionEvent ev);

  /**
   * Called when a child ends a native gesture. Should be called from the child's onTouchIntercepted
   * implementation.
   */
  void onChildEndedNativeGesture(View childView, MotionEvent ev);

diff --git a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
index da7d5b1..ea8516f 100644
--- a/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
+++ b/node_modules/react-native-navigation/lib/android/app/src/main/java/com/reactnativenavigation/react/modal/ModalContentLayout.kt
@@ -49,9 +49,15 @@ class ModalContentLayout(context: Context?) : ReactViewGroup(context), RootView{
             updateFirstChildView()
         }
     }
+    override fun onChildStartedNativeGesture(child: View, androidEvent: MotionEvent?) {
+        mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
+    }
     override fun onChildStartedNativeGesture(androidEvent: MotionEvent?) {
         mJSTouchDispatcher.onChildStartedNativeGesture(androidEvent, this.getEventDispatcher())
     }
+    override fun onChildEndedNativeGesture(child: View, androidEvent: MotionEvent?) {
+        mJSTouchDispatcher.onChildEndedNativeGesture(androidEvent, this.getEventDispatcher())
+    }
     override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {}
     private fun getEventDispatcher(): EventDispatcher? {
         val reactContext: ReactContext = this.getReactContext()

[danilobuerger]

@yogevbd I think we should leave this open until we also support the new architecture?

[yogevbd]

Your'e right.

[danilobuerger]

I started looking at iOS + new arch (rnn 7.26.0, rn 0.68 rc2 with pending patched for rc3):

• We have to manually enable rnn to use the farbic views (which currently is a good thing, but we should do that automatically) by adding the following pod:

pod 'ReactNativeNavigation/Fabric', :path => "../node_modules/react-native-navigation"

I got this to compile and work. So far only with waitToRender turned off and the views seem misaligned.

[YazeedAsaad]

When can we expect a release for 0.68.0 support since the stable released yesterday ?

[danilobuerger]

@YazeedAsaad rnn does work with rn 0.68 in its default configuration (old architecture).

[YazeedAsaad]

it does indeed, i meant the new Architecture if that’s planned

[danilobuerger]

I am not aware that any one is working on it. But feel free to submit a PR if changes are required to make it work with the new architecture.

[oblador]

I would perfer if it was possible to opt into Fabric on a per screen basis as it would enable incremental adoption.

[bfricka]

@doublex this issue is about getting rnn to work with the new architecture. So your issue is not related. Feel free to create a new one about the linker, or even better create a PR with a fix.

I get where you're coming from, but both the docs and rnn-link do not work, so the happy path is broken, and this is probably why people are having issues. For those having issues on a freshly initialized 0.68 project, you can run npx rnn-link, then remove the body from MainActivity (or just comment it out):

public class MainActivity extends NavigationActivity {}

Without this, the build fails because NavigationActivity doesn't extend ReactActivity and doesn't have a createReactActivityDelegate method.

[enahum]

Does anyone know if someone is already working in this? Not that I'm offering, just wanted to see if there is any progress

[kentdev92]

Does anyone know if someone is already working in this? Not that I'm offering, just wanted to see if there is any progress

Please try to add this to settings.gradle:
include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/lib/android/app/')

[SudoPlz]

@guyca I noticed you worked on #7518.

• Does this add support for RN 0.68?
• Should I close this ticket? Is it official, can we use the new architecture now?
• If not, are there extra steps the RNN team should take to support that, and is there a place where you track the progress? Right now all I'm aware of is the current issue.

Thanks for all your hard work.

[oferRounds]

@yogevbd @guyca – following up on @SudoPlz question: is it possible to use RNN with React Native 0.68+?

[guyca]

@oferRounds Yes, we use it with RN 0.68.4.

[oferRounds]

Thanks @guyca! so that means RNN use the new Arch?

[SudoPlz]

@guyca I noticed you worked on #7518.

• Does this add support for RN 0.68?
• Should I close this ticket? Is it official, can we use the new architecture now?
• If not, are there extra steps the RNN team should take to support that, and is there a place where you track the progress? Right now all I'm aware of is the current issue.

Thanks for all your hard work.

@guyca any news with that?

Thank you 🙏

[guyca]

@SudoPlz We're using RNN and RN 68 at Wix. AFAIK there are no issues with that. Regarding the new architecture - I think we plan on researching the possibility of switching to it sometime in Q1/Q2 2023. @yogevbd correct me if I'm wrong.

[ivan-khr85]

Any updates?

[erennyuksell]

Any updates?

[SudoPlz]

This has been implemented and rolled out on 7.36.0.

I managed to run our app using Fabric and RNN 7.36.0 but I did discover one issue: #7770.
I'll chat about it with @yogevbd