Building a layout

First create a layout route in app/_layout.js which uses the pre-built Stack component from expo-router to render a native stack navigator.

app/_layout.js

import { Stack } from "expo-router";

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

Now create a child route in app/index.js which will be rendered inside the stack navigator.

app/index.js

import { View } from "react-native";
import { Link, Stack } from "expo-router";

export default function Home() {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      {/* Use the `Screen` component to configure the layout. */}
      <Stack.Screen options={{ title: "Overview" }} />
      {/* Use the `Link` component to enable optimized client-side routing. */}
      <Link href="/details">Go to Details</Link>
    </View>
  );
}

Now create a second child route to navigate to:

app/details.js

import { View, Text } from "react-native";
import { useRouter } from "expo-router";

export default function Details() {
  const router = useRouter();
  return (
    <View>
      <Text
        onPress={() => {
          // Go back to the previous screen using the imperative API.
          router.back();
        }}
      >
        Details Screen
      </Text>
    </View>
  );
}

The final file structure should look like this:

File System

app/
  _layout.js
  index.js
  details.js

Ports the guide React Navigation: Hello world to Expo Router.