RN fetch blob downloaded images/files not showing after update the app

Question

I'm using rn-fetch-blob package for download the images in cache. and I have shown the images. If I update the app to new version, then the downloaded image not showing in IOS. Any solution for this? Getting this error (https://github.com/joltup/rn-fetch-blob/issues/204)

Thanks in advance.

Answer 1

Issue fixed and my code is,

import React, { useState, useEffect } from 'react';

import * as RNFS from 'react-native-fs';

// Import Required Components import { StyleSheet, Text, View, TouchableOpacity, PermissionsAndroid, Image, Platform, } from 'react-native';

import AsyncStorage from '@react-native-async-storage/async-storage';

const Settings = () => { const [LocalImage, setLocalImage] = useState('')

const image_URL =
    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQZ6QSUYDRBRChIXGs0jqH55cZytOPPjjh4Bg&usqp=CAU'

const renderImagePath = async () => {
    let initialImage = await AsyncStorage.getItem('localImage')
    if (initialImage == null) {
        const extension = (Platform.OS === 'android') ? 'file://' : ''
        const path = `${extension}${RNFS.DocumentDirectoryPath}/localImg.png`; //U can use any format png, jpeg, jpg

        RNFS.exists(path).then(exists => {
            RNFS.downloadFile({ fromUrl: image_URL, toFile: path }).promise.then(res => {
                setLocalImage(`${RNFS.DocumentDirectoryPath}/localImg.png`)
                AsyncStorage.setItem('localImage', 'localImg.png')
            })
        }).catch(error => {
            console.warn(error);
        });
    }
    else {
        console.log('file exists', initialImage)
        setLocalImage(`${RNFS.DocumentDirectoryPath}/${initialImage}`)
    }
}

console.log('LocalImage', LocalImage)

return (
    <View style={styles.container}>
        <View style={{ alignItems: 'center' }}>
            <Text style={{ fontSize: 30, textAlign: 'center' }}>
                React Native Image Download Example
    </Text>
            <Text
                style={{
                    fontSize: 25,
                    marginTop: 20,
                    marginBottom: 30,
                    textAlign: 'center',
                }}>
                www.aboutreact.com
    </Text>
        </View>
        {LocalImage ?
            <Image
                source={{
                    uri: `file://${LocalImage}`
                }}
                style={{
                    width: '100%',
                    height: 100,
                    resizeMode: 'contain',
                    margin: 5
                }}
            />
            : null}
        <TouchableOpacity
            style={styles.button}
            onPress={renderImagePath}>
            <Text style={styles.text}>
                Download Image
    </Text>
        </TouchableOpacity>
    </View>
);

};

export default Settings;

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, button: { width: '80%', padding: 10, backgroundColor: 'orange', margin: 10, }, text: { color: '#fff', fontSize: 20, textAlign: 'center', padding: 5, }, });