react-native: how to run an app on emulator in offline mode?

On the Android Virtual Device, click on the three dots -> Cellular and set Data Status to Unregistered (Off):

enter image description here


As @zvona mentioned, you can develop offline without wifi connectivity by shutting down wifi of your computer, not of the emulator.

If you need to test that your app works in airplane mode, then you'd need to build the app and install the IPA (iOS) / APK (Android) versions.


It is not so straight forward to determine the user is offline and develop Android Apps under this context.

  • Having a WiFi available, or Data connection available, is not the same as having Internet. If you toggle them off in your emulator or device, you lose the Metro Server. When you toggle your computer WiFi off, you will lose Internet Connectivity.

  • What if the user's signal is extremely poor, both Connection and Internet available, and your app downloads a file that is quite large. You should probably alert the user it can take a long time and ask him whether they would prefer to download later when signal is better for example.

  • What if the user has only Mobile Data Connection, no WiFi, and your download could waste all their data allowance?

  • How to inform the user about the reason for a problem. "File not download as you are offline"? What does offline means to the user? "No WiFi?", "No data allowance"? "No signal"? "Data connection off"? ...

So I am not using the word offline, instead let's talk about Connectivity. I think to develop a Connectivity aware app properly you must have all the above scenarios in mind. And like you said be able to easily simulate them.

Also you would want to be able to simulate them fast, with little interaction with emulator, device, or WiFi settings. And probably even mock them with some Jest Testing framework. The latter, being out of scope, but good to know about it.

My advice to you would be

  1. Implement a ConnectivityProvider that listens to changes in connectivity and shares connectivity state.

  2. Make those components who need connectivity awareness consumers of this context, so instances of ConnectivityConsumer.

  3. Forge different connectivity states in order to test different scenarios.

Here is how Connectivity State would look:

details: {isConnectionExpensive: false, subnet: "255.255.255.255", ipAddress: "xxx.xxx.xx.x", strength: 99, ssid: "AndroidWifi"}
isInternetReachable: true
isConnected: true
type: "wifi"
isWifiEnabled: true

All you should need to do for developing purposes is to forge this state to test different scenarios. This means in your ConnectivityProvider could override whatever comes from the connectivity state listener with some hard-coded state.

This means all consumers should then be aware of this state (faked or not). Have them behave differently depending on this state as it suits your needs.

This should speed your development time. Once you are quite happy with your code, build an APK and play with your app in Production Mode. This should be just a verification step, take notes of any issues, go back to development and forge the scenario where they happened.

It helps to have Analytics tracking you connectivity state and exceptions/errors, so you can also relate some state with any issues. But hopefully at this point you should have not found many, because the bulk of the problems and implementation you had already done at this point.

For more info see:

  • https://reactjs.org/docs/context.html

  • https://github.com/react-native-community/react-native-netinfo

  • https://rnfirebase.io/docs/v4.1.x/analytics/reference/analytics

I hope this was helpful.

Tags:

React Native

Recent Posts