VSCode extension for react native - supports syntax highlighting, debugging and editor integration
TypeScript JavaScript
Permalink
Failed to load latest commit information.
.github Update issue template (#709) May 29, 2018
.vscode Implement attach to remote packager (#551) Oct 19, 2017
SampleApplication Reimplement debug adapter based on node2 adapter Jan 31, 2017
doc Update debugging.md (#765) Aug 8, 2018
images Remove code push images (#771) Aug 15, 2018
js-patched Fix licenses Feb 19, 2016
release Adding gulp release Aug 25, 2016
scripts Restructure repo source files (#520) Aug 29, 2017
src Added support for Build Multiple Versions of React Native app (#766) Aug 10, 2018
test Added support for Build Multiple Versions of React Native app (#766) Aug 10, 2018
tools Fixed copyright check error (#741) Jul 9, 2018
.codecov.yml Add coverage reporting (#490) Jul 26, 2017
.gitignore Added support for Build Multiple Versions of React Native app (#766) Aug 10, 2018
.npmignore Restructure repo source files (#520) Aug 29, 2017
.travis.yml Add coverage reporting (#490) Jul 26, 2017
.vscodeignore Restructure repo source files (#520) Aug 29, 2017
CHANGELOG.md fix typo (#763) Jul 31, 2018
CONTRIBUTING.md Update documentation (#515) Sep 6, 2017
LICENSE.txt Removing the dashed lines Feb 8, 2016
README.md Refactor Readme (#707) May 24, 2018
ThirdPartyNotices.txt Update ThirdPartyNotices.txt Nov 4, 2016
gulpfile.js Removed CodePush Apr 19, 2018
npm-shrinkwrap.json Prepare release 0.6.14 (#761) Jul 31, 2018
package.json Added support for Build Multiple Versions of React Native app (#766) Aug 10, 2018
prepareBuild.bat Configuring scripts for packaging and CI Jan 27, 2016
tsconfig.json Removed CodePush Apr 19, 2018
tslint.json Removed CodePush Apr 19, 2018

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

  • Install VS Code.
  • Install the extension in VS Code:
    1. Press Ctrl + Shift + X (Cmd + Shift + X on macOS), wait a moment while the list of available extensions is populated
    2. Type react-native and install React Native Tools
    3. For more guidance view VS Code Extension Gallery
  • If you haven't already, install React Native:
    1. Run npm install -g react-native-cli to install React Native CLI
    2. Set up React Native using the steps detailed on the React Native getting started documentation
  • Open your React Native project root folder in VS Code.

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

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

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

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

See Setting up debug environment for more details.

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 information on Expo, see here.

For more details about configuring and debugging Expo applications see Expo 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.
'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.

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.