Deepshikha Puri, the young Indian Entrepreneur heading the mobile development trade from years to successive extent, has worked with numerous clients and many tremendous brands in this industry of mobile encompassing in India and overseas maintaining promising work relationships with each of them with an impression to manage it's whole thing.

Tuesday, January 15, 2019

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.

navigation between screens react native navigation in react native

react native navigation react native navigation example

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

No comments:

Post a Comment