vscode-react-native | VSCode extension for React Native - supports debugging and editor integration

by microsoft TypeScript Version: 1.11.0 License: Non-SPDX

X-Ray Key Features Code Snippets Community Discussions(8)Vulnerabilities Install Support

kandi X-RAY | vscode-react-native Summary

vscode-react-native is a TypeScript library typically used in Plugin, React Native, Visual Studio Code applications. vscode-react-native has no bugs, it has no vulnerabilities and it has medium support. However vscode-react-native has a Non-SPDX License. You can download it from GitHub.

This VS Code 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.

Support

Quality

Security

License

Reuse

Support

vscode-react-native has a medium active ecosystem.

It has 2517 star(s) with 273 fork(s). There are 75 watchers for this library.

It had no major release in the last 12 months.

There are 9 open issues and 820 have been closed. On average issues are closed in 50 days. There are no pull requests.

It has a neutral sentiment in the developer community.

The latest version of vscode-react-native is 1.11.0

Quality

vscode-react-native has no bugs reported.

Security

vscode-react-native has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

vscode-react-native has a Non-SPDX License.

Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

Reuse

vscode-react-native releases are available to install and integrate.

Installation instructions, examples and code snippets are available.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of vscode-react-native

Get all kandi verified functions for this library.

vscode-react-native Key Features

No Key Features are available at this moment for vscode-react-native.

vscode-react-native Examples and Code Snippets

No Code Snippets are available at this moment for vscode-react-native.

Community Discussions

Trending Discussions on vscode-react-native

VSCode - Custom react snippets not working in javascriptreact.json file and also javascript.json file

How to debug React Native Project (developed using Visual Studio Code) in Android Device

Very new to React Native - Debugging in Visual Studio Code?

How to set debug host and port on android 8.1

How to specify specific simulator for iOS?

How to stop replacing relative path to absolute path all files automatically

React Native - Debug adapter process has terminated unexpectedly

Debugging Jest unit tests with breakpoints in VS Code with React Native

QUESTION

VSCode - Custom react snippets not working in javascriptreact.json file and also javascript.json file

Asked 2020-Jan-23 at 17:46

VSCode Version:

...

ANSWER

Answered 2020-Jan-23 at 17:46

