<h3><span style="color: #000080;">React Native Navigation</span></h3>
<p>React Native Navigation provides 100% native platform navigation on both <strong><span style="color: #0000ff;">iOS</span></strong> and <strong><span style="color: #0000ff;">Android</span></strong> for React Native apps.</p>
<p>In this tutorial I will demonstrate you how to install <strong><span style="color: #0000ff;">react-native-navigation</span></strong> in your app, work with singlescreen (without tab), work with tabbased screen, Navigating forward, Navigating backward.</p>
<p>Get <strong>GITHUB</strong> code from <a href="https://github.com/arunk7839/ReactNativeNavigationExample"><strong><span style="color: #00ff00;">HERE</span></strong></a>.</p>
<p> ;</p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="IOoenO4L0as" title="React Native Navigation Example"><a placeholder href="https://youtu.be/IOoenO4L0as"><img src="https://i.ytimg.com/vi/IOoenO4L0as/hqdefault.jpg" layout="fill" object-fit="cover" alt="React Native Navigation Example"></a></amp-youtube></p>
<p> ;</p>
<h3><span style="color: #000080;">Adding React Native Navigation To Android</span></h3>
<ul>
<li>Install <strong><span style="color: #008000;">react-native-navigation</span></strong> latest stable version.</li>
</ul>
<pre style="padding-left: 30px;"><span style="color: #0000ff;">npm install --save react-native-navigation@latest</span></pre>
<ul>
<li>Add the following in <strong><span style="color: #008000;">android/settings.gradle</span></strong>.</li>
</ul>
<pre style="padding-left: 30px;"><code>include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')</code></pre>
<ul>
<li>Update project dependencies in <span style="color: #008000;"><strong>android/app/build.gradle</strong></span>.</li>
</ul>
<pre style="padding-left: 30px;"><code>android {

<span style="color: #0000ff;"><strong>compileSdkVersion 25 </strong>

<strong>buildToolsVersion "25.0.1"</strong>

... }</span>

dependencies {

<span style="color: #0000ff;"><strong>compile fileTree(dir: "libs", include: ["*.jar"]) </strong>

<strong>compile "com.android.support:appcompat-v7:23.0.1" </strong>

<strong>compile "com.facebook.react:react-native:+" </strong>

</span><span style="color: #008000;"><strong><span style="color: #0000ff;">compile project(':react-native-navigation')</span> </strong></span>

}</code></pre>
<ul>
<li>In <strong><span style="color: #008000;">MainActivity.java</span></strong> it should extend <span style="color: #008000;"><strong>com.reactnativenavigation.controllers.SplashActivity </strong></span>instead of <span style="color: #008000;"><strong>ReactActivity</strong></span>.</li>
</ul>
<pre style="padding-left: 30px;"><code>import com.reactnativenavigation.controllers.SplashActivity; 

public class MainActivity extends SplashActivity { 

}
</code></pre>
<p>If you have any <span style="color: #008000;"><strong>react-native</strong></span> related methods, you can safely delete them.</p>
<ul>
<li>In <strong><span style="color: #008000;">MainApplication.java </span></strong>, add the following</li>
</ul>
<pre style="padding-left: 30px;"><span style="color: #0000ff;">//react-native-navigation</span>
import com.reactnativenavigation.NavigationApplication;</pre>
<pre style="padding-left: 30px;">public class MainApplication extends NavigationApplication {

 @Override
 public boolean isDebug() {
 <span style="color: #0000ff;">// Make sure you are using BuildConfig from your own application</span>
 return BuildConfig.DEBUG;
 }

 protected List<;ReactPackage>; getPackages() {
 <span style="color: #0000ff;">// Add additional packages you require here
 // No need to add RnnPackage and MainReactPackage</span>
 return Arrays.<;ReactPackage>;asList(
 //eg..new VectorIconsPackage()
 );
 }

 @Override
 public List<;ReactPackage>; createAdditionalReactPackages() {
 return getPackages();
 }

<span style="color: #008000;">//if you are using <span style="color: #0000ff;">index.js</span> as your entry point instead of <span style="color: #0000ff;">index.ios.js</span> and <span style="color: #0000ff;">index.android.js
</span></span> <span style="color: #008000;">//(it is the default since React Native 0.49). </span> 

@Override public String getJSMainModuleName() { 
return "index"; } 
}</pre>
<p style="padding-left: 30px;">Make sure that <code>isDebug</code> and <code>createAdditionalReactPackages</code> methods are implemented.</p>
<ul>
<li>Update <strong><span style="color: #008000;">AndroidManifest.xml</span></strong> and set <span style="color: #0000ff;"><strong>android:name</strong></span> value to .<strong><span style="color: #008000;">MainApplication</span></strong></li>
</ul>
<pre style="padding-left: 30px;"><span style="color: #0000ff;"><span class="token tag"><span class="token punctuation"><;</span>application</span>

