Debug your React Native desktop app using Visual Studio Code. Install Visual Studio Code. Open your applications folder in VS Code. Install the React Native Tools plugin for VS Code. Create a new file in the applications root directory,.vscode/launch.json and paste the following configuration. React Clean Code Structure. Create a boilerplate folder structure based on Presentational/Container code pattern for React/React Native. This extension is accessible in the explorer context menu as shown bellow: Requirements. There's no known issues. Link donate:: Page: https://www.facebook.com/Lirs-Tech-Tips-111449010.

React native on visual studio code May 4, 2020 July 26, 2020 Pulkit Gulati. Setup React-Native for iOS and Android on Mac with VS Code. The very first step to start development in React-Native is to install the right tools to setup the environment correctly. I’m working on MacOS Catalina and I already have Xcode 11 installed on my machine. Install React Native Tools Extension (provided by Microsoft) to VS Code. This is a nice add on to VS Code's capabilities for React Native. Then go to Debug option from left menu and click on Add Configuration. If it initially says No Configuration then you can click on Add Configuration and then choose React Native option.

The very first step to start development in React-Native is to install the right tools to setup the environment correctly. I’m working on MacOS Catalina and I already have Xcode 11 installed on my machine which is one of the pre-requisites to run the iOS App.

Install the following dependencies for React-Native:

NodeJS: https://nodejs.org/en/download/

React Native Tools Vs Code

The recommended way to install Node is using Homebrew from your Terminal:

Watchman: In react-native, Watchman watches the source code for any changes and rebuilds them.

Install XCode from App Store.

Cocoapods: This is the Dependency Manager for iOS & Mac projects.

This requires you to enter system password.

Install Visual Studio Code for Mac from here. You might face issues on Mac OS Catalina to run VS Code due to Notarization requirements. You can check out this post for more details.

Create the folder inside say your Documents folder on your Mac as below:

Open VS Code and open New Terminal and type the following command to create a new React-Native App:

Come back to the MyApp folder and run the below command to run your App in the iOS simulator:

This will install and launch the App in your iOS simulator. The first time might be very slow. It might be helpful to launch your simulator beforehand.

Running on Android:

Install the Android Studio from here, which will install the Android SDK and the required emulator. I’m using the Android 10 emulator for Pixel XL.

Open the MyApp folder in VS Code to make further changes.

Issues

Running the Android App causes issues while launching the Emulator. The error message is: React Native adb reverse ENOENT

Starting with macOS Catalina, your Mac uses zsh as the default login shell and interactive shell. You can make zsh the default in earlier versions of macOS as well.

So on your Mac:

1 – Open your .zshrc file:

2 – if .zshrc file doesn’t exist, you need to create one & open again(Step 1)

3 – Add this to your .zshrc file

4 – Save and close

5 – Compile your changes

& make sure to restart your terminal.

Run the command in the Terminal and you’ll see something like below if everything is fine:

Android Debug Bridge version 1.0.41

Version 30.0.0-6374843

Installed as /Users/<username>/Library/Android/sdk/platform-tools/adb

You can also run the code in your VS Code Terminal and see the same output.

The path to Android SDK is available in the Configure button -> SDK Manager (at the bottom right) when you launch Android Studio.

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, Mac OSX, and Windows.

This module will install visual studio code essential extensions and settings for react-native.

Install

or

Visual Studio Code React Native Debug

On install it will automatically install all plugins configured in library.

Note:

• Copy your vscode settings defined in your .vscode/settings.json file before installing this package.
• If you are using MAC then please make your that you have install code command in PATH. Please refer Microsoft Blog for more details.
• All plugins are defined in package.json postinstall section.
• These prepacked plugins will definitely help developers of React & ReactNative community

Essential Extensions

Settings

To get to the user and workspace settings:

• On a Windows computer, click File > Preferences > Settings or Press CTRL + ,
• On a Mac, click Code > Preferences > Settings or Press ⌘ + ,

Paste following code with your design settings.

Launching from the Command Line

You can also run VS Code from the terminal by typing code after adding it to the path:

• Launch VS Code.
• Open the Command Palette (⇧ + ⌘ + P)/(CRTL + SHIFT + P) and type shell command to find the Shell Command: Install code command in PATH command.
• Restart the terminal for the new $PATH value to take effect.

Use the command code /path/to/file/or/directory/you/want/to/open to open your file or code . to open the current directory in VS Code.

Contributions

Any type of contribution will be very much appreciated.

Follow me on Twitter: @shukerullah