FileSystem : read/write using FileSystem damages data

[ghost]

Environment

Environment:
OS: macOS High Sierra 10.13.6
Node: 10.7.0
Yarn: 1.10.1
npm: 6.1.0
Watchman: 4.9.0
Xcode: Xcode 10.0 Build version 10A255
Android Studio: 3.2 AI-181.5540.7.32.5014246

Packages: (wanted => installed)
expo: ^30.0.1 => 30.0.1
react: 16.3.1 => 16.3.1
react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz => 0.55.4

Target: Android 7.0 NRD90M

Steps to Reproduce

1. Take a photo
2. FileSystem.readAsStringAsync the photo file
3. FileSystem.writeAsStringAsync the contents to another file without modifications
4. MediaLibrary.createAssetAsync from the original file
5. MediaLibrary.createAssetAsync from the second file

Expected Behavior

The files should be identical.

Actual Behavior

The first (original) file is a readable photo. The second is 12KBs of malformed data, containing:
EFBFBDEF BFBDEFBF BDEFBFBD

Reproducible Demo

import React from 'react';
import { Text, View, TouchableOpacity, StyleSheet } from 'react-native';
import { Camera, Permissions, FileSystem, MediaLibrary } from 'expo';

export default class CameraExample extends React.Component {

  static navigationOptions = {
    title: 'Camera',
  };

  state = {
    hasCameraPermission: null,
    hasStoragePermission: null,
    type: Camera.Constants.Type.back,
  };

  async componentWillMount() {
    const cameraStatus = (await Permissions.askAsync(Permissions.CAMERA)).status;
    const storageStatus = (await Permissions.askAsync(Permissions.CAMERA_ROLL)).status;
    this.setState({ hasCameraPermission: cameraStatus === 'granted', hasStoragePermission: storageStatus === 'granted' });
  }

  snap = async () => {
    console.log("Snapping!")
    if (this.camera) {
      const { uri } = await this.camera.takePictureAsync();
      console.log("Reading!")
      const fileString = await FileSystem.readAsStringAsync(uri)
      console.log(fileString.length)
      console.log('Writing!')
      await FileSystem.writeAsStringAsync(`${FileSystem.documentDirectory}tmpimg.jpg`, fileString)
      console.log("Saving!")
      await MediaLibrary.createAssetAsync(`${FileSystem.documentDirectory}tmpimg.jpg`);
      await MediaLibrary.createAssetAsync(uri);
    }
  };

  render() {
    const { hasCameraPermission, hasStoragePermission } = this.state;
    if (hasCameraPermission === null || hasStoragePermission === null) {
      return <View />;
    } else if (hasCameraPermission === false || hasStoragePermission === false) {
      return <Text>No access to camera or storage</Text>;
    } else {
      return (
        <View style={{ flex: 1 }}>
              <Camera 
              style={{ flex: 1 }}
              type={this.state.type}
              ref={ref => { this.camera = ref; }}>
                <TouchableOpacity style={styles.opacity} onPress={this.snap}/>
              </Camera>
        </View>
      );
    }
  }
}

const styles = StyleSheet.create({
  opacity: {
    width: "100%",
    height: "100%"
  }
})

[sjchmiela]

Hey, @Dverlik! What you're trying to do, i. e. read/write a binary file through FileSystem API, is unfortunately unsupported in SDK 30.

When you try to read a binary file to a string, it isn't really possible to represent bytes without any special encoding. That's why @EvanBacon added Base64 encoding support to FileSystem which will fix the scenario you've described. 🎉