Native Navigation using React Native Navigation Example

Native Navigation using React Native Navigation Example is today’s leading topic. For this tutorial, we use the library called React Native Navigation. You can find the documentation here. 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. So let us start our example by installing React Native.

Native Navigation using React Native Navigation

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

#1: Install React Native.

If you have not installed React Native CLI, then 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

#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, now if you have followed the above steps, you can run the project inside simulator successfully.

#3: Create a single Screen.

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

// 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>
    );
  }
}

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

Write the following one line of code.

import App from './App';

And now, write the following code inside 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 refected then you need to restart the server.

 

So, now single-screen navigation is complete for iOS development. In the further tutorial, we see how we can navigate to the different screens using Tab navigator.