React Native Navigation: Navigating Between Screens

To create Navigation in React Native, use the “StackNavigator”. The StackNavigator allows our app to transition between screens and manage navigation history. If our app uses only one StackNavigator, it is conceptually similar to how a web browser handles Navigation.

The main difference between how this works in a web browser and React Navigation is that React Navigation’s  StackNavigator provides the gestures and animations you expect on Android and iOS when navigating between routes in the stack.

Step 1: Install React Native

Now install the react native project by the following command.

sudo npm install -g react-native-cli

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

react-native init RNNavigation
cd RNNavigation

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

react-native run-ios

Step 2: Create two screens for our project.

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

1. Settings.js
2. Home.js

Add the following code to the 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 the 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

We have both screens ready. Next, we need to add Navigation to it.

Step 3: Install the React Navigation package.

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

yarn add react-navigation

Add the react-navigation module inside the App.js file.

// App.js

import { StackNavigator } from 'react-navigation';

StackNavigator allows your app to transition between the screens and manage navigation history.

Import the two screens we have created inside the App.js file.

// App.js

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

Pass both screens on the StockNavigator function.

// App.js

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

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 />
    );
  }
}

Step 4: Add the Navigation Button inside the Settings.js file.

Write the following code inside the 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, we have done that 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. So, 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;

Step 5: Reload the application.

Reload the iPhone Simulator. You will see the Screen like this.

Now, you can see on the Screen that a Home button is there, so after clicking that Home Button, we can transit through navigating to the new window.

Above the Screen is the 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 future posts. That’s it.

Krunal

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.