Why navigation manages screen flow in React Native

Introduction

Navigation helps users move between different screens in an app easily. It controls what screen shows up next, making the app feel smooth and organized.

When you want to move from a home screen to a details screen after a button tap.

When you need to go back to a previous screen after completing a task.

When your app has multiple sections like profile, settings, and messages.

When you want to open a new screen without closing the current one.

When you want to control the order of screens the user sees.

Syntax

React Native

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

NavigationContainer wraps your whole app to manage navigation state.

Stack.Navigator defines the order and type of screens.

Examples

Simple navigation with only one screen called Home.

React Native

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

const Stack = createStackNavigator();

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

Button on Home screen to move to Details screen.

React Native

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  );
}

Sample App

This app has two screens: Home and Details. You start on Home. Pressing the button moves you to Details. On Details, pressing Go Back returns you to Home.

React Native

import React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
      <Button title="Go Back" onPress={() => navigation.goBack()} />
    </View>
  );
}

const Stack = createStackNavigator();

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

Important Notes

Navigation keeps track of where you are in the app and what screen to show next.

Using navigation makes your app easier to use and understand.

Always wrap your app in NavigationContainer to enable navigation features.

Summary

Navigation controls the flow between screens in an app.

It helps users move forward and backward smoothly.

React Navigation uses containers and navigators to manage screens.