React Native Navigation

Video Demo:

Basically a react native navigation is Javascript library to move from one screen to another screen. This tutorial will help you to install and understand the flow of React navigation. You can download the source code from below.

Step 1->
To create your project run this command:
sudo npm install -g react-native-cli
Step 2-> 
Now initialise your project name. Replace your project name with MovingScreen:
react-native init MovingScreen
Step 3->
Install Navigation library in your project:
npm install --save react-navigation
Step 4->
Also need to install the gesture library otherwise you will get an issue
npm install --save react-native-gesture-handler
Step 5->
link your gesture library in your project:
react-native link react-native-gesture-handler
Step 6->
For android you need to change your MainActivity with following functionations.
Path: ProjectName->Android-> app->src->java->MainActivity.java

---

MainActivity.Java:

package com.movingscreens; import com.facebook.react.ReactActivity; import com.facebook.react.ReactActivityDelegate; import com.facebook.react.ReactRootView; import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "MovingScreens"; }
@Override protected ReactActivityDelegate createReactActivityDelegate() { return new ReactActivityDelegate(this, getMainComponentName()) { @Override protected ReactRootView createRootView() { return new RNGestureHandlerEnabledRootView(MainActivity.this); } }; } }

Now you can start work on your React native project

---

App.js:

import React, {Component} from 'react'; import {createStackNavigator,createAppContainer} from 'react-navigation' import HomeScreen from './Screens/HomeScreen'; import ProfileScreen from './Screens/ProfileScreen'; import ContactScreen from './Screens/ContactScreen'; import MainScreen from './Screens/MainScreen'
export default class App extends Component { render() { return <AppNavigationContainer/> } } const AppNavigator = createStackNavigator({ Main:MainScreen, Home: HomeScreen, Profile: ProfileScreen, Contact:ContactScreen }, { initialRouteName: 'Main', navigationOptions: { headerTitleStyle: { fontWeight: "bold", color: "red", }, headerTintColor: "red" } }) const AppNavigationContainer = createAppContainer(AppNavigator);

Now create a new folder in your project with the name of Screens and add the following files in this folder

---

MainScreen.js:

import React ,{Component} from 'react' import {View, Text,StyleSheet,Button, StatusBar} from 'react-native' export default class MainScreen extends Component{ static navigationOptions = { headerTintColor: 'white', title: 'Moving between screens', headerStyle: { backgroundColor: '#FF5722' }, headerTitleStyle: { fontWeight: '300', color: 'white', fontFamily: 'Nunito-Regular', justifyContent: 'center', alignItems: 'center', fontSize: 16}, } homeClick(){ this.props.navigation.navigate('Home') } contactClick(){ this.props.navigation.navigate('Contact') } profileClick(){ this.props.navigation.navigate('Profile') } render(){ return( <View style={style.Container}> <StatusBar backgroundColor='#FF7043'></StatusBar> <View style={style.btnContainer}> <Button title='Home' color='#FF5722' onPress={this.homeClick.bind(this)}></Button> </View > <View style={style.btnContainer}> <Button title='Contact' color='#FF5722' onPress={this.contactClick.bind(this)}> </Button> </View> <View style={style.btnContainer}> <Button title='Profile' color='#FF5722' onPress={this.profileClick.bind(this)}></Button> </View> </View> ) } } const style = StyleSheet.create({ Container:{ flex:1, justifyContent: 'center', alignItems: 'center', width: '100%' }, btnContainer:{ width:'70%', height:50, position:'relative', justifyContent: 'center', alignContent:'center', } });

---

HomeScreen.js:

import React , {Component} from 'react' import {View, Text,StyleSheet} from 'react-native'
export default class HomeScreen extends Component{ static navigationOptions = { headerTintColor: 'white', title: 'Moving between screens', headerStyle: { backgroundColor: '#FF5722' }, headerTitleStyle: { fontWeight: '300', color: 'white', fontFamily: 'Nunito-Regular', justifyContent: 'center', alignItems: 'center', fontSize: 16}, } render(){ return( <View style={styles.Container}> <Text style={styles.txtStyle}>Home Screen</Text> </View> ) } }
const styles= StyleSheet.create({ Container:{ flex:1, justifyContent:'center', alignItems:'center' }, txtStyle:{ alignItems:'center', fontWeight: 'bold', fontFamily: 'Nunito-Regular', fontSize: 25, }, })

---

ContactScreen.js:

import React ,{Component} from 'react' import {View , Text, StyleSheet} from 'react-native' export default class ContactScreen extends Component{ static navigationOptions = { headerTintColor: 'white', title: 'Moving between screens', headerStyle: { backgroundColor: '#FF5722' }, headerTitleStyle: { fontWeight: '300', color: 'white', fontFamily: 'Nunito-Regular', justifyContent: 'center', alignItems: 'center', fontSize: 16}, } render(){ return( <View style={styles.Container}> <Text style={styles.txtStyle}>Contact us</Text> </View> ) } } const styles = StyleSheet.create({ Container:{ justifyContent:'center', alignItems:'center', flex:1, }, txtStyle:{ alignItems:'center', fontWeight: 'bold', fontFamily: 'Nunito-Regular', fontSize: 25, }, })

---

ProfileScreen.js:

import React ,{Component} from 'react' import {View, Text,StyleSheet} from 'react-native' export default class ProfileScreen extends Component{ static navigationOptions = { headerTintColor: 'white', title: 'Moving between screens', headerStyle: { backgroundColor: '#FF5722' }, headerTitleStyle: { fontWeight: '300', color: 'white', fontFamily: 'Nunito-Regular', justifyContent: 'center', alignItems: 'center', fontSize: 16}, } render(){ return( <View style={styles.Container}> <Text style={styles.txtStyle}>Profile Screen</Text> </View> ) } } const styles= StyleSheet.create({ Container:{ flex:1, justifyContent:'center', alignItems:'center' }, txtStyle:{ alignItems:'center', fontWeight: 'bold', fontFamily: 'Nunito-Regular', fontSize: 25, }, })

DOWNLOAD SOURCE CODE FROM HERE