React Native and NAT problem!
You can skip this part and go the article written after the three dots. This is an old article that I wrote. If you are interested, I recently started to write more on Medium. Feel free to follow me and here is my newest story.
If you are developing mobile apps using React Native and testing it on your actual device, you may come across a situation where your device cannot find the local IP address in case you are using a VPN. Why using a VPN? Well, maybe you are using a service that is banned in your country or etc. Why you cannot access local IPs? Because you are using VPN! This case mostly happens in Android devices, and I’ve observed it in various VPN clients including OpenVPN, NordVPN, and etc. I am not quite sure about the iOS devices, but if you’ve faced it as well, please kindly let me know in the comments.
I’ve been struggling for a long time to solve it and I went through some solutions as I’ve described them in this article. Here are my solutions:
#1 Upload the JS bundle in somewhere else
If you use Expo, you can use expo servers instead of the LAN tunnel. If you don’t, you can still start your JS server on a VPS, for example, an Amazon EC2 instance. In this case, you have to upload your code every time in the cloud which is quite painful. This solution is a bit tricky because it triggers another problem which is uploading the code. I came up with two methods, either you change the code, commit and push it to the repository then pull it on the VPS, which is absolutely insane, or you can use a file system which is called network file system, that you can directly save your changes in the VPS. If you use VS Code, there is an extension for it called SSH FS. This solution needs a quite swift and stable internet, and in my case, it wasn’t practical at all!
#2 Using VPN clients which bypass the local IPs
I personally didn’t find any client with this built-in feature but what I did was customising my OpenVPN configuration file in a way that it bypasses my laptop’s IP, where my JS server was running. The problem here is that every time you obtain a new IP with your laptop, you have to change the configuration file. At least I couldn’t find a dynamic way to do that.
I did it by adding the following line on the configuration file:
route 192.168.1.4 255.255.255.255 net_gateway
Obviously, 192.168.1.4 was my laptop’s IP.
#3 Sharing your VPN with your laptop
This is one of the best solutions and apparently can be done in all operating systems. In this method, you connect to the internet via LAN, Then you share (hotspot) your VPN connection and connect to it via your mobile phone. Just google “Share VPN from my PC” and there are tons of tutorials out there. It seems quite fantastic but it is fine until you have LAN access. Otherwise, it won’t work at all.
#4 Set up a VPN on your router
This is more or less like the third solution and the idea is to connect to VPN using one device, then share the connection with others. Even though it can be hard to set up, but it is the cleanest way and you can use it for your other devices such as your gaming console. You can buy a flash router or config it by yourself. If you are going to do it on your own, first carefully research about it or maybe consult with your VPN provider regarding the best router to buy. It is really important the protocols your router support matches with the protocols your VPN provider support. I bought a TP-Link TL-WR840n router and became devastated after I realised, it normally won’t be integrated with NordVPN. So I had to flash it, and unfortunately, there wasn’t enough proper firmware and it lacks well-organised tutorials. Nevertheless, I finally made it, but it was quite a faff!
