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.
-
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, 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.
Hi Krunal,
Did you had a chance to integrate Tab navigator?