kfiroo / react-native-cached-image

CachedImage component for react-native
MIT License
938 stars 470 forks source link

separate netinfo from React native & import from react native community #220

Open Qasim-Yousaf opened 2 years ago

Qasim-Yousaf commented 2 years ago

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch react-native-cached-image@1.4.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-cached-image/CachedImage.js b/node_modules/react-native-cached-image/CachedImage.js
index daf03c8..31cbe6f 100644
--- a/node_modules/react-native-cached-image/CachedImage.js
+++ b/node_modules/react-native-cached-image/CachedImage.js
@@ -16,11 +16,15 @@ const {
     View,
     ImageBackground,
     ActivityIndicator,
-    NetInfo,
+   
     Platform,
     StyleSheet,
 } = ReactNative;

+
+
+const NetInfo = require('@react-native-community/netinfo')
+
 const styles = StyleSheet.create({
     image: {
         backgroundColor: 'transparent'
@@ -79,12 +83,18 @@ class CachedImage extends React.Component {

     componentWillMount() {
         this._isMounted = true;
-        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
+
+        NetInfo.addEventListener(state => {
+            this.handleConnectivityChange(state.isConnected)
+          });
+
+        // NetInfo.addEventListener('connectionChange', this.handleConnectivityChange);
+
         // initial
-        NetInfo.isConnected.fetch()
-            .then(isConnected => {
+        NetInfo.fetch()
+            .then(state => {
                 this.safeSetState({
-                    networkAvailable: isConnected
+                    networkAvailable: state.isConnected
                 });
             });

@@ -93,7 +103,10 @@ class CachedImage extends React.Component {

     componentWillUnmount() {
         this._isMounted = false;
-        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
+        // NetInforemoveEventListener(state => {
+        //     this.handleConnectivityChange(state.isConnected)
+        //   });
+        // NetInfo.removeEventListener('connectionChange', this.handleConnectivityChange);
     }

     componentWillReceiveProps(nextProps) {

This issue body was partially generated by patch-package.