Supercharging your React Native development workflow

October 10, 2018

Shake that!

Opening up the developer menu in mobile during react native development is no easy feat. Much like what Will Smith had to do, except much more tedious is the gesture “Shake that”. One of my team members gave the idea of sending the development option command through adb — and as expected running adb shell input keyevent 82 in terminal quickly opens the development menu and reloading the app becomes an easier job.

But wait! I need to switch from my editor/IDE to my terminal, and use this command. “How’s that supercharging my workflow, is this a clickbait article?!”

There's gotta be a better way!

And there is!

Just create an alias in bash / zsh / Fish or whatever weird named shell you use. As an example, this:

alias dm="adb shell input keyevent 82";

So, wait! I need to switch from my editor/IDE to my terminal, and type this alias command? Might as well use the “Shake that!” method.

There's gotta be a better way!

And there is!

Here comes the supercharging part — every editor nowadays has the support of macros (Unless you’re using Notepad / TextEdit — in which scenario, I don’t think you’re the right audience for this article).

Macros & external commands!

Right — let’s look at how this works with Webstorm, Sublime and finally, the best editor of all times — Vim (an editor that is much better than Emacs).

Webstorm

Let’s take a quick detour for the preferences and search for “External tools” takes us right here: Add an external tool with the following parameters (reference image):

  • Name: A name of your choice for this shortcut eg. RN Dev Menu
  • Program: the absolute path to adb (or just adb if it’s already in your $PATH)
  • Arguments: shell input keyevent 82

Then click on “Ok” on this pop-up & “Apply” on the settings window. Next go to the Keymap section, search for the name your entered for the command (this’ll reside under the “External Tools” directory), double click & assign a keyboard shortcut (Option + D in my case) (reference image).

Sublime

Add this keymap under Preferences

{ "keys": ["alt+d"], "command": "exec", "args": { "cmd": ["adb", "shell", "input keyevent 82"]} }

Vim

If you’re a vim power user, adding aliases for external commands must already be a part of your workflow. For Vim beginners, I’d highly recommend to look into how you can get the best out of Vim — I’ll write an article on the same in a few days. Coming back to the matter at hand, just map the said command to the key of your choice.

map <M-d> :!adb shell input keyevent 82 <enter>

Now, during my development I simply type in Option + D, and voila! The development menu pops up on my android phone immediately and reloading is a breeze.

VSCode /Atom

Oh damn, I forgot to give everything on a platter — so sorry about that! Treat it like homework — you’ll get extra marks for good handwriting (For the millenials — it’s means a good & consistent font face).

But wait! I need to press Option + D to make this happen! Surely, there must be a better way!

<sarcasm:start> And there is! As of 2018, we’re quite near to neural interfacing with machines, but the tech is yet to be perfected. Check back in a few years and I might update this article — that is if the imminent nuclear threat doesn’t take the life of this poor soul. </sarcasm:end>

What about iOS?

Sadly, it looks like iOS doesn’t have this option — but hey, there’s still hope. Since Apple is no longer the most valued public company, and the recent products have been less popular, we might need to stop iOS development totally anyways! Right? Right?

Who am I?

I’m glad you asked — I am a tech enthusiast who loves experimentation with new technologies. Looking at ways to optimize productivity seems like my favorite time killer — oh the irony!

Feel free to connect with me on how I can help your teams to be more productive, or even for yourself! I’ll be glad to help. :)

Do follow me if you’d like to learn about development or team efficiency — or if you just want to chuckle every once in a while.


comments powered by Disqus