Reload a React Native app on an Android device manually via command line - react-native

I'd like to manually force a Reload of my React Native app on demand without physically shaking the device. (I'm getting carpal tunnel.)
I know that Live Reload / Hot Reload are available. I'm looking for a on-demand command line solution.

Using the cmd line you can send a command to the Android device.
adb shell input text "RR"
This command tells the Android device to type the character "R" twice which is the React Native command to Reload on Android.
The adb shell command has many useful features many of which are described here:
ADB Shell Input Events
To open the developer menu:
adb shell input keyevent 82

Just posting it here in case you didn't know this trick
long press the menu button in your android device. Then you'll get this menu
tap the reload option and you are good to go

I use the following command. It doesn't reload the app, but it brings up the developper menu on the device, so I can then press the "Reload" option:
adb shell input keyevent KEYCODE_MENU
I develop with a real device (not the emulator) and sending the "double-R" through adb doesn't work (it just shows the keyboard and types 2 Rs).

Add the following script to your package.json:
"android-shake": "adb shell input keyevent 82"
Then you will be able to call
yarn android-shake
If you are looking for ios then checkout my answer on this link

One trick would be to add this command on ~/.bashrc profile in the case you're using unix.
use your favorite editor (ex: nano on Ubuntu) and type nano ~/.bashrc
on the end of file write alias rnreload='adb shell input text "RR"'
save it and run source ~/.bashrc in order to active it.
Now whenever you need, just type rnreload on a terminal.
Next time you enter your computer it should be already done.
Also, there's the possibility to add an other alias as well: alias rnshake='adb shell input keyevent 82' which "shakes" android. You can use it to access other commands like Hot Reloading, Debugger, Inspector, etc.

Made an autohotkey script to reload and open the menu with keyboard shortcuts.
^+r:: run, %comspec% /c adb shell input text "RR",,hide
^+e:: run, %comspec% /c adb shell input keyevent 82,,hide
ctrl+shift+r to reload
ctrl+shift+e to open dev menu

If you're on a Mac and using Hammerspoon, you can put the following bit of code in your ~/.hammerspoon/init.lua file:
hyper = {'ctrl', 'alt', 'cmd'}
placid = {'ctrl', 'cmd'}
-- React native reload JS on connected device
hs.hotkey.bind(placid, 'R', function()
os.execute('/Users/peter/Library/Android/sdk/platform-tools/adb shell input text "RR"')
end)
-- React native show dev menu on connected device
hs.hotkey.bind(hyper, 'R', function()
os.execute('/Users/peter/Library/Android/sdk/platform-tools/adb shell input keyevent 82')
end)
the os.execute command doesn't load your ENV (doing so would make running commands really slow), so make sure to run which adb in your terminal to figure out what the exact path to adb is. (in my case it was /Users/peter/Library/Android/sdk/platform-tools/adb).
Now you can reload your app using ctrl+cmd+R and show the dev menu using ctrl+option+cmd+R from anywhere and without even bothering to cmd-tab out of your favorite editor!

For device you have just to shake your device than a menu appears so click on Reload

Related

How to set React_Editor to PhpStorm so that when you click on the error it jumps to the code?

I'm using PhpStorm in Mac to code and i want to debug my errors. I have a message in my terminal to set the editor for React Native tools.
PRO TIP
When you see Red Box with stack trace, you can click any
stack frame to jump to the source file. The packager will launch your
editor of choice. It will first look at REACT_EDITOR environment
variable, then at EDITOR.
To set it up, you can add something like
export REACT_EDITOR=atom to your ~/.bashrc or ~/.zshrc depending on
which shell you use.
I've added these lines to ~/.bashrc but nothing happened when i click on the error :
export PATH=$PATH:/usr/local/bin/pstorm
export REACT_EDITOR=pstorm
How can i set correctly REACT_EDITOR to PhpStorm so that when i click on the error it jumps to my code?
For mac os you need to add to ~/.bashrc or .zprofile:
Add export REACT_EDITOR="webstorm" or pstorm
Don't forget to close all of your terminal windows and restart the react-native packager before you try it.
Create a shortcut to open WebStorm:
Open WebStorm
Press ⇧ twice to open the search window
Type “Create Command Line Launcher…” and press Enter
Click OK
That's it.
/usr/local/bin should be in the PATH environment variable by default. You should be able to run webstorm from anywhere in the shell. Run webstorm /usr/local/bin/webstorm to test the command.
You can find a code which opens editors here or in your project node_modules/#react-native-community/cli-tools/build/launchEditor.js
I solved this problem by creating symlink.
sudo ln -s /Applications/WebStorm.app/Contents/MacOS/webstorm /usr/local/bin/webstorm

Android emulator not opening in vs code

When I use `flutter in vs code I am able to start the android emulator easily but when I do it in vs code with react native I get this:
Command 'React Native: Launch Android Emulator' resulted in an error (Error while executing command 'emulator -list-avds': Command failed: emulator -list-avds 'emulator' is not recognized as an internal or external command, operable program or batch file. )
This error is killing me please help. I am using expo CLI with react native.
In windows you can go to Start > Control Panel > System > Advanced System Settings > Environment Variables .
Then under System Variables find Path and double click on it and add this path C:\Users\<your-username>\AppData\Local\Android\sdk\emulator
or in windows 7 append the path with a ; at the end of line.
Then click the OK buttons to get out.
If you already have a Command Prompt window open, close it then re-open and the emulator -list-avds command should then work.

How can I enable Live Reload or Hot Reload without having to shake my phone?

I started using React Native for about 2 weeks, and sometimes I need to reinstall the app, then shake the phone again and enable the live reload.
It's funny at the first week, but then it gets boring to have to shake the phone while developing.
Is there any config file which I can set those development properties to be always enabled?
You can add hot reload function with hold the menu button in your phone
it show the developer menu setting for react native app
after that you can select the hotreload function
or you can type this on your terminal
adb shell input keyevent 82
There's a closed issue related to open the menu by pressing the screen with 3 fingers. You can check if in the latest versions (or in expo) it is working: https://github.com/facebook/react-native/issues/10191
Also there are other 3 solutions:
1) You can run adb shell input keyevent KEYCODE_MENU in your terminal
2) Try this: https://github.com/facebook/react-native/issues/10191#issuecomment-328854286
Open RN dev menu
/usr/local/bin/adb shell input keyevent KEYCODE_MENU Reload RN
/usr/local/bin/adb shell input keyevent 82 /usr/local/bin/adb shell
input keyevent 66 /usr/local/bin/adb shell input keyevent 66 (reload
was not always working without adding the last line)
In Preferences->Keyboard->Keyboard shortcuts you can then map these
services to keyboard shortcuts. I added the shortcuts for the context
of my editor (Webstorm) and React Native debugger. In these programs I
can now press Ctrl+D to show the developer menu and Ctrl+R to reload
which works perfectly.
3) Or you can try this (Android only) https://medium.com/delivery-com-engineering/react-native-stop-shaking-your-phone-1f4863140146
Set up an Automator Service by opening Automator, clicking “New
Document”, and choosing “Service”.
Find and select the “Run Shell Script” action. Choose “no input” for “Service receives” and enter: /usr/local/bin/adb shell input
keyevent 82 If adb is located elsewhere in your system, change the
path to adb. You can find out with: $ which adb
Save and remember what name you give the action.
Open “System Preferences”, go to “Keyboard” and select the “Shortcuts” tab. Select “Services” on the left column and find your
service by name.
Click where it says “none” and enter the keyboard shortcut you want to use. Make it something unique or it will conflict with an existing
shortcut.
Notes: Android only Must be plugged in If you’ve never run the
following with this device, run it first before trying the shortcut: $
adb reverse tcp:8081 tcp:8081
Hope it helps.
run adb shell input keyevent KEYCODE_MENU in your terminal

Use dolphin (or other browser) like yakuake

I often want to open a file browser to open a file and then close the browser.
Is there a way (a plasmoid, a dolphin plugin, another browser...) which could allow me to have a file browser "in the style of" yakuake? (i.e. unfolding with a shortcut, and re-folding when I chose the file I want)
Took me some time, but finally managed to get what you want (and eventually, what I also want :) with xdotool (on Ubuntu sudo apt-get install xdotool).
With this script, you can have any application behave like you asked:
#!/bin/bash
SEARCHED_WINDOW=$1
COMMAND=${2:-$SEARCHED_WINDOW}
SEARCHED_WINDOW_CLASSNAME=toggleApp$SEARCHED_WINDOW
WINDOW_ID=$(xdotool search --classname $SEARCHED_WINDOW_CLASSNAME)
VISIBLE_WINDOW_ID=$(xdotool search --onlyvisible --classname $SEARCHED_WINDOW_CLASSNAME 2>/dev/null)
if [ -z "$WINDOW_ID" ]; then
$COMMAND 2>/dev/null &
pid=$!
NEW_WINDOW_ID=$(xdotool search --onlyvisible --sync --pid $pid 2>/dev/null)
xdotool set_window --classname $SEARCHED_WINDOW_CLASSNAME $NEW_WINDOW_ID
xdotool windowfocus $NEW_WINDOW_ID
elif [ -z "$VISIBLE_WINDOW_ID" ]; then
xdotool windowmap $WINDOW_ID
xdotool windowfocus $WINDOW_ID
else
xdotool windowunmap $VISIBLE_WINDOW_ID
fi
(Inspired from here)
You call it like this:
./toggle.sh dolphin
If the command to launch the program is different, you can add a second parameter:
./toggle.sh appName commandToLaunchApp
What this script does is the following:
If the app is not running: launch it, give window a specific class, and give window focus
If the app is running but with no visible window: make window visible and give it focus
Else, i.e. app is running and visible: hide it.
All you have left to do is map a shortcut to the above-mentionned command to launch the script. In KDE : System settings > Shortcuts and gestures > Custom shortcuts. Then Edit > New > Global shortcut > Command.
Plus, this script works with any app, should work with any EWMH compliant window manager, and allows you to have other instances of the same app (this is why I added the class trick).
The closest solution to what you want is the Widget Layer Compiz plugin.
This plugin enables you to make appear a layer on top of your workspace. You can configure this layer to hold windows of your choice, in your case that would be the file manager. It has a hide/show feature which you can bind to a hotkey.
It uses Window Matching rules to define the windows to hold.
More information on http://wiki.compiz.org/Plugins/Widget
However, this would imply that you use the Compiz compositing manager.

Trying to make a Webkit Kiosk on Debian with Raspberry Pi

I'm trying to build a Webkit Kiosk on a Raspberry Pi.
I found a good start at: https://github.com/pschultz/kiosk-browser
The things I want to do:
1) Start the kiosk without logging in (with inittab?)
Peter Schultz pointed out adding the following line:
1:2345:respawn:/usr/bin/startx -e /usr/bin/browser http://10.0.0.5/zfs/monitor tty1 /dev/tty1 2>&1
But he did not explain the steps to make this work (for noobs).
What I did is add his code to a personal git repository and cloned this repo to /usr/bin/kiosk and sudo apt-get install libwebkit-dev and sudo make.
The line to add to inittab will be:
1:2345:respawn:/usr/bin/startx -e /usr/bin/kiosk/browser http://my-kiosk-domain.com tty1 /dev/tty1 2>&1
If I do this, I generate a loop or some kind...
If you want to automatically load a browser full screen in kiosk mode every time you turn on the rpi you can add one of these two lines to the file /etc/xdg/lxsession/LXDE/autostart
#chromium --kiosk --incognito www.google.it
#midori -i 120 -e Fullscreen -a www.google.it -p
The first is for chromium and the latter is for midori, the rpi default lightweight browser.
Hint : Since we will use the rpi as a kiosk we want to prevent the screen from going black and disable the screensaver. Edit the autostart file:
sudo pico /etc/xdg/lxsession/LXDE/autostart
find the following line and comment it using a # (it should be located at the bottom)
##xscreensaver -no-splash
and append the following lines
#xset s off
#xset -dpms
#xset s noblank
Save, reboot.
More info on
http://pikiosk.tumblr.com/post/38721623944/setup-raspberry-ssh-overclock-sta
The upvoted answer suggest to run LXDE for it. You could also do it without such a heaver desktop enviorment. You could just start midori or chromium in an X session:
xinit /usr/bin/midori -e Fullscreen -a http://www.examples.com/
xinit chromium --kiosk http://www.examples.com/
Sometimes Fullscreen mode of midori is not working as expected and midori is not using whole screen. In these cases you could map it inside a very simple window manager like MatchBox to get real fullscreen. Due to xinit you have to wrap everything in a shell script.
#!/bin/sh
matchbox-window-manager &
midori -e Fullscreen -a http://dev.mobilitylab.org/TransitScreen/screen/index/11
Autostart could be done simply be using /etc/rc.local.
More information concerning screensaver issues and an automated restart could be found here: https://github.com/MobilityLab/TransitScreen/wiki/Raspberry-Pi#running-without-a-desktop
Chromium has a dependency problem on some debian derivate for arm architecture. For Cubian you find the bug report here. I am not sure if you could install chromium on latest Raspbian without problem.
But I really could recommend midori. It's very fast and support for modern web technologies is very good. As Chromium it is using webkit as rendering engine. If you miss some html5 / css3 features consider an update of libwebkitgtk (for example by using package of debian testing).
It's possible you haven't set the DISPLAY environment variable.
Try:
export DISPLAY=:0
/usr/bin/startx /usr/bin/browser
Or, browser can also take a display argument (so you don't need the environment variable):
/usr/bin/startx /usr/bin/browser :0
This works for me on Raspbian from a standard terminal shell (I'm logged in over SSH).
Updated for the current version of Raspbian (with Pixel desktop) install with noop 2.0.
I found you need to edit in two different places to get it to work.
/etc/xdg/lxsession/LXDE/autostart
/home/pi/.config/lxsession/LXDE-pi/autostart
So my configure file is:
# #xscreensaver -no-splash
#xset s off
#xset -dpms
#xset s noblank
#chromium-browser --kiosk --incognito http://localhost
And that's it.
You should probably start with checking if /usr/bin/kiosk/browser is working at all. You should start normal X session (graphical environment) on your RaspberryPi, launch terminal, try running this command:
/usr/bin/kiosk/browser http://my-kiosk-domain.com
and see what it prints on the terminal. Is this working? Do you see any error messages?
I'm trying to build a Webkit Kiosk on a Raspberry Pi.
I think Instant WebKiosk for Raspberry Pi could be useful for you.
See: http://www.binaryemotions.com/raspberry-digital-signage/