How to simulate offline mode in expo app during development

Question

I am developing an expo app and I was working with some caching features. To test them I have to test my app in offline mode, but if I turn off my wifi (system or device) my app simply is unable to connect to the metro server. Even turning the network settings to offline in debugger didn't work, the app was again completely not loading. How can I simulate offline mode in my device while still being able to connect to the metro bundler?

Answer 1

This works for me

1. Connect your physical Android device via a USB cable to do this.

• Make sure you have "developer mode" enabled.
• Make sure you have "USB debugging enabled" enabled.
• Make sure you have "install via USB" enabled.

2. Start the expo on localhost using npx expo start --localhost.

3. Press a on the terminal to open Android

4. Accept the permissions on your Android phone

5. Press a on the terminal again and wait for expo Go to update.

6. Install from your Android the expo Go that you downloaded from the terminal.

7. When you open the development page on your mobile device select the open with expo Go option.

8. Enjoy the offline access on your expo Go.

Answer 2

If you are testing on an android device, the following steps have worked for me:

1. Connect your physical device via a USB cable. Make sure you have developer mode turned on.
2. Start expo in localhost using expo start --localhost.
3. Using adb, set up a connection so your device can listen to the port where the development server is running. This can be done using the command adb reverse tcp:[port] tcp:[port]. Say for example your server is running on 127.0.0.1:19000, run the command

adb reverse tcp:19000 tcp:19000

4. Now you should able to run the app in expo without an active internet connection.

Answer 3

I faced the same issue and didn't find an easy solution online. Luckily I've tried the following and it worked:

1. Connect a physical device. I've tried it on emulator for a while but failed.
2. Start Expo on localhost instead of LAN as it does by default: expo start --localhost.
3. Disable WiFi/cellular connection on the device.
4. See that the connection to Metro bundler is still working.
5. Work as you are used to.

Answer 4

I struggled with this for a while before I came across an answer. Connect via USB! I have tested this with iPhone only so far, but should work for Android too.

I should caveat that I'm using EAS Build, but this should also work with basic Expo.

With the basic development method (expo start --dev-client), the client app and server connect via your local router. The server automatically listens on an ip address available in the local LAN (that's what the QR code is). This is not helpful for developing offline-first features, because as soon as you disconnect your phone from WiFi, the connection will be lost and the dev app will close. In order to develop offline you can do the following:

1. Run the following command: ifconfig -a. Take note of highest number network interface on list like en7 for example
2. Connect phone with usb cable
3. Rerun ifconfig, two new network interfaces should show up with highest numbers. Take the second highest. E.g. en8. Note down it’s inet ip address
4. Run export EXPO_DEVTOOLS_LISTEN_ADDRESS=<ip address here> in the shell where you will run the development server
5. Run export REACT_NATIVE_PACKAGER_HOSTNAME=<ip address here>
6. expo start --dev-client as normal
7. The IP address advertised through the QR code will now be the IP for the usb connection that you put in above, so mobile client app will go through the usb cable to reach the dev server on your computer.
8. Switch on airplane mode on the phone as much as you want. Metro, hot reloading, debugging, all keep functioning, and in fact are usually much faster than via router. Enjoy!