CodingBowl

Step 1: Install Node.js (LTS)

Download and install the LTS version of Node.js from the official Node.js site.

Verify installation in a new terminal:

node -v
npm -v

Step 2: Install Visual Studio Code

Install Visual Studio Code, which will be your primary code editor for React Native development.

Step 3: Skip Global Expo CLI Install

Do not install the legacy expo-cli globally. Instead, use the modern local CLI via npx:

npx create-expo-app my-app

This ensures compatibility with Node 17+ and 18+ without warnings.

Step 4: Create a New Expo Project

npx create-expo-app my-expo-app
cd my-expo-app
code .

Choose the Blank (TypeScript) template if available for better type safety.

Step 5: Install VS Code Extensions

• ES7+ React/Redux/React Native snippets
• React Native Tools
• Prettier – Code Formatter
• ESLint

Step 6: Configure VS Code Settings

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

Step 7: Start the Expo Development Server

npx expo start

This opens the Expo Dev Tools in your browser and starts the Metro bundler.

Step 8: Run the App on a Device

• Physical device: Install Expo Go and scan the QR code to run the app.
• Android Emulator (optional): Press a in the terminal (requires Android Studio).

Step 9: Edit and Hot Reload

Edit App.js or App.tsx in VS Code. Save your file, and the app reloads automatically via Expo's hot reload feature.

Step 10: Clear Cache & Debug

While Expo is running, you can use these keyboard shortcuts in the terminal:

• c – Clear Metro bundler cache
• r – Reload the app
• ? – Show all available shortcuts