Native Stack

The Stack Layout in Expo Router wraps the Native Stack Navigator from React Navigation, not to be confused with the legacy JS Stack Navigator.

For a list of all options, see the Native Stack Navigator: Options.

Migration

Consider the following React Navigation block:

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="home" component={Home} />
      <Stack.Screen name="details" component={Details} />
    </Stack.Navigator>
  );
}

This can be recreated with the following structure:

File System
app/
  _layout.js
  home.js
  details.js

app/_layout.js
import { Stack } from "expo-router/stack";

export default function Layout() {
  return <Stack initialRouteName="home" />;
}

You should default to using index as the initial route instead of something like home.

Migration​

Migration