Answering my own question as finally reached to the solution from VS Codes very helpful and great team (https://github.com/microsoft/vscode/issues/88936)

And this is how got closer to the source of the problem - got this strange behaviour, in a React Component.js file when I type the snippet ('clmi' in this case) - before the React Component File's return() statement, I get the expected behaviour. But if I type the snippet ('clmi') inside the return() statement, I dont get anything. i.e. the snippet does not give me the code completion option inside the return () statment.

The source was that VSCode was not recognizing this file to be a "javascriptreact" language type.

Solution was as below

In a React Component's .js file, try the tokens inspector via "F1 > Inspect TM Scopes" and position the cursor at those insert position. That will tell you the detected, embedded language. Depending on your grammar it might be a different language

And bleow is what I am getting.

So as you can see, this not JavaScript nor JavaScript React but the jsx-attr language. So now I had to target that type with vscode snippet

So now, I put the whole snippet in the jsx-attr type target file ~/.config/Code/User/snippets/jsx-attr.json

And now the custom snippets worked as expected.

Source https://stackoverflow.com/questions/59810935

QUESTION

How to debug React Native Project (developed using Visual Studio Code) in Android Device

Asked 2019-Sep-26 at 10:48

Can anyone help me with the steps of how to debug React Native application in Android mobile. https://github.com/microsoft/vscode-react-native has helped me to debug to an Emulator but it does not say anything on Android Devices. At one point they asked me to enable Debug JS Remotely but I couldn't find this feature in Android.

...

ANSWER

Answered 2019-Sep-26 at 09:02

if your app is already running on a physical device follow steps from step 5

step 1. Enable Debugging over USB

step 2. Plug in your device via USB

step 3. Check that your device is properly connecting to ADB

Source https://stackoverflow.com/questions/58111974

QUESTION

Very new to React Native - Debugging in Visual Studio Code?

Asked 2019-May-21 at 09:50

I followed the instructions for debugging in VSCode as per

https://github.com/Microsoft/vscode-react-native

I attached my Nexus 6P with USB cable with my MBP2015 and enabled Developer Options and USB Debugging but when I select Debug Android in VSC, I get this

...

ANSWER

Answered 2017-Oct-10 at 06:09

There are several ways to enable break point debugging using vs code

Run packager and debugger using vs code :Debug Android/ Debug iOS
Using exponent
Attach to packager

As far as my experience, the most stable debugging in vs code is by using the third option, Attach to packager.

To use this, you can start an external packager (from command line i.e) and attach the debugger to that packager port.

Source https://stackoverflow.com/questions/46654585

QUESTION

How to set debug host and port on android 8.1

Asked 2019-Apr-19 at 21:24

I'm debugging my app via WiFi. It installs successfully but I got a red screen with an error:

The documentation says that I should set debug host and port but there is no "Debug server host & port for device" menu entry. Also, my problem is similar to this issue.

...

ANSWER

Answered 2019-Apr-19 at 21:24

bring up the react native menu that is referenced in the link below
start with debugging turned off (the menu should show debug JS remotely and not stop debugging).
if the app is running with debugger, configure the debugging host and port: click on dev settings and type localhost:8081.
now try to run the app while npm start or yarn start is running in the host's terminal window.

This is the menu:

https://process.filestackapi.com/cache=expiry:max/FAoXMWT3QJPYymUBYSOw

Source https://stackoverflow.com/questions/55767388

QUESTION

How to specify specific simulator for iOS?

Asked 2019-Apr-10 at 13:02

i'm using visual studio code extension "React Native Tools" for running and building my react native application on simulator/device.

Is there a way to specify simulator version for ex. "iPhone X Max" ?

Currently when i start my build configuration for "Debug iOS", simulator "iPhone X" started automatically.

Here is my launch.json:

...

ANSWER

Answered 2019-Apr-10 at 12:43

Adding --simulator "deviceName" to react-native run-ios will let you choose the simulator.

That's for iPhone XS Max

Source https://stackoverflow.com/questions/55612767

QUESTION

How to stop replacing relative path to absolute path all files automatically

Asked 2018-Aug-04 at 12:36

My problems is when I was coding the editor of vscode auto replace from relative path to absolute path of all files in my project automatically.

For example: When I import like this:

...

ANSWER

Answered 2018-Jul-17 at 11:33

Try to reinstall vscode. And select 'no and never' button when you change name file it will show the pop up look like this "Automatically update imports for moved file"

https://github.com/Microsoft/vscode/issues/53832

Source https://stackoverflow.com/questions/51297106

QUESTION

React Native - Debug adapter process has terminated unexpectedly

Asked 2018-Apr-03 at 21:19

I am trying to setup debug environment for react-native on VS Code on Mac. This is launch.json :

...

ANSWER

Answered 2017-Dec-14 at 10:37

I see its "Debug ios" you ran. Can you make sure its pointing to the correct info.plist file? Many errors can crop up if its pointing to an old info.plist. I can see on the GitHub issue you posted, when you ran it from the command line it outputted a very useful error.

Source https://stackoverflow.com/questions/47650633

QUESTION

Debugging Jest unit tests with breakpoints in VS Code with React Native

Asked 2017-Jul-13 at 07:27

I created a React Native project using the popular Ignite CLI v2.0.0 with the default boilerplate. Then I adorned it with a bunch of nodejs shims, because I'll have some node-based dependencies. Everything is working and I can run the Jest tests from the command line. So far, so good.

However, now one of my unit tests is timing out. This is probably due to an async call failing that invokes a mocked out node function. But there is no information on error, location, etc.

So I want to debug using Visual Studio Code v1.13.1 and here problem starts. I can't for the life of me figure out how to configure this so I can set breakpoints both in the tests as in the app code + node_modules.

I have installed the React Native Tools v0.3.2 and can start the debugger using the default Debug Android configuration:

...

ANSWER

Answered 2017-Jul-13 at 07:27

Finally found the solution. It seems there are still a number of issues with the new inspector protocol in Node 8.*. In short the support for --inspect is still quite experimental.

For example the NodeJS Inspector Manager (NiM 0.13.8) was crashing and disconnecting websocket after few second (See: NiM Github issue #17 and Chromium bug #734615).

So I downgraded NodeJS 8.1.2 --> 7.10.1

Now finally things work as expected. I can do all debugging in VS code, hit all the breakpoints, with the following debug configuration:

Source https://stackoverflow.com/questions/45056952

Community Discussions, Code Snippets contain sources that include Stack Exchange Network

Vulnerabilities

No vulnerabilities reported

Install vscode-react-native

Before going any further make sure that you:. 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.
have a working React Native environment.
have the emulator utility available in your PATH if you're developing Android applications
are using VS Code and have installed this extension from the Marketplace.
have your React Native project root folder open in VS Code.
You can add VSCode tasks to build an .apk file and generate iOS/Android bundles.
To use a custom port for the react-native packager:.
CTRL+M(CMD+M) in the emulator
Go to Dev Settings
Debug server host for device => enter localhost:<yourPortNumber>.
Reload application (press R twice)
(Hermes only) Hermes engine listens port 8081 for debugging by default, to change it you might need to modify your metro.config.js file adding "port": portNumber argument in there to the server settings.