Navigation Fundamentals

🗺️ React Native Navigation Fundamentals

The Big Picture: Your App is Like a Building

Imagine you’re in a huge building with many rooms. Each room has something different inside—maybe a living room, a kitchen, or a bedroom. Now, how do you move from one room to another? You walk through doors and use hallways!

In React Native, your app is just like that building:

• Rooms = Screens (pages of your app)
• Hallways = Navigator (decides how screens connect)
• Building Manager = NavigationContainer (keeps track of where you are)

Let’s explore each part!

🏠 Navigation Container: The Building Manager

Think of the NavigationContainer as the manager of your entire building. This manager:

• Knows which room you’re currently in
• Remembers where you’ve been
• Helps you find your way back

Why Do We Need It?

Without a building manager, you’d get lost! The NavigationContainer wraps your entire app and keeps everything organized.

Simple Example

import { NavigationContainer }
  from '@react-navigation/native';

function App() {
  return (
    <NavigationContainer>
      {/* All your screens go here */}
    </NavigationContainer>
  );
}

What’s happening?

• We import the NavigationContainer
• We wrap our entire app inside it
• Now the manager is ready to help!

📚 Stack Navigator: The Pile of Papers

Imagine you have a stack of papers on your desk. When you add a new paper, it goes on top. When you remove one, you take it from the top.

The Stack Navigator works exactly like this!

graph TD
    A["Home Screen"] -->|Go to Profile| B["Profile Screen"]
    B -->|Go to Settings| C["Settings Screen"]
    C -->|Back Button| B
    B -->|Back Button| A

How It Works

1. You start at Home (first paper)
2. Go to Profile → Profile goes on top
3. Go to Settings → Settings goes on top
4. Press Back → Settings removed, you see Profile
5. Press Back again → Profile removed, you see Home

Creating a Stack Navigator

import { createStackNavigator }
  from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
      />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
      />
    </Stack.Navigator>
  );
}

Key Points:

• createStackNavigator() creates our paper stack
• Stack.Navigator is the container
• Stack.Screen is each paper (screen)
• name is what we call each screen
• component is the actual screen content

🖼️ Screen Components: The Rooms

Each Screen Component is like a room in your building. It’s a regular React component that shows content!

A Simple Screen

function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text>Welcome Home!</Text>
    </View>
  );
}

Screens Get Special Powers

When a screen is inside a Navigator, it receives a special gift: the navigation prop!

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Home Sweet Home</Text>
      <Button
        title="Go to Profile"
        onPress={() =>
          navigation.navigate('Profile')
        }
      />
    </View>
  );
}

The navigation prop is like a magic remote control that lets you:

• Go to other screens
• Go back
• Pass information around

🚗 Navigation Methods: Ways to Travel

Just like you can walk, run, or take an elevator in a building, there are different ways to move between screens!

1. navigate() - The Smart Door

navigation.navigate('Profile')

What it does:

• If Profile isn’t in the stack → adds it
• If Profile is already there → goes back to it
• Smart! Won’t add duplicates

2. push() - Add Another Copy

navigation.push('Profile')

What it does:

• Always adds a new screen on top
• Even if it’s the same screen!
• Like adding another copy of a paper

3. goBack() - Go Back One Step

navigation.goBack()

What it does:

• Removes current screen
• Shows the previous screen
• Like pressing the back button

4. popToTop() - Go All the Way Home

navigation.popToTop()

What it does:

• Removes ALL screens except the first one
• Takes you back to the beginning
• Like clearing all papers except the bottom one

Visual Comparison

graph TD
    subgraph "navigate#40;'B'#41;"
    A1["A"] --> B1["B"]
    B1 -.->|"If B exists"| B2["Goes to B"]
    end

    subgraph "push#40;'B'#41;"
    A2["A"] --> B3["B"]
    B3 --> B4["B again!"]
    end

📦 Route Params: Sending Packages Between Rooms

Sometimes you want to send information from one screen to another. It’s like sending a package to a friend in another room!

Sending Params (Packing the Box)

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Profile"
      onPress={() =>
        navigation.navigate('Profile', {
          userName: 'Alex',
          age: 25,
        })
      }
    />
  );
}

We’re sending a package with:

• userName: ‘Alex’
• age: 25

Receiving Params (Opening the Box)

function ProfileScreen({ route }) {
  const { userName, age } = route.params;

  return (
    <View>
      <Text>Hello, {userName}!</Text>
      <Text>You are {age} years old</Text>
    </View>
  );
}

The route prop contains our package in route.params!

The Flow

graph LR
    A["Home Screen"] -->|"params: {name, age}"| B["Profile Screen"]
    B -->|"route.params"| C["Uses: name, age"]

Setting Default Params

What if someone forgets to send a package? Set defaults!

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
  initialParams={{
    userName: 'Guest',
    age: 0
  }}
/>

Now Profile always has backup values!

🎯 Putting It All Together

Here’s a complete mini-app showing everything:

import { NavigationContainer }
  from '@react-navigation/native';
import { createStackNavigator }
  from '@react-navigation/stack';

const Stack = createStackNavigator();

// Home Screen
function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Welcome!</Text>
      <Button
        title="See Alex's Profile"
        onPress={() =>
          navigation.navigate('Profile', {
            name: 'Alex'
          })
        }
      />
    </View>
  );
}

// Profile Screen
function ProfileScreen({ route, navigation }) {
  const { name } = route.params;
  return (
    <View>
      <Text>Hello, {name}!</Text>
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

// Main App
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
      >
        <Stack.Screen
          name="Home"
          component={HomeScreen}
        />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

🧠 Quick Memory Map

🌟 You Did It!

Now you understand:

✅ NavigationContainer - The boss that manages everything

✅ Stack Navigator - Screens stack like papers

✅ Screen Components - Each page of your app

✅ Navigation Methods - Different ways to move around

✅ Route Params - Sending data between screens

You’re now ready to build apps where users can explore different screens! It’s like being an architect who designs buildings where people never get lost! 🏗️