Offline Notice In React Native

Offline Notice In React Native

Offline Notice In React Native

Have you ever seen the red “No Internet Connection” sign in mobile apps. It looks something like this:

Image for post

Image for post

I will show you how to create this in your React Native application.

Step 1:

NetInfo exposes info about online/offline status

import { NetInfo } from 'react-native'</span>

Step 2:

Add the below snippet into main file where you import Netinfo:

constructor() {
 this.state = {
  isConnected: true

Our componentDidMount should look like this:

componentDidMount() {               NetInfo.isConnected.addEventListener('connectionChange',    this.handleConnectivityChange);

Also it is good practise to remove event listeners when your component is about to be unmounted to avoid any memory leakage, so we would do that in the componentWillUnmount lifecycle method.

componentWillUnmount() {  NetInfo.isConnected.removeEventListener('connectionChange',    this.handleConnectivityChange);

In render:

render() {
  {!this.state.isConnected ? <View>
      <Text>You are offline. Please check your connectivity</Text>
      : <View><Text>Everything working fine!</Text></View>

Image for post

Image for post

Thanks for reading this article ♥

I hope you find this article helpful, Let me know if you have any question in below comment section.

🌟 Twitter | 👩🏻‍💻 | 🌟 Instagram

Did you find this article valuable?

Support Suprabha Supi by becoming a sponsor. Any amount is appreciated!