Loading


React Native

  • Home
  • React Native
  • How to Use Routing with React Navigation in React Native ?. The Complete React Native Developer Course 2024.
React Native

How to Use Routing with React Navigation in React Native ?. The Complete React Native Developer Course 2023 [Videos].

By admin / 19-jan-2022 / in Blog, React Native / 158 Comments / 1 Likes / Share This Post

Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application.

Transitioning between multiple screens is managed by Navigators. React Navigation allows various kinds of navigators, like Stack Navigators, Drawer Navigators, Tab Navigators, etc. Along with navigating between multiple screens, it can also be used for sharing data between them.

Approach: We will be using the StackNavigator provided by React Navigation. It is used to allow transitions between screens wherein every new screen is placed on top of a stack. In our example, we will be creating 3 screens and transitioning between them using the StackNavigator. We will also learn how to pass data from one screen to another and display it in the screen header along with basic transitioning.

 

Creating application and installing modules:

  • Step 1: Open your terminal and install expo-cli by the following command.

    npm install -g expo-cli

  • Step 2: Now create a project by the following command.

    expo init react-navigation-routing

  • Step 3: Now go into your project folder i.e. react-navigation-routing

    cd react-navigation-routing

  • Step 4: Install the required packages using the following command:

    npm install –save react-navigation react-navigation-stack react-native-reanimated react-native-gesture-handler react-native-screens react-native-vector-icons

Project Structure: The project directory should look like the following:



Example: In this example, we will create 3 screens, namely, Home Screen, Profile Screen, and Settings Screen. We will use a Stack Navigator and configure it with some basic styles. We will also dynamically send data from one screen and display it as the header title on another screen (take input from the user on the Home Screen, pass it on to the Profile Screen, and display it on the Header of the Profile Screen.

This file contains the basic Navigator setup. We will use the createStackNavigator() method provided by the react-navigation-stack library to create our stack navigator. Some basic styles are provided to all the 3 screens using the default navigation options. 

import React from "react";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
  
import HomeScreen from "./screens/HomeScreen";
import ProfileScreen from "./screens/ProfileScreen";
import SettingsScreen from "./screens/SettingsScreen";
  
const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Profile: ProfileScreen,
    Settings: SettingsScreen,
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#006600",
      },
      headerTintColor: "#FFF",
    },
  }
);
  
const Navigator = createAppContainer(AppNavigator);
  
export default function App() {
  return (
    <Navigator>
      <HomeScreen />
    </Navigator>
  );
}

This is the first screen of our stack. In this screen, we will ask the user to provide a profile name as an input which we will pass to the “Profile” screen.

import React, { useState } from "react";
import { Text, View, TextInput, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Home = (props) => {
  const [input, setInput] = useState("");
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Home Screen!</Text>
      <Ionicons name="ios-home" size={80} color="#006600" />
      <TextInput
        placeholder="Enter your profile"
        value={input}
        onChangeText={(value) => setInput(value)}
      />
      <Button
        title="Go to Profile"
        color="#006600"
        onPress={() =>
          props.navigation.navigate("Profile", { username: input })
        }
      />
    </View>
  );
};
  
export default Home;

This screen will receive the input given by the user in the Home Screen using the navData object and display it in its header. 

import React from "react";
import { Text, View, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Profile = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Profile Screen!</Text>
      <Ionicons name="ios-person-circle-outline" size={80} color="#006600" />
      <Button
        title="Go to Settings"
        color="#006600"
        onPress={() => props.navigation.navigate("Settings")}
      />
    </View>
  );
};
  
Profile.navigationOptions = (navData) => {
  return {
    headerTitle: navData.navigation.getParam("username"),
  };
};
  
export default Profile;

This is a simple screen with a button to go back to the Home Screen.

import React from "react";
import { Text, View, Button } from "react-native";
import { Ionicons } from "@expo/vector-icons";
  
const Settings = (props) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text style={{ color: "#006600", fontSize: 40 }}>Settings Screen!</Text>
      <Ionicons name="ios-settings-outline" size={80} color="#006600" />
      <Button
        title="Go to Home"
        color="#006600"
        onPress={() => props.navigation.navigate("Home")}
      />
    </View>
  );
};
  
export default Settings;

Step to run the application: Start the server by using the following command.

expo start

Output:

Read more
See All

Comments (158 Comments)

Submit Your Comment

See All Posts

Related Posts

React Native / Youtube

Setting up the development environment of React Native.

If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native
8-Sep-2021 /1 /158

React Native / Blog

How React Native is different from ReactJS ?

ReactJS: It is a JavaScript library that supports both front-end and server-side. It is a popularly used library, which focuses on developing user interfaces (UI) for mobile as well as web-based applications. Developed by Facebook, it is based on the JavaScript language and hence, it is synonymously also called ReactJS.
19-jan-2022 /1 /158

React Native / Blog

How to Use Routing with React Navigation in React Native ?

Almost every mobile application requires navigating between different screens. React Native provides an elegant and easy-to-use library to add navigation to native applications: react-navigation. It is one of the most popular libraries used for routing and navigating in a React Native application.
19-jan-2022 /1 /158