AppDividend
Latest Code Tutorials

React Native Navigation Example Tutorial

12,443

Get real time updates directly on you device, subscribe now.

React Native Navigation Example Tutorial is today’s leading topic. As in the previous tutorial, we have created the login screen; now we are building the navigation for our application. In React.js, we have used the react-router-dom library for routing between the components. For a React Native application, We will install the library called React NavigationReact Navigation is born from the React Native community’s need for an extensible yet easy-to-use navigation solution written entirely in JavaScript, on top of robust native primitives.

If you are new to React Native then below article will help you to get started.

Related Article: Beginners Guide To Create React Native Application

Also, you can check out the below course to learn React Native From Scratch.
React Native – The Practical Guide

In the web browser, you can link to different pages using an anchor (<a>) tag. When the user clicks on a link, the URL is pushed to the browser history stack. When a user presses the back button, a browser pops an item from the top of the history stack, so the active page is now the previously visited page. React Native doesn’t have a built-in idea of a global history stack like a web browser does — this is where React Navigation enters the story.

React Navigation’s StackNavigator provides us a way for our app to transition between screens and manage navigation history. If our app uses only one StackNavigator, then it is conceptually similar to how a web browser handles navigation state. The critical difference between how this works in a web browser and React Navigation is that React Navigation’s  StackNavigator provides the gestures and animations that you would expect on Android and iOS when navigating between routes in the stack.

React Native Navigation Example

Okay, now install the react native project by the following command.

sudo npm install -g react-native-cli

After that, we need to generate the project and go into that directory.

react-native init RNNavigation
cd RNNavigation

Now, I am showing you this example on the iOS device so; we need to start the ios development. Hit the following command to generate iOS build.

react-native run-ios

Create two screens for our project.

In the root directory, create one folder called screens. Go into that folder and create two screens.

  1. Settings.js
  2. Home.js

Now, add the following code to Settings.js file.

// Settings.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export class Settings extends Component {
  render() {
    return (
      <View>
        <Text>This is the Settings screen</Text>
      </View>
    )
  }
};

export default Settings;

After that add the following code to Home.js file.

// Home.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export class Home extends Component {
  render() {
    return (
      <View>
        <Text>This is the home screen</Text>
      </View>
    )
  }
}

export default Home

So, now we have both screen ready. We just need to add navigation to it.

Install React Navigation package.

Go to your project root and in the terminal, add the package using the following command.

yarn add react-navigation

Now, add react navigation module inside App.js file.

// App.js

import { StackNavigator } from 'react-navigation';

StackNavigator provides the way for your app to transition between the screens and manage navigation history.

Now, import the two screens we have created inside the App.js file.

// App.js

import Settings from './screens/Settings';
import Home from './screens/Home';

Now, pass both the screen on the StockNavigator function.

// App.js

const AppNavigator = StackNavigator({
  SettingScreen: { screen: Settings },
  HomeScreen: { screen: Home }
});

So, our final App.js file looks like this.

// App.js

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import Settings from './screens/Settings';
import Home from './screens/Home';

const AppNavigator = StackNavigator({
  SettingScreen: { screen: Settings },
  HomeScreen: { screen: Home }
});

export default class App extends Component {
  render() {
    return (
      <AppNavigator />
    );
  }
}

Add the Navigation Button inside Settings.js file.

// Settings.js

export class Settings extends Component {
  render() {
    return (
      <View>
        <Text>This is the Settings screen</Text>
        <Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
      </View>
    )
  }
};

So, what we have done is when the user clicks that button, it will redirect to HomeScreen, which we have defined inside the App.js file. So our screen smoothly changes to the clicked one. In our case it is HomeScreen. Our final Settings.js file looks like this.

// Settings.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export class Settings extends Component {
  render() {
    return (
      <View>
        <Text>This is the Settings screen</Text>
        <Button onPress={() => this.props.navigation.navigate('HomeScreen')} title="Home"/>
      </View>
    )
  }
};

export default Settings;

Reload the application.

Now, reload the iPhone Simulator. You will see the screen like this.

Related Posts
1 of 8

React Native Navigation Tutorial With Example From Scratch

 

Now, you can see on the screen that there is Home button is there, so after click that Home Button, we can transit through navigating to the new window. Above screen is Setting Screen, and after the transition, we get the Home Screen.

 

So Above example is the primary example of React Native Navigation. We will see the advanced level examples in the future posts.  So React Native Navigation Example Tutorial is over. Thanks.

3 Comments
  1. abhishek singh says

    sir awesome tutorial but i need to set homepage as opening page rather than setting page.

  2. Akash says

    Thanks

  3. Lucas says

    Unable to resolve “react-navigation” from “App.js” any solution?

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.