Skip to content
VSCode extension for React Native - supports debugging and editor integration
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update issue template (#709) May 29, 2018
.vscode Add smoke tests to upstream (#1015) May 23, 2019
SampleApplication Reimplement debug adapter based on node2 adapter Jan 31, 2017
doc Add documentation for debugging React Native apps inside Docker conta… Nov 12, 2019
i18n [03-08-2019] Merge in translation (#1066) Aug 5, 2019
images Improve docs (#826) Nov 27, 2018
js-patched Fix debugging on RN 0.60 (#1043) Jul 9, 2019
release Prepare for 0.13.2 (#1168) Nov 25, 2019
scripts Restructure repo source files (#520) Aug 29, 2017
src Add support for Haul packager 0.15+ (#1166) Nov 21, 2019
test Add support for Haul packager 0.15+ (#1166) Nov 21, 2019
tools Remove get-changelog tool (#919) Feb 28, 2019
.codecov.yml Add coverage reporting (#490) Jul 26, 2017
.gitignore
.npmignore
.vscodeignore Exclude redundant files from VSIX build (#1144) Oct 22, 2019
CHANGELOG.md Prepare for 0.13.2 (#1168) Nov 25, 2019
CONTRIBUTING.md Fix minor inconsistencies in documentation (#1034) Jun 25, 2019
LICENSE.txt Removing the dashed lines Feb 8, 2016
README.md Add documentation for debugging React Native apps inside Docker conta… Nov 12, 2019
ThirdPartyNotices.txt Add smoke tests to upstream (#1015) May 23, 2019
gulpfile.js Add smoke tests for Hermes debugger (#1120) Oct 2, 2019
package-lock.json Fix Handlebars security vulnerability (#1171) Nov 28, 2019
package.json Prepare for 0.13.2 (#1168) Nov 25, 2019
package.nls.cs.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.de.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.es.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.fr.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.it.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.ja.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.json Add local React Native CLI support (#1093) Oct 25, 2019
package.nls.ko.json
package.nls.pl.json
package.nls.pt-br.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.ru.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.tr.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
package.nls.zh-cn.json
package.nls.zh-tw.json [03-08-2019] Merge in translation (#1066) Aug 5, 2019
prepareBuild.bat Configuring scripts for packaging and CI Jan 27, 2016
tsconfig.json Adds outDir to tsconfig.json (#1032) Jun 25, 2019
tslint.json

README.md

React Native Tools

Build status

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

React Native features

Getting started

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.

Debugging React Native applications

To start debugging create a new debug configuration for your ReactNative app in your .vscode/launch.json. Adding a new configuration can be done by opening your launch.json file and clicking on Add Configuration... button and choosing a relevant debug configuration. All available debug configurations for ReactNative can be accessed by typing in ReactNative and picking one from the list populated by Intellisense as shown in the image below.

Add React Native debug configuration

In case if you haven't created the .vscode/launch.json file yet, you can add a whole default debug configuration set. To do that click the debug icon Choose React Native debugger in the View bar, and then click the configuration (gear) icon Configure-gear, then choose the React Native debug environment.

Choose React Native debugger

VS Code will generate a launch.json in your project with some default configuration settings as shown below. You can safely close this file, choose the appropriate configuration in the Configuration dropdown, and then press F5 (or click Green Arrow Configure-gear button) to start debugging your app in VS Code.

React Native launch targets

Once app is loaded and ran, open Developer Menu inside your application and enable remote debugging by clicking on Debug JS Remotely button.

React Native enable remote debug

You can debug your app on an Android emulator, Android device or iOS simulator. This extension provides experimental support for iOS devices.

Since version 0.60.2 React Native supports Hermes engine for Android applications. Extension provides experimental support for debugging React Native Android applications with Hermes enabled. Please see Debugging React Native apps with Hermes enabled for more details.

More information about debugging using VS Code can be found in this guide.

See Setting up debug environment for more details.

React Native debug configuration properties

Name Description Type Defaults
cwd The path to the project root folder string ${workspaceFolder}
sourceMaps Whether to use JavaScript source maps to map the generated bundled code back to its original sources boolean true
sourceMapPathOverrides A set of mappings for rewriting the locations of source files from what the source map says, to their locations on disk. See Debugging with TypeScript and Haul for details object n/a
trace Logging level in debugger process. May be useful for diagnostics. If set to "Trace" all debugger process logs will be available in Debug Console output window string log
address TCP/IP address of packager to attach to for debugging string localhost
port Port of packager to attach to for debugging string 8081
remoteRoot The source root of the remote host string null
localRoot The local source root that corresponds to the 'remoteRoot' string ${workspaceFolder}
skipFiles An array of file or folder names, or glob patterns, to skip when debugging array []
debuggerWorkerUrlPath Path to the app debugger worker to override. For example, if debugger tries to attach to http://localhost:8081/debugger-ui/debuggerWorker.js and you get 404 error from packager output then you may want to change debuggerWorkerUrlPath to another value suitable for your packager ("debugger-ui" will be replaced with the value you provide) string debugger-ui/
platform The platform to target. Possible values: android, ios, exponent, windows, wpf string n/a
target Target to run on. Possible values: simulator, device, <Android emulator/device id>, <iOS simulator/device name> string simulator
logCatArguments Arguments to be used for LogCat (The LogCat output will appear on an Output Channel). It can be an array such as: [":S", "ReactNative:V", "ReactNativeJS:V"] array ["*:S", "ReactNative:V", "ReactNativeJS:V"]
runArguments Run arguments to be passed to react-native run-<platform> command (override all other configuration params) array n/a
launchActivity The Android activity to be launched for debugging, e.g. it specifies --main-activity parameter in react-native run arguments string MainActivity
env Environment variables passed to the debugger and react-native run-<platform> command object {}
envFile Absolute path to a file containing environment variable definitions string ${workspaceFolder}/.env
variant A variant to be passed to react-native run-android, e.g. use devDebug to specify --variant=devDebug string n/a
scheme A scheme name to be passed to react-native run-ios, e.g. devDebug to specify --scheme=devDebug string n/a
productName iOS bundle display name e.g. AwesomeProject value means that extension will search for AwesomeProject.app bundle string n/a

Using React Native commands in the Command Palette

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

React Native commands

The Run Android command triggers react-native run-android and starts your app for Android.

The Run iOS command similarly triggers react-native run-ios and starts your app in the iOS simulator (iPhone 6).

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

Using Expo

We support using Expo to run, debug and publish applications. For more details about configuring and debugging Expo applications see Expo docs.

Developing inside a Docker Container

The extension provides support of VS Code Remote Development features on Linux. For more details about configuring and debugging React Native Android applications inside Docker Container see Containerization docs.

Build APK and Generate Bundle

You can add VSCode tasks to build an .apk file and generate iOS/Android bundles. See here for more info.

Customization

Extension can be customized for different use cases. Please, follow Customization section for more details.

Contributing

Please see our contributing guide for more information

Known Issues

Here is the list of common known issues you may experience while using the extension:

Issue Description
Debugger doesn't stop at breakpoints Breakpoints require sourcemaps to be correctly configured. If you are using TypeScript, then make sure to follow the Getting started section for how to ensure sourcemaps are correctly set up. Also, similar issues may occur on React Native version 0.58.* in some special cases (see #928, #907), bumping dependencies versions of react and react-native package to the more recent ones should resolve these.
'adb: command not found' If you receive an error adb: command not found, you need to update your system Path to include the location of your ADB executable.The ADB executable file is located in a subdirectory along with your other Android SDK files.
Targeting iPhone 6 doesn't work There was a known issue with React Native (#5850) but it was fixed. Please upgrade your version of React Native.
Can't communicate with socket pipe (Linux only) If you have two workspaces open that only differ in casing, the extension will fail to communicate effectively.
"Add configuration" button doesn't work when trying to add debug configuration to launch.json You may need to have to add in some json to launch.json manually. Please, see (#985)

Known-Issues provides a complete list of active and resolved issues.

Telemetry reporting

VS Code React Native extension collects usage data and sends it to Microsoft to help improve our products and services. Read our privacy statement to learn more.

If you don’t wish to send usage data to Microsoft, edit VSCodeTelemetrySettings.json file at ~/.vscode-react-native and add optIn:false.

Code of conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

You can’t perform that action at this time.