React-native-fs: File stored on RNFS.DocumentDirectoryPath deleted or the path changed on installing new build of the application

[nishanBende]

I am downloading the files and store it on RNFS.DocumentDirectoryPath (IOS 12) but when I install a new version of the application the DocumentDirectory path seems to be changed.

Here's the question has been asked but I would like to know if there's anything similar i can do using react-native-fs.
https://stackoverflow.com/questions/47864143/document-directory-path-change-when-rebuild-application
I have gone through the documentation but didn't find anything related to this issue.
Thanks

[nishanBende]

I found the document directory's path gets changed on rebuild.
For e.g earlier it was
/Users/stl-33/Library/Developer/CoreSimulator/Devices/62CCD1BE-3204-4370-9A0F-4F2D56812638/data/Containers/Data/Application/BCE32988-4C51-483B-892B-16671E3771C2/Documents/offline-episodes

Which got changed to
/Users/stl-33/Library/Developer/CoreSimulator/Devices/62CCD1BE-3204-4370-9A0F-4F2D56812638/data/Containers/Data/Application/19A33638-1FE4-4FAF-9567-6251E8DA75E3/Documents/offline-episodes

The directory after Application/ got changed.

[nishanBende]

Closing it as i changed the approach to access the saved files. Earlier, I was storing the entire local URI as given above on AsyncStorage and tried to access it. But now I access it like below.

RNFS. DocumentDirectoryPath/offline-episodes/name.mp3

So, the folder change doesnt affect it.
I think this is the appropriate way to do it and not the earlier one, maybe we can add a note in the docs.

[sankar9659]

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,
},
});