React Native’s NetInfo component is used to check internet connectivity status runtime in react native application. NetInfo is properly works in both android and iOS mobile platforms. Using the NetInfo component we can detect networks status like your mobile is connected to active internet connection or not and also which connection type your mobile phone is using 4G, 3G, 2G and WiFi. In this tutorial we would going to make a react native application with NetInfo Example to Detect Internet Connection in Live App mobile application in both android and iOS platforms. So let’s get started 🙂 .
What we are doing in this project: We are checking the internet connection status like device is connected to internet or not and according to that we would show a message on application screen with online and offline status text. This code runs in real time so if you minimize the app and reopen it then it will also detects internet connection in real time.
Contents in this project NetInfo Example to Detect Internet Connection in Live Mobile App in iOS Android Example Tutorial:
1. This step is very important for ANDROID applications, We need to put the ACCESS_NETWORK_STATE permission in AndroidManifest.xml file. So goto YourReactNativeProject -> android -> app -> src -> main -> AndroidManifest.xml and put below permission inside it. There is no configuration needed in iOS project.
|
1 |
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> |
2. Import StyleSheet, Text, View and NetInfo component in your project.
|
1 2 3 |
import React, {Component} from 'react'; import { StyleSheet, Text, View, NetInfo } from 'react-native'; |
3. Create constructor() in your main export default class and inside the constructor() make a state named as connection_Status. This state is used to hold the connection status like Online and Offline.
|
1 2 3 4 5 6 7 8 9 10 11 |
constructor(){ super(); this.state={ connection_Status : "" } } |
4. Make a componentDidMount() inbuilt method in your class. Inside this method we would first implement the addEventListener() on the NetInfo and call the this._handleConnectivityChange function on connection change automatically. Now using the NetInfo.isConnected.fetch().done((isConnected)) we would detect the live internet connection status and if device is connected to live internet connection then set the state value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
componentDidMount() { NetInfo.isConnected.addEventListener( 'connectionChange', this._handleConnectivityChange ); NetInfo.isConnected.fetch().done((isConnected) => { if(isConnected == true) { this.setState({connection_Status : "Online"}) } else { this.setState({connection_Status : "Offline"}) } }); } |
5. Creating componentWillUnmount() function in your class. Inside this function we would removing the listener from NetInfo using removeEventListener() method.
|
1 2 3 4 5 6 7 8 9 |
componentWillUnmount() { NetInfo.isConnected.removeEventListener( 'connectionChange', this._handleConnectivityChange ); } |
6. Creating the _handleConnectivityChange() function. We would calling this function each time when network connection status changed.
|
1 2 3 4 5 6 7 8 9 10 11 |
_handleConnectivityChange = (isConnected) => { if(isConnected == true) { this.setState({connection_Status : "Online"}) } else { this.setState({connection_Status : "Offline"}) } }; |
7. Creating a Text component inside render’s return block. In Text component we would show the connection status using State value.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <View style={styles.MainContainer}> <Text style={{fontSize: 20, textAlign: 'center', marginBottom: 20}}> You are { this.state.connection_Status } </Text> </View> ); } |
8. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', padding: 20 }, TextStyle: { fontSize:20, textAlign: 'center', } }); |
9. Complete source code for App.js File :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import React, {Component} from 'react'; import { StyleSheet, Text, View, NetInfo } from 'react-native'; export default class App extends Component{ constructor(){ super(); this.state={ connection_Status : "" } } componentDidMount() { NetInfo.isConnected.addEventListener( 'connectionChange', this._handleConnectivityChange ); NetInfo.isConnected.fetch().done((isConnected) => { if(isConnected == true) { this.setState({connection_Status : "Online"}) } else { this.setState({connection_Status : "Offline"}) } }); } componentWillUnmount() { NetInfo.isConnected.removeEventListener( 'connectionChange', this._handleConnectivityChange ); } _handleConnectivityChange = (isConnected) => { if(isConnected == true) { this.setState({connection_Status : "Online"}) } else { this.setState({connection_Status : "Offline"}) } }; render() { return ( <View style={styles.MainContainer}> <Text style={{fontSize: 20, textAlign: 'center', marginBottom: 20}}> You are { this.state.connection_Status } </Text> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', padding: 20 }, TextStyle: { fontSize:20, textAlign: 'center', } }); |
Screenshots in Android device:
Screenshots in iOS device:
Hey , You can create an example shopping cart
thanks you !!
You help me a lot !!
Thanks for comment, I will soon publish a new tutorial with shopping cart example.
very helpful actually I was looking fro something like this, I had an issue now soloved. thanks
Welcome bro 🙂 .
Hello Dear, your tutorials are very helpful to the new developers you are doing a great job. I need your assistance in my project.
Actually, I want to load data from API in Flatlist using checkboxes, user will be able to select 2 or 3 listed items according to wish and on button click pass the selected items to next component thats it.
Looking forward to your positive response
Thank you 🙂
Thanks for comment bro, I will post a new tutorial on this Sunday and i will be doing this same functionality on it.
how to create global function for check internet connection in any class i dont want write same code for every class
Rahul you can read my this tutorial and using this tutorial you can make another class specifically for network checking and calls the class function on every class using its object. Read here : https://reactnativecode.com/call-another-class-function/
ok , i will try
netConnection = () => {
NetInfo.isConnected.fetch().then(isConnected => {
console.log(‘First, is ‘ + (isConnected ? ‘online’ : ‘offline’));
return console.log(‘First, is ‘ + (isConnected ? ‘online’ : ‘offline’));
});
function handleFirstConnectivityChange(isConnected) {
console.log(‘Then, is ‘ + (isConnected ? ‘online’ : ‘offline’));
NetInfo.isConnected.removeEventListener(
‘connectionChange’,
handleFirstConnectivityChange
);
}
NetInfo.isConnected.addEventListener(
‘connectionChange’,
handleFirstConnectivityChange
);
}
i create like this in network class
and import in main class Obj = new NetworkUtils();
when i need to hit api before check internet then use Obj.netConnection()
Now my question this is the right way or not
thanks a lot ……………..very useful one saved lots of time
Welcome Siva 🙂 .
Netinfo is being removed from react-native and moved to @react-native-community/netinfo. The script fails with
Unhandled JS Exception: TypeError: Cannot read property ‘isConnected’ of undefined
This error is located at:
in App (at renderApplication.js:35)
in RCTView (at View.js:45)
in View (at AppContainer.js:98)
in RCTView (at View.js:45)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:34)
Thanks for notifying Pablo.
Thaaaankyou! u saved me a lot of timee too!
Welcome Aydee 🙂 .
Can I use this in the expo?
I don’t know Akash i haven’t tried it on expo.
I tried, it’s working perfectly
hi is there a updated code for “react-native-community/react-native-netinfo” ?
Sager i will soon upload a new tutorial with same NetInfo 🙂 .