Skip to main content

Moving between screens

Ports the guide React Navigation: Navigating to Expo Router.

File System
app/
_layout.js
home.js
details.js
app/_layout.js
import { Stack } from "expo-router";

export const unstable_settings = {
initialRouteName: "home",
};

export default function Layout() {
return <Stack initialRouteName="home" />;
}
app/home.js
import { View, Text, Button } from "react-native";
import { Link } from "expo-router";

export default function Home() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Link href="/details">Go to Details</Link>
</View>
);
}
app/details.js
import { View, Text, Button } from "react-native";
import { Link, useNavigation, useRouter } from "expo-router";

export default function Details() {
const router = useRouter();
const navigation = useNavigation();

return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Details Screen</Text>

<Link href="/home">Go to Home</Link>

<Button
title="Go to Details... again"
onPress={() => router.push("/details")}
/>
<Button title="Go back" onPress={() => router.back()} />
<Button
title="Go back to first screen in stack"
onPress={() => navigation.popToTop()}
/>
</View>
);
}