Vscode-react-native: [Feature] Add additional command like in react-native-console

[nonameolsson]

This isn't a bug, it's a feature suggestion.

I use VS Code for all my development, but before that I used PHPStorm and WebStorm. I still have those installed, so I tried WebStorm for React Native development. It turns out that there is an excellent extension called react-native-console.

This extension adds some great functionality for React Native development.

Here is a screenshot of how it looks.

Some of the features that vscode-react-native doesn't have are:

• Open Android dev menu on emulator/device from Webstorm
• Reload app
• Generate release/debug APK file
• Create release React Native bundle for Android / iOS
• Run on physical iOS device
• Run on selected iOS device
• Open debugger-ui

Would any of those features be of interest to add to vscode-react-native?

[vladimir-kotikov]

@nonameolsson thank you very much for your suggestions! We're very excited to hear about new features people would like to see in this extension.

Some of the features IMO sound very interesting. @panarasi, your thoughts?

[panarasi]

I think these are excellent suggestions. Would it make sense to make these actions a separate extension, instead of bundling them into this extension ? That would make these additional features easier to maintain.

@nonameolsson Would you be interested in creating an extension, and we could see if we can create a "react-native-extension" pack with all these extensions.

[nonameolsson]

@panarasi That sounds like a good idea. Would it then be a fully "separate" extension, or would it depend on this one? I would be glad to try! I have never created extensions before, but I would be happy to try.

[vladimir-kotikov]

@panarasi should it be a separate extension?

I'd say that some of those suggestions would be a perfect addition to existing debugging experience. e.g. it'd be very handy to have reload app action in command palette and to be able to bind it on hotkey, or for example show a list of available targets (devices/simulators) when "target" entry is not specified in debugging configuration.

[panarasi]

@vladimir-kotikov - I agree. However, can you add these commands during the debug process ? You would have to invoke them as a task, right ? Looking at each of the features

• Open Android dev menu on emulator/device - Would this be in tasks.json ? I think adding this would be good.
• Reload app : I think this would be a good addition to the tasks
• **Generate release/debug APK file - this is a pure build process, and is not a task that is as common. VSCode also has a terminal, so folks could use the terminal for this. IMHO, this is not a command that is common enough to be added to the extension
• **Create release React Native bundle for Android / iOS - same as above
• **Run on physical iOS device - For android, react-native already runs on a device, or an emulator, whichever is open. IMHO, for iOS, this should be something that makes sense as a part of react-native run command .
• **Run on selected iOS device
• **Open debugger-ui

@vladimir-kotikov - We should revisit the list of things that we have as tasks, and ensure that adding these things does not bloat it up.

[vladimir-kotikov]

Open Android dev menu on emulator/device - Would this be in tasks.json ? I think adding this would be good.

This sounds more like a command palette item which would be available when debug session is active

Reload app : I think this would be a good addition to the tasks

IMO same as above

However looking at the plugin @nonameolsson mentioned it seems that they can do this kind of magic only for Android devices/emulators - it doesn't work for iOS and I think we'll need to check first if this is doable for iOS

As for building debug/release APK or debug/release bundle - those features indeed are more suitable to be added as VSCode tasks. Adding this kind of tasks is pretty straightforward but we might want to add a couple of examples to docs so people could craft their own tasks based on examples.

IMHO, for iOS, this should be something that makes sense as a part of react-native run command
@panarasi could you please clarify? Did you mean a separate UI that pops up when you call React Native: Run iOS from command pallette? - In that case yes, I agree

[nonameolsson]

Open Android dev menu on emulator/device - Would this be in tasks.json ? I think adding this would be good.

This sounds more like a command palette item which would be available when debug session is active

Good suggestion! I use https://github.com/niftylettuce/frappe at the moment for that.

Reload app : I think this would be a good addition to the tasks

IMO same as above

Frappé also supports that.

However looking at the plugin @nonameolsson mentioned it seems that they can do this kind of magic only for Android devices/emulators - it doesn't work for iOS and I think we'll need to check first if this is doable for iOS

Hm, that's true. I'm not sure, but it seems that those things are a bit more difficult to do with iOS?

As for building debug/release APK or debug/release bundle - those features indeed are more suitable to be added as VSCode tasks. Adding this kind of tasks is pretty straightforward but we might want to add a couple of examples to docs so people could craft their own tasks based on examples.

Good idea! 👍

[vladimir-kotikov]

Ok, looks like adding command palette actions for dev menu and app reload feasible - at least corresponding API is avaiable in react-native JS runtime. Given that the worker that executes RN JS code is under our control we could probably just invoke corresponding methods at runtime.

@panarasi so what's you thoughts? I suggest to decouple this into 2 separate issues - a feature request to add dev menu + reload actions to command pallette and a task to add VSCode tasks examples into documentation

[iTOYS]

Hello @nonameolsson
We've implemented Reload App and Open Dev Menu command palette commands for Android and iOS.
If you want, you could test it, by installing extension from master(instruction).
New release will be a bit later.
Thanks!

[nonameolsson]

@iTOYS Thanks! I will try!

[iTOYS]

@nonameolsson Thanks!
Let me know of results. Any suggestions are welcome!

[nonameolsson]

@iTOYS It works great, and really fast to. Well done! 👍 👍

Binding it to keyboard shortcuts makes it work very good!

Update:
What do you think about adding an option to enable/disable debug also?

[iTOYS]

@nonameolsson
There some problems with iOS, but i'm going to think about it.

[nonameolsson]

Should this work when the Android device is connected through WiFi, and not cable?

[iTOYS]

This works for all devices which adb devices command return;

[iTOYS]

Implemented in #544 #549