React Native Offline

Abstract

1. Introduction

When you are building your React Native app, you have to expect that some users may use your application in offline mode, for instance when travelling on a Plane (airplane mode) or the underground (no signal). How does your app behave in that situation? Does it show an infinite loader? Can the user still use it seamlessly?

Having an offline first class citizen app is very important for a successful user experience. React Native ships with the NetInfo module in order to detect internet connectivity. The API is pretty basic and it may be sufficient for small apps but its usage gets cumbersome as your app grows. Besides that, it only detects network connectivity and does not guarantee internet access so it can provide false positives.

This library aims to gather a variety of modules that follow React and Redux best practises, in order to make your life easier when it comes to deal with internet connectivity in your React Native application.

2. Objective

Handy toolbelt to deal nicely with offline/online connectivity in a React Native app. Smooth redux integration ✈️

This project demonstrates how TypeScript, React, React Native can be applied to a real-world Mobile App Development problem.

3. Key Features / Modules

• Offline/online conditional rendering through Provider/Consumer components that leverage the new React Context API
• Reducer to keep your connectivity state in the Redux store
• Redux middleware to intercept internet request actions in offline mode and apply DRY principle
• Compatibility with async middleware libraries like redux-thunk, redux-saga and redux-observable
• A saga to place the network event subscriptions outside of your components
• A step further than NetInfo detecting internet access besides network connectivity
• Offline queue support to automatically re-dispatch actions when connection is back online or dismiss actions based on other actions dispatched (i.e navigation related)
• Ability to check connectivity regularly
• 100% unit test coverage

4. Technology Stack

5. System Requirements

General requirements for this technology stack — check the README for exact versions.

• Node.js (LTS) and npm / yarn / pnpm
• VS Code or any code editor
• Git (to clone the repository)

6. Installation & Setup

git clone https://github.com/rgommezz/react-native-offline.git
cd react-native-offline

// index.js
import React from 'react';
import { NetworkProvider } from 'react-native-offline';
import App from './App';

const Root = () => (
  <NetworkProvider>
    <App />
  </NetworkProvider>
);

export default Root;

import React from 'react';
import { Image, Button, Text } from 'react-native';
import { NetworkConsumer } from 'react-native-offline';

const ImageViewer = () => (
  <View>
    <Image src="foo.com" />
    <NetworkConsumer>
      {({ isConnected }) =>
        isConnected ? (
          <Button title="Download image" onPress={downloadImage} />
        ) : (
          <Text>Downloading images is disabled since you are offline</Text>
        )
      }
    </NetworkConsumer>
  </View>
);

import React from 'react';
import { Image, Button, Text } from 'react-native';
import { useIsConnected } from 'react-native-offline';

const ImageViewer = () => {
  const isConnected = useIsConnected();
  return (
    <View>
      <Image src="foo.com" />
      {isConnected ? (
        <Button title="Download image" onPress={downloadImage} />
      ) : (
        <Text>Downloading images is disabled since you are offline</Text>
      )}
    </View>
  );
};

import { createStore, applyMiddleware } from 'redux';
import { createNetworkMiddleware } from 'react-native-offline';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware();
const networkMiddleware = createNetworkMiddleware({
  queueReleaseThrottle: 200,
});

const store = createStore(
  rootReducer,
  applyMiddleware(networkMiddleware, sagaMiddleware),
);

Full setup instructions are in the project README.

7. Future Enhancements

Suggested extensions you can add to make this your own project.

• Add push notifications with Firebase Cloud Messaging
• Add offline support with local caching
• Publish an internal test build on the Play Store

8. Viva / Review Questions

Common questions examiners ask for projects in this domain.

1. Which framework is used and why (native vs cross-platform)?
2. How is app state managed across screens?
3. Where is the data stored — locally, Firebase or a REST backend?
4. How are permissions (camera, location, storage) handled?
5. How would you publish this app to the Play Store / App Store?

9. Source Code & License

This project is developed by rgommezz and published on GitHub under the MIT License. Please follow the license terms and credit the original author when you use or modify this code.