From 6c0214d505d6bbe0d73996179085558ba034936d Mon Sep 17 00:00:00 2001 From: Jose Ruiz Date: Sun, 6 Dec 2020 22:30:13 -0600 Subject: [PATCH 1/3] updating code to work with new react versions --- CachedImage.js | 37 +++++++++++-------- CachedImageExample/android/app/build.gradle | 2 +- CachedImageExample/android/settings.gradle | 4 +- .../project.pbxproj | 6 +-- CachedImageExample/yarn.lock | 6 +-- ImageCacheProvider.js | 2 +- README.md | 6 +-- __tests__/ImageCacheManager-test.js | 2 +- package.json | 5 ++- utils/fsUtils.js | 2 +- yarn.lock | 20 ++++++---- 11 files changed, 53 insertions(+), 39 deletions(-) diff --git a/CachedImage.js b/CachedImage.js index daf03c8..2c54fb1 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; @@ -52,8 +53,8 @@ class CachedImage extends React.Component { }; static defaultProps = { - renderImage: props => (), - activityIndicatorProps: {}, + renderImage: props => (), + activityIndicatorProps: {}, }; static contextTypes = { @@ -63,6 +64,7 @@ class CachedImage extends React.Component { constructor(props) { super(props); this._isMounted = false; + this.unsubscribable = null; this.state = { isCacheable: true, cachedImagePath: null, @@ -79,12 +81,12 @@ class CachedImage extends React.Component { componentWillMount() { 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,7 +95,12 @@ 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) { @@ -131,9 +138,9 @@ class CachedImage extends React.Component { return this.setState(newState); } - handleConnectivityChange(isConnected) { + handleConnectivityChange(state) { this.safeSetState({ - networkAvailable: isConnected + networkAvailable: state.isConnected }); } @@ -206,7 +213,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 +225,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..2bdc513 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-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..ec330e3 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-blob' +project(':rn-fetch-blob-blob').projectDir = new File(rootProject.projectDir, '../node_modules/rn-fetch-blob-blob/android') include ':app' diff --git a/CachedImageExample/ios/CachedImageExample.xcodeproj/project.pbxproj b/CachedImageExample/ios/CachedImageExample.xcodeproj/project.pbxproj index 8aed6d8..5d18ae3 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-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-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-blob/ios/**", ); IPHONEOS_DEPLOYMENT_TARGET = 8.0; MTL_ENABLE_DEBUG_INFO = NO; diff --git a/CachedImageExample/yarn.lock b/CachedImageExample/yarn.lock index cab46a4..79f5ce7 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-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-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-blob/-/rn-fetch-blob-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..fe74fdc 100644 --- a/ImageCacheProvider.js +++ b/ImageCacheProvider.js @@ -54,7 +54,7 @@ class ImageCacheProvider extends React.Component { }; } - componentWillMount() { + componentDidMount() { this.preloadImages(this.props.urlsToPreload); } diff --git a/README.md b/README.md index 9bb7ab6..d6f7c88 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-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-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-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..ef3431b 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-blob', () => ({default: {fs: {}}})); jest.mock('react-native-clcasher/MemoryCache', () => ({default: {}})); import ImageCacheManager from '../ImageCacheManager'; diff --git a/package.json b/package.json index 70e9a12..fbd8866 100644 --- a/package.json +++ b/package.json @@ -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..4d679d1 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-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" From 6dd5e15672f02a400787244709e6adc3b7b5e1fe Mon Sep 17 00:00:00 2001 From: Jose Ruiz Date: Sun, 6 Dec 2020 22:37:41 -0600 Subject: [PATCH 2/3] updating code to work with new react versions --- CachedImage.js | 46 +++++++++---------- CachedImageExample/android/app/build.gradle | 2 +- CachedImageExample/android/settings.gradle | 4 +- .../project.pbxproj | 6 +-- CachedImageExample/yarn.lock | 6 +-- ImageCacheProvider.js | 2 +- README.md | 6 +-- __tests__/ImageCacheManager-test.js | 2 +- utils/fsUtils.js | 2 +- 9 files changed, 37 insertions(+), 39 deletions(-) diff --git a/CachedImage.js b/CachedImage.js index 2c54fb1..2430ba6 100644 --- a/CachedImage.js +++ b/CachedImage.js @@ -40,27 +40,8 @@ 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; @@ -70,7 +51,7 @@ class CachedImage extends React.Component { 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); @@ -78,8 +59,25 @@ 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, + }; + + static defaultProps = { + renderImage: props => (), + activityIndicatorProps: {}, + }; + + static contextTypes = { + getImageCacheManager: PropTypes.func, + }; - componentWillMount() { + componentDidMount() { this._isMounted = true; this.unsubscribable = NetInfo.addEventListener(this.handleConnectivityChange); // initial @@ -103,7 +101,7 @@ class CachedImage extends React.Component { // NetInfo.removeEventListener(this.handleConnectivityChange); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(nextProps) { if (!_.isEqual(this.props.source, nextProps.source)) { this.processSource(nextProps.source); } @@ -111,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); } diff --git a/CachedImageExample/android/app/build.gradle b/CachedImageExample/android/app/build.gradle index 2bdc513..2e94d12 100644 --- a/CachedImageExample/android/app/build.gradle +++ b/CachedImageExample/android/app/build.gradle @@ -133,7 +133,7 @@ android { } dependencies { - compile project(':rn-fetch-blob-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 ec330e3..f974068 100644 --- a/CachedImageExample/android/settings.gradle +++ b/CachedImageExample/android/settings.gradle @@ -1,5 +1,5 @@ rootProject.name = 'CachedImageExample' -include ':rn-fetch-blob-blob' -project(':rn-fetch-blob-blob').projectDir = new File(rootProject.projectDir, '../node_modules/rn-fetch-blob-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 5d18ae3..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/rn-fetch-blob-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/rn-fetch-blob-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/rn-fetch-blob-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 79f5ce7..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" - rn-fetch-blob-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" -rn-fetch-blob-blob@0.10.8: +rn-fetch-blob@0.10.8: version "0.10.8" - resolved "https://registry.yarnpkg.com/rn-fetch-blob-blob/-/rn-fetch-blob-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 fe74fdc..4e22a2f 100644 --- a/ImageCacheProvider.js +++ b/ImageCacheProvider.js @@ -58,7 +58,7 @@ class ImageCacheProvider extends React.Component { 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 d6f7c88..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 [`rn-fetch-blob-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. +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 rn-fetch-blob-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 rn-fetch-blob-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 ef3431b..4b7ffea 100644 --- a/__tests__/ImageCacheManager-test.js +++ b/__tests__/ImageCacheManager-test.js @@ -1,6 +1,6 @@ 'use strict'; -jest.mock('rn-fetch-blob-blob', () => ({default: {fs: {}}})); +jest.mock('rn-fetch-blob', () => ({default: {fs: {}}})); jest.mock('react-native-clcasher/MemoryCache', () => ({default: {}})); import ImageCacheManager from '../ImageCacheManager'; diff --git a/utils/fsUtils.js b/utils/fsUtils.js index 4d679d1..5bbb294 100644 --- a/utils/fsUtils.js +++ b/utils/fsUtils.js @@ -2,7 +2,7 @@ const _ = require('lodash'); -const RNFetchBlob = require('rn-fetch-blob-blob').default; +const RNFetchBlob = require('rn-fetch-blob').default; const { fs From 755bac0b01bf2a4bd2c8c55559f17cf56959dc44 Mon Sep 17 00:00:00 2001 From: Jose Ruiz Date: Sun, 6 Dec 2020 23:32:19 -0600 Subject: [PATCH 3/3] updating package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fbd8866..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": {