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

Question

When I switch my emulator of Android to Airplane Mode, the app i'm developing crashes because it needs the development server.

I'm in need to test offline behaviour for my app, so I ask you how to work offline with an app into the emulator?

GOAL: I must test what the app does when connection is not available. I'm asking if there is a way to test a reac-native app without connection, but without build a production version and installing, because I'm actively developing the off-line mode and I need to re-run the app houndreds of times

Answer 1

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.