expo-file-system - Amazon Vega Docs

@amazon-devices/expo-file-system provides access to file system of the device. It is also capable of downloading and uploading files from network URLs.

Installation

Add the JavaScript library dependency in the package.json file. Select the tab for your React Native version.

React Native 0.72
React Native 0.83

"dependencies": {
...
"@amazon-devices/expo-file-system": "~2.0.0",
"expo": "~50.0.0",
...
}

"dependencies": {
...
"@amazon-devices/expo-file-system": "~3.0.0",
"expo": "~50.0.0",
...
}

Reinstall dependencies using npm install command.

Examples

The example below demonstrates how to write text to a file.

import React, {useEffect, useState} from 'react';
import {Alert, Button, StyleSheet, Text, View} from 'react-native';
import * as FileSystem from '@amazon-devices/expo-file-system';

export const App = () => {
  const [fileContent, setFileContent] = useState<string | null>(null);
  const fileUri = FileSystem.documentDirectory + 'sample.txt';

  useEffect(() => {
    (async () => {
      const fileInfo = await FileSystem.getInfoAsync(fileUri);
      if (fileInfo.exists) {
        const content = await FileSystem.readAsStringAsync(fileUri);
        setFileContent(content);
      } else {
        setFileContent('File does not exist - you need to write to file');
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const writeFile = async () => {
    try {
      await FileSystem.writeAsStringAsync(fileUri, 'Hello, file system!');
      Alert.alert('File written successfully!');
    } catch (error) {
      console.error('Error writing the file:', error);
    }
  };

  const readFile = async () => {
    try {
      const content = await FileSystem.readAsStringAsync(fileUri);
      setFileContent(content);
    } catch (error) {
      console.error('Error reading the file:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>File Content: {fileContent}</Text>
      <Button title="Write to File" onPress={writeFile} />
      <Button title="Read from File" onPress={readFile} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  text: {
    fontSize: 30,
    textAlign: 'center',
  },
});

The example below demonstrates how to download or upload a file.

import * as FileSystem from '@amazon-devices/expo-file-system';
import {DownloadOptions, FileSystemUploadOptions} from '@amazon-devices/expo-file-system';
import React, {useState} from 'react';
import {Button, ScrollView, StyleSheet, Text, View} from 'react-native';

export const App = () => {
  const downloadAsyncArgs: {
    uri: string;
    fileUri: string;
    options: DownloadOptions;
  } = {
    uri: 'https://httpbin.org/get',
    fileUri: FileSystem.documentDirectory + 'downloadResponse.json',
    options: {
      md5: true,
      cache: false,
      headers: {
        Accept: 'application/json',
      },
    },
  };
  const uploadAsyncArgs: {
    url: string;
    fileUri: string;
    options: FileSystemUploadOptions;
  } = {
    url: 'https://httpbin.org/patch',
    fileUri: FileSystem.documentDirectory + 'downloadResponse.json',
    options: {
      fieldName: 'data',
      httpMethod: 'PATCH',
      uploadType: FileSystem.FileSystemUploadType.BINARY_CONTENT,
      headers: {
        Accept: 'application/json',
      },
    },
  };

  const [downloadResponse, setDownloadResponse] =
    useState<FileSystem.FileSystemDownloadResult>();
  const [uploadResponse, setUploadResponse] =
    useState<FileSystem.FileSystemUploadResult>();

  const handleDownloadAsync = async () => {
    const {uri, fileUri, options} = downloadAsyncArgs;
    FileSystem.downloadAsync(uri, fileUri, options)
      .then(setDownloadResponse)
      .catch((error) => setDownloadResponse(error.message));
  };

  const handleUploadAsync = async () => {
    const {url, fileUri, options} = uploadAsyncArgs;
    FileSystem.uploadAsync(url, fileUri, options)
      .then(setUploadResponse)
      .catch((error) => setUploadResponse(error.message));
  };

  return (
    <ScrollView style={styles.container}>
      <Button title="Download file" onPress={handleDownloadAsync} />
      <View style={styles.cell}>
        <Text style={styles.cellText}>
          {JSON.stringify(downloadResponse, null, 2)}
        </Text>
      </View>

      <Button title="Upload file" onPress={handleUploadAsync} />
      <View style={styles.cell}>
        <Text style={styles.cellText}>
          {JSON.stringify(uploadResponse, null, 2)}
        </Text>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  cell: {
    flex: 1,
    padding: 10,
    borderWidth: 2,
    justifyContent: 'center',
    borderColor: 'white',
  },
  cellText: {
    fontSize: 24,
    color: 'black',
  },
});

API reference

Check out the documentation page for info about this library, API reference and more Official Expo documentation for expo-file-system.

Constants

Constant	Description
`documentDirectory`	URI pointing to the directory where user documents for this app will be stored. E.g. `/data/`
`cacheDirectory`	URI pointing to the directory where temporary files used by this app will be stored. E.g. `/cache/`
`bundleDirectory`	URI to the directory where assets bundled with the application are stored. E.g. `/pkg/bundle/index.hermes.bundle`

Methods

Method	Description
`copyAsync`	Create a copy of a file or directory
`deleteAsync`	Delete a file or directory
`downloadAsync`	Download the contents at a remote URI to a file in the app’s file system
`getContentUriAsync`	Takes a `file://` URI and converts it into content URI (`content://`) so that it can be accessed by other applications outside of Expo
`getFreeDiskStorageAsync`	Gets the available internal disk storage size, in bytes
`getInfoAsync`	Get metadata information about a file, directory or external content/asset
`getTotalDiskCapacityAsync`	Gets total internal disk storage size, in bytes
`makeDirectoryAsync`	Create a new empty directory
`moveAsync`	Move a file or directory to a new location
`readAsStringAsync`	Read the entire contents of a file as a string
`readDirectoryAsync`	Enumerate the contents of a directory
`uploadAsync`	Upload the contents of the file pointed by `fileUri` to the remote url
`writeAsStringAsync`	Write the entire contents of a file as a string

Supported URI schemes

In this table, you can see what type of URI can be handled by each method.

Method name	Supported URI
`getInfoAsync`	no scheme, for example `/data/file.txt`
`readAsStringAsync`	no scheme
`writeAsStringAsync`	no scheme
`deleteAsync`	no scheme
`moveAsync`	Source: no scheme; Destination: no scheme
`copyAsync`	Source: no scheme; Destination: no scheme
`makeDirectoryAsync`	no scheme
`readDirectoryAsync`	no scheme
`downloadAsync`	Source: `http://`, `https://`; Destination: no scheme
`uploadAsync`	Source: no scheme; Destination: `http://`, `https://`

Implementation details

On Vega getTotalDiskCapacityAsync always returns 0. The deleteLegacyDocumentDirectoryAndroid is supported by non-operable on the Vega platform. Additionally, the following classes are not supported on Vega:

DownloadResumable
createDownloadResumable
FileSystemCancellableNetworkTask
UploadTask

Supported versions

NPM package version	Vega SDK version	Vega OS version	React Native version
2.0.1758683737	0.23 and earlier	`OS 1.1 (1401010009820)` and earlier	0.72
3.0.1+15.8.0	0.24	`OS 1.2 (2101020054720)`	0.72, 0.83

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.

​Installation

​Examples

​API reference

​Constants

​Methods

​Supported URI schemes

​Implementation details

​Supported versions

​Additional resources