cant read a file with FileSystem.readAsStringAsync on IOS

[juanviola]

Hi guys,

I’m having problems when trying to read a downloaded image with FileSystem.downloadAsync. This only happens on IOS, here is the code

Any help is welcome

import React, { Component } from 'react';
import { FileSystem } from 'expo';
import { View, Text, ActivityIndicator } from 'react-native';

class SaveAndRead extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  componentWillMount() {
    this._run();
  }

  async getInfo() {
    const fileInfo = await FileSystem.getInfoAsync(`${FileSystem.documentDirectory}tmp/googlelogo_color_272x92dp.png`);
    console.log('*** getInfo ***', fileInfo);
  }

  async readDir() {
    const dirInfo = await FileSystem.readDirectoryAsync(FileSystem.documentDirectory);
    console.log('*** readDir ***', dirInfo);
  }

  async createDir() {
    try {
      await FileSystem.makeDirectoryAsync(`${FileSystem.documentDirectory}tmp`, { intermediates: true });
      console.log('*** createDir tmp created ***');
    } catch (err) {
      console.log('*** createDir ***', err);
    }
  }

  async saveFile() {
    await FileSystem.downloadAsync(
      'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
      `${FileSystem.documentDirectory}/tmp/googlelogo_color_272x92dp.png`,
    )
      .then(({ uri }) => {
        console.log('*** saveFile ***', uri);
      })
      .catch((error) => {
        console.error(error);
      });
  }

  async readFile() {
    try {
      const fileData = await FileSystem.readAsStringAsync(`${FileSystem.documentDirectory}tmp/googlelogo_color_272x92dp.png`);
      console.log('*** readFile ***', fileData);
    } catch (err) {
      console.log('*** readFile ***', err);
    }
  }

  async _run() {
    console.log('*** _run ***');
    await this.createDir();
    await this.saveFile();
    await this.readDir();
    await this.getInfo();
    await this.readFile();
  }

  render() {
    if (!this.state.isReady) {
      return (
        <ActivityIndicator size='large' />
      );
    }

    return (
      <View style={{ flex: 1 }}>
        <Text>Done!</Text>
      </View>
    );
  }
}

export default SaveAndRead;

And after executing it I’ve got this output

*** _run ***
console.js:35 *** createDir tmp created ***
console.js:35 *** saveFile *** file:///Users/juan/Library/Developer/CoreSimulator/Devices/465A7F16-E337-4456-9AE8-8FC2C23AA0F0/data/Containers/Data/Application/F0F9C798-A505-4EFE-B22F-09260E78A700/Documents/ExponentExperienceData/project1/tmp/googlelogo_color_272x92dp.png
console.js:35 *** readDir reading *** file:///Users/juan/Library/Developer/CoreSimulator/Devices/465A7F16-E337-4456-9AE8-8FC2C23AA0F0/data/Containers/Data/Application/F0F9C798-A505-4EFE-B22F-09260E78A700/Documents/ExponentExperienceData/project1/tmp
console.js:35 *** readDir *** ["googlelogo_color_272x92dp.png"]
console.js:35 *** getInfo *** {size: 13504, modificationTime: 1535036373.970984, isDirectory: false, exists: 1, uri: "file:///Users/juan/Library/Developer/CoreSimulator/Devices/465A7F16-E337-4456-9AE8-8FC2C23AA0F0/data/Containers/Data/Application/F0F9C798-A505-4EFE-B22F-09260E78A700/Documents/ExponentExperienceData/project1/tmp/googlelogo_color_272x92dp.png"}
console.js:35 *** readFile *** Error: File 'file:///Users/juan/Library/Developer/CoreSimulator/Devices/465A7F16-E337-4456-9AE8-8FC2C23AA0F0/data/Containers/Data/Application/F0F9C798-A505-4EFE-B22F-09260E78A700/Documents/ExponentExperienceData/project1/tmp/googlelogo_color_272x92dp.png' could not be read.
    at createErrorFromErrorData (NativeModules.js:121)
    at NativeModules.js:78
    at MessageQueue.__invokeCallback (MessageQueue.js:398)
    at MessageQueue.js:137
    at MessageQueue.__guardSafe (MessageQueue.js:314)
    at MessageQueue.invokeCallbackAndReturnFlushedQueue (MessageQueue.js:136)
    at debuggerWorker.js:70