During a former project, my client asked me to make sure their app could upload photos even with poor data connection on the user's device. I didn't want to lose time looking for a location with slow network to test it, so I found some ways to simulate poor signal conditions at all stages of the development.

‍

On your local machine

You want to test your features in poor network conditions as soon as you develop them, so you need tools simulating a slow mobile connection on your device emulator on your local machine. Thankfully, the React Native debugger already provide an option for that.

• Go to the Network tab of your React Native debugger.
• You can simulate a network connection by clicking on the "No throttling" dropdown.
• You can choose among presets such as 2G or 3G, but you can also create your own preset based on your needs. All you need to set is the download speed, the upload speed and the network latency.

On a real device

You have deployed your feature and you want your stakeholders to give you feedback about how it feels on a slow network. What can you do since they don't have access to dev tools?

Tell them to go to the far countryside where you don't even have 3G.

Just kidding ! There is a way depending on the OS of your device.

‍

iOS: The Network Link Conditioner

To simulate poor network conditions on an iPhone or iPad, you need access to the Developer settings. However, you need a Mac and XCode to do that.

• Download XCode on your Mac.
• Connect your iPhone to XCode.
• Your device will ask you to trust your computer. Click on Yes.
• You can now access the Developer settings on your device from the Settings menu, even if your device is disconnected.

Now you have access to the Developer settings, select "Network Link Conditioner" to access the tool.

• You can select different kinds of connection (Edge, 3G, LTE/4G, Very Bad Network?) and add your own presets based on several values. In Bandwidth, Out Bandwidth and Latency should fit your needs.
• Tap "Enable" to activate the preset.
  
  ++table style="border-collapse: collapse; width: 100%; border-width: 0px; border-style: solid;">++tbody>++tr>++td style="width: 50%;">

• ++/td>++td style="width: 50%;">

• ++/td>++/tr>++/tbody>++/table>

‍

Android: Using real 2G/3G

No need for developer settings on an Android device: go to Parameters > Wi-Fi and Internet > Mobile network > Preferred network type. You can then select if you want to enable 4G, 3G or only 2G.

This method has two drawbacks:

• You can't create your own network profile
• You need to have a SIM card (or else you wouldn't be able to access mobile networks).

Note that it allows you to generate hotspots with 2G/3G speed, so you can connect an iOS device without Developer settings to an Android hotspot.

++table style="border-collapse: collapse; width: 100%; border-width: 0px; border-style: solid;">++tbody>++tr>++td style="width: 33.3333%;">++/td>++td style="width: 33.3333%;">

++/td>++td style="width: 33.3333%;">++/td>++/tr>++/tbody>++/table>

Conclusion

Now you know how to simulate poor network conditions on your devices as well as your local machine and you are ready to test all your features! Expect to add a couple loaders or progress bars to avoid frustration among the users of your app :)

If you know any other way to simulate a poor network on other mobile devices, feel free to let me know by sending me a tweet!