Why navigation manages screen flow in React Native - Build It to Prove It

Build: Simple Navigation Flow

This screen shows how navigation controls the flow between two screens in a React Native app. It helps users move from one screen to another and back.

Target UI

Screen 1: Home
+---------------------+
|      Home Screen     |
|                     |
|  [Go to Details]     |
+---------------------+

Screen 2: Details
+---------------------+
|    Details Screen    |
|                     |
|  [Go Back]           |
+---------------------+

Create two screens: Home and Details

Home screen has a button labeled 'Go to Details' that navigates to Details screen

Details screen has a button labeled 'Go Back' that navigates back to Home screen

Use React Navigation to manage screen flow

Starter Code

React Native

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

export default function App() {
  // TODO: Setup navigation container and stack navigator
  // TODO: Create HomeScreen and DetailsScreen components
  // TODO: Implement navigation between screens
  return null;
}

Task 1

Task 2

Task 3

Solution

React Native

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

const Stack = createNativeStackNavigator();

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

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

This app uses React Navigation to manage screen flow. We create a stack navigator that holds two screens: Home and Details.

The HomeScreen has a button labeled 'Go to Details'. When pressed, it calls navigation.navigate('Details') to move to the Details screen.

The DetailsScreen has a button labeled 'Go Back'. When pressed, it calls navigation.goBack() to return to the previous screen, which is Home.

This shows how navigation manages the flow between screens, letting users move forward and backward in the app.

Final Result

Completed Screen

Screen 1: Home
+---------------------+
|      Home Screen     |
|                     |
|  [Go to Details]     |
+---------------------+

Screen 2: Details
+---------------------+
|    Details Screen    |
|                     |
|  [Go Back]           |
+---------------------+

Tap 'Go to Details' button on Home screen navigates to Details screen

Tap 'Go Back' button on Details screen returns to Home screen

Stretch Goal

Add a header title that changes based on the screen

💡 Hint

Use the options prop on Stack.Screen to set a title for each screen