Offline Notice In React Native

Unsplash image by Daniele Levis Pelusi

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

Facebook Messenger Offline Notice

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

Let’s get into it, shall we?

Step 1: Create a new React Native project

react-native init InternetSign

Step 2: cd into the project and get the project up and running with

react-native run-ios 
         OR 
react-native run-android

Step 3: Create the OfflineNotice.js Component

We have just designed a dummy “No Internet Connection” sign.

In the `App.js` file which indicates the starting point of the app, import the OfflineNotice component

import OfflineNotice from './OfflineNotice'

This is how the render function of your App.js file should look like if you’ve been following along

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <OfflineNotice /> <---- add this here
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

Our app should look like this now

OfflineNotice in our app

Step 4: Let’s make OfflineNotice component responsive

Okay, we have successfully created the “No Internet Connection” sign. Now, we have to hook it up to Network changes so that when there is Internet Connection on the phone the sign doesn’t show up and if there is no Internet Connection, the sign shows up and informs our users that they have well, no Internet Connection on their device.

We will be using local state provided with React.

state = {
    isConnected: true
};

I am assuming that the initial connection state is true, otherwise we would see the “No Internet Connection” sign for like a split second when the app is refreshed (It bugs me tbh)

After setting state, we can change the connection status we would get from `NetInfo` to either true or false.

We create a function to handle this change in connection:

function handleConnectivityChange = isConnected => {
  this.setState({ isConnected });
}

Now, we have to hook the handleConnectivityChange function, so in our componentDidMount lifecycle method, we add an event listener to the NetInfo module.

PS: Make sure you import NetInfo from react-native

import { NetInfo } from 'react-native'

From the docs, this is a summary of what the NetInfo component is: NetInfo exposes info about online/offline status

Our componentDidMount should look like this:

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

Plus its also 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);
 }

There is just one last thing to do.

We have to tweak the render function in our OfflineNotice component so that when the isConnected piece of state is false (meaning we have no internet connection), we show the sign else we show nothing.

render() {
    if (!this.state.isConnected) {
      return <MiniOfflineSign />;
    }
    return null;
  }

Boom, that’s all there is to this. We have successfully created a “No Internet Connection” sign that responds to the state of the connection on your mobile device.

The final OfflineNotice.js component should look like this:

Demo

Demo of Offline Notice

I hope you learnt something new. Feel free to drop questions or feedback in the comments section OR better still hit me up on Twitter.

Have a great day :)