Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 16, 2021 08:48 pm GMT

Migrate from react-native-unimodules to Expo modules

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';

Original Link: https://dev.to/wbroek/migrate-from-react-native-unimodules-to-expo-modules-25c6

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To