<span class="token attr-name"><span class="token namespace">android:</span>name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>.MainApplication<span class="token punctuation">"</span></span>

<span class="token attr-name">...</span> <span class="token punctuation">/>;</span></span></pre>
<h3></h3>
<h3><span style="color: #000080;">Registering and Rendering a Screen</span></h3>
<p>Before loading screen into our app firstly we must have to register the screen using Navigation.</p>
<pre><code>import { Navigation } from "react-native-navigation";
import MainScreen from "./src/screens/MainScreen/MainScreen";
<span style="color: #0000ff;">// Register Screens</span>
Navigation.registerComponent(
 "navigation-example.MainScreen",
 () =>; MainScreen);</code></pre>
<p>Now there is no need to write:</p>
<pre><code>AppRegistry.registerComponent('NavigationExample', () =>; App); </code> in <span style="color: #008000;">index.js</span></pre>
<p>Now Navigation object provided by the react-native-navigation will tell us our react app which screen is to render<br />
first.Here I am starting App using <strong><span style="color: #008000;">startSingleScreenApp</span></strong> you can also use <strong><span style="color: #008000;">startTabBasedApp</span></strong> if you want tabs.</p>
<pre><code><span style="color: #0000ff;">// Starting App</span>

Navigation.startSingleScreenApp({
 screen: {
 screen: "navigation-example.MainScreen",
 title: "Entertainment"
 }
});</code></pre>
<h3></h3>
<h3><span style="color: #000080;">Adding a Tab Screen (Tabs Navigation)</span></h3>
<p>For Tabs Navigation we use <span style="color: #008000;"><strong>startTabBasedApp()</strong></span> inside this function we define array of tabs using <strong><span style="color: #0000ff;">tabs</span></strong> property.We can also use <strong><span style="color: #0000ff;">tabStyle</span></strong>(ios),<strong><span style="color: #0000ff;">appStyle</span></strong> (android) for tab styling.</p>
<p><span style="color: #000080;"><strong>Note</strong></span>: Tabs without icon works on ios but not on android.For android we must have to define icon property.For more detail you can visit <span style="color: #0000ff;"><strong>here</strong></span>.</p>
<p>Here in this tutorial I have used <span style="color: #008000;"><strong>react-native-vector-icons</strong></span>. For installation you can visit to my this <span style="color: #0000ff;"><strong>tutorial</strong></span>.</p>
<pre><code>import { Navigation } from 'react-native-navigation';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const startTabs = () =>; {
 Promise.all([
 Icon.getImageSource(Platform.OS === 'android' ? "md-videocam" : "ios-videocam", 30),
 Icon.getImageSource(Platform.OS === 'android' ? "md-musical-notes" : "ios-musical-notes", 30),
 Icon.getImageSource(Platform.OS === 'android' ? "md-easel" : "ios-easel", 30)
 
 ]).then(sources =>; {
 Navigation.startTabBasedApp({
 tabs: [
 {
 screen: "navigation-example.Movies",
 label: "Movies",
 title: "Movies",
 icon: sources[0],


 },
 {
 screen: "navigation-example.Plays",
 label: "Plays",
 title: "Plays",
 icon: sources[1],


 },
 {
 screen: "navigation-example.Events",
 label: "Events",
 title: "Events",
 icon: sources[2],

 }
 ],
<span style="color: #008000;"> //tabstyle only works for ios for android we have to use appstyle</span>
 tabsStyle: {
 tabBarSelectedButtonColor: "orange"
 },

 appStyle: {
 tabBarSelectedButtonColor: "orange"
 }

 });
 });
};

