Search code examples
iosreact-nativewix-react-native-navigation

Integrate react-native-navigation with react-native-callkit in iOS


I am trying to to integrate RNN (React Native Navigation) with RNCK (React Native CallKit) in iOS.
The problem is that each of them requires a unique setup in Xcode project's AppDelegate.

Both of them need jsCodeLocation:

NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

RNN setup:

[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];

RNCK setup:

RNCallKit *rncallkit = [[RNCallKit alloc] init];
RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation
                                          moduleProvider:^{ return @[rncallkit]; }
                                           launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                 moduleName:@"MyApp"
                                          initialProperties:nil];

I see this (outdated) issue in RNCK repo, which leads to this (also outdated) issue and both talk about RNN 1, while in RNN 2 this setup is simplified and I don't see a proper way to integrate both frameworks in one project except forking the RNN and adding a separate initialiser that will receive moduleProvider...


Solution

  • RNN has an additional bootstrap method that takes a delegate object parameter (which implements RNNBridgeManagerDelegate) that allows you to inject extra modules.

    Here's an example of how you can bootstrap RNN with the app delegate itself set as the delegate:

    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
      NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
      [ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions bridgeManagerDelegate:self];
      return YES;
    }
    

    You can then implement the delegate method and return the RNCallKit object:

    - (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge {
      RNCallKit *rncallkit = [[RNCallKit alloc] init];
      return @[rncallkit];
    }