Offline Notice In React Native

Chiamaka Nwolisa
Dec 14, 2017 · 4 min read
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?

react-native init InternetSign
react-native run-ios 
OR
react-native run-android

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

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 :)

DailyJS

JavaScript news and opinion.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store