Nested navigators in React Native - Mini App: Build & Ship

Build: Nested Navigators Example

This screen demonstrates how to use nested navigators in a React Native app using React Navigation. The main navigator is a bottom tab navigator with two tabs. The first tab contains a stack navigator with two screens. The second tab is a simple screen.

Target UI

┌─────────────────────────────┐
│ Bottom Tabs: [Home] [Settings] │
├─────────────────────────────┤
│ Home Stack Navigator         │
│ ┌───────────────┐           │
│ │ Home Screen   │           │
│ │ [Go to Details]           │
│ └───────────────┘           │
└─────────────────────────────┘

Use React Navigation with a bottom tab navigator as the main navigator.

The first tab should have a stack navigator with two screens: Home and Details.

The Home screen should have a button to navigate to the Details screen.

The second tab should be a simple Settings screen.

Each screen should display a title and a simple message.

Use functional components and hooks.

Starter Code

React Native

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

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

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

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

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

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

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {/* TODO: Add HomeStack and SettingsScreen as tabs */}
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Task 1

Task 2

Task 3

Solution

React Native

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

const Tab = createBottomTabNavigator();
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() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

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

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

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="HomeTab" component={HomeStack} options={{ title: 'Home' }} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

We created a bottom tab navigator with two tabs: Home and Settings.

The Home tab contains a stack navigator with two screens: Home and Details.

On the Home screen, we added a button that navigates to the Details screen when pressed.

This setup shows how to nest a stack navigator inside a tab navigator, allowing independent navigation inside the Home tab.

We used functional components and React Navigation hooks for clean and modern code.

Final Result

Completed Screen

┌─────────────────────────────┐
│ Bottom Tabs: [Home] [Settings] │
├─────────────────────────────┤
│ Home Screen                 │
│                             │
│ Home Screen                 │
│ [Go to Details]             │
└─────────────────────────────┘

Tapping 'Go to Details' button navigates to the Details screen inside the Home tab.

Tapping the Settings tab switches to the Settings screen.

Back navigation from Details returns to Home screen.

Stretch Goal

Add icons to the bottom tab navigator using react-native-vector-icons.

💡 Hint

Use the screenOptions prop on Tab.Navigator and the tabBarIcon option to add icons.