DEV Community

glocore
glocore

Posted on

React Native Navigation (RNN) with Expo Bare Workflow

React Native Navigation (RNN) uses native views to render and navigate between screens in your app. This requires some setup on your native code for it to work.
The docs mention using npx rnn-link to automatically make the required changes on your native code. When setting up RNN on my Expo app, I found that running npx rnn-link only worked for Android, and I had to go through the manual process for iOS. Here are the steps I followed:

Step 1

Run pod install inside your ios directory.

Step 2

Modify AppDelegate.m as follows. I recommend using Xcode for this as it may point out potential issues as you modify the file.

 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
 #import <React/RCTLinkingManager.h>
+#import <ReactNativeNavigation/ReactNativeNavigation.h>

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

 - (RCTBridge *)initializeReactNativeApp
 {
-  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:self.launchOptions];
-  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"main" initialProperties:nil];
-  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
-  UIViewController *rootViewController = [UIViewController new];
-  rootViewController.view = rootView;
-  self.window.rootViewController = rootViewController;
-  [self.window makeKeyAndVisible];
-
-  return bridge;
+  [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:self.launchOptions];
+  return [ReactNativeNavigation getBridge];
}

 - (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;
+  return [extraModules arrayByAddingObjectsFromArray:[ReactNativeNavigation extraModulesForBridge:bridge]];
 }
view raw AppDelegate.md hosted with ❤ by GitHub

That's it! The rest of it is handled by React Native's auto-linking feature for versions > 0.60.

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more