Skip to main content

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.

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.

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>

Now create a second child route to navigate to:

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

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

The final file structure should look like this:

File System

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