diff --git a/.gitignore b/.gitignore index a22b528..7bcc6fe 100644 --- a/.gitignore +++ b/.gitignore @@ -36,3 +36,4 @@ jspm_packages # Optional REPL history .node_repl_history /.idea/ +/CachedImageExample/ diff --git a/.npmingnore b/.npmingnore new file mode 100644 index 0000000..3056208 --- /dev/null +++ b/.npmingnore @@ -0,0 +1,2 @@ +/CachedImageExample/ +/__tests__/ diff --git a/CachedImage.js b/CachedImage.js index daf03c8..904b9e8 100644 --- a/CachedImage.js +++ b/CachedImage.js @@ -16,11 +16,12 @@ const { View, ImageBackground, ActivityIndicator, - NetInfo, Platform, StyleSheet, } = ReactNative; +const NetInfo = require("@react-native-community/netinfo"); + const styles = StyleSheet.create({ image: { backgroundColor: 'transparent' @@ -77,14 +78,14 @@ class CachedImage extends React.Component { this.renderLoader = this.renderLoader.bind(this); } - componentWillMount() { + componentDidMount() { this._isMounted = true; - NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange); + this.removeNetInfoEventListener = NetInfo.addEventListener(this.handleConnectivityChange); // initial - NetInfo.isConnected.fetch() - .then(isConnected => { + NetInfo.fetch() + .then((netInfoState) => { this.safeSetState({ - networkAvailable: isConnected + networkAvailable: netInfoState.isInternetReachable }); }); @@ -93,7 +94,10 @@ class CachedImage extends React.Component { componentWillUnmount() { this._isMounted = false; - NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange); + if (this.removeNetInfoEventListener) { + this.removeNetInfoEventListener(); + delete this.removeNetInfoEventListener; + } } componentWillReceiveProps(nextProps) { @@ -131,9 +135,9 @@ class CachedImage extends React.Component { return this.setState(newState); } - handleConnectivityChange(isConnected) { + handleConnectivityChange(netInfoState) { this.safeSetState({ - networkAvailable: isConnected + networkAvailable: netInfoState.isInternetReachable }); } 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..a6e6722 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://github.com/joltup/rn-fetch-blob#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/package.json b/package.json index f941d88..a744345 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "name": "react-native-cached-image", - "version": "1.4.3", + "name": "@erhanbicer/react-native-cached-image", + "version": "1.4.5", "description": "CachedImage component for react-native", "main": "index.js", "scripts": { - "test": "./node_modules/.bin/jest" + "test": "jest" }, "jest": { "preset": "react-native", @@ -16,13 +16,14 @@ "/CachedImageExample/" ], "modulePathIgnorePatterns": [ + "/__tests/", "/CachedImageExample/" ], "verbose": true }, "repository": { "type": "git", - "url": "https://github.com/kfiroo/react-native-cached-image" + "url": "git+https://github.com/erhanbicer/react-native-cached-image.git" }, "keywords": [ "react-native", @@ -32,9 +33,9 @@ "author": "kfiroo ", "license": "MIT", "bugs": { - "url": "https://github.com/kfiroo/react-native-cached-image/issues" + "url": "https://github.com/erhanbicer/react-native-cached-image/issues" }, - "homepage": "https://github.com/kfiroo/react-native-cached-image", + "homepage": "https://github.com/erhanbicer/react-native-cached-image", "files": [ "index.js", "CachedImage.js", @@ -47,11 +48,12 @@ ], "typings": "./index.d.ts", "dependencies": { + "@react-native-community/netinfo": "^5.6.1", "crypto-js": "3.1.9-1", "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.16", "url-parse": "1.1.9" }, "devDependencies": { 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 4a31b10..5b6eadf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,11 @@ # yarn lockfile v1 +"@react-native-community/netinfo@^5.6.1": + version "5.6.2" + resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-5.6.2.tgz#a054db83a1787711f9f69029e2c9b80735ac3f75" + integrity sha512-IkzS78nOiPNM/MboBqqbk2eMBrflp8VML/p33pd50KZq+PvBq8Oywt1JKOgdaMxUIbGjP73zVz+f6r2f80u2Eg== + 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.10.16: + version "0.10.16" + resolved "https://registry.yarnpkg.com/rn-fetch-blob/-/rn-fetch-blob-0.10.16.tgz#bd54f66c94f7a8e06c213077483646478ae8d230" + integrity sha512-hZV+nF0HK4CWmspXGMw7/G8Q8qugpS/wbKiNLsFpdBZR8XYzjFZNvBWgGyC0F5JWQn3sjmK2w/FJjBlwdQWNQg== + 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"