Native Navigation in React Native: The Complete Guide

We have already seen the Navigation in React Native using React Navigation library in our previous tutorials, but now we are using React Native Navigation library, not React Navigation library.

Native Navigation in React Native Navigation

We start this tutorial by installing React Native using React Native CLI.

Step 1: Install React Native.

If you have not installed React Native CLI, you can install it using the following command.

npm install -g react-native-cli

Now, create the project using the following command.

react-native init rncreate

Go into the project folder.

cd rncreate

To open the project inside iOS Simulator, type the following command.

react-native run-ios

Now, install the Navigation library using the following command.

yarn add react-native-navigation@latest

# or

npm install react-native-navigation@latest --save

Step 2: Configure Navigation inside an iOS project.

Okay, now we need to configure the React Native Navigation for our project. So open the rncreate >> ios folder inside XCode because now we need to add some files.

You need to follow the below instructions.

1. In Xcode, in Project Navigator (left pane), right-click on the Libraries > Add files to [project name]. Add ./node_modules/react-native-navigation/ios/ReactNativeNavigation.xcodeproj (screenshots)

2. In Xcode, in Project Navigator (left pane), click on your project (top), then click on your target row (on the “project and targets list”, which is on the left column of the right pane) and select the Build Phases tab (right pane). In the Link Binary With Libraries section, add libReactNativeNavigation.a (screenshots)
3. In Xcode, in Project Navigator (left pane), click on your project (top), then click on your project row (on the “project and targets list”) and select the Build Settings tab (right pane). In the Header Search Paths section, add $(SRCROOT)/../node_modules/react-native-navigation/ios. Make sure on the right to mark this new path recursive (screenshots)

4. In Xcode, you will need to edit this file: AppDelegate.m.

   Replace all of its code with this reference

   Replace @"index.ios" with @"index" if you are using index.js as your entry point instead of index.ios.js and index.android.js (it is the default since React Native 0.49).

So, if you have followed the above steps, you can successfully run the project inside the simulator.

Step 3: Create a single Screen.

Create one folder inside the root called screens; inside that, create one file called Home.js and add the following code.

// Home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class HomeScreen extends Component {
  render() {
    return (
      <View>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

We already have an index.js file, but it won’t be needed anymore. So instead of that file, create one new file inside the root called index.ios.js and add the following code.

Write the following line of code.

import App from './App';

And now, write the following code inside the App.js file.

// App.js

import { Navigation } from 'react-native-navigation';
import HomeScreen from './screens/Home';

Navigation.registerComponent('rncreate.HomeScreen', () => HomeScreen);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'rncreate.HomeScreen',
    title: 'Home'  
  }
});

Save the file and go to the iOS Simulator.

If changes are not reflected, then you need to restart the server.

So, now single-screen navigation is complete for iOS development. The other tutorial shows how we can navigate the different screens using Tab navigator.

That’s it.