Navigation in React Native

# CHAPTER 14

Navigation in React Native #

1. Introduction #

2. Learning Objectives #

• Explain why React Native requires a third-party routing library.

• Install the react-navigation core and its native dependencies.

• Understand the concept of the NavigationContainer.

• Understand the "Stack" (Push/Pop) navigation metaphor.

• Architect the root App.js file to support a multi-screen application.

3. Why React Navigation? #

4. Installation and Setup #

Step 1: Install the Core Library Open your terminal in your project folder and run:

npm install @react-navigation/native

Step 2: Install Expo Native Dependencies Because these packages contain native C++ and Java code, Expo has a special command to install the perfect, compatible versions:

npx expo install react-native-screens react-native-safe-area-context

Step 3: Install the Stack Navigator We want standard "push to new screen" functionality, so we install the Native Stack:

npm install @react-navigation/native-stack

5. The Architecture (NavigationContainer) #

Inside the Container, we place a Navigator. Inside the Navigator, we place our individual Screens.

6. The Stack Metaphor #

• When you open the app, it places the HomeScreen card on the table.

• When you tap a product, it Pushes the DetailsScreen card *on top* of the Home card. You are now looking at Details.

• When you tap the back arrow, it Pops (destroys) the Details card off the top of the stack, instantly revealing the HomeScreen card underneath it exactly as you left it.

7. Setting up the Root Navigator (App.js) #

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

// 1. IMPORT NAVIGATION TOOLS
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 2. CREATE DUMMY SCREENS
function HomeScreen() {
  return <View style={{ flex: 1, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039; }}><Text>Home Screen</Text></View>;
}

function DetailsScreen() {
  return <View style={{ flex: 1, alignItems: &#039;center&#039;, justifyContent: &#039;center&#039; }}><Text>Details Screen</Text></View>;
}

// 3. INITIALIZE THE STACK OBJECT
const Stack = createNativeStackNavigator();

// 4. THE MAIN APP COMPONENT
export default function App() {
  return (
    // Wrap EVERYTHING in the NavigationContainer
    <NavigationContainer>
      
      {/* Define the Stack */}
      <Stack.Navigator initialRouteName="Home">
        
        {/* Register each screen with a unique 'name' string */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        
      </Stack.Navigator>
      
    </NavigationContainer>
  );
}

If you run this code, your app will display the HomeScreen. Notice that React Navigation automatically generated a beautiful white App Header bar with the word "Home" centered at the top!

8. Visual Learning: The Routing Tree #

[ NavigationContainer ] (Manages History/Back Button)
        |
   [ Stack.Navigator ] (The Deck of Cards)
        |
        |-- [ Stack.Screen name="Home" ]    <-- initialRouteName
        |
        |-- [ Stack.Screen name="Details" ]

9. Common Mistakes #

• Forgetting NavigationContainer: If you try to use <Stack.Navigator> directly in App.js without wrapping it in a <NavigationContainer>, the app will violently crash on launch. The engine requires the container to hold the global navigation state tree.

10. Best Practices #

• Screen Separation: In the code above, we defined HomeScreen and DetailsScreen in the same App.js file for demonstration. In a real application, you must create a screens/ folder, place HomeScreen.js in there, and import HomeScreen from './screens/HomeScreen' into App.js. Keep your routing file clean!

11. Practice Exercises #

1. 1. What specific component acts as the root state manager for the entire routing system and must wrap all navigators?

1. 2. Using the deck of cards metaphor, what terminology is used when a user taps the "Back" button to destroy the current screen and reveal the previous one?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the architectural difference between URL-based routing in React DOM (web) and Stack-based routing in React Native.

• Q: What is the specific purpose of the react-native-safe-area-context package dependency within the React Navigation ecosystem?

• Q: A developer has 50 screens in their application. Should all 50 screens be loaded into the memory array of the NavigationContainer simultaneously upon app launch? How does the Stack Navigator optimize RAM?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #