Migrate from react-native-unimodules to Expo modules

Wouter van den Broek — Tue, 16 Nov 2021 20:48:04 +0000

Expo has upgraded their modules strategy, why you can read here and replace the package react-native-unimodules with expo package. In this article you can read how to migrate from the old react-native-unimodules to the brand new Expo modules wth the expo package.

Note that the react-native-unimodules had some evolution in the past as well, some code changes could look a little but different. Your app name could be different; myapp is used in the examples below

Remove react-native-unimodules

Remove react-native-unimodules from the package.json (npm uninstall or yarn remove)

iOS

Remove the import and use of react-native-unimodules in ios/Podfile and run npx pod-install

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
- require_relative '../node_modules/react-native-unimodules/cocoapods.rb'

target 'MyApp' do
-  use_unimodules!
  config = use_native_modules!

Remove react-native-unimodules references from ios/MyApp/AppDelegate.h

- #import <UMCore/UMAppDelegateWrapper.h>

- @interface AppDelegate : UMAppDelegateWrapper <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>
+ @interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

Remove react-native-unimodules references from ios/MyApp/AppDelegate.m

- #import <UMCore/UMModuleRegistry.h>
- #import <UMReactNativeAdapter/UMNativeModulesProxy.h>
- #import <UMReactNativeAdapter/UMModuleRegistryAdapter.h>

- @interface AppDelegate () <RCTBridgeDelegate>
-  @property (nonatomic, strong) UMModuleRegistryAdapter *moduleRegistryAdapter;
- @end

@implementation AppDelegate
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
- self.moduleRegistryAdapter = [[UMModuleRegistryAdapter alloc] initWithModuleRegistryProvider:[[UMModuleRegistryProvider alloc] init]];

- [super application:application didFinishLaunchingWithOptions:launchOptions];
  return YES;
}

- - (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
-{
-  NSArray<id<RCTBridgeModule>> *extraModules = [_moduleRegistryAdapter extraModulesForBridge:bridge];
-  // If you'd like to export some custom RCTBridgeModules that are not Expo modules, add them here!
-  return extraModules;
-}

@end

Android

Remove react-native-unimodules from android/app/build.gradle

apply plugin: "com.android.application"
- apply from: '../../node_modules/react-native-unimodules/gradle.groovy'

dependencies {

- addUnimodulesDependencies()

}

Remove link to react-native-unimodules from android/settings.gradle

rootProject.name = 'MyApp'
- apply from: '../node_modules/react-native-unimodules/gradle.groovy';
- includeUnimodulesProjects()

Remove reference of react-native-unimodules in android/app/src/main/java/com/myapp/MainApplication.java

- import com.myapp.generated.BasePackageList;

- import java.util.Arrays;

- import org.unimodules.adapters.react.ModuleRegistryAdapter;
- import org.unimodules.adapters.react.ReactModuleRegistryProvider;

public class MainApplication extends Application implements ReactApplication {
-   private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(new BasePackageList().getPackageList(), null);

    private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {

        @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());

-            // Add unimodules
-            List<ReactPackage> unimodules = Arrays.<ReactPackage>asList(
-                new ModuleRegistryAdapter(mModuleRegistryProvider)
-            );
-            packages.addAll(unimodules);

            return packages;
        }

      };
}

Remove the generated package list file located at android/app/src/main/java/com/myapp/generated/BasePackageList.java

Update Expo SDK packages

If you already have Expo SDK packages installed like expo-calendar, as I had, you need to update those to the latest version as well. Check your package.json to see which Expo SDK packages are there, set them to the latest version and run npm or yarn.

Add Expo modules

Now we removed the old react-native-unimodules and updated the Expo SDK packages we can install the new Expo modules.

Automatic install

Expo made a great tool to add the Expo package and adjust all the native files: npx install-expo-modules
I would recommend this to use for adding the Expo modules. Beacuse we removed the old react-native-unimodules it should work for most projects. If not and it fails or you cannot build the project you can try the manual instalation

Manual install

Expo has an in detailed description how to add Expo modules the manual way. Just modify all the named files and it should be ok.

Update imports in Typescript/Javascript

The old react-native-unimodules, and the new Expo moduels as well, included some Expo SDK packages like expo-application, expo-constants and 'expo-file-system'.
You need to migrate the one you imported from react-native-unimodules to now use the real Expo SDK package name and imports. For example if we used Expo constants we need to change the code below:

- import { Constants } from 'react-native-unimodules';
+ import Constants from 'expo-constants';

DEV Community: Wouter van den Broek