This post focuses on building a react-native app which supports navigation using react-native-navigation.
Why React Native Navigation?
There are many ways in which we can implement navigation functionality in mobile apps developed using React Native. The two most popular among them are
‘React Navigation’ and ‘React Native Navigation’.
As React Native Navigation uses the native modules with a JS bridge, the performance will be better when compared to React Navigation.
In the newer versions of react-native it is not necessary to link the libraries manually. The auto linking feature was introduced in the react-native version 0.6. The newer versions of react-native ( above 0.60 ) use CocoaPods by default.
Hence it is not necessary to link the libraries in Xcode. The libraries will be linked automatically when we install the libraries using the ‘pod install’ command. Over the course of this post, we will be building a simple app for iOS in react-native (version above 0.60) which supports navigation using ‘react-native-navigation’.
Create a react-native app:
To set up react-native environment in your machine refer to the link below.
https://facebook.github.io/react-native/docs/getting-started.html
Create a react-native app using the following command.
react-native init sample-appIt will create a project folder with the name sample-app. Then run the following commands to install the dependencies.
cd sample-app
npm installAfter that run the following command inside the project directory to open the app in an iPhone Simulator.
react-native run-iosYou should see the app running in an iOS simulator in a while. And it will display a welcome screen if you haven’t made any code changes in App.js file.
Steps to install React-Native-Navigation:
To install react-native-navigation, run the following command inside the project directory.
npm install react-native-navigation --saveIt will install the react-native-navigation package into the project. Add the following line to the Podfile.
pod 'ReactNativeNavigation', :podspec => '../node_modules/react-native-navigation/ReactNativeNavigation.podspec'Then move to the ios folder in the project and install the dependencies using the following commands.
cd ios
pod installPod install command will install the SDKs specified in the Podspec, along with any dependencies they may have.
After that we need to edit AppDelegate.m file in Xcode.
To do so, open the navigation.xcworkspace file located in sample-app/ios folder. Remove the content inside the AppDelegate.m file and add the following code into the file.
File : AppDelegate.m
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import <ReactNativeNavigation/ReactNativeNavigation.h>
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
[ReactNativeNavigation bootstrap:jsCodeLocation launchOptions:launchOptions];
return YES;
}
@endNavigation Workflow:
First we will create a landing/home screen for the app. Create a Landing Screen inside the project folder by following the below steps.
- Create a folder named src inside the project.
- Add another folder inside src and name it screens.
- Create Welcome.js file in screens folder and add the following code into it.
File : Welcome.js
import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
class WelcomeScreen extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyles}>React Native Navigation</Text>
<View style={styles.loginButtonContainer}>
<Button
title="Login"
color="#FFFFFF"
/>
</View>
<View style={styles.signUpButtonContainer}>
<Button
title="Signup"
color="#FFFFFF"
/>
</View>
</View>
);
}
}
export default WelcomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-start',
backgroundColor: '#CCCCCC',
},
textStyles: {
alignItems: 'flex-start',
fontSize: 25,
fontWeight: 'bold',
marginTop: 200,
},
loginButtonContainer: {
backgroundColor: '#2494fb',
borderRadius: 10,
marginTop: 40,
width: '50%',
shadowColor: '#000000',
},
signUpButtonContainer: {
backgroundColor: '#2494fb',
borderRadius: 10,
marginTop: 10,
width: '50%',
shadowColor: '#000000',
},
});We need to register the screens for the navigator to work. For that we need to modify the contents of index.js file. Replace the contents of index.js file with the following code.
File : index.js
import { Navigation } from 'react-native-navigation';
import Welcome from './src/screens/Welcome';
Navigation.registerComponent('Welcome', ()=>Welcome)
Navigation.events().registerAppLaunchedListener(()=>{
Navigation.setRoot({
root:{
component:{
name:'Welcome'
}
}
})
})Explanation:
Navigation.registerComponent() is used to register the screen. As we have already created the Welcome screen component, we would use that to register.
Navigation.registerComponent('Welcome', () => Welcome).The above step only registers our screen but not the application.So to register our application we would use Navigation.events().registerAppLaunchedListener().
Inside the callback of the registerAppLaunchedListener we will set the root of the application using Navigation.setRoot(). The code would be like the following.
Navigation.events().registerAppLaunchedListener(()=>{
Navigation.setRoot({
root:{
component:{
name:'Welcome'
}
}
})
})Here the component name is Welcome which is the screen we created and registered.
Note: The name of the component and the name of the registerComponent screen must be same.
Run the file from Xcode which you opened earlier using navigation.xcworkspace. And you will be seeing the landing screen which we created in an iPhone Simulator. It would look like below.
Now we have the landing page of the app, we shall now try to navigate to other screens when we click either on Login or SignUp button. To obtain that mechanism we will create two more screens inside the screens folder as Login.js and SignUp.js.
Place the below code snippet in Login.js file.
File : Login.js
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
class Login extends Component {
render() {
return(
<View style={styles.container}>
<Text style={styles.textStyles}>
Welcome to Login Page.
</Text>
</View>
);
}
}
export default Login;
const styles = StyleSheet.create({
container: {
flex:1,
alignItems:'center',
justifyContent: 'center',
backgroundColor: '#CCCCCC',
},
textStyles: {
alignItems:'center',
fontSize: 25
}
});After that place the below code in SignUp.js
File : SignUp.js
import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";
class SignUp extends Component {
render() {
return(
<View style={styles.container}>
<Text style={styles.textStyles}>
Welcome to SignUp Page.
</Text>
</View>
);
}
}
export default SignUp;
const styles = StyleSheet.create({
container: {
flex:1,
alignItems:'center',
justifyContent: 'center',
backgroundColor: '#CCCCCC',
},
textStyles: {
alignItems:'center',
fontSize: 25
}
});As we have to navigate between screens, we cannot set the root screen as only component. So to navigate we must use Stack (array of screens). The Stack consists of children array where we set the component name of the landing page of the app. Hence we also need to replace the contents of index.js file as below.
File : index.js
import { Navigation } from 'react-native-navigation';
import Welcome from './src/screens/Welcome';
import Login from './src/screens/Login';
import SignUp from './src/screens/SignUp';
Navigation.registerComponent('Welcome', ()=>Welcome)
Navigation.registerComponent('Login', () => Login)
Navigation.registerComponent('SignUp', () => SignUp)
Navigation.events().registerAppLaunchedListener(()=>{
Navigation.setRoot({
root:{
stack:{
id:'navigationStack',
children: [
{
component :{
name: 'Welcome'
},
},
]
}
}
})
})To add the title to the landing page, replace the Navigator.setRoot({}) function in the index.js file as below.
Navigation.setRoot({
root:{
stack:{
id:'navigationStack',
children: [
{
component :{
name: 'Welcome',
options: {
topBar: {
title: {
text: 'Home'
}
}
}
},
},
]
}
}
})The landing screen will now look like below which has HOME as its title.
Now we will write the event handler function in Welcome.js file so that we can navigate between the screens when we click on either the Login or SignUp button. For that replace the content of Welcome.js file as below.
File : Welcome.js
import React, {Component} from 'react';
import {View, Text, StyleSheet, Button} from 'react-native';
import {Navigation} from 'react-native-navigation';
class WelcomeScreen extends Component {
goToScreen = screenName => {
Navigation.push(this.props.componentId, {
component: {
name: screenName,
},
});
};
render() {
return (
<View style={styles.container}>
<Text style={styles.textStyles}>React Native Navigation</Text>
<View style={styles.loginButtonContainer}>
<Button
title="Login"
color="#FFFFFF"
onPress={() => this.goToScreen('Login')}
/>
</View>
<View style={styles.signUpButtonContainer}>
<Button
title="Signup"
color="#FFFFFF"
onPress={() => this.goToScreen('SignUp')}
/>
</View>
</View>
);
}
}
export default WelcomeScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'flex-start',
backgroundColor: '#CCCCCC',
},
textStyles: {
alignItems: 'flex-start',
fontSize: 25,
fontWeight: 'bold',
marginTop: 200,
},
loginButtonContainer: {
backgroundColor: '#2494fb',
borderRadius: 10,
marginTop: 40,
width: '50%',
shadowColor: '#000000',
},
signUpButtonContainer: {
backgroundColor: '#2494fb',
borderRadius: 10,
marginTop: 10,
width: '50%',
shadowColor: '#000000',
},
});To navigate to a particular screen we need to import Navigation component from react-native-navigation.When we click either on the Login button or SignUp button, the event is handled in goToScreen method.
We are passing the name of the screen as an argument to the method and it must be same as the name which is used to register the screen in Navigator.registerComponent() in index.js file.
In the goToScreen method we are using this.props.componentId, which is the Id of the current screen and is made automatically available by react-native-navigation.Inside Navigation.push function we assign the name of the screen to be navigated to ‘component’ object and it is the argument which we are passing to the method when we press either Login or SignUp button.
Then run the project using Xcode. The Welcome.js screen appears in a while. Then if we click on the Login button, the app would be navigated to the Login.js Page and it would be navigated to the SignUp.js page if we click on the SignUp button. React Native Navigation also adds the back button at the top using which we can go back to the screen we navigated from.
The Login and SignUp screens would look like below.
I hope, the article was helpful in understanding React Native Navigation. Thanks for the read.
This story is authored by Dheeraj Kumar. Dheeraj is a software engineer specializing in React Native and React based frontend development.
Comments