Dashvar Logo Banner

# react-native-offline [![All Contributors](https://img.shields.io/badge/all_contributors-34-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/rgommezz/react-native-offline.svg?style=shield)](https://circleci.com/gh/rgommezz/react-native-offline) [![npm version](https://badge.fury.io/js/react-native-offline.svg)](https://badge.fury.io/js/react-native-offline) [![Coverage Status](https://coveralls.io/repos/github/rauliyohmc/react-native-offline/badge.svg?branch=master)](https://coveralls.io/github/rauliyohmc/react-native-offline?branch=master) [![npm](https://img.shields.io/npm/dm/react-native-offline.svg)]() Handful of utilities you should keep in your toolbelt to handle offline/online connectivity in React Native. It supports iOS, Android and Windows platforms. You can leverage all the functionalities provided or just the ones that suits your needs, the modules are conveniently decoupled. ## Example app A comprehensive [example app](/example) is available within Expo to play with the library and better understand its different modules. [Go and check it out!](https://exp.host/@rgommezz/react-native-offline-example) ## Contents - [Motivation](#motivation) - [Features](#features) - [Contributions](#contributions) - [Sponsors](#sponsors) - [Installation](#installation) - [API](#api) - [Component Utilities](#component-utilities) - [`NetworkProvider`](#networkprovider) - [`NetworkConsumer`](#networkconsumer) - [Hooks](#hooks) - [`useIsConnected`](#useisconnected) - [Integration with Redux](#integration-with-redux) - [`Network reducer`](#network-reducer) - [`ReduxNetworkProvider`](#reduxnetworkprovider) - [`networkSaga`](#networksaga) - [`createNetworkMiddleware`](#createnetworkmiddleware) - [`Offline Queue`](#offline-queue) - [Other Utilities](#other-utilities) - [`checkInternetConnection`](#checkinternetconnection) - [Miscellanea](#miscellanea) - [FAQ](#faq) - [Testing offline behaviour](#how-to-test-offline-behavior-while-actually-being-online) - [Dispatching CONNECTION_CHANGE as 1st action on app startup](#how-to-orchestrate-redux-to-dispatch-connection_change-as-the-first-action-when-the-app-starts-up) - [Intercept and queue actions based off server errors](#how-to-intercept-and-queue-actions-when-the-server-responds-with-client-4xx-or-server-5xx-errors) - [Persist and rehydrate thunks in the offline queue](#how-to-persist-and-rehydrate-thunks-in-the-offline-queue-with-redux-persist) - [Using redux-saga 1.0.0-beta.x](#using-redux-saga-100-betax) - [Credits](#credits) - [License](#license) - [Contributors](#contributors) ## Motivation 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. ## Features - 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** ## Contributions PRs are more than welcome. If you're planning to contribute please make sure to read the contributing guide: [CONTRIBUTING.md](https://github.com/rgommezz/react-native-offline/blob/master/CONTRIBUTING.md) ## Sponsors If you use this library on your commercial/personal projects, you can help us by funding the work on specific issues that you choose by using IssueHunt.io! This gives you the power to prioritize our work and support the project contributors. Moreover it'll guarantee the project will be updated and maintained in the long run. > Sponsors will be listed in the contributors section at the bottom. If you want to be removed please contact me at: rauliyohmc@gmail.com [![issuehunt-image](https://camo.githubusercontent.com/f5f88939f6c627454b7c5d0eaef9f7cc40cc9586/68747470733a2f2f697373756568756e742e696f2f7374617469632f656d6265642f697373756568756e742d627574746f6e2d76312e737667)](https://issuehunt.io/repos/86369462) ## Installation ### RN >= 0.60 This library uses [@react-native-community/netinfo](https://github.com/react-native-community/react-native-netinfo) behind the scenes, which contains native code, so you need to install it and link it as well. Follow the next steps in order: ```bash $ yarn add react-native-offline $ yarn add @react-native-community/netinfo # extra step for iOS $ (cd ios && pod install) # Or if you use npm $ npm i react-native-offline $ npm i @react-native-community/netinfo # extra step for iOS $ (cd ios && pod install) ``` On RN 0.60, for Android, you may need to use [jetifier](https://github.com/mikehardy/jetifier) to convert the native dependency to AndroidX. #### Android To request network info in Android an extra step is required, so you should add the following line to your app's `AndroidManifest.xml` as well: `` ### Version Compatibility table | react-native-offline | Netinfo | Expo SDK | Web support | | ------------------------- | -------- | ------- | ----- | | 5.8.0 | 5.x.x | < 41 | No | | 6.0.0 | 6.x.x | 41+ | Yes | If you are using the [managed workflow](https://docs.expo.io/versions/latest/introduction/managed-vs-bare/#managed-workflow), you don't need to install any extra dependency. Expo SDK already ships in with `NetInfo`. ```bash $ yarn add react-native-offline # Or if you use npm $ npm i react-native-offline ``` ## API ### Component Utilities In order to render stuff conditionally with ease. They internally listen to connection changes and also provide an extra layer of reliability by ensuring there is internet access when reporting online. For that, an extra request is made to a remote server. #### `NetworkProvider` Provider component that injects the network state to children components via [React Context](https://reactjs.org/docs/context.html). Only children prop is required, the rest are optional. It should be used on top of your components hierarchy, ideally in (or close to) the entry point. ```js type Props = { children: React.Node, pingTimeout?: number = 10000, pingServerUrl?: string = 'https://www.google.com/', shouldPing?: boolean = true, pingInterval?: number = 0, pingOnlyIfOffline?: boolean = false, pingInBackground?: boolean = false, httpMethod?: HTTPMethod = 'HEAD', customHeaders?: HTTPHeaders = {}, } ``` ##### Config `children`: a React Element. This is the only required prop. `pingTimeout`: amount of time (in ms) that the component should wait for the ping response. Defaults to `10000` ms. If you want to use a different value, it's recommended to use a higher one. `pingServerUrl`: remote server to ping to. Defaults to `https://www.google.com/` since it's probably one the most stable servers out there, but you can provide your own if needed. Warning: www.google.com is a blocked domain in China, so if you need your app to be accessible from there, you MUST use another domain. `shouldPing`: flag that denotes whether the extra ping check will be performed or not. Defaults to `true`. `pingInterval`: the interval (in ms) you want to ping the server at. Defaults to `0`, and that means it is not going to check connectivity regularly. If opted in, it's advised not to choose a very small value, because that may drain your battery. Choose wisely. Something around 30000 ms should be fine. `pingOnlyIfOffline`: when set to `true` and `pingInterval` > 0, it will ping the remote server regularly only if offline. Defaults to `false`. `pingInBackground`: whether or not to check connectivity when app isn't in the foreground. Defaults to `false`. `httpMethod`: http method used to ping the server. Supports HEAD or OPTIONS. Defaults to `HEAD`. `customHeaders`: optional custom headers to add for ping request. ##### Usage ```js // index.js import React from 'react'; import { NetworkProvider } from 'react-native-offline'; import App from './App'; const Root = () => ( ); export default Root; ``` #### `NetworkConsumer` React component that subscribes to connectivity changes. It requires a function as a child. The function receives the current connectivity status and returns a React node. **This component should be rendered within a NetworkProvider in order to work properly**. ##### Props ```js type NetworkState = { isConnected: boolean, } type Props = { children: ({ isConnected }: NetworkState) => React.Node } ``` ##### Usage ```js import React from 'react'; import { Image, Button, Text } from 'react-native'; import { NetworkConsumer } from 'react-native-offline'; const ImageViewer = () => (

{({ isConnected }) => isConnected ? (

	Stars	Issues	Version	Updated	Created
react-native-network-info	347	30	5.2.1	5 years ago	9 years ago
react-native-offline			6.0.2	a year ago	7 years ago
redux-offline	6,136	123	2.0.0	7 years ago	7 years ago

react-native-network-info vs react-native-offline vs redux-offline

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past