React Navigation installation in React Native - Mini App: Build & Ship

Build: Home Screen

A simple home screen with a button to navigate to a Details screen using React Navigation.

Target UI

-------------------
|     Home Screen  |
|                  |
|  [Go to Details] |
|                  |
-------------------

Install React Navigation and its dependencies

Set up a basic stack navigator with two screens: Home and Details

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

Details screen shows a simple text 'Details Screen'

Starter Code

React Native

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

export default function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* TODO: Add Button to navigate to Details screen */}
    </View>
  );
}

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

// TODO: Set up Navigation Container and Stack Navigator here

Task 1

Task 2

Task 3

Task 4

Solution

React Native

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

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

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

const Stack = createNativeStackNavigator();

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

This solution shows how to install and set up React Navigation for a simple two-screen app.

First, you install the required packages:

npm install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated

Then, you import NavigationContainer which manages navigation state, and createNativeStackNavigator to create a stack of screens.

The HomeScreen has a button that calls navigation.navigate('Details') to go to the Details screen.

The DetailsScreen just shows some text.

The App component wraps the stack navigator inside the navigation container.

This setup follows React Navigation's official guidelines and creates a working navigation flow.

Final Result

Completed Screen

-------------------
|     Home Screen  |
|                  |
|  [Go to Details] |
|                  |
-------------------

-- After tapping button --

-------------------
|   Details Screen  |
|                   |
|  Details Screen    |
|                   |
-------------------

User sees Home Screen with a button labeled 'Go to Details'.

When user taps the button, app navigates to Details Screen.

Details Screen shows text 'Details Screen'.

User can use back gesture or button to return to Home Screen.

Stretch Goal

Add a header title to each screen in the stack navigator.

💡 Hint

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