Setup

The Navigation router for React Native uses the underlying native APIs to provide faithful navigation on Android and iOS. Because it contains native code you first have to eject from create-react-native-app or create your application using react-native init.

Note

If you want a tabbed interface in iOS then follow the Tabs Setup instructions instead

Install the three navigation packages from npm.

npm install navigation navigation-react navigation-react-native --save

Link the navigation-react-native package.

react-native link navigation-react-native

JavaScript

Replace the code in App.js with the following:

import React from 'react';
import {StateNavigator} from 'navigation';
import {NavigationHandler} from 'navigation-react';
import {addNavigateHandlers, Scene} from 'navigation-react-native';

var stateNavigator = new StateNavigator([
]);

addNavigateHandlers(stateNavigator);

export default ({crumb}) => (
  <NavigationHandler stateNavigator={stateNavigator}>
    <Scene crumb={crumb} />
  </NavigationHandler>
);

Android

Locate the AndroidManifest.xml in the Android project and add a launchMode of singleTop to the MainActivity.

<activity
  android:name=".MainActivity"
  android:launchMode="singleTop"
  ...

iOS

Locate the AppDelegate.h in the iOS project and replace the code with the following:

#import <UIKit/UIKit.h>
#import <React/RCTBridge.h>
#import "NVApplicationHostDelegate.h"

@interface AppDelegate : UIResponder <NVApplicationHostDelegate>

@property (nonatomic, strong) UIWindow *window;
@property (nonatomic, strong) RCTBridge *bridge;

@end

Locate the AppDelegate.m in the iOS project and replace the code with that shown below. Change the "Title" placeholder string to the title of your first scene. Change the "appKey" placeholder string to the name of your application (it should match the key used in the registerComponent call in index.js).

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

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
  
  self.bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];  
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];

  NSString *title = @"Title";
  NSString *appKey = @"appKey";

  UIViewController *sceneController = [[NVSceneController alloc] init:0 tab:0 title:title appKey:appKey];
  UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:sceneController];

  self.window.rootViewController = navigationController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end