« React Native Navigation Introduction React Native Navigation Android »

All Posts

Installing React Native Navigation (iOS)

After installing the React Native Vector Icons, you’re probably aware that this isn’t always a smooth process, but once it’s done, it usually just works fine. So lets get started.

yarn add react-native-navigation

We’ll start with installation on iOS. Fire up Xcode and right click on the Libraries node and select Add Files to sportsapp. Navigate to the react-native-navigation folder under our project’s node_modules folder. Add ./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj file.

Next, select the top level node of the project and click Build Phases. Like we did with libRNVectorIcons, add the react native navigation library as well.

Next, select the Build Settings section on top and then scroll to the Header Search Paths. Add $(SRCROOT)/../node_modules/react-native-navigation/ios as shown below.

Finally, in Xcode, open the AppDelegate.m file and replace the contents with this.

#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>

#import "RCCManager.h"

#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
#ifdef DEBUG
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  self.window.backgroundColor = [UIColor whiteColor];
  [[RCCManager sharedInstance] initBridgeWithBundleURL:jsCodeLocation launchOptions:launchOptions];
  return YES;
}

@end

Select Product->Build in Xcode and make sure your program still builds. If so, congratulations, you’re half way there. In the next tutorial we’re going to add the react-native-navigation package to Android Studio and then we’ll implement some basic navigation and some additional features to our program to take advantage of the ability to navigate.

This commit will have the iOS support, so if you need a little help or something to compare against, go here.

Looking for an app developer?

I’m your guy! I’ve been a contract app developer for over 14 years and can help you or your company on your project. The best way to contact me and my team is via our company page. Yye Software is an application development company based in the Atlanta metro area with offices in Kennesaw.