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?!”
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.
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 justadb
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.