Stack Navigator in React Native - Mini App: Build & Ship

Build: Simple Stack Navigation

Build a two-screen app using stack navigation. The first screen has a button to go to the second screen. The second screen has a button to go back.

Target UI

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

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

Use React Navigation stack navigator

Screen 1 named 'Home' with a button labeled 'Go to Details'

Screen 2 named 'Details' with a button labeled 'Go Back'

Pressing 'Go to Details' navigates to Details screen

Pressing 'Go Back' returns to Home screen

Starter Code

React Native

import * as 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, alignItems: 'center', justifyContent: 'center' }}>
      {/* TODO: Add a button to navigate to Details screen */}
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      {/* TODO: Add a button to go back to Home screen */}
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {/* TODO: Add Home and Details screens here */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Task 1

Task 2

Task 3

Solution

React Native

import * as 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, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 24, marginBottom: 20 }}>Home Screen</Text>
      <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 24, marginBottom: 20 }}>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's native stack navigator to create two screens: Home and Details.

On the Home screen, a button labeled Go to Details calls navigation.navigate('Details') to move to the Details screen.

On the Details screen, a button labeled Go Back calls navigation.goBack() to return to the previous screen.

The Stack.Navigator defines the two screens with their names and components.

This setup creates a simple stack navigation flow, like pages in a book, where you can move forward and back.

Final Result

Completed Screen

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

Screen 2:
+---------------------+
|   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 for each screen that matches the screen name

💡 Hint

Use the 'options' prop on Stack.Screen to set 'title' property