export default startTabs;</code></pre>
<p>The <span style="color: #0000ff;"><strong><code>Promise</code></strong></span> object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.</p>
<p>The <span style="color: #0000ff;"><code><strong>Promise.all(iterable)</strong></code></span> method returns a single <code>Promise</code> that resolves when all of the promises in the <code>iterable</code> argument have resolved or when the iterable argument contains no promises.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<p>An <strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol">iterable</a></strong> object such as an <code>Array</code> or <code>String</code></p>
<h3></h3>
<h3><strong><span style="color: #000080;">Pushing Pages (Navigating Forward)</span></strong></h3>
<p>On button click or view press if you want to navigate to a new page ,navigator as a prop provided by the react-native make it possible.</p>
<pre><code>onItemPressedHandler= (name,image)=>;{

this.props.navigator.push({
 screen: "navigation-example.MovieDetail",
 title: name,
 passProps: {
 movieName: name,
 movieImage: image
 }
 });
}</code></pre>
<h3></h3>
<h3><strong><span style="color: #000080;">Poping Pages (Navigating Backward)</span></strong></h3>
<p>If you want to move back on previous page on some action you can use pop() using navigator as a prop.</p>
<pre><code>backHandler = ()=>;{
 this.props.navigator.pop();

}</code></pre>
<h3></h3>
<h3><span style="color: #000080;"><strong>START CODING :</strong></span></h3>
<p><span style="color: #0000ff;"><strong>App.js</strong></span></p>
<pre><code>import { Navigation } from "react-native-navigation";
import MainScreen from "./src/screens/MainScreen/MainScreen";
import MovieDetail from "./src/screens/MovieDetail/MovieDetail";
import Movies from "./src/screens/Movies/Movies";
import Plays from "./src/screens/Plays/Plays";
import Events from "./src/screens/Events/Events";

// Register Screens
Navigation.registerComponent(
 "navigation-example.MainScreen",
 () =>; MainScreen);

 Navigation.registerComponent(
 "navigation-example.Movies",
 () =>; Movies);

 Navigation.registerComponent(
 "navigation-example.Plays",
 () =>; Plays);

 Navigation.registerComponent(
 "navigation-example.Events",
 () =>; Events);

 Navigation.registerComponent(
 "navigation-example.MovieDetail",
 () =>; MovieDetail);



// Starting App
Navigation.startSingleScreenApp({
 screen: {
 screen: "navigation-example.MainScreen",
 title: "Entertainment"
 }
});</code></pre>
<p> ;</p>
<p><span style="color: #0000ff;"><strong>MainScreen.js</strong></span></p>
<pre><code>import React, { Component } from "react";
import {View,Text,Button,StyleSheet} from "react-native";
import StartMainTabs from "../MainTabs/StartMainTabs";


class MainScreen extends Component{


nextHandler = ()=>;{
StartMainTabs();

}
render(){

return(
<;View style={styles.container}>;
<;Text style={styles.titleText} >;Entertainment<;/Text>;
<;Button color="#841584" title="Next" onPress={this.nextHandler}/>;
<;/View>;
);
}

}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 alignItems: "center",
 justifyContent: 'center',
 backgroundColor:"#521751"
 },
 titleText: {
 fontSize: 50,
 fontWeight: 'bold',
 color: "#fa923f"
 }
 });
export default MainScreen;</code></pre>
<p> ;</p>
<p><strong><span style="color: #0000ff;">StartMainTabs.js</span></strong></p>
<pre><code>import { Navigation } from 'react-native-navigation';
import { Platform } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

const startTabs = () =>; {
 Promise.all([
 Icon.getImageSource(Platform.OS === 'android' ? "md-videocam" : "ios-videocam", 30),
 Icon.getImageSource(Platform.OS === 'android' ? "md-musical-notes" : "ios-musical-notes", 30),
 Icon.getImageSource(Platform.OS === 'android' ? "md-easel" : "ios-easel", 30),

 ]).then(sources =>; {
 Navigation.startTabBasedApp({
 tabs: [
 {
 screen: "navigation-example.Movies",
 label: "Movies",
 title: "Movies",
 icon: sources[0],


 },
 {
 screen: "navigation-example.Plays",
 label: "Plays",
 title: "Plays",
 icon: sources[1],


 },
 {
 screen: "navigation-example.Events",
 label: "Events",
 title: "Events",
 icon: sources[2],
 }
 ],
 tabsStyle: {
 tabBarSelectedButtonColor: "orange"
 },

 appStyle: {
 tabBarSelectedButtonColor: "orange"
 }

 });
 });
};

export default startTabs;</code></pre>
<p> ;</p>
<p><strong><span style="color: #0000ff;">Movies.js</span></strong></p>
<pre><code>import React, { Component } from "react";
import {StyleSheet, FlatList} from "react-native";
import movieImageOne from "../../assets/black_panther.jpg";
import movieImageTwo from "../../assets/death_of_stalin.jpg";
import movieImageThree from "../../assets/the_rider.jpg";
import movieImageFour from "../../assets/zama.jpg";
import movieImageFive from "../../assets/annhilation.jpg";
import ListItem from "../../component/ListItem/ListItem";


