https://docs.expo.dev/router/introduction/

What We're Doing and Why

Right now our SolScan app has everything crammed into App.tsx. If we wanted to add more screens (a swap page, a token detail page, a settings page), we'd have to manually manage which screen is visible using useState. That gets messy fast.

Expo Router gives us file-based routing, the same idea as Next.js. You create a file, and it becomes a screen. You create a folder called (tabs), and you get bottom tab navigation. No manual state management for screens.

Before:

App.tsx                    ← everything lives here
src/screens/WalletScreen   ← imported into App.tsx manually
src/screens/SwapScreen     ← no way to navigate here without useState

After:

app/(tabs)/index.tsx       ← Wallet screen, automatically the first tab
app/(tabs)/swap.tsx        ← Swap screen, automatically the second tab
app/token/[mint].tsx       ← Token detail, dynamic route like /token/abc123

No App.tsx needed. The file structure IS your navigation.

Step 1: Install Dependencies

Open your terminal inside the SolScan project folder and run:

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

What each package does:

Package Purpose
expo-router The file-based router itself
expo-linking Handles deep links (opening your app from a URL)
expo-constants Gives access to app config values
expo-status-bar Controls the phone status bar (clock, battery area)
react-native-screens Native screen containers for better performance
react-native-safe-area-context Handles iPhone notch and Android status bar spacing

Step 2: Update package.json

Open package.json and change the main field:

{
  "main": "expo-router/entry"
}