NetInfo is deprecated from react-native use from @community

[aanom]

Hi, Developer NetInfo is no longer available for version < 0.60.0 please use it from @community. Please change the CachedImage.js file from my file.

[aanom]

'use strict';

const _ = require('lodash');
const React = require('react');
const ReactNative = require('react-native');

const PropTypes = require('prop-types');

const ImageCacheManagerOptionsPropTypes = require('./ImageCacheManagerOptionsPropTypes');

const flattenStyle = ReactNative.StyleSheet.flatten;

const ImageCacheManager = require('./ImageCacheManager');

const {
View,
ImageBackground,
ActivityIndicator,
Platform,
StyleSheet,
} = ReactNative;

import NetInfo from "@react-native-community/netinfo";

const styles = StyleSheet.create({
image: {
backgroundColor: 'transparent'
},
loader: {
backgroundColor: 'transparent',
},
loaderPlaceholder: {
backgroundColor: 'transparent',
alignItems: 'center',
justifyContent: 'center'
}
});

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 => (<ImageBackground imageStyle={props.style} ref={CACHED_IMAGE_REF} {...props} />),
        activityIndicatorProps: {},
};

static contextTypes = {
    getImageCacheManager: PropTypes.func,
};

constructor(props) {
    super(props);
    this._isMounted = false;
    this.state = {
        isCacheable: true,
        cachedImagePath: null,
        networkAvailable: true
    };

    this.getImageCacheManagerOptions = this.getImageCacheManagerOptions.bind(this);
    this.getImageCacheManager = this.getImageCacheManager.bind(this);
    this.safeSetState = this.safeSetState.bind(this);
    this.handleConnectivityChange = this.handleConnectivityChange.bind(this);
    this.processSource = this.processSource.bind(this);
    this.renderLoader = this.renderLoader.bind(this);
}

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

    this.processSource(this.props.source);
}

componentWillUnmount() {
    this._isMounted = false;
    NetInfo.removeEventListener('connectionChange', this.handleConnectivityChange);
}

componentWillReceiveProps(nextProps) {
    if (!_.isEqual(this.props.source, nextProps.source)) {
        this.processSource(nextProps.source);
    }
}

setNativeProps(nativeProps) {
    try {
        this.refs[CACHED_IMAGE_REF].setNativeProps(nativeProps);
    } catch (e) {
        console.error(e);
    }
}

getImageCacheManagerOptions() {
    return _.pick(this.props, _.keys(ImageCacheManagerOptionsPropTypes));
}

getImageCacheManager() {
    // try to get ImageCacheManager from context
    if (this.context && this.context.getImageCacheManager) {
        return this.context.getImageCacheManager();
    }
    // create a new one if context is not available
    const options = this.getImageCacheManagerOptions();
    return ImageCacheManager(options);
}

safeSetState(newState) {
    if (!this._isMounted) {
        return;
    }
    return this.setState(newState);
}

handleConnectivityChange(isConnected) {
    this.safeSetState({
        networkAvailable: isConnected
    });
}

processSource(source) {
    const url = _.get(source, ['uri'], null);
    const options = this.getImageCacheManagerOptions();
    const imageCacheManager = this.getImageCacheManager();

    imageCacheManager.downloadAndCacheUrl(url, options)
        .then(cachedImagePath => {
            this.safeSetState({
                cachedImagePath
            });
        })
        .catch(err => {
            // console.warn(err);
            this.safeSetState({
                cachedImagePath: null,
                isCacheable: false
            });
        });
}

render() {
    if (this.state.isCacheable && !this.state.cachedImagePath) {
        return this.renderLoader();
    }
    const props = getImageProps(this.props);
    const style = this.props.style || styles.image;
    const source = (this.state.isCacheable && this.state.cachedImagePath) ? {
        uri: 'file://' + this.state.cachedImagePath
    } : this.props.source;
    if (this.props.fallbackSource && !this.state.cachedImagePath) {
        return this.props.renderImage({
            ...props,
            key: `${props.key || source.uri}error`,
            style,
            source: this.props.fallbackSource
        });
    }
    return this.props.renderImage({
        ...props,
        key: props.key || source.uri,
        style,
        source
    });
}

renderLoader() {
    const imageProps = getImageProps(this.props);
    const imageStyle = [this.props.style, styles.loaderPlaceholder];

    const activityIndicatorProps = _.omit(this.props.activityIndicatorProps, ['style']);
    const activityIndicatorStyle = this.props.activityIndicatorProps.style || styles.loader;

    const LoadingIndicator = this.props.loadingIndicator;

    const source = this.props.defaultSource;

    // if the imageStyle has borderRadius it will break the loading image view on android
    // so we only show the ActivityIndicator
    if (!source || (Platform.OS === 'android' && flattenStyle(imageStyle).borderRadius)) {
        if (LoadingIndicator) {
            return (
                <View style={[imageStyle, activityIndicatorStyle]}>
                    <LoadingIndicator {...activityIndicatorProps} />
                </View>
            );
        }
        return (
            <ActivityIndicator
                {...activityIndicatorProps}
                style={[imageStyle, activityIndicatorStyle]}/>
        );
    }
    // otherwise render an image with the defaultSource with the ActivityIndicator on top of it
    return this.props.renderImage({
        ...imageProps,
        style: imageStyle,
        key: source.uri,
        source,
        children: (
            LoadingIndicator
                ? <View style={[imageStyle, activityIndicatorStyle]}>
                <LoadingIndicator {...activityIndicatorProps} />
            </View>
                : <ActivityIndicator
                {...activityIndicatorProps}
                style={activityIndicatorStyle}/>
        )
    });
}

}

module.exports = CachedImage;

[DPflasterer]

+1
I think this project is dead... No updates in two years and plenty of open PRs to fix the bugs. Did people move to another solution?

[fungilation]

Using and working in my fork with latest RN 0.61.2 in my app. Just haven't had time to bring back to this repo

[Bill-Niz]

@fungilation I've got this error when using your fork

`Error: @react-native-community/netinfo: NativeModule.RNCNetInfo is null. To fix this issue try these steps:

• Run react-native link @react-native-community/netinfo in the project root.
• Rebuild and re-run the app.
• If you are using CocoaPods on iOS, run pod install in the ios directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
• Check that the library was linked correctly when you used the link command by running through the manual installation instructions in the README.

• If you are getting this error while unit testing you need to mock the native module. Follow the guide in the README.

If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-community/react-native-netinfo
`

[fungilation]

Have you done what the error suggests? link and pod install

[Bill-Niz]

It's fixed.
I had to add @react-native-community/netinfo in my project

[Shivendra30]

This is a major problem in using the module. NetInfo is no longer imported from react-native. Any fixes?

[Bill-Niz]

@Shivendra30
yarn add fungilation/react-native-cached-image
yarn add @react-native-community/netinfo

[Shivendra30]

Hey @Bill-Niz , I had made my own component using rn-fetch-blob! -

But thanks for the help mate :)