React-native react-navigation tutorial with navigationOptions

React-native react-navigation tutorial

In this article, we going to learn about React-native react-navigation tutorial with navigationOptions, if you are going to develop an application then you must learn react-native navigation, the best way to navigate from one screen to another is React-native’s Stack navigation this allows you to navigates to multiple screens, transfer data from one screen through to another, you can add special transition while navigating through screens to use this we need to install library called React navigation

Overview

1. Create react-native project
2. Create two screens in the project under the Component folder
3. Install React navigation
4. Usage navigation

1. Create react-native project

If you don’t know about basics of react-native then please read this article

2. Create two screens

I have two screens in my project first screen is default App.js, HomeScreen.js and third is detailsView.js screen

3. Install React navigation

To install react navigation open command line and goto project root folder and type following command

npm install --save react-navigation

this will install react navigation library in our node_modules folder

4. Usage

To use this library first import this as follows in App.js

import { StackNavigator } from 'react-navigation';

after that, we need to define our every new screen in Stack navigation to do this first import screens

import DetailsView from './components/DetailsView';

after imports all screen defined all screen

const Navigation = StackNavigator({
  home:{
   screen: HomeScreen,
  },
  detailsView :{
   screen: DetailsView ,
  }
})

We need to call this const navigation in return method

class MyApp extends Component {
constructor(props) {
   super(props);
}
render() {
     return (
        <Navigation />
     );
   }
}
export default MyApp;
AppRegistry.registerComponent('MyApp', () => Navigation);

This will return HomeScreen and displayed render data from Home screen now consider HomeScreen.js is displayed and we need to go detailView.js from home screen then just add the following line on the onPress event of the button

onPress={() => this.props.navigation.navigate('detailsView')}

This will navigate to detailView.js. you can also pass data from this onPress navigation event

onPress={() => this.props.navigation.navigate('detailsView',{token: 'tftyfu'})}

You can send the whole object also just define the key for that object and pass the object, also make sure name detailView is same as in App.js navigation definition

App.js code

import React, { Component } from 'react';
import {
AppRegistry,
Text,
StyleSheet,
View,
StatusBar,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

import DetailsView from './components/DetailsView';
import HomeScreenfrom './components/HomeScreen';

const Navigation = StackNavigator({
  home:{
    screen: HomeScreen,
  },
  detailsView :{
    screen: DetailsView ,
  }
})

class MyApp extends Component {
  constructor(props) {
     super(props);
  }
render() {
   return (
     <Navigation />
   );
 }
}
export default MyApp;
AppRegistry.registerComponent('MyApp', () => Navigation);

React navigation options

Navigation option is the most important thing in react-native which provide different option to navigate on the screen let’s understand with the code below:

static navigationOptions = ({ navigation }) => {
const { params } = navigation.state;
   return {
     title: params ? params.otherParam : 'DetailsView',
     headerStyle: {
         backgroundColor: '#0570E9',
     },
     headerTintColor: '#fff',
     headerTitleStyle: {
         fontWeight: 'bold',
     },
     headerLeft: <HeaderBackButton onPress={() => navigation.goBack(null)} />,
     headerRight: (
         <Image source={require('../images/ic_search.png')} style={{margin:10}} />

     ),
   }
};

As we see in above code we can set Title, headerStyle which change the background color, headerTintColor is the text color on the toolbar, headerTitleStyle set style to text, headerleft generally contain back button we can add also a custom back button here, headerRight we can add an icon on the right-hand side of the navigation toolbar we can add multiple icon here

Thank you 🙂 enjoy coding…