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.
-
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) - 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 theLink Binary With Libraries
section addlibReactNativeNavigation.a
(screenshots) - 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 theHeader Search Paths
section add$(SRCROOT)/../node_modules/react-native-navigation/ios
. Make sure on the right to mark this new pathrecursive
(screenshots) -
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 usingindex.js
as your entry point instead ofindex.ios.js
andindex.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.
Hi Krunal,
Did you had a chance to integrate Tab navigator?