react-native on AVD could not connect to exp://IP:PORT - react-native

Question

Following the facebook.io tutorial for using react-native (https://facebook.github.io/react-native/docs/getting-started.html) I am running into a problem where the AVD android emulator I am using to test the app is complaining
Something went wrong. Could not load exp://192.168.200.83:19000.
Note this is being done on a fresh / unedited project generated via create-react-native-app myapp:
# after having started the AVD and creating the react-native app...
➜ myap npm start
> myapp#0.1.0 start /<path to my react native app>/myapp
> react-native-scripts start
3:26:37 PM: Starting packager...
Packager started!
Your app is now running at URL: exp://192.168.200.83:19000
View your app with live reloading:
Android device:
-> Point the Expo app to the QR code above.
(You'll find the QR scanner on the Projects tab of the app.)
iOS device:
-> Press s to email/text the app URL to your phone.
Emulator:
-> Press a to start an Android emulator.
Your phone will need to be on the same local network as this computer.
For links to install the Expo app, please visit https://expo.io.
Logs from serving your app will appear here. Press Ctrl+C at any time to stop.
› Press a to open Android device or emulator.
› Press s to send the app URL to your phone number or email address
› Press q to display QR code.
› Press r to restart packager, or R to restart packager and clear cache.
› Press d to toggle development mode. (current mode: development)
<press a>
At this point a window opens on the AVD (presumably trying to start the react-native app) and displays the error described above.
(Also tried starting the app with npm run android and opening the link from the expo app on the AVD, but still getting same error).
Does anyone know what can be done at this point (totally new to react and mobile development, so I mostly only followed what was in the tutorial)? Any other information that that I should add to this question?

Answer 1

Looking at this a similar github post (https://github.com/react-community/create-react-native-app/issues/595#issuecomment-373539195), it seems to be a problem of using the wrong network (ie. using a LAN URL that the AVD can't access). And using the exp start --tunnel method described in that post did generate a URL that my mobile phone expo app could actually interpret. My steps for getting things working are shown below. (Note I am using Ubuntu 16.04)
Looking at the docs for installing watchman (https://facebook.github.io/watchman/docs/install.html#system-specific-preparation) (which is used by react-native (on linux)). I see that there is a specific thing about increasing inotify limits on linux (though without any specific values given) (for info on inotify, see https://en.wikipedia.org/wiki/Inotify).
So after installing watchman from source (as seems to be the only way to currently get it on linux) ...
$ cd ~
$ git clone https://github.com/facebook/watchman.git
$ cd watchman/
$ git checkout v4.7.0
$ sudo apt-get install -y autoconf automake build-essential python-dev
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install
$ watchman --version
... we increase the inotify limits.
$ echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_watches \
&& echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_queued_events \
&& echo 999999 | sudo tee -a /proc/sys/fs/inotify/max_user_instances \
&& watchman shutdown-server
Based on this older SE post (https://askubuntu.com/a/155343/760862) (basically indicating that it does not take up much resources at all), I assume (and hope) that increasing it like this is OK.
(Increasing the inotify limit like this really seemed to help with a bunch of other problems I was having working with react-native projects (eg. javascript freezing when trying to bundle for export to a device, devices complaining that "something went wrong" or being totally unresponsive to my trying to export prohects to them, etc.))
Now, navigate to the project directory and start exp server process with --tunnel option. From the docs (https://docs.expo.io/versions/latest/workflow/exp-cli):
tunnel (default), lan, localhost. Type of host to use. "tunnel" allows you to view your link on other networks
exp start --tunnel
22:21:14 [exp] Your URL is: exp://xm-apt.myexpousername.myapp.exp.direct:80
22:21:14 [exp] Instructions to open this project on a physical device
22:21:14 [exp] Android devices: scan the above QR code.
22:21:14 [exp] iOS devices: run exp send -s <your-phone-number-or-email> in this project directory in another terminal window to send the URL to your device.
22:21:14 [exp] Instructions to open this project on a simulator
22:21:14 [exp] If you already have the simulator installed, run exp ios or exp android in this project directory in another terminal window.
22:21:14 [exp] Logs for your project will appear below. Press Ctrl+C to exit.
If you see a URL like exp://192.168.200.83:19000 instead, you should also see some logging message like
21:30:35 [exp] Switched to a LAN URL because the tunnel appears to be
down. Only devices in the same network can access the app. Restart
with exp start --tunnel to try reconnecting.
just restart with the same command and the URL should be a non-LAN location.
Optional (if you want to use the interface from npm start in the project instead)
Then open another terminal tab and run the npm start command like so
REACT_NATIVE_PACKAGER_HOSTNAME='xm-apt.myexpousername.myapp.exp.direct' npm start -- --reset-cache
where the REACT_NATIVE_PACKAGER_HOSTNAME is set to the exp URL from the previous step (info about this can be found in the README of every react-native app created via create-react-native-app). The URL created here should now be something like
Your app is now running at URL: exp://xm-apt.myexpousername.myapp.exp.direct:19000
Now open yet another tab. And notice that on tab running the exp process, there should be instructions on how to open the project on different devices (the earlier in this answer for example). Use these instructions to open the project for different devices using this tab we just opened (in my case, for an AVD, runnning exp android (you should see some message in the tab running the exp process like 22:28:57 [exp] Finished building JavaScript bundle in 97ms letting you know it is working)).
Totally new to react-anything so if someone sees anything about this setup that is superfluous or weird, please let me know.