microsoft/vscode-react-native

microsoft/vscode-react-native

Description: VSCode extension for React Native - supports debugging and editor integration

Language: TypeScript

License: NOASSERTION

Stars: 2735

Forks: 284

Open issues: 18

Created: 2016-01-20T21:10:07Z

Pushed: 2026-06-11T03:32:47Z

Default branch: master

Fork: no

Archived: no

README:

React Native Tools


Stable:

Preview:

React Native Tools Preview

The extension has a nightly version which is released on a daily basis at 9 PM PST on each day that changes occur. To avoid conflicts, if both extensions are installed - only stable version will be activated. So to use the preview version it is needed to disable or remove the stable version and reload VS Code.

Package extension locally

You can not only download React Native Tools in the marketplace, but can also package your extension .vsix installation file by yourself locally. Following this documentation to package and install your React Native Tools to get the latest updates.

About the extension

This VS Code extension provides a development environment for React Native and Expo projects. Using this extension, you can debug your code and quickly run `react-native` or `expo` commands from the command palette.


Table of Contents

• [React Native Tools Preview](#react-native-tools-preview)
• [Package extension locally](#package-extension-locally)
• [About the extension](#about-the-extension)
• [Getting started](#getting-started)
• [React Native commands in the Command Palette](#react-native-commands-in-the-command-palette)
• [Customize metro configuration](#customize-metro-configuration)
• [Debugging React Native applications](#debugging-react-native-applications)
• [Hermes engine and direct debugging (Recommended)](#hermes-engine-and-direct-debugging-recommended)
• [Attach to Hermes application](#attach-to-hermes-application)
• [Android applications](#android-applications)
• [Android Hermes Debugging](#android-hermes-debugging)
• [Custom build for android apps](#custom-build-for-android-apps)
• [iOS applications](#ios-applications)
• [iOS Hermes debugging](#ios-hermes-debugging)
• [iOS devices](#ios-devices)
• [Custom scheme for iOS apps](#custom-scheme-for-ios-apps)
• [iOS direct debugging](#iOS-direct-debugging)
• [Expo applications](#expo-applications)
• [Debug on Expo Go](#debug-on-expo-go)
• [Debug on expo-dev-client](#debug-on-expo-dev-client)
• [Debug on Expo Web](#debug-on-expo-web)
• [Configuring Expo](#configuring-expo)
• [Expo Hermes](#expo-hermes)
• [EAS Build initialization](#eas-build-initialization)
• [Windows applications](#react-native-for-windows)
• [Windows Hermes debugging](#windows-hermes-debugging)
• [MacOS applications](#react-native-for-macos)
• [MacOS Hermes debugging](#macos-hermes-debugging)
• [Monorepo: debug out of React Native project directory](#monorepo-debug-out-of-react-native-project-directory)
• [Debugger configuration properties](#debugger-configuration-properties)
• [Re.Pack and Haul debugging](#repack-and-haul-debugging)
• [Remote JavaScript Debugging (Deprecated)](#remote-javascript-debugging-deprecated)
• [Customization](#customization)
• [Sourcemaps](#sourcemaps)
• [Debug in vscode workspace](#debug-in-vscode-workspace)
• [Logging](#logging)
• [Build APK and generate bundle](#build-apk-and-generate-bundle)
• [Specifying custom arguments for react-native run-* command](#specifying-custom-arguments-for-react-native-run--command)
• [Setting up the React Native packager](#setting-up-the-react-native-packager)
• [Change project root](#change-project-root)
• [Configure an Android LogCat Monitor](#configure-an-android-logcat-monitor)
• [Configure dependencies versions for debugging Expo projects](#configure-dependencies-versions-for-debugging-expo-projects)
• [Security dependency overrides](#security-dependency-overrides)
• [Configure custom key bindings for extension commands](#configure-custom-key-bindings-for-extension-commands)
• [Configure custom colors for extension output logs](#configure-custom-colors-for-extension-output-logs)
• [Set pnpm as package manager](#set-pnpm-as-package-manager)
• [Network Inspector](#network-inspector)
• [Developing inside a Docker Container](#developing-inside-a-docker-container)
• [Contributing](#contributing)
• [Known Issues](#known-issues)

Getting started

Before going any further make sure that you:

• have a working React Native environment.
• have the Android emulator available in your PATH or install iOS simulator in MacOS
• are using VS Code and have installed this extension from the Marketplace.
• have your React Native project root folder open in VS Code.
• have executed React Native: Check development environment configuration or React Native: Run expo doctorcommand to make sure that all necessary softwares are installed correctly.

Please notice that the extension uses .vscode/.react directory at the project root to store intermediate files required for debugging. Although these files usually get removed after debug session ends, you may want to add this directory to your project's .gitignore file.

React Native commands in the Command Palette

In the Command Palette, type React Native and choose a command.


The Run Android or Run iOS command triggers react-native run-android or react-native run-ios to starts your app for Android emulator or iOS simulator.

The Run Expo command triggers expo start and starts your expo application.

The Packager commands allow you to start/stop the **Metro Bundler** (formerly React Packager).

The full list of commands is:

| Name | Command ID | Description | |…