Phone connecting with Wi-Fi with ports closed.
When port is closed on the network, even though wi-fi is connected, router can’t forward our request to the internet.
In React Native there is a package called react-native-netinfo
Using this package, we can understand status of the network we are in as below.
Install
We can install this package in our application running the command as below,
npm install --save @react-native-community/netinfoUse
Before we use, we need to import the Library,
import NetInfo from “@react-native-community/netinfo”;
NetInfo.addEventListener(networkState=>{console.log(networkState)})
After import to get status of network if we run the code as below
NetInfo.addEventListener(networkState=>{
console.log(networkState)
})
It will print the network state to the console as below,
Object {
“details”: Object {
“bssid”: null,
“ipAddress”: “192.168.0.5”,
“isConnectionExpensive”: false,
“ssid”: null,
“subnet”: “255.255.255.0”,
},
“isConnected”: true,
“isInternetReachable”: true,
“type”: “wifi”,
}
So, to be able to successfully perform the network request through the application as in above Object, IsConnected and isInternetReachable property should be true, in any type of network.
When all ports are closed in the network even IsConnected property is true, isInternetReachable will be null. That means we will not be able to perform network request through that network.
How can we handle such situation when submitting something?
So, whenever, we fetch from or to the database, its always best to check the current network connectivity prior to the request as described above. If it is connected and reachable, then go ahead to perform the request else, we need to provide some messages to the user about the network connectivity.
const handleSubbmit=()=>{
if(isConnected && isInternetReachable){
//perform submit functionality here
}else{
//display the message to the user
}
}
when the phone is disconnected from the private Wi-Fi network, ensuring the app reconnects to 4G
In React Native I could not found any ways that I can reconnect to 4G programmatically unless 4G is enabled in user device (This might be because of security reason). However, if wi-fi and 4G both enabled but there is not any network in Wi-fi, app automatically connects with the 4G.
Using react-native-netinfo , we can listen to the network state changes. Based on that we can set the IsConnected and isInternetReachable. If both of them are true, then user can successfully submit from the application.
import React, {useEffect, useState } from ‘react’;
import NetInfo from “@react-native-community/netinfo”;
const AppComponent = ()=>{
const [isConnected, setIsConnected] = useState(false)
const [isInternetReachable, setIsInternetReachable] = useState(false)
useEffect(()=>{
const unsubscribe = NetInfo.addEventListener(state=>{
setIsConnected(state.isConnected)
setIsInternetReachable(state.isInternetReachable)
})
return ()=>unsubscribe()
},[])
const handleSubmit = ()=>{
const handleSubbmit=()=>{
if(isConnected && isInternetReachable){
//perform submit functionality here
}else{
//display the message to the user
}
}
}
return <>
{/* reactnative components */}
</>
}
export default AppComponent
