React-native-navigation: iOS BUILD FAILED error on bare/empty project

[gpmcadam]

Issue Description

2 errors in iOS code when running on a bare project.

Steps to Reproduce / Code Snippets / Screenshots

1. create a new react-native empty project: expo init --template=bare-minimum
2. npm install --save react-native-navigation
3. react-native link react-native-navigation
4. npx pod-install
5. node ./node_modules/react-native-navigation/autolink/postlink/run.js
6. react-native run-ios

/path/to/my/app/ios/App/AppDelegate.m:47:67: error: use of undeclared identifier 'launchOptions'; did you mean '_launchOptions'?
  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];
                                                                  ^~~~~~~~~~~~~
                                                                  _launchOptions
/path/to/my/app/ios/App/AppDelegate.m:19:45: note: '_launchOptions' declared here
@property (nonatomic, strong) NSDictionary *launchOptions;
                                            ^
/path/to/my/app/ios/AppAppDelegate.m:48:10: error: use of undeclared identifier 'bridge'
  return bridge;
         ^
2 errors generated.

---

Environment

• React Native Navigation version: "^6.7.5"
• React Native version: "~0.61.5",
• Platform(s) (iOS, Android, or both?): ios
• Device info (Simulator/Device? OS version? Debug/Release?): simulator

[jinshin1013]

@gpmcadam From a quick research, using react-native-navigation with expo unimodules (expo bare project) requires some manual tweaking as expo updates quite significant amount of iOS native initialisation code still. I've found, although not maintained since 2019, an example repository that integrate these two together here.

Otherwise, I was not able to find any official guide/document to integrate react-native-navigation project with expo unimodules. I'll close the issue as this isn't a bug but let us know if you successfully integrate these two, I'd be really interested to see if it can be! And further add this to the documentation so other find it helpful too. Thanks

[gpmcadam]

Thanks @jinshin1013 - I figured that might be the case but thought it would be worth posting this here for posterity as there is no results for the above errors on here or search engines.

I'll do some digging and report back if I can get it working.

[vrgimael]

This would be pretty helpful indeed, please let us know if you have any news!

[RichardLindhout]

I followed all the steps from expo
https://docs.expo.io/bare/installing-unimodules/

That works the same in RNN the only hard thing (since I don't know any objective C) was the extraModulesForBridge where you need to add uniModules and RNN.

- (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!

  NSArray<id<RCTBridgeModule>> *extraNavigationModules =  [ReactNativeNavigation extraModulesForBridge:bridge];

  NSArray<id<RCTBridgeModule>> *newArray = [extraModules arrayByAddingObjectsFromArray:extraNavigationModules];


    return newArray;
}

Full appdelegate.m

#import "AppDelegate.h"
#import <ReactNativeNavigation/ReactNativeNavigation.h>

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>

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

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif

@interface AppDelegate () <RCTBridgeDelegate>

@property (nonatomic, strong) UMModuleRegistryAdapter *moduleRegistryAdapter;

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  self.moduleRegistryAdapter = [[UMModuleRegistryAdapter alloc] initWithModuleRegistryProvider:[[UMModuleRegistryProvider alloc] init]];

  [super application:application didFinishLaunchingWithOptions:launchOptions];
  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];
  return YES;
}

//- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
//  return [ReactNativeNavigation extraModulesForBridge:bridge];
//}

- (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!

  NSArray<id<RCTBridgeModule>> *extraNavigationModules =  [ReactNativeNavigation extraModulesForBridge:bridge];

  NSArray<id<RCTBridgeModule>> *newArray = [extraModules arrayByAddingObjectsFromArray:extraNavigationModules];


    return newArray;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

[hmust92]

I followed all the steps from expo
https://docs.expo.io/bare/installing-unimodules/

That works the same in RNN the only hard thing (since I don't know any objective C) was the extraModulesForBridge where you need to add uniModules and RNN.

- (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!

  NSArray<id<RCTBridgeModule>> *extraNavigationModules =  [ReactNativeNavigation extraModulesForBridge:bridge];

  NSArray<id<RCTBridgeModule>> *newArray = [extraModules arrayByAddingObjectsFromArray:extraNavigationModules];


    return newArray;
}

Full appdelegate.m

#import "AppDelegate.h"
#import <ReactNativeNavigation/ReactNativeNavigation.h>

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>

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

#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>

static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif

@interface AppDelegate () <RCTBridgeDelegate>

@property (nonatomic, strong) UMModuleRegistryAdapter *moduleRegistryAdapter;

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  self.moduleRegistryAdapter = [[UMModuleRegistryAdapter alloc] initWithModuleRegistryProvider:[[UMModuleRegistryProvider alloc] init]];

  [super application:application didFinishLaunchingWithOptions:launchOptions];
  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];
  return YES;
}

//- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
//  return [ReactNativeNavigation extraModulesForBridge:bridge];
//}

- (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!

  NSArray<id<RCTBridgeModule>> *extraNavigationModules =  [ReactNativeNavigation extraModulesForBridge:bridge];

  NSArray<id<RCTBridgeModule>> *newArray = [extraModules arrayByAddingObjectsFromArray:extraNavigationModules];


    return newArray;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

Did this work for you?

[RichardLindhout]

@hmust92 Yes it works like a charm. I do already use the expo-filesystem and expo-barcodescanner and expo-clipboard in my project (with react-native-navigation)

[hmust92]

@RichardLindhout Oh wow, awesome! I myself was trying to figure out how to add both the unimodules and the RNN modules together in the AppDelegate.m file. Did you have to make any updates to your MainApplication.java file or any of your build.gradle files for android?

[RichardLindhout]

You have to follow ALL the steps in this https://docs.expo.io/bare/installing-unimodules/ so also android indeed and changing some .gradle files.

In one point there is a conflict with RNN in Appdegate.m there you have to do the following

- (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!

  NSArray<id<RCTBridgeModule>> *extraNavigationModules =  [ReactNativeNavigation extraModulesForBridge:bridge];

  NSArray<id<RCTBridgeModule>> *newArray = [extraModules arrayByAddingObjectsFromArray:extraNavigationModules];


    return newArray;
}

[hmust92]

@RichardLindhout I did follow all of the instructions from the expo documentation on installing unimodules, but like you, ran into the issue where there is a conflict in the AppDelegate file between RNN and unimodules. So I was just wondering if you ran into a similar conflict for android.

Your solution to adding multiple modules for the AppDelegate file works for me so far! 👍

[RichardLindhout]

Nope android works without conflicts :)

[hmust92]

@RichardLindhout That's great. I wish this solution was a bit more public as i had to do quite a bit of digging to find how to get the AppDelegate.m to work.

Assuming a lot of users who use this library won't be super familiar with Objective C, have you considered making a PR for this into the documentation? I would think a lot of people using RNN will also want to use react unimodules

[RichardLindhout]

I think it would be great if we have a PR for this. However I'm really short on time a.t.m. so don't have time. Feel free to use my code for a PR