10 Steps in Setting Up React Native with Expo in VS Code

Published on 10 Jan 2026 Tech Development
image
Photo by Olaf Val on Unsplash
Disclaimer: This post was created with the assistance of Gemini and/or ChatGPT for informational purposes. While given a quick look over, readers are encouraged to verify key facts independently.

A beginner-friendly, step-by-step guide to setting up React Native with Expo in Visual Studio Code using the modern npx workflow. This guide will walk you through installing Node, creating a new Expo project, configuring VS Code, and running your app on a device or emulator without legacy CLI warnings.

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

Comments