Expo Router Navigation

// app/index.tsx
import { Text, View } from "react-native";
 
export default function HomeScreen() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text>Home</Text>
    </View>
  );
}

// app/_layout.tsx
import { Stack } from "expo-router";
 
export default function Layout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: "Home" }} />
      <Stack.Screen name="settings" options={{ title: "Settings" }} />
    </Stack>
  );
}

import { Link } from "expo-router";
import { Text } from "react-native";
 
<Link href="/settings">
  <Text>Open settings</Text>
</Link>

import { router } from "expo-router";
 
function onCreated(id: string) {
  router.push(`/items/${id}`);
}

// app/items/[id].tsx
import { useLocalSearchParams } from "expo-router";
 
export default function ItemScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <Text>Item {id}</Text>;
}

const { id, tab } = useLocalSearchParams<{ id: string; tab?: string }>();
const itemId = Array.isArray(id) ? id[0] : id;

// app/(tabs)/_layout.tsx
import { Tabs } from "expo-router";
 
export default function TabsLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: "Home" }} />
      <Tabs.Screen name="profile" options={{ title: "Profile" }} />
    </Tabs>
  );
}

import { Redirect } from "expo-router";
 
if (!session) return <Redirect href="/sign-in" />;
return <AppShell />;

import { router } from "expo-router";
 
function onBack() {
  if (router.canGoBack()) router.back();
  else router.replace("/");
}

router.replace("/(tabs)");

<Stack.Screen name="compose" options={{ presentation: "modal", title: "New" }} />

<Link href={{ pathname: "/search", params: { q: query } }}>
  <Text>Search</Text>
</Link>

import { useNavigation } from "expo-router";
import { useLayoutEffect } from "react";
 
const navigation = useNavigation();
useLayoutEffect(() => {
  navigation.setOptions({ title: item?.name ?? "Item" });
}, [navigation, item?.name]);

// app/(auth)/sign-in.tsx -> /sign-in
// app/(auth)/_layout.tsx can wrap auth screens without a URL segment

// app.config: { expo: { scheme: "myapp" } }
// Opens: myapp://items/1  -> app/items/[id].tsx