class Movies extends Component{


onItemPressedHandler= (name,image)=>;{

this.props.navigator.push({
 screen: "navigation-example.MovieDetail",
 title: name,
 passProps: {
 movieName: name,
 movieImage: image
 }
 });
}
render(){

return(
 <;FlatList
 style={styles.listContainer}
 data={[
 { movieName: 'Black Panther',
 movieImage: movieImageOne,
 key: 'a'
 },
 { movieName: 'The Death of Stalin',
 movieImage: movieImageTwo,
 key: 'b'
 },
 { movieName: 'The Rider',
 movieImage: movieImageThree,
 key: 'c'
 },
 { movieName: 'Zama',
 movieImage: movieImageFour,
 key: 'd'
 },
 { movieName: 'Annihilation',
 movieImage: movieImageFive,
 key: 'e'
 },
 ]}

 renderItem={(info) =>; (
 <;ListItem
 movieName={info.item.movieName}
 movieImage={info.item.movieImage}
 onItemPressed={() =>; this.onItemPressedHandler(info.item.movieName,info.item.movieImage)}
 />;
 )}
 />;
);
}

}
const styles = StyleSheet.create({
 listContainer: {
 width: "100%"
 }
});

export default Movies;</code></pre>
<p> ;</p>
<p><strong><span style="color: #0000ff;">Plays.js</span></strong></p>
<pre><code>import React, { Component } from "react";
import {View,Text,StyleSheet} from "react-native";


class Plays extends Component{

render(){

return(
<;View style={styles.container}>;
<;Text style={styles.titleText}>;Plays<;/Text>;
<;/View>;
);
}

}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 alignItems: "center",
 justifyContent: 'center',
 backgroundColor:"#6a5acd"
 },
 titleText: {
 fontSize: 50,
 fontWeight: 'bold',
 color: "#fa923f"
 }
 });
export default Plays;</code></pre>
<p> ;</p>
<p><strong><span style="color: #0000ff;">Events.js</span></strong></p>
<pre><code>import React, { Component } from "react";
import {View,Text,StyleSheet} from "react-native";


class Events extends Component{

render(){

return(
<;View style={styles.container}>;
<;Text style={styles.titleText}>;Events<;/Text>;
<;/View>;
);
}

}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 alignItems: "center",
 justifyContent: 'center',
 backgroundColor:"#228b22"
 },
 titleText: {
 fontSize: 50,
 fontWeight: 'bold',
 color: "#fa923f"
 }
 });
export default Events;</code></pre>
<p> ;</p>
<p><strong><span style="color: #0000ff;">MovieDetail.js</span></strong></p>
<pre><code>import React, { Component } from "react";
import {View,Text,StyleSheet,Image,Button} from "react-native";


class MovieDetail extends Component{


backHandler = ()=>;{
 this.props.navigator.pop();

}

render(){

return(
<;View style={styles.container}>;
 <;Image
 source={this.props.movieImage}
 style={styles.movieImage}
 />;

 <;Text style={styles.movieName}>;
 {this.props.movieName}
 <;/Text>;
 <;Button color="#841584" title="Back" onPress={this.backHandler}/>;
 <;/View>;
 );
}

}

const styles = StyleSheet.create({
 container: {

 flex: 1,
 padding:50,


 alignItems: "center",
 justifyContent: 'center'
 },
 movieImage: {
 width: "100%",
 height: "100%"
 },
 movieName: {
 fontWeight: "bold",
 textAlign: "center",
 fontSize: 30,
 color: "#521751",

 }
 });
export default MovieDetail;</code></pre>
<p><strong><span style="color: #0000ff;">ListItem.js</span></strong></p>
<pre><code>import React from "react";
import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native";

const listItem = props =>; (
 <;TouchableOpacity onPress={props.onItemPressed}>;
 <;View style={styles.listItem}>;
 <;Image resizeMode="cover" source={props.movieImage} style={styles.movieImage} />;
 <;Text>;{props.movieName}<;/Text>;
 <;/View>;
 <;/TouchableOpacity>;
);

const styles = StyleSheet.create({
 listItem: {
 width: "100%",
 marginBottom: 5,
 padding: 10,
 backgroundColor: "#eee",
 flexDirection: "row",
 alignItems: "center"
 },
 movieImage: {
 marginRight: 8,
 height: 30,
 width: 30
 }
});

export default listItem;</code></pre>