From e48407e35e387606d9d18eeabeb2297f5ed1a376 Mon Sep 17 00:00:00 2001
From: GezimVeliuGlobant <88081962+GezimVeliuGlobant@users.noreply.github.com>
Date: Fri, 10 Sep 2021 14:35:54 +0200
Subject: [PATCH 1/3] Move "NetInfo " from 'React-Native' to
 '@react-native-community/netinfo'

---
 CachedImage.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/CachedImage.js b/CachedImage.js
index daf03c8..6f951ad 100644
--- a/CachedImage.js
+++ b/CachedImage.js
@@ -16,11 +16,12 @@ const {
     View,
     ImageBackground,
     ActivityIndicator,
-    NetInfo,
     Platform,
     StyleSheet,
 } = ReactNative;
 
+import NetInfo from "@react-native-community/netinfo";
+
 const styles = StyleSheet.create({
     image: {
         backgroundColor: 'transparent'
@@ -79,9 +80,10 @@ class CachedImage extends React.Component {
 
     componentWillMount() {
         this._isMounted = true;
-        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
+        NetInfo.addEventListener(this.handleConnectivityChange);
+        // NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
         // initial
-        NetInfo.isConnected.fetch()
+        NetInfo.fetch()
             .then(isConnected => {
                 this.safeSetState({
                     networkAvailable: isConnected
@@ -93,7 +95,8 @@ class CachedImage extends React.Component {
 
     componentWillUnmount() {
         this._isMounted = false;
-        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
+        // NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
+        NetInfo.removeEventListener(this.handleConnectivityChange);
     }
 
     componentWillReceiveProps(nextProps) {

From eec78923b8052a109b44403732387bc791e7efc1 Mon Sep 17 00:00:00 2001
From: GezimVeliuGlobant <88081962+GezimVeliuGlobant@users.noreply.github.com>
Date: Mon, 13 Sep 2021 15:02:10 +0200
Subject: [PATCH 2/3] Update CachedImage.js

---
 CachedImage.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/CachedImage.js b/CachedImage.js
index 6f951ad..d704221 100644
--- a/CachedImage.js
+++ b/CachedImage.js
@@ -81,7 +81,6 @@ class CachedImage extends React.Component {
     componentWillMount() {
         this._isMounted = true;
         NetInfo.addEventListener(this.handleConnectivityChange);
-        // NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
         // initial
         NetInfo.fetch()
             .then(isConnected => {
@@ -95,8 +94,6 @@ class CachedImage extends React.Component {
 
     componentWillUnmount() {
         this._isMounted = false;
-        // NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
-        NetInfo.removeEventListener(this.handleConnectivityChange);
     }
 
     componentWillReceiveProps(nextProps) {

From f8d1ce27db1ec0ae60aa977a2676b8d0f6b699ef Mon Sep 17 00:00:00 2001
From: GezimVeliuGlobant <88081962+GezimVeliuGlobant@users.noreply.github.com>
Date: Tue, 5 Oct 2021 15:40:38 +0200
Subject: [PATCH 3/3] Added color property in ActivityIndicator

The default color for ActivityIndicator on Android is a bug in the official library React native and should add a color property to fix it.

The bug is open, go to the link: https://github.com/facebook/react-native/pull/30057/files
---
 CachedImage.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/CachedImage.js b/CachedImage.js
index d704221..69e6f43 100644
--- a/CachedImage.js
+++ b/CachedImage.js
@@ -37,7 +37,7 @@ const styles = StyleSheet.create({
 });
 
 function getImageProps(props) {
-    return _.omit(props, ['source', 'defaultSource', 'fallbackSource', 'LoadingIndicator', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage', 'resolveHeaders']);
+    return _.omit(props, ['source', 'defaultSource', 'fallbackSource', 'loadingIndicator', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage', 'resolveHeaders']);
 }
 
 const CACHED_IMAGE_REF = 'cachedImage';
@@ -199,14 +199,14 @@ class CachedImage extends React.Component {
             if (LoadingIndicator) {
                 return (
                     <View style={[imageStyle, activityIndicatorStyle]}>
-                        <LoadingIndicator {...activityIndicatorProps} />
+                        <LoadingIndicator {...activityIndicatorProps} color="#063f71" />
                     </View>
                 );
             }
             return (
                 <ActivityIndicator
                     {...activityIndicatorProps}
-                    style={[imageStyle, activityIndicatorStyle]}/>
+                    style={[imageStyle, activityIndicatorStyle]} color="#063f71"/>
             );
         }
         // otherwise render an image with the defaultSource with the ActivityIndicator on top of it
@@ -218,11 +218,11 @@ class CachedImage extends React.Component {
             children: (
                 LoadingIndicator
                     ? <View style={[imageStyle, activityIndicatorStyle]}>
-                    <LoadingIndicator {...activityIndicatorProps} />
+                    <LoadingIndicator {...activityIndicatorProps} color="#063f71"/>
                 </View>
                     : <ActivityIndicator
                     {...activityIndicatorProps}
-                    style={activityIndicatorStyle}/>
+                    style={activityIndicatorStyle} color="#063f71"/>
             )
         });
     }