Complete React Native Tutorial #4 - Layouts and Stack

 

Ready to level up your Expo Router navigation? Once you've mastered basic page linking, it's time to introduce two powerful concepts: layout files for shared content and the Stack component for native navigation with headers and back buttons. Here's how to implement both in your React Native app.

Creating a Layout File

Layout files let you wrap all your pages with common content like headers, footers, or navigation bars. Create a file called _layout.jsx in your app folder (note the underscore prefix).

import { Slot } from 'expo-router';
import { View, Text } from 'react-native';

export default function RootLayout() {
  return (
    <View style={{ flex: 1 }}>
      <Slot />
      <Text>Footer</Text>
    </View>
  );
}

The Slot component tells Expo Router where to inject your page content. Any content around it (like the footer text) appears on every page.

Upgrading to Stack Navigation

Replace the Slot component with Stack to get automatic headers and back buttons:

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack />
  );
}

The Stack component manages a navigation stack—each new page gets "pushed" onto the stack, and the back button "pops" pages off, returning you to previous screens.

Customizing Individual Screens

Register each screen individually within the Stack to customize titles and options:

<Stack>
  <Stack.Screen
    name="index"
    options={{ title: 'Home' }}
  />
  <Stack.Screen
    name="about"
    options={{ title: 'About' }}
  />
  <Stack.Screen
    name="contact"
    options={{ title: 'Contact', headerShown: false }}
  />
</Stack>

Use the headerShown: false option to hide the header on specific pages when needed.

Global Stack Styling

Apply consistent styling across all screens using the screenOptions prop:

<Stack
  screenOptions={{
    headerStyle: { backgroundColor: '#ddd' },
    headerTintColor: '#333'
  }}
>
  {/* Your Screen components */}
</Stack>

Individual screen options will override these global settings, giving you flexibility when you need custom behavior on specific pages.

With layout files and Stack navigation, you've now implemented professional-grade navigation in your Expo app. Next time, we'll explore how to add light and dark theme support to complete your app's polished look!