This content originally appeared on DEV Community and was authored by Wouter van den Broek
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 uninstalloryarn remove)
iOS
- Remove the import and use of react-native-unimodules in
ios/Podfileand runnpx 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';
This content originally appeared on DEV Community and was authored by Wouter van den Broek
Wouter van den Broek | Sciencx (2021-11-16T20:48:04+00:00) Migrate from react-native-unimodules to Expo modules. Retrieved from https://www.scien.cx/2021/11/16/migrate-from-react-native-unimodules-to-expo-modules/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.