react-native-offline - npm Package Compare versions

Comparing version 3.5.0 to 3.6.0

package.json

 {
   "name": "react-native-offline",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "description": "Handy toolbelt to deal with offline mode in React Native applications. Cross-platform, provides a smooth redux integration.",
@@ -61,2 +61,3 @@ "main": "./src/index.js",
     "redux-mock-store": "^1.2.2",
+    "redux-saga": "^0.15.6",
     "redux-thunk": "^2.2.0"
@@ -63,0 +64,0 @@ },

README.md

@@ -40,2 +40,3 @@ # react-native-offline
 - Compatibility with async middleware libraries like redux-thunk, redux-saga and redux-observable
+- A saga to place the logic outside of your components
 - **A step further than `NetInfo` detecting internet access besides network connectivity**
@@ -186,5 +187,7 @@ - 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)**
 
-##### 2.- Wrap your top most React component into `withNetworkConnectivity` and configure it with `withRedux = true`.
-The other config parameters, `timeout` and `pingServerUrl` can be provided to the store as well. Make sure your component is a descendant of the react-redux `<Provider>` component, so that `withNetworkConnectivity` has access to the store.
+##### 2.- Here you have 2 options:
 
+##### 2a.- Wrap your top most React component into `withNetworkConnectivity` and configure it with `withRedux = true`.
+The other [config](#config) parameters, `timeout` and `pingServerUrl` can be provided to the store as well. Make sure your component is a descendant of the react-redux `<Provider>` component, so that `withNetworkConnectivity` has access to the store.
+
 ```js
@@ -215,4 +218,23 @@ // Root.js
 
-Now your network state can be accessed by any Redux container inside `mapStateToProps()`, as `state.network.isConnected`.
+##### 2b.- Fork `networkEventsListenerSaga` from your root saga.
+If you are using redux-saga, I highly encourage you this option since it's a very elegant way to deal with global connectivity changes, without having to wrap your components with extra functionality. It receives the same [config](#config) options as `withNetworkConnectivity` HOC, with the exception of `withRedux`, which is not needed in this case. 
 
+```js
+// rootSaga.js
+import { all } from 'redux-saga/effects';
+import saga1 from './saga1';
+import saga2 from './saga2';
+import { networkEventsListenerSaga } from 'react-native-offline';
+
+export default function* rootSaga(): Generator<*, *, *> {
+  yield all([
+    fork(saga1),
+    fork(saga2),
+    fork(networkEventsListenerSaga, { timeout: 2000, checkConnectionInterval: 20000 }),
+  ]);
+}
+```
+
+##### 3.- Access your network state in your components using `mapStateToProps()`, as `state.network.isConnected`.
+
 **Note**: If you wanna listen to the action dispatched internally in your reducers, import the offline action types and reference `CONNECTION_CHANGE`:
@@ -420,3 +442,3 @@ ```js
         NetInfo.isConnected.removeEventListener( // Cleaning up after initial detection
-          'change',
+          'connectionChange',
           handleFirstConnectivityChangeIOS,
@@ -427,3 +449,3 @@ );
       NetInfo.isConnected.addEventListener(
-        'change',
+        'connectionChange',
         handleFirstConnectivityChangeIOS,
@@ -430,0 +452,0 @@ );

src/ConnectivityRenderer.js

@@ -55,3 +55,3 @@ /* @flow */
     NetInfo.isConnected.addEventListener(
-      'connectionChange',
+      'change',
       this.props.withExtraHeadRequest
@@ -75,3 +75,3 @@ ? this.checkInternet
     NetInfo.isConnected.removeEventListener(
-      'connectionChange',
+      'change',
       this.props.withExtraHeadRequest
@@ -78,0 +78,0 @@ ? this.checkInternet

src/index.js

@@ -17,2 +17,5 @@ module.exports = {
   },
+  get networkEventsListenerSaga() {
+    return require('./sagas').default;
+  },
 };

src/withNetworkConnectivity.js

@@ -61,3 +61,3 @@ /* @flow */
       NetInfo.isConnected.addEventListener(
-        'connectionChange',
+        'change',
         withExtraHeadRequest
@@ -87,3 +87,3 @@ ? this.handleNetInfoChange
       NetInfo.isConnected.removeEventListener(
-        'connectionChange',
+        'change',
         withExtraHeadRequest
@@ -90,0 +90,0 @@ ? this.handleNetInfoChange

No alert changes

Improved metrics

Total package byte prevSize

67680

increased by8.84%

Number of package files

18

increased by5.88%

Lines of code

1364

increased by13.01%

Number of lines in readme file

550

increased by4.17%

Worsened metrics

Dev dependency count

26

increased by4%

No dependency changes