react-native-offline - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

package.json

 {
   "name": "react-native-offline",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Handy toolbelt to deal with offline mode in React Native applications. Cross-platform, provides a smooth redux integration.",
@@ -5,0 +5,0 @@ "main": "./src/index.js",

README.md

@@ -7,3 +7,3 @@ # react-native-offline
 
-Check out [this medium article](https://blog.callstack.io/your-react-native-offline-tool-belt-795abd5f0183) to see the power of the library with real world examples! 🚀 
+Check out [this medium article](https://blog.callstack.io/your-react-native-offline-tool-belt-795abd5f0183) to see the power of the library with real world examples! 🚀
 
@@ -32,3 +32,3 @@ ## Contents
 
-Having an offline first class citizen app is very important for a successful user experience. React Native ships with `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 garantee internet access so it can provide false positives. 
+Having an offline first class citizen app is very important for a successful user experience. React Native ships with `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.
 
@@ -45,4 +45,7 @@ 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.
 - Typed with Flow
+- Check connectivity regularly (optional)
 
 ## Installation
+
+### RN > v0.47
 ```
@@ -52,2 +55,7 @@ $ yarn add react-native-offline
 
+### RN <= v0.47
+```
+$ yarn add react-native-offline@3.2.0
+```
+
 #### Android
@@ -74,2 +82,3 @@ This library uses `NetInfo` module from React Native underneath the hood. 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:
   withExtraHeadRequest?: boolean = true,
+  checkConnectionInterval?: number = 0,
 }
@@ -87,2 +96,4 @@ ```
 
+`checkConnectionInterval`: the interval (in ms) you want to ping the server at. The default is 0, and that means it is not going to regularly check connectivity.
+
 ##### Usage
@@ -200,3 +211,3 @@ ```js
   withRedux: true // It won't inject isConnected as a prop in this case
-})(App); 
+})(App);
 
@@ -228,3 +239,3 @@ const Root = () => (
   regexActionType?: RegExp = /FETCH.*REQUEST/,
-  actionTypes?: Array<string> = [] 
+  actionTypes?: Array<string> = []
 }
@@ -261,3 +272,3 @@ ```
   };
-  
+
   thunk.interceptInOffline = true; // This is the important part
@@ -458,3 +469,3 @@ return thunk; // Return it afterwards
   );
-  
+
   return store;
@@ -481,6 +492,6 @@ }
   }
-  
+
   render() {
    if (this.state.isLoading) return null;
-    
+
     return (
@@ -529,2 +540,1 @@ <Provider store={this.state.store}>
 MIT
-

src/checkInternetAccess.js

 /* @flow */
 
 export default function checkInternetAccess(
-  isConnected: boolean,
   timeout: number = 3000,
   address: string = 'https://google.com',
 ): Promise<boolean> {
-  if (!isConnected) {
-    return Promise.resolve(false);
-  }
-
   return new Promise((resolve: (value: boolean) => void) => {
@@ -13,0 +8,0 @@ const tm = setTimeout(() => {

src/ConnectivityRenderer.js

@@ -82,9 +82,12 @@ /* @flow */
   checkInternet = (isConnected: boolean) => {
-    checkInternetAccess(
-      isConnected,
-      this.props.timeout,
-      this.props.pingServerUrl,
-    ).then((hasInternetAccess: boolean) => {
-      this.handleConnectivityChange(hasInternetAccess);
-    });
+    if (isConnected) {
+      checkInternetAccess(
+        this.props.timeout,
+        this.props.pingServerUrl,
+      ).then((hasInternetAccess: boolean) => {
+        this.handleConnectivityChange(hasInternetAccess);
+      });
+    } else {
+      this.handleConnectivityChange(isConnected);
+    }
   };
@@ -91,0 +94,0 @@

src/withNetworkConnectivity.js

@@ -10,2 +10,6 @@ /* @flow */
 import checkInternetAccess from './checkInternetAccess';
+import {
+  setupConnectivityCheckInterval,
+  clearConnectivityCheckInterval,
+} from './checkConnectivityInterval';
 
@@ -17,2 +21,3 @@ type Arguments = {
   withExtraHeadRequest?: boolean,
+  checkConnectionInterval?: number,
 };
@@ -30,2 +35,3 @@
     withExtraHeadRequest = true,
+    checkConnectionInterval = 0,
   }: Arguments = {},
@@ -59,16 +65,20 @@ ) => (WrappedComponent: ReactClass<*>) => {
         'connectionChange',
-        withExtraHeadRequest
-          ? this.checkInternet
-          : this.handleConnectivityChange,
+        withExtraHeadRequest ? this.checkInternet : this.handleNetInfoChange,
       );
+
       // On Android the listener does not fire on startup
       if (Platform.OS === 'android') {
-        NetInfo.isConnected.fetch().then((isConnected: boolean) => {
-          if (withExtraHeadRequest) {
-            this.checkInternet(isConnected);
-          } else {
-            this.handleConnectivityChange(isConnected);
-          }
-        });
+        NetInfo.isConnected
+          .fetch()
+          .then(
+            withExtraHeadRequest
+              ? this.handleNetInfoChange
+              : this.handleConnectivityChange,
+          );
       }
+
+      setupConnectivityCheckInterval(
+        this.checkInternet,
+        checkConnectionInterval,
+      );
     }
@@ -80,10 +90,18 @@
         withExtraHeadRequest
-          ? this.checkInternet
+          ? this.handleNetInfoChange
           : this.handleConnectivityChange,
       );
+      clearConnectivityCheckInterval();
     }
 
-    checkInternet = (isConnected: boolean) => {
+    handleNetInfoChange = (isConnected: boolean) => {
+      if (!isConnected) {
+        this.handleConnectivityChange(isConnected);
+      } else {
+        this.checkInternet();
+      }
+    };
+
+    checkInternet = () => {
       checkInternetAccess(
-        isConnected,
         timeout,
@@ -99,2 +117,3 @@ pingServerUrl,
       reactConnectionStore.setConnection(isConnected);
+
       // Top most component, syncing with store
@@ -107,3 +126,6 @@ if (
         const actionQueue = store.getState().network.actionQueue;
-        store.dispatch(connectionChange(isConnected));
+
+        if (isConnected !== store.getState().network.isConnected) {
+          store.dispatch(connectionChange(isConnected));
+        }
         // dispatching queued actions in order of arrival (if we have any)
@@ -110,0 +132,0 @@ if (isConnected && actionQueue.length > 0) {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60261

increased by2.02%

Number of package files

16

increased by6.67%

Lines of code

1133

increased by2.81%

Number of lines in readme file

529

increased by1.93%

No dependency changes