Solana Wallet Balance Checker

Part A: Project Setup & File Breakdown


What is Expo?

Expo is a toolchain built on top of React Native that removes all the painful setup. Without Expo, you'd need to install Xcode, Android Studio, configure Gradle, set up CocoaPods, deal with native linking, basically 2-3 hours of setup before writing a single line of code. Expo handles all of that. You run one command, scan a QR code, and your app is running on your phone.

Think of it like this: React Native is the engine. Expo is the car that comes with the engine already installed, keys in the ignition, ready to drive.


Creating the Project

npx create-expo-app SolScan --template blank-typescript
cd SolScan
npx expo start

Line by line:

npx create-expo-app SolScan This creates a new folder called SolScan with a complete React Native project inside it. npx runs the package without installing it globally. --template blank-typescript gives us a clean TypeScript project with nothing extra. There are other templates (tabs, navigation) but we start blank to understand everything from scratch.

cd SolScan Enter the project folder.

npx expo start Starts the development server. You'll see a QR code in your terminal. Scan it with the Expo Go app on your phone (download from App Store / Play Store). Your app is now running on your actual phone. Every time you save a file, the app updates instantly, this is called Hot Reload.


What's Inside the Project Folder

When you run create-expo-app, it generates these files:

SolScan/
├── App.tsx              ← YOUR CODE GOES HERE (entry point)
├── app.json             ← App configuration
├── babel.config.js      ← Babel transpiler config
├── tsconfig.json        ← TypeScript config
├── package.json         ← Dependencies & scripts
├── node_modules/        ← Installed packages (don't touch)
└── assets/              ← Images, fonts, icons

Let's go through each one.


App.tsx — The Entry Point