Android file...?

[clintandrewhall]

How does one override the default file for Android and have it load the result of the webserver? I've been looking at the source code and can't find an override like in iOS. Any ideas?

@clintandrewhall I haven't worked with the Android version yet, but I will be and I created a Webpack config for Android and iOS. Hope it helps.

[danieldunderfelt]

I think what he means is that the Android app is still looking for the JS bundle on port 8081. On iOS we can change the port in the AppDelegate.m file, but there doesn't seem to be a corresponding file for Android. I've run a search in the android build folder of a React Native app, and 8081 can't be found anywhere.

If someone knows of a way to change the port of the JS bundle for Android, do tell! I haven't been successful with adb reverse.

[elliottsj]

I haven't had the chance to play with RN for Android yet; I should be able to get around to it tonight. I think a good solution might be to change the RN packager to run on a different port, then run the webpack server on port 8081. Then you won't be required to change AppDelegate.m (or the Android equivalent)

An issue open against the React Native Debugger suggests it would be nice to keep configuration in package.json.

[danieldunderfelt]

@JHabdas that would be superb!

[elliottsj]

Unfortunately I don't think we can get proper Android support until port 8081 is configurable: facebook/react-native#1429

Because Android looks for the app bundle on port 8081 and /debugger-proxy runs on port 8081, the only way I could think of for react-native-webpack-server to work is to run react-native-webpack-server on port 8081, run the RN packager on another port, and proxy /debugger-proxy requests from react-native-webpack-server to the RN packager.

I spent far too long trying to get node-http-proxy to work for this purpose with no luck 😩

[saurshaz]

Looking on this eagerly. Any luck with port-changing. I'm also trying at end , btw

[richarddewit]

Here's a cheap workaround.

You need an index.android entry in your webpack.config.js.
Then run the RNWS for Android like this:

./node_modules/.bin/react-native-webpack-server start -e index.android -P 9090 -p 9091 -w 9092

This sets the entrypoint to index.android and the ports of port, packagerPort and webpackPort to respectively 9090, 9091 and 9092. (this can be any port, but 8080, 8081 and 8082 are already used by iOS).

Then fire up an emulator or connect an Android phone through USB (with all the debug settings) and run:

adb reverse tcp:8081 tcp:9090

and then

react-native run-android

This maps the port of the server to the default Android port.

There you go, debugging on your Android phone.

(Disclaimer: I haven't tried using the emulator with this yet.)

[TimPerry]

Any idea when this will be released? Currently spiking react native and I need to prove my implementation can work on android as well. Also: thanks for creating this as otherwise my implementation wouldn't work at all! :)

[TimPerry]

Also @richarddewit I tried your suggestion but couldn't get it working on the emulator. Has anyone been successful getting it working on a emulator or am I doing something wrong?

[niftylettuce]

Okay guys, here's a quick hack to get you rolling. Edit your package.json to have this in the scripts block:

  "scripts": {
    "bundle": "react-native-webpack-server bundle",
    "start": "react-native-webpack-server start",
    "start-android-webpack-server": "react-native-webpack-server start -e index.android -P 9090 -p 9091 -w 9092",
    "install-app-to-android-device": "cd android && ./gradlew installDebug",
    "setup-reverse-tcp-for-android-device": "adb reverse tcp:8081 tcp:9090",
    "launch-android-app-on-device": "cd android && adb shell am start -n com.\"$npm_package_name\"/.MainActivity",
    "android": "npm run-script setup-reverse-tcp-for-android-device && npm run-script install-app-to-android-device && npm run-script launch-android-app-on-device && echo \"Please Reload JS on the app from the menu after the webpack server starts below\" && npm run-script start-android-webpack-server"
  },

Then simply run from command line: npm run-script android. The only issue now is that you have to hit Reload JS from your Android device, not sure how to trigger that with a command. I basically went through runAndroid.js here https://github.com/facebook/react-native/blob/7e53ee1095ac956887dd6a20d19a403096472660/private-cli/src/runAndroid/runAndroid.js and just pieced all the commands together. Otherwise when you would run react-native run-android it'd simply use port 8080, which doesn't work.

Note that in runAndroid.js it parses AndroidManifest.xml, and in our case we should have our global app name for Android/iOS defined in package.json, so we can simply used the exposed environment variable npm_package_name in our scripts block of package.json as defined in the environment automatically here https://docs.npmjs.com/misc/scripts#environment.