Friday, March 18, 2016

Running a React Native Android app on a real dev device

Just tried to make a small Android demo app using ReactNative. The really hard part was JavaScript, but I am certainly not going give out any advice on that. The next hardest part was running the damn thing on a Android device.

In principle their "hello world" app should be easy to run, just attach a device and run:

react-native init HelloFuckingWorld
cd HelloFuckingWorld
react-native run-android

Instead of your "hello world" you get a nasty red screen telling you that the app cannot connect to a server. You damn everyone to hell, especially the stupid app that wants to connect to some triply-fucked server just to print a "hello, world" on its screen.

You decide to follow the instructions on the red screen, and do adb reverse tcp:8081 tcp:8081. The damn adb answers error: closed and your app still doesn't connect to anything at all. You curse the sdk, the app and the device, and then find out (by googling) that this instruction is only meant for the devices with Android version 5.0 and above. ReactNative, incidentally, works from Android 4.1 up.

You put the cursed device aside and take a less cursed one, preferably one that is running 5.0+. Luckily the makers of ReactNative made it so that if you shake the device furiously the dev menu pops up, and the first item on it is reloading a JS bundle from a server. I actually went there with my browser to see what it loads from there, and now I am gonna be seeing nightmares for the rest of my life. 

The furious shaking is a nice touch. They sure know their audience.

You click the reload, and get the red screen of death again. Of course. You forgot to say adb reverse tcp:8081 tcp:8081 to the new device. You say it, and a number of unprintable words in addition to it. And wow, it actually loads! You have your "hello, world".

What's nice is that every time you change something in your JavaScript you just shake the device furiously again, click "Reload JS", get a red screen of death, swear, say  adb reverse tcp:8081 tcp:8081 again, wonder why the fucking thing keeps losing the socket connection, and finally get the new JavaScript loaded.

After you get everything running you try to write another app, for example one saying "goodbye, cruel JavaScript world". You do all of the above to it again. It doesn't work, JS bundle just doesn't load.

Yes, you have to find the old server process and kill it by hand. The new one is not gonna do anything useful until you do that. It's gonna look like everything is ok, but when you visit the url you see it still has the JS bundle for the previous app.