React Native net-info - react-native

Question

I'm trying to add an offline notification bar into my app, I have the following code that is called from my App.js.
import React, { PureComponent } from 'react';
import { View, Text, Dimensions, StyleSheet,Alert } from 'react-native';
import NetInfo from "#react-native-community/netinfo";
const dimensions = Dimensions.get('window');
let outofaction = 1;
NetInfo.fetch().then(state => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
if (state.isConnected == false) {
outofaction = 0;
} else {
outofaction = 1;
}
});
//class OfflineNotice extends PureComponent {
const OfflineNotice = () => {
NetInfo.fetch().then(state => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
if (state.isConnected == false) {
outofaction = 0;
} else {
outofaction = 1;
}
});
// Subscribe
const unsubscribe = NetInfo.addEventListener(state => {
console.log("Connection type", state.type);
console.log("Is connected?", state.isConnected);
if (state.isConnected == false) {
outofaction = 0;
} else {
outofaction = 1;
}
});
// Unsubscribe
unsubscribe();
function MiniOfflineSign() {
if (outofaction == 0) {
return (
<View style={styles.offlineContainer}>
<Text style={styles.offlineText}>Offline</Text>
</View>
);
} else {
return (
<View style={styles.offlineContainer}>
<Text style={styles.offlineText}>Online</Text>
</View>
);
}
}
return (
<MiniOfflineSign />
)};
const styles = StyleSheet.create({
offlineContainer: {
backgroundColor: '#b52424',
height: 30,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
width: dimensions.width,
position: 'absolute',
top:40,
zIndex:1
},
offlineText: { color: '#fff' }
});
export default OfflineNotice;
The code works partially. I start Online, then turn off my internet on my laptop, and if I refresh / reload, then it will show offline.
Two problems I have;
I want it to update in near real-time when the isConnected changes (this doesn't appear to be happening)
It doesn't get stuck on one state (though item 1 above would fix that)

Answer 1

I made something similar, this might help you with things.
NoInternetMessageBar component
// NoInternetMessageBar.js
import Netinfo from '#react-native-community/netinfo';
import React, { useContext, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Store } from 'store/Store';
export default function NoInternetMessageBar() {
const {
state,
actions: { networkConnectionChanged },
} = useContext(Store);
useEffect(() => {
const unsubscribe = Netinfo.addEventListener(({ isConnected }) => networkConnectionChanged(isConnected));
return () => {
unsubscribe();
};
}, []);
if (state.isConnected) return null;
return (
<View style={styles.container}>
<Text style={styles.message}>Cannot reach internet</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
position: 'absolute',
bottom: 0,
height: 40,
width: '100%',
backgroundColor: 'gray',
},
message: {
color: 'white',
marginLeft: 20,
},
});
action
const networkConnectionChanged = async isConnected => {
return dispatch({
type: NETWORK_CHANGED,
payload: isConnected,
});
};
reducer
case NETWORK_CHANGED:
return {
...state,
isConnected: action.payload,
};
On top level use it like this.
<>
<AppContainer />
<NoInternetMessageBar />
</>

Answer 2

You are unsubscribing from NetInfo updates immediately after subscribing to them. Functional components are just that - functions. The code you wrote in there will be executed every time that component renders.
You should instead put your subscribe/unsubscribe in a useEffect hook, so that you subscribe on mount and unsubscribe on unmount.
useEffect(() => {
const unsubscribe = NetInfo.addEventListener(state => {
...
});
return () => {
unsubscribe();
}
}, []);

Answer 3

Subscribe in componentDidMount() and Unsubscribe in componentWillUnmount(), like this -
class A extends React.Component {
constructor() {
this.unsubscribe;
}
componentDidMount(){
this.unsubscribe = NetInfo.addEventListener(...);
}
componentWillUnmount() {
this.unsubscribe && this.unsubscribe();
}
}