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:
Also Read :
React Native Change Activity Action Bar Title Text Color StackNavigator
React Native Create Custom Sliding Drawer Using Animation iOS Android
React Native QR Code Scanner App using Camera Android iOS Example
React Native Create Stopwatch Timer Android iOS Example Tutorial
Set Background Color of Root View in React Native App Activity
