expo-file-system

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('ファイルが存在しません - ファイルに書き込む必要があります');
      }
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const writeFile = async () => {
    try {
      await FileSystem.writeAsStringAsync(fileUri, 'ファイルシステムへようこそ！');
      Alert.alert('ファイルが正常に書き込まれました。');
    } catch (error) {
      console.error('ファイルの書き込みエラー：', error);
    }
  };

  const readFile = async () => {
    try {
      const content = await FileSystem.readAsStringAsync(fileUri);
      setFileContent(content);
    } catch (error) {
      console.error('ファイルの読み取りエラー：', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.text}>File Content: {fileContent}</Text>
      <Button title="ファイルへの書き込み" onPress={writeFile} />
      <Button title="ファイルの読み取り" onPress={readFile} />
    </View>
  );
};

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

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="ファイルをダウンロード" onPress={handleDownloadAsync} />
      <View style={styles.cell}>
        <Text style={styles.cellText}>
          {JSON.stringify(downloadResponse, null, 2)}
        </Text>
      </View>

      <Button title="ファイルをアップロード" 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',
  },
});