react-native-android-files
v1.0.0
Published
A react-native module which is used to pick, open, upload and download files.
Downloads
27
Maintainers
Readme
react-native-android-files
Getting Started
Installation
Using npm
$ npm install react-native-android-files --save
Using yarn
$ yarn add react-native-android-files
Linking
There are two options for linking:
1. Automatic
react-native link react-native-android-files
2. Manual
If the automatic linking fails for some reason, you can do the linking manually as follows:
- add the following to yourAppName/android/settings.gradle file:
include ':react-native-android-files'
project(':react-native-android-files').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-files/android')
- add the following inside the dependencies closure of yourAppName/android/app/build.gradle file:
implementation project(':react-native-android-files')
- add the following to your MainApplication.java file:
import com.adfiles.files.FilesPackage;
and also,
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
....
new FilesPackage() <== Add this
);
}
Usage
To perform activities on with the module, first import the it to your app like so:
import { Files } from 'react-native-android-files';
After this, you can call any of the functions stated below as appropriate.
Functions
open(String path)
getPath()
pick()
download(String src, String dest)
upload(String dest)
Permissions
No permission is required open a file picker dialog with getPath() function and to obtain the path of the selected file as a response. However, to download a file and to save it on the device with download() function, only the first configuration, i.e., adding the storage permission, is required. In addition, to open a file for a given path from the device with open() function or to pick a file from a dialog and to open it via pick() function, the following configurations should be made. For API level 23 and below devices, only the first configuration is required. For API level 24 and above, all the three configurations are mandatory. The third configuration can be changed according to official android documentation regarding FileProvider class.
- Add the following permission outside the application tage of the AndroidManifest.xml file.
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
- Add the following provider tag within the application tag in the AndroidManifest.xml file.
<provider
android:name="android.support.v4.content.FileProvider"
android:authorities="${applicationId}"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/provider_paths">
</meta-data>
</provider>
- Create a folder named xml inside yourAppName\android\app\src\main\res (if there isn't any) and create a file named provider_paths.xml inside the folder and add the following content in the file. As stated above, the contents of this file can be changed to meet your desired accessible file locations.
<?xml version='1.0' encoding='utf-8'?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<root-path name="root" path=""/>
<files-path name="files" path="/" />
<external-files-path name="external_files" path="" />
<external-path name="external" path="." />
<cache-path name="cache" path="/" />
</paths>
Description
open(String path):
Sample code snippet
import { Files } from 'react-native-android-files';
....
....
_openFile = () => {
const path = "/storage/emulated/0/DCIM/Camera/myPic.jpg";
Files.open(path).catch((err) => {
console.log("error");
});
}
getPath():
Sample code snippet
import { Files } from 'react-native-android-files';
....
....
_getFilePath = () => {
Files.getPath().then((path) => {
console.log(path);
}).catch((err) => {
console.log(err);
});
}
Sample result
"file:///storage/emulated/0/Download/myfile.mp4"
pick():
Sample code snippet
import { Files } from 'react-native-android-files';
....
....
_openFileFromPicker = () => {
Files.pick().catch((err) => {
console.log(err);
});
}
download(String src, String dest):
Sample code snippet
import { Files } from 'react-native-android-files';
....
....
_downloadFile = () => {
const src = "http://www.mywebservice.com/download/myVideo.mp4",
dest = "/storage/emulated/0/videos/";
Files.download(src, dest).catch((err) => {
console.log(err);
});
}
upload(String dest):
Sample code snippet
_uploadFile = () => {
const dest = "http://www.mywebservice.com/upload";
Files.upload(dest).catch((err) => {
console.log(err);
});
}
Sample result
Issues or suggestions?
If you have any issues or if you want to suggest something , you can write it here.
Additional info
This is a component of a more comprehensive react-native-system-applications module developed by the same author.