Showing an offline screen for your React-Native app using NetInfo package.

usaidpeerzada

Usaid

Posted on July 16, 2021

Showing an offline screen for your React-Native app using NetInfo package.

So you want to check internet connection and show an offline screen if you are disconnected?

Here are simple steps to create one:

1) Install netinfo package from npm:
npm install --save @react-native-community/netinfo

2) Import it in your js file wherever you want it to be, declare a variable and set it's value to null:
let NetInfoSubscription = null;

3) Initialize a state and set the default value to false:
const [connectionStatus, setConnectionStatus] = useState(false);

4) Create a function that changes the value of the connectionStatus based on if the internet is connected or not:

const handleConnectionChange = (state) => {
    setConnectionStatus(state.isConnected);
  }; 
Enter fullscreen mode Exit fullscreen mode

5) Inside useEffect hook reassign the value of NetInfoSubscription and add this piece of code:

NetInfoSubscription = NetInfo.addEventListener(handleConnectionChange);
    return () => {
      NetInfoSubscription;
    };
Enter fullscreen mode Exit fullscreen mode

6) Now just use a ternary operator to show the main contents if the connection is there or show the offline screen if the connection is disconnected.
example:

connectionStatus ? <MainContent /> : <OfflineScreen />
Enter fullscreen mode Exit fullscreen mode

That is it now if the internet is disconnected offline screen will be rendered.

Let me know if you have some questions or want to see how I created my Offline Screen :)

💖 💪 🙅 🚩
usaidpeerzada
Usaid

Posted on July 16, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related