Stay Connected: Showing Offline Alert in React Native & Expo App

Showing offline alert in React Native & Expo app

In the mobile-first world, ensuring that users have a seamless experience even when they’re offline is crucial. An offline alert is important because it informs users that they may not have access to all features of the app due to a lack of internet connectivity. This enhances user experience by managing expectations and reducing frustration.

TL;DR: To handle offline alerts in a React Native & Expo app, we can use the NetInfo library to detect connectivity changes and update the app’s state accordingly. When the user is offline, we display an alert or banner indicating the lack of connection.

Table of Content

∘ Project Setup
∘ Run the App
∘ Install NetInfo Package
∘ Detecting Connectivity Changes
∘ Displaying Offline Alert
∘ Conclusion

Project Setup

Creating a new project with Expo has never been easier! Simply follow the steps below to get started:

# create a new expo project called "rn-expo-offline-app"
npx create-expo-app rn-expo-offline-app

# navigate to the newly created project directory
cd rn-expo-offline-app

# open the project in vs code
code .

Initial project setup

If you are new to React Native app development or experiencing any issues, follow my guide on Getting Started with React Native and Expo.

Building Your First Mobile App with React Native and Expo: A Comprehensive Guide

Run the App

npx expo start

The app runs on iOS simulator

Install NetInfo Package

We will use the NetInfo package to get the network state to show our app users when they are not connected to the internet.

First, install the package to our app:

npx expo install @react-native-community/netinfo

NetInfo Expo docs are here.

NetInfo

Detecting Connectivity Changes

Import NetInfo from the package:

import NetInfo from "@react-native-community/netinfo";

Add a state to track connectivity:

const [isConnected, setConnected] = useState(true);

Subscribe to connectivity changes in useEffect:

useEffect(() => {
  const unsubscribe = NetInfo.addEventListener(state => {
    setConnected(state.isConnected);
  });

  return () => unsubscribe();
}, []);

Displaying Offline Alert

Render an alert component conditionally based on the isConnected state

{!isConnected && (
  <View style={styles.offlineContainer}>
    <Text style={[styles.offlineText, styles.largeText]}>
      You are offline
    </Text>
    <Text style={styles.offlineText}>
      Try connected with internet or come back later
    </Text>
  </View>
)}

Style the offline alert:

const styles = StyleSheet.create({
..., // other styles
  offlineContainer: {
    backgroundColor: '#b52424',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    position: 'absolute',
    bottom: 0,
    paddingBottom: 100,
    paddingTop: 10,
    paddingHorizontal: 20,
  },
  offlineText: {
    color: '#fff',
    textAlign: 'center',
  },
  largeText: {
    fontWeight: 'bold',
    fontSize: 24,
  },
});

if your device has been disconnected from the internet then you’ll see the following notice:

App disconnected from the internet

Full codebase

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import NetInfo from '@react-native-community/netinfo';

export default function App() {
  const [isConnected, setConnected] = useState(true);

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener((state) => {
      setConnected(state.isConnected);
    });

    return () => unsubscribe();
  }, []);

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />

      {!isConnected && (
        <View style={styles.offlineContainer}>
          <Text style={[styles.offlineText, styles.largeText]}>
            You are offline
          </Text>
          <Text style={styles.offlineText}>
            Try connected with internet or come back later
          </Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  offlineContainer: {
    backgroundColor: '#b52424',
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    position: 'absolute',
    bottom: 0,
    paddingBottom: 100,
    paddingTop: 10,
    paddingHorizontal: 20,
  },
  offlineText: {
    color: '#fff',
    textAlign: 'center',
  },
  largeText: {
    fontWeight: 'bold',
    fontSize: 24,
  },
});

Conclusion

By following the steps mentioned above, you have effectively added an offline alert to your React Native and Expo application! This feature will undoubtedly improve your users' experience by keeping them informed of their connectivity status. Always remember, that a content user is more likely to return.