Setting Up Navigation in React Native with Expo Router

not include a navigation system by default

Expo Router simplifies navigation by mapping 

Instead of manually declaring routes, you just create files.

Mobile navigation is more complex than web routing. Expo Router handles:

, which define how screens inside a folder are arranged.

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar


This tells Expo to start the app using Expo Router instead of the default 

{
  "expo": {
    "scheme": "taskly"
  }
}


 acts like a custom URL to open your app:

Expo Router includes built-in deep linking, so this is mandatory.

Your project now follows file-based routing.

Always reset cache after structural changes:

At this stage, your app should still look exactly the same — we’ve only changed the structure, not behavior.

Think of it like a wrapper that controls how child screens appear.

import { Stack } from "expo-router";

export default function Layout() {
  return (
    <Stack>
      <Stack.Screen
        name="index"
        options={{ title: "Shopping list" }}
      />
    </Stack>
  );
}


app/index.tsx → Screen inside a Stack Navigator


createStackNavigator({
  Home: HomeScreen
})


project-root
 ├── app
 │   ├── _layout.tsx
 │   └── index.tsx
 ├── app.json
 ├── package.json


app/add-item.tsx        → /add-item
app/products/[id].tsx   → Dynamic route
app/(tabs)/_layout.tsx  → Tab navigation
