What Changed Since Class 1

In Class 1, everything was in one App.tsx. Now we're upgrading to a real app structure:

• WalletScreen → moved to its own file (same code you already built)
• SwapScreen → brand new screen (token swap UI)
• App.tsx → now handles tab navigation between the two screens

SolScan/
├── App.tsx                      ← NEW: Tab bar + screen switching
├── src/
│   └── screens/
│       ├── WalletScreen.tsx     ← Your Class 1 code, moved here
│       └── SwapScreen.tsx       ← NEW: Token swap UI

Step 0: Install New Dependencies

npx expo install react-native-safe-area-context

react-native-safe-area-context is the production-grade version of SafeAreaView. The one from react-native is iOS-only and limited. This package works on both iOS and Android. Every real app uses this.

@expo/vector-icons comes pre-installed with Expo, gives us Ionicons, FontAwesome, MaterialIcons, etc.

Step 1: Move WalletScreen to Its Own File

Create the folder src/screens/ and create WalletScreen.tsx inside it.

Take your entire Class 1 code and paste it in. The only two changes:

1. Rename export default function App() → export function WalletScreen()
2. Remove the SafeAreaView wrapper, the parent App.tsx will handle that now

That's it. Same RPC functions, same helpers, same JSX, same styles. Just in a new file with a named export.

Named export vs default export:

// Named export (WalletScreen.tsx) — import with curly braces
export function WalletScreen() { ... }
import { WalletScreen } from "./src/screens/WalletScreen";

// Default export (App.tsx) — import without curly braces
export default function App() { ... }
import App from "./App";