Save Files in the Android data folder

Question

import RNFetchBlob from 'rn-fetch-blob'


    var path = RNFetchBlob.fs.dirs.DocumentDir 
    RNFetchBlob
                    .config({ path: toFile })
                    .fetch('GET', fromUrl)
                    .then(res => {
                       
                    })
            });

Using the above code for downloading Files in the React native and working fine in the ios. But i am doing this in android and it is showing downloading but not found files in the directly. I want to save files in the (Android=>data=>com.appname) folder. But this code is not working to download it.

I tried DownloadDir that is working and saving files in the download folder. But i want to save it in the (Android=>data=>com.appname) folder. So not able to get that how it will work on it.

Answer 1

This example saves files at below path under MyApp Folder

/data/user/0/com.filesystem/files/MyApp/

Its not showing the content via external file manager due to android latest privacy policy (I think from Android 10 +) for that external file manager app have to take extra permission.

You can use below file manager to view files inside data folder https://play.google.com/store/apps/details?id=com.alphainventor.filemanager

Android Vesion

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.filesystem">

   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.DOWNLOAD_WITHOUT_NOTIFICATION" />
   <uses-permission android:name="android.permission.MANAGE_DOCUMENTS"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
            <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
        </intent-filter>
      </activity>
    </application>
</manifest>

App.js

import React, { useEffect, useState } from 'react'
import { SafeAreaView, View, Text, TouchableOpacity, FlatList, Image, Dimensions } from 'react-native'
import RNFetchBlob from 'rn-fetch-blob'

const { height, width } = Dimensions.get('window')

export default function App() {

  const [files, setFiles] = useState([])

  useEffect(() => {
    handleGetFileList()
  }, [])


  async function handleGetFileList() {

    const path = RNFetchBlob.fs.dirs.DocumentDir + '/' + 'MyApp'

    await RNFetchBlob.fs.isDir(path).then(isDir => {
      console.log('isDir', isDir)
      if (isDir == true) {
        RNFetchBlob.fs.lstat(path).then(filesList => {
          console.log('filesList', filesList)
          setFiles(filesList)
        })
          .catch(e => {
            console.log('Unable to get files list', e)
          })
      }
    })
      .catch(e => {
        console.log('Error isDir', e)
      })
  }

  function handleDownloadFile() {
    console.log('Hiii')
    const destinationPath = RNFetchBlob.fs.dirs.DocumentDir + '/' + 'MyApp'
    const url = 'https://shotkit.com/wp-content/uploads/2021/06/cool-profile-pic-matheus-ferrero.jpeg'
    const fileName = Date.now()
    const fileExtention = url.split('.').pop();
    const fileFullName = fileName + '.' + fileExtention
    console.log('fileName', fileName)
    console.log('fileExtention', fileName)
    console.log('fileName', fileFullName)
    RNFetchBlob
      .config({ path: destinationPath + '/' + fileFullName, fileCache: true })
      .fetch('GET', url)
      .then((res) => {
        console.log('The file saved to ', res.path())
        handleGetFileList()
      })
  }


  function handleDeleteFiles() {
    const path = RNFetchBlob.fs.dirs.DocumentDir + '/' + 'MyApp'
    RNFetchBlob.fs.unlink(path)
      .then(() => {
        setFiles([])
      })
      .catch((err) => { })
  }

  function renderItem({ item, index }) {
    return (
      <Image
        source={{ uri: 'file://' + item.path }}
        style={{ height: 150, width: width / 4, borderRadius: 10, borderWidth: 1, borderColor: 'black', margin: 10 }}
        resizeMode='cover'
      />


    )
  }


  return (
    <SafeAreaView style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>


      <View style={{ flex: 4, alignItems: 'center', justifyContent: 'space-around', }}>

        <TouchableOpacity
          onPress={handleGetFileList}
          style={{ height: 45, width: 150, borderRadius: 10, borderWidth: 1, borderColor: 'black', alignItems: 'center', justifyContent: 'center', }}>
          <Text>
            Get the files
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={handleDownloadFile}
          style={{ height: 45, width: 150, borderRadius: 10, borderWidth: 1, borderColor: 'black', alignItems: 'center', justifyContent: 'center', }}>
          <Text>
            Download the files
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          onPress={handleDeleteFiles}
          style={{ height: 45, width: 150, borderRadius: 10, borderWidth: 1, borderColor: 'black', alignItems: 'center', justifyContent: 'center', }}>
          <Text>
            Delete all files
          </Text>
        </TouchableOpacity>

        {/* <View style={{ height: '100%', width: 10 }} /> */}


      </View>

      <View style={{ flex: 6 }}>
        <FlatList
          data={files}
          keyExtractor={(item, index) => String(index)}
          renderItem={renderItem}
          numColumns={3}
        />
      </View>


    </SafeAreaView>
  )
}

Preview