help needed: Convert uni-modules to expo-modules

Looks like Expo has deprecated uni-modules: https://docs.expo.dev/bare/installing-unimodules/ And switched to expo-modules: https://blog.expo.dev/whats-new-in-expo-modules-infrastructure-7a7cdda81ebc

Now I was trying to get it to work for Android with react-native-navigation and i was able to migrate the code to get the app to compile successfully, but with no luck, the navigation is not working. I think the part where it gets stuck is in MainActivity.java

https://docs.expo.dev/bare/installing-expo-modules/#configuration-for-android

As you can see, the code inside public class MainActivity extends NavigationActivity is not working and if I omit the code the app is compiled successfully, but the navigation is not working.

The following code is not working

package com.myApp;

import com.reactnativenavigation.NavigationActivity;

import com.facebook.react.ReactActivityDelegate;
import expo.modules.ReactActivityDelegateWrapper;

public class MainActivity extends NavigationActivity {
  @Override
  protected String getMainComponentName() {
    return "MyApp";
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegateWrapper(this,
      new ReactActivityDelegate(this, getMainComponentName())
    );
  }
}

Some help would be appreciated.

[julianklumpers]

I got it working for Android.

In MainActivity.java leave it as it is

package com.myApp;

import com.reactnativenavigation.NavigationActivity;

public class MainActivity extends NavigationActivity {}

The key to get it working is in MainApplication.java In the expo docs they explain you have to add new ReactNativeHostWrapper just skip this part and add the rest of the changes in https://github.com/expo/fyi/blob/master/expo-modules-migration.md and everything works fine! you can now use the new expo-modules.

package com.myApp;

import com.airbnb.android.react.lottie.LottiePackage;

import android.content.Context;
import android.content.res.Configuration;
import androidx.annotation.NonNull;
import com.facebook.react.PackageList;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.bridge.JSIModulePackage;
import com.reactnativenavigation.NavigationApplication;
import com.reactnativenavigation.react.NavigationReactNativeHost;
import com.facebook.react.ReactPackage;
import java.lang.reflect.InvocationTargetException;
import java.util.List;

import expo.modules.ApplicationLifecycleDispatcher;
import com.reactnativemmkv.MmkvModulePackage;

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 RNVersionCheckPackage());
          packages.add(new LottiePackage());

          return packages;
        }

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

        @Override
        protected JSIModulePackage getJSIModulePackage() {
          return new MmkvModulePackage();
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
    ApplicationLifecycleDispatcher.onApplicationCreate(this);
  }

  @Override
  public void onConfigurationChanged(@NonNull Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    ApplicationLifecycleDispatcher.onConfigurationChanged(this, newConfig);
  }

  /**
   * 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.natutecscout.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();
      }
    }
  }
}

Hope this helps for others that are using rnn-starter and want to use expo-modules.

[julianklumpers]

Cool, I’m happy to help