I have a react-native app with ios and android versions. Both versions use a webview to access a web site. The ios version works when pointed to either the production web site or local development version. The web site uses ruby on rails and the development server is pow.
When I run the android app, it loads but when it tries to access a local version of the web site, it returns the following error:
console.error: "Encountered an error loading page", {"canGoForward":false,"code":-2,"canGoBack":false,"description":"net::ERR_ICANN_NAME_COLLISION","loading":false,"title":"","url":"http://my_app.dev/,"target":69}
The same happens if I use localhost rather than the my_app.dev. It does however work when pointed to the external production url i.e my_app.com.
I have tried using a different android device, and the error changes to ERR_CONNECTION_REFUSED. The first device used the android browser whereas the second looks like it uses chrome. So it does appear to be a browser specific problem. Reading this link, I used nslookup my_app.dev to work out the ip address as 127.0.53.53 and entered
127.0.53.53 my_app.dev
into the /private/etc/hosts file. However this still gives same error. How do I fix this?
A work around for this problem is to find out the ip address of the development machine, say 192.168.0.33, configure the server to allow external access at my_app.192.168.0.33.xip.io, and then in the react app, configure the host url as http://my_app.192.168.0.33.xip.io. However this means running the server in special mode, so it would be better to find a direct answer to this question.