react-native 0.69 support for new architecture

[Sharipkanov]

When run start script it ignores the package

[yadigarbz]

Also, problems popping up after upgrading from 68.[x] to 69 too... Will be tracking and sharing findings under this one. Not specified as using new architecture yet, since many libraries haven't been implemented it yet. So far faced with what and how fixed:

React-Native upgrade has a lot of nonsense code changes, fixed one by one in AppDelegate.mm, MainActivity and app/build.gradle

Podfile dependency lost, HMSegmentedView removed from Pods in first pod-install, started getting ReactNative #import <ReactNativeNavigation/ReactNativeNavigation.h> module cannot find

Also [ReactNativeNavigation bootstrapWithBridge:bridge]; or [ReactNativeNavigation bootstrapWithBridge:bridge launchOptions:launchOptions]; for old implementations lost before return of didFinishLaunchingWithOptions

Fix: Old school pod 'ReactNativeNavigation', :path => '../node_modules/react-native-navigation' added into Podfile

then started to get one or more required architectures cannot find under lib-podmodules.a:

post_install do |installer|
    react_native_post_install(installer)
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
+    installer.pods_project.build_configurations.each do |config|
+      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
+    end
end

Then started to getting module map for Yogakit can found under arm64 architecture and resolved with:

[Andarius]

So the issue seems to be linked to the new autolinking implemetation of react native cli (see https://github.com/react-native-community/cli/releases/tag/v8.0.0-alpha.0). assets is empty so it can be removed, however I'm not sure on how to replace the hooks postlink script. @guyca do you have an idea ?

[kentdev92]

newest react native navigation with react native 0.69 build error on Android after fixed on iOS follow up guide above

[electricmonk]

I’m experiencing this issue on a brand new RN project created using the RN cli tool. Should I use 0.68 for now?

[yadigarbz]

I’m experiencing this issue on a brand new RN project created using the RN cli tool. Should I use 0.68 for now?

Then you have to figure out whole this thinks after became a more messy way. RN 0.69 and TurboModules are coming, we all know that. If you have event bit of time I would say don't step back

[yadigarbz]

newest react native navigation with react native 0.69 build error on Android after fixed on iOS follow up guide above

I'll try the Android version tomorrow. Please also share if anything useful comes up.

[electricmonk]

Then you have to figure out whole this thinks after became a more messy way. RN 0.69 and TurboModules are coming, we all know that. If you have event bit of time I would say don't step back

I'm not sure I understand

[yadigarbz]

Then you have to figure out whole this thinks after became a more messy way. RN 0.69 and TurboModules are coming, we all know that. If you have event bit of time I would say don't step back

I'm not sure I understand

I mean if you downgrade to 0.68 you have to upgrade later and it could be more complicated than now. Since you just created a new project

[chengjunzhang1219]

In Android I can not import NavigationActivity in MainActivity on RN 0.69.1

[erennyuksell]

any updates?

[gaguirre]

Hi everyone, additional to manual Android configuration I changed MainActivity.java file to replace

public MainActivityDelegate(ReactActivity activity, String mainComponentName) {

with

public MainActivityDelegate(NavigationActivity activity, String mainComponentName) {

Also make sure your kotlin version is updated too. Here is how my build.gradle looks (changes commented with // <- CHANGED)

import org.apache.tools.ant.taskdefs.condition.Os

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        kotlinVersion = "1.5.31"            // <- CHANGED
        RNNKotlinVersion = kotlinVersion    // <- CHANGED
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31

        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = "21.4.7075529"
        }
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"    // <- CHANGED
        classpath("com.android.tools.build:gradle:7.1.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:5.0.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

@chengjunzhang1219 this solved the same issue you mention

[erennyuksell]

Hi, @gaguirre can you please share your full MainActivity.java file?

[gaguirre]

@erennyuksell sure Below the full MainActivity.java

package com.app;

import com.reactnativenavigation.NavigationActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;

public class MainActivity extends NavigationActivity {

  public static class MainActivityDelegate extends ReactActivityDelegate {
    public MainActivityDelegate(NavigationActivity activity, String mainComponentName) {
      super(activity, mainComponentName);
    }

    @Override
    protected ReactRootView createRootView() {
      ReactRootView reactRootView = new ReactRootView(getContext());
      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
      return reactRootView;
    }

    @Override
    protected boolean isConcurrentRootEnabled() {
      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
      // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    }
  }
}

And full MainApplication.java also

package com.app;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.reactnativenavigation.NavigationApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.reactnativenavigation.react.NavigationReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.soloader.SoLoader;
import com.app.newarchitecture.MainApplicationReactNativeHost;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends NavigationApplication {

  private final ReactNativeHost mReactNativeHost =
      new NavigationReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  private final ReactNativeHost mNewArchitectureNativeHost =
      new MainApplicationReactNativeHost(this);

  @Override
  public ReactNativeHost getReactNativeHost() {
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      return mNewArchitectureNativeHost;
    } else {
      return mReactNativeHost;
    }
  }

  @Override
  public void onCreate() {
    super.onCreate();
    // If you opted-in for the New Architecture, we enable the TurboModule system
    ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;

    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.app.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

[erennyuksell]

@gaguirre Thank you. What about this fucntions? Aren't they important?

@Override protected String getMainComponentName() { return "name"; } @Override protected ReactActivityDelegate createReactActivityDelegate() { return new MainActivityDelegate(this, getMainComponentName()); }

[yogevbd]

Hey guys, if someone can submit a PR for adding RN 0.69 support that would be awesome! We currently don't have any Android dev maintaining RNN but we are hiring.

[juanjlunar]

Hi everyone, additional to manual Android configuration I changed MainActivity.java file to replace

public MainActivityDelegate(ReactActivity activity, String mainComponentName) {

with

public MainActivityDelegate(NavigationActivity activity, String mainComponentName) {

Also make sure your kotlin version is updated too. Here is how my build.gradle looks (changes commented with // <- CHANGED)

import org.apache.tools.ant.taskdefs.condition.Os

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        kotlinVersion = "1.5.31"            // <- CHANGED
        RNNKotlinVersion = kotlinVersion    // <- CHANGED
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31

        if (System.properties['os.arch'] == "aarch64") {
            // For M1 Users we need to use the NDK 24 which added support for aarch64
            ndkVersion = "24.0.8215888"
        } else {
            // Otherwise we default to the side-by-side NDK version from AGP.
            ndkVersion = "21.4.7075529"
        }
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"    // <- CHANGED
        classpath("com.android.tools.build:gradle:7.1.1")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:5.0.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

@chengjunzhang1219 this solved the same issue you mention

This worked for me, thank you

[gaguirre]

@yogevbd I'll try to find some time and send a PR fixing RNN setup for both Android and iOS 🤞

[chengjunzhang1219]

@gaguirre Awesome, thanks. Did you try to upgrade the kotlin version from 1.5.31 to 1.6.21 In this case, It doesn't work in my side.

[gaguirre]

Hi @yogevbd I've already started working on a PR to fix RNN setup for RN 0.69, but I think this issue was created to address RN Fabric's support. Should we create a new issue referring to Android auto-linking specifically?

[gaguirre]

@chengjunzhang1219 I haven't tried upgrading the kotlin version because I didn't need to.

[enahum]

after applying this changes the app compiles but I'm getting this error when running (old arch)

 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

[gaguirre]

@enahum do you see that in the logs or are you seeing the typical RN error screen (the red one)?

[enahum]

@enahum do you see that in the logs or are you seeing the typical RN error screen (the red one)?

@gaguirre in the logs, the screen remains in the splash screen

[enahum]

Ok the issue was with another dependency, it seems that the suggested code works just fine.

[yogevbd]

I have a working version of the new architecture working on iOS! Will push it tomorrow and will try to get the Android part done this week.

[enahum]

@yogevbd that is incredible news, thanks for sharing

[niraj-bizbazar]

hello can anybody help me does wix rnn 7.29.0 can be used with rn 0.69 and new architecture if yes please tell me i am trying to create new project with these technologies and i am facing many issues first issue was kotlinVersion i change it to 1.6.0 from 1.4.X after that app build successfully then after app compile and start then stuck in with white blank screen. I am just checking if these technology are compatible with each other i have another large project which need to be updated so before updating i am check if these technology work fine with each other

[erennyuksell]

hello can anybody help me does wix rnn 7.29.0 can be used with rn 0.69 and new architecture if yes please tell me i am trying to create new project with these technologies and i am facing many issues first issue was kotlinVersion i change it to 1.6.0 from 1.4.X after that app build successfully then after app compile and start then stuck in with white blank screen. I am just checking if these technology are compatible with each other i have another large project which need to be updated so before updating i am check if these technology work fine with each other

Currently, no

[zzorba]

Ok the issue was with another dependency, it seems that the suggested code works just fine.

@enahum I've run into that same error message after upgrading to 0.69.4 Module AppRegistry..., could you share what other dependency you found the error in, in case it is one I've been using as well.

[enahum]

Ok the issue was with another dependency, it seems that the suggested code works just fine.

@enahum I've run into that same error message after upgrading to 0.69.4 Module AppRegistry..., could you share what other dependency you found the error in, in case it is one I've been using as well.

@zzorba any lib that imports ViewPropStyle, TextPropStyle etc, as they were deprecated. There is a lib that is shipped with RN to allow you to use those deprecated props, so you'll need to patch your dependencies

[erennyuksell]

Hi, is there any development?

[mohamedosama2]

any solution ??

[zabojad]

Hi there! Still not working on RN 0.69?

[cordeiro22]

Hi everyone! Some solutions about NavigationActivity doesn't have createReactActivityDelegate method? I need createReactActivityDelegate method to use the function getLaunchOptions and set my props to bundle. "react-native-navigation": "^7.5.0",

[gmonzon92]

@erennyuksell sure Below the full MainActivity.java

package com.app;

import com.reactnativenavigation.NavigationActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;

public class MainActivity extends NavigationActivity {

  public static class MainActivityDelegate extends ReactActivityDelegate {
    public MainActivityDelegate(NavigationActivity activity, String mainComponentName) {
      super(activity, mainComponentName);
    }

    @Override
    protected ReactRootView createRootView() {
      ReactRootView reactRootView = new ReactRootView(getContext());
      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
      return reactRootView;
    }

    @Override
    protected boolean isConcurrentRootEnabled() {
      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
      // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    }
  }
}

And full MainApplication.java also

package com.app;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.reactnativenavigation.NavigationApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.reactnativenavigation.react.NavigationReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.soloader.SoLoader;
import com.app.newarchitecture.MainApplicationReactNativeHost;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends NavigationApplication {

  private final ReactNativeHost mReactNativeHost =
      new NavigationReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  private final ReactNativeHost mNewArchitectureNativeHost =
      new MainApplicationReactNativeHost(this);

  @Override
  public ReactNativeHost getReactNativeHost() {
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      return mNewArchitectureNativeHost;
    } else {
      return mReactNativeHost;
    }
  }

  @Override
  public void onCreate() {
    super.onCreate();
    // If you opted-in for the New Architecture, we enable the TurboModule system
    ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;

    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.app.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

Thank you, you are the best! It really helps me

[sam-houle1]

@erennyuksell sure Below the full MainActivity.java

package com.app;

import com.reactnativenavigation.NavigationActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;

public class MainActivity extends NavigationActivity {

  public static class MainActivityDelegate extends ReactActivityDelegate {
    public MainActivityDelegate(NavigationActivity activity, String mainComponentName) {
      super(activity, mainComponentName);
    }

    @Override
    protected ReactRootView createRootView() {
      ReactRootView reactRootView = new ReactRootView(getContext());
      // If you opted-in for the New Architecture, we enable the Fabric Renderer.
      reactRootView.setIsFabric(BuildConfig.IS_NEW_ARCHITECTURE_ENABLED);
      return reactRootView;
    }

    @Override
    protected boolean isConcurrentRootEnabled() {
      // If you opted-in for the New Architecture, we enable Concurrent Root (i.e. React 18).
      // More on this on https://reactjs.org/blog/2022/03/29/react-v18.html
      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    }
  }
}

And full MainApplication.java also

package com.app;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.reactnativenavigation.NavigationApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.reactnativenavigation.react.NavigationReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.config.ReactFeatureFlags;
import com.facebook.soloader.SoLoader;
import com.app.newarchitecture.MainApplicationReactNativeHost;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

public class MainApplication extends NavigationApplication {

  private final ReactNativeHost mReactNativeHost =
      new NavigationReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  private final ReactNativeHost mNewArchitectureNativeHost =
      new MainApplicationReactNativeHost(this);

  @Override
  public ReactNativeHost getReactNativeHost() {
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      return mNewArchitectureNativeHost;
    } else {
      return mReactNativeHost;
    }
  }

  @Override
  public void onCreate() {
    super.onCreate();
    // If you opted-in for the New Architecture, we enable the TurboModule system
    ReactFeatureFlags.useTurboModules = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;

    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.app.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

Hi, for me this was practicly working, I had this issue : MainActivity.java:25: error: method does not override or implement a method from a supertype @Override

I just removed the @override above the protected boolean isConcurrentRootEnabled and my it worked.

[SudoPlz]

So it looks like fabric, or the concurrent root flags are not exposed in any way right now. Are there any plans of supporting those in react-native-navigation?

How's that PR going @erennyuksell ?

[mjaggard]

Hi everyone! Some solutions about NavigationActivity doesn't have createReactActivityDelegate method? I need createReactActivityDelegate method to use the function getLaunchOptions and set my props to bundle. "react-native-navigation": "^7.5.0",

@cordeiro22 did you get a resolution to this?