diff --git a/CachedImage.js b/CachedImage.js
index daf03c8..2430ba6 100644
--- a/CachedImage.js
+++ b/CachedImage.js
@@ -12,11 +12,12 @@ const flattenStyle = ReactNative.StyleSheet.flatten;
const ImageCacheManager = require('./ImageCacheManager');
+const NetInfo = require('@react-native-community/netinfo');
+
const {
View,
ImageBackground,
ActivityIndicator,
- NetInfo,
Platform,
StyleSheet,
} = ReactNative;
@@ -39,36 +40,18 @@ function getImageProps(props) {
return _.omit(props, ['source', 'defaultSource', 'fallbackSource', 'LoadingIndicator', 'activityIndicatorProps', 'style', 'useQueryParamsInCacheKey', 'renderImage', 'resolveHeaders']);
}
-const CACHED_IMAGE_REF = 'cachedImage';
-
class CachedImage extends React.Component {
-
- static propTypes = {
- renderImage: PropTypes.func.isRequired,
- activityIndicatorProps: PropTypes.object.isRequired,
-
- // ImageCacheManager options
- ...ImageCacheManagerOptionsPropTypes,
- };
-
- static defaultProps = {
- renderImage: props => (),
- activityIndicatorProps: {},
- };
-
- static contextTypes = {
- getImageCacheManager: PropTypes.func,
- };
-
+
constructor(props) {
super(props);
this._isMounted = false;
+ this.unsubscribable = null;
this.state = {
isCacheable: true,
cachedImagePath: null,
networkAvailable: true
};
-
+ this.CACHED_IMAGE_REF = React.createRef()
this.getImageCacheManagerOptions = this.getImageCacheManagerOptions.bind(this);
this.getImageCacheManager = this.getImageCacheManager.bind(this);
this.safeSetState = this.safeSetState.bind(this);
@@ -76,15 +59,32 @@ class CachedImage extends React.Component {
this.processSource = this.processSource.bind(this);
this.renderLoader = this.renderLoader.bind(this);
}
+
+ static propTypes = {
+ renderImage: PropTypes.func.isRequired,
+ activityIndicatorProps: PropTypes.object.isRequired,
+
+ // ImageCacheManager options
+ ...ImageCacheManagerOptionsPropTypes,
+ };
- componentWillMount() {
+ static defaultProps = {
+ renderImage: props => (),
+ activityIndicatorProps: {},
+ };
+
+ static contextTypes = {
+ getImageCacheManager: PropTypes.func,
+ };
+
+ componentDidMount() {
this._isMounted = true;
- NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
+ this.unsubscribable = NetInfo.addEventListener(this.handleConnectivityChange);
// initial
- NetInfo.isConnected.fetch()
- .then(isConnected => {
+ NetInfo.fetch()
+ .then(state => {
this.safeSetState({
- networkAvailable: isConnected
+ networkAvailable: state.isConnected
});
});
@@ -93,10 +93,15 @@ class CachedImage extends React.Component {
componentWillUnmount() {
this._isMounted = false;
- NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
+
+ if (typeof this.unsubscribable === "function") {
+ this.unsubscribable();
+ }
+
+ // NetInfo.removeEventListener(this.handleConnectivityChange);
}
- componentWillReceiveProps(nextProps) {
+ componentDidUpdate(nextProps) {
if (!_.isEqual(this.props.source, nextProps.source)) {
this.processSource(nextProps.source);
}
@@ -104,7 +109,7 @@ class CachedImage extends React.Component {
setNativeProps(nativeProps) {
try {
- this.refs[CACHED_IMAGE_REF].setNativeProps(nativeProps);
+ this.CACHED_IMAGE_REF.setNativeProps(nativeProps);
} catch (e) {
console.error(e);
}
@@ -131,9 +136,9 @@ class CachedImage extends React.Component {
return this.setState(newState);
}
- handleConnectivityChange(isConnected) {
+ handleConnectivityChange(state) {
this.safeSetState({
- networkAvailable: isConnected
+ networkAvailable: state.isConnected
});
}
@@ -206,7 +211,7 @@ class CachedImage extends React.Component {
return (
+ style={[imageStyle, activityIndicatorStyle]} />
);
}
// otherwise render an image with the defaultSource with the ActivityIndicator on top of it
@@ -218,11 +223,11 @@ class CachedImage extends React.Component {
children: (
LoadingIndicator
?
-
-
+
+
:
+ {...activityIndicatorProps}
+ style={activityIndicatorStyle} />
)
});
}
diff --git a/CachedImageExample/android/app/build.gradle b/CachedImageExample/android/app/build.gradle
index daa0170..2e94d12 100644
--- a/CachedImageExample/android/app/build.gradle
+++ b/CachedImageExample/android/app/build.gradle
@@ -133,7 +133,7 @@ android {
}
dependencies {
- compile project(':react-native-fetch-blob')
+ compile project(':rn-fetch-blob')
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
diff --git a/CachedImageExample/android/settings.gradle b/CachedImageExample/android/settings.gradle
index 693eaa1..f974068 100644
--- a/CachedImageExample/android/settings.gradle
+++ b/CachedImageExample/android/settings.gradle
@@ -1,5 +1,5 @@
rootProject.name = 'CachedImageExample'
-include ':react-native-fetch-blob'
-project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
+include ':rn-fetch-blob'
+project(':rn-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/rn-fetch-blob/android')
include ':app'
diff --git a/CachedImageExample/ios/CachedImageExample.xcodeproj/project.pbxproj b/CachedImageExample/ios/CachedImageExample.xcodeproj/project.pbxproj
index 8aed6d8..0c91842 100644
--- a/CachedImageExample/ios/CachedImageExample.xcodeproj/project.pbxproj
+++ b/CachedImageExample/ios/CachedImageExample.xcodeproj/project.pbxproj
@@ -284,7 +284,7 @@
2D02E47B1E0B4A5D006451C7 /* CachedImageExample-tvOS.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "CachedImageExample-tvOS.app"; sourceTree = BUILT_PRODUCTS_DIR; };
2D02E4901E0B4A5D006451C7 /* CachedImageExample-tvOSTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = "CachedImageExample-tvOSTests.xctest"; sourceTree = BUILT_PRODUCTS_DIR; };
5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = ""; };
- 7308BE64683240A988168F6A /* RNFetchBlob.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNFetchBlob.xcodeproj; path = "../node_modules/react-native-fetch-blob/ios/RNFetchBlob.xcodeproj"; sourceTree = ""; };
+ 7308BE64683240A988168F6A /* RNFetchBlob.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNFetchBlob.xcodeproj; path = "../node_modules/rn-fetch-blob/ios/RNFetchBlob.xcodeproj"; sourceTree = ""; };
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = ""; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = ""; };
/* End PBXFileReference section */
@@ -1259,7 +1259,7 @@
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native/ReactCommon/**",
- "$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
+ "$(SRCROOT)/../node_modules/rn-fetch-blob/ios/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
MTL_ENABLE_DEBUG_INFO = YES;
@@ -1304,7 +1304,7 @@
"$(SRCROOT)/../node_modules/react-native/React/**",
"$(SRCROOT)/../node_modules/react-native/ReactCommon/**",
"$(SRCROOT)/../node_modules/react-native-fs/**",
- "$(SRCROOT)/../node_modules/react-native-fetch-blob/ios/**",
+ "$(SRCROOT)/../node_modules/rn-fetch-blob/ios/**",
);
IPHONEOS_DEPLOYMENT_TARGET = 8.0;
MTL_ENABLE_DEBUG_INFO = NO;
diff --git a/CachedImageExample/yarn.lock b/CachedImageExample/yarn.lock
index cab46a4..9cd2603 100644
--- a/CachedImageExample/yarn.lock
+++ b/CachedImageExample/yarn.lock
@@ -3820,7 +3820,7 @@ react-native-cached-image@../:
lodash "4.17.4"
prop-types "15.5.10"
react-native-clcasher "1.0.0"
- react-native-fetch-blob "0.10.8"
+ rn-fetch-blob "0.10.8"
url-parse "1.1.9"
react-native-clcasher@1.0.0:
@@ -3829,9 +3829,9 @@ react-native-clcasher@1.0.0:
dependencies:
mock-async-storage "^1.0.3"
-react-native-fetch-blob@0.10.8:
+rn-fetch-blob@0.10.8:
version "0.10.8"
- resolved "https://registry.yarnpkg.com/react-native-fetch-blob/-/react-native-fetch-blob-0.10.8.tgz#4fc256abae0cb5f10e7c41f28c11b3ff330d72a9"
+ resolved "https://registry.yarnpkg.com/rn-fetch-blob/-/rn-fetch-blob-0.10.8.tgz#4fc256abae0cb5f10e7c41f28c11b3ff330d72a9"
dependencies:
base-64 "0.1.0"
glob "7.0.6"
diff --git a/ImageCacheProvider.js b/ImageCacheProvider.js
index 084cada..4e22a2f 100644
--- a/ImageCacheProvider.js
+++ b/ImageCacheProvider.js
@@ -54,11 +54,11 @@ class ImageCacheProvider extends React.Component {
};
}
- componentWillMount() {
+ componentDidMount() {
this.preloadImages(this.props.urlsToPreload);
}
- componentWillReceiveProps(nextProps) {
+ componentDidUpdate(nextProps) {
// reset imageCacheManager in case any option changed
this.imageCacheManager = null;
// preload new images if needed
diff --git a/README.md b/README.md
index 9bb7ab6..2f24bf6 100644
--- a/README.md
+++ b/README.md
@@ -10,15 +10,15 @@ This package is greatly inspired by [@jayesbe](https://github.com/jayesbe)'s ama
- or -
yarn add react-native-cached-image
-We use [`react-native-fetch-blob`](https://github.com/wkh237/react-native-fetch-blob#installation) to handle file system access in this package and it requires an extra step during the installation.
+We use [`rn-fetch-blob`](https://www.npmjs.com/package/rn-fetch-blob#user-content-installation) to handle file system access in this package and it requires an extra step during the installation.
_You should only have to do this once._
- react-native link react-native-fetch-blob
+ react-native link rn-fetch-blob
Or, if you want to add Android permissions to AndroidManifest.xml automatically, use this one:
- RNFB_ANDROID_PERMISSIONS=true react-native link react-native-fetch-blob
+ RNFB_ANDROID_PERMISSIONS=true react-native link rn-fetch-blob
### Network Status - Android only
Add the following line to your android/app/src/AndroidManifest.xml
diff --git a/__tests__/ImageCacheManager-test.js b/__tests__/ImageCacheManager-test.js
index bf98660..4b7ffea 100644
--- a/__tests__/ImageCacheManager-test.js
+++ b/__tests__/ImageCacheManager-test.js
@@ -1,6 +1,6 @@
'use strict';
-jest.mock('react-native-fetch-blob', () => ({default: {fs: {}}}));
+jest.mock('rn-fetch-blob', () => ({default: {fs: {}}}));
jest.mock('react-native-clcasher/MemoryCache', () => ({default: {}}));
import ImageCacheManager from '../ImageCacheManager';
diff --git a/package.json b/package.json
index 70e9a12..ee20ada 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-cached-image",
- "version": "1.4.3",
+ "version": "1.4.4",
"description": "CachedImage component for react-native",
"main": "index.js",
"scripts": {
@@ -51,8 +51,9 @@
"lodash": "4.17.19",
"prop-types": "15.5.10",
"react-native-clcasher": "1.0.0",
- "react-native-fetch-blob": "0.10.8",
- "url-parse": "1.1.9"
+ "rn-fetch-blob": "0.12.0",
+ "url-parse": "1.1.9",
+ "@react-native-community/netinfo": "5.9.9"
},
"devDependencies": {
"babel-jest": "^21.0.2",
diff --git a/utils/fsUtils.js b/utils/fsUtils.js
index 962c70f..5bbb294 100644
--- a/utils/fsUtils.js
+++ b/utils/fsUtils.js
@@ -2,7 +2,7 @@
const _ = require('lodash');
-const RNFetchBlob = require('react-native-fetch-blob').default;
+const RNFetchBlob = require('rn-fetch-blob').default;
const {
fs
diff --git a/yarn.lock b/yarn.lock
index b402f11..6dcf232 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,11 @@
# yarn lockfile v1
+"@react-native-community/netinfo@5.9.9":
+ version "5.9.9"
+ resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-5.9.9.tgz#5e022637f5e08bd74bf94a0c3315748acd4589f9"
+ integrity sha512-Gp0XV4BgabvzkL4Dp6JAsA2l9LcmgBAq3erCLdvRZmEFz7guCWTogQWVfFtl+IbU0uqfwfo9fm2+mQiwdudLCw==
+
abab@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -3510,13 +3515,6 @@ react-native-clcasher@1.0.0:
dependencies:
mock-async-storage "^1.0.3"
-react-native-fetch-blob@0.10.8:
- version "0.10.8"
- resolved "https://registry.yarnpkg.com/react-native-fetch-blob/-/react-native-fetch-blob-0.10.8.tgz#4fc256abae0cb5f10e7c41f28c11b3ff330d72a9"
- dependencies:
- base-64 "0.1.0"
- glob "7.0.6"
-
react-native@^0.48.3:
version "0.48.3"
resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.48.3.tgz#ec17a66929eb292512b14c091cf260b25e2fba18"
@@ -3839,6 +3837,14 @@ rimraf@~2.2.6:
version "2.2.8"
resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.2.8.tgz#e439be2aaee327321952730f99a8929e4fc50582"
+rn-fetch-blob@0.12.0:
+ version "0.12.0"
+ resolved "https://registry.yarnpkg.com/rn-fetch-blob/-/rn-fetch-blob-0.12.0.tgz#ec610d2f9b3f1065556b58ab9c106eeb256f3cba"
+ integrity sha512-+QnR7AsJ14zqpVVUbzbtAjq0iI8c9tCg49tIoKO2ezjzRunN7YL6zFSFSWZm6d+mE/l9r+OeDM3jmb2tBb2WbA==
+ dependencies:
+ base-64 "0.1.0"
+ glob "7.0.6"
+
rndm@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/rndm/-/rndm-1.2.0.tgz#f33fe9cfb52bbfd520aa18323bc65db110a1b76c"