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.