Migrate from react-native-unimodules to Expo modules
Tags: reactnative, expo
Published: 2021-11-16 20:48:04

---
title: Migrate from react-native-unimodules to Expo modules
published: true
description: 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
tags: reactnative, expo
cover_image: https://miro.medium.com/max/1012/1*LqUJOFg0pnRUQ2n9MxSL5A.png
---

Expo has upgraded their modules strategy, why you can [read here](https://blog.expo.dev/whats-new-in-expo-modules-infrastructure-7a7cdda81ebc) 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`
```diff
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
- require_relative '../node_modules/react-native-unimodules/cocoapods.rb'
```
```diff
target 'MyApp' do
-  use_unimodules!
  config = use_native_modules!
```
- Remove react-native-unimodules references from `ios/MyApp/AppDelegate.h`
```diff
- #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`
```diff
- #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`
```diff
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`
```diff
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`
```diff
- 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](https://docs.expo.dev/bare/installing-expo-modules/#manual-installation) 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:
```diff
- import { Constants } from 'react-native-unimodules';
+ import Constants from 'expo-constants';
```