Navigation and Screens

Apps have many screens. Expo Router gives React Native file-based routing like Next.js.

Routes from files

app/
├── _layout.jsx            # root layout (stack)
├── (tabs)/
│   ├── _layout.jsx        # bottom tab bar
│   ├── index.jsx          # Home tab
│   ├── learn.jsx          # Learn tab
│   └── profile.jsx        # Profile tab
└── track/
    └── [slug].jsx         # pushed detail screen

A tab layout

// app/(tabs)/_layout.jsx
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";

export default function TabsLayout() {
  return (
    <Tabs screenOptions={{ tabBarActiveTintColor: "#7c3aed" }}>
      <Tabs.Screen name="index" options={{ title: "Home",
        tabBarIcon: ({ color, size }) => <Ionicons name="home" color={color} size={size} /> }} />
      <Tabs.Screen name="learn" options={{ title: "Learn",
        tabBarIcon: ({ color, size }) => <Ionicons name="school" color={color} size={size} /> }} />
      <Tabs.Screen name="profile" options={{ title: "Profile",
        tabBarIcon: ({ color, size }) => <Ionicons name="person" color={color} size={size} /> }} />
    </Tabs>
  );
}

Navigating and parameters

import { Link, useLocalSearchParams, router } from "expo-router";

<Link href={`/track/${track.slug}`}>Open {track.title}</Link>
router.push({ pathname: "/track/[slug]", params: { slug: "python-programming" } });
router.back();

// app/track/[slug].jsx
export default function TrackScreen() {
  const { slug } = useLocalSearchParams();
  return <Text>Track: {slug}</Text>;
}

Deep links

Expo Router makes every screen addressable by URL, so links like myapp://track/python-programming (or universal links from your website) open the right screen. Configure the scheme in app.json.

Safe areas

Phones have notches and home indicators. Wrap screens in SafeAreaView from react-native-safe-area-context so content is not hidden.

Exercise

Build a three-tab app (Home, Learn, Profile). The Learn tab lists tracks; tapping one pushes a detail screen that reads its slug parameter and shows a back button.

Check yourself

• How does Expo Router decide a screen's URL?
• How do you read a route parameter?
• Why use safe-area handling?