Unable to move or createDirectory these are the implementations of the some helper functions
Expo.takeSnapshotAsync works great, but moving the snapshot to the app's images directory for persistence is not possible
import { takeSnapshotAsync, FileSystem } from 'expo';
const VIEWSNAPS_DIR = FileSystem.documentDirectory + 'images/'
const timestamp = (presision=1) => Math.round((new Date()).getTime() / presision);
const ensureDirAsync = async (dir, intermediates=true) => {
const props = await FileSystem.getInfoAsync(dir)
if( props.exist && props.isDirectory){
return props;
}
let _ = await FileSystem.makeDirectoryAsync(dir, {intermediates})
return await ensureDirAsync(dir, intermediates)
}
const snapViewAsync = async (view, format='png') => {
const dir = await ensureDirAsync(VIEWSNAPS_DIR);
const snapshot = `${dir.uri}${timestamp()}.${format}`;
const temp = await takeSnapshotAsync(view, {format, quality:1, result:'file'})
let _ = await FileSystem.moveAsync({from:temp, to:snapshot});
const info = await FileSystem.getInfoAsync(snapshot, {md5:true})
const type = `image/${format}`;
return { ...info, type};
}
when snapViewAsync is called i get this error.
errror => promise rejection: Error: Directory 'file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540icelye%252Fxxxx/images/' could not be created
react => 16.0.0
sdkVersion => 23.0.0
BUGGY APP SAMPLE
Is there something i'm missing to get this to work?
emulated on Genymotion
when snapViewAsync is called i get this error.
errror => promise rejection: Error: Directory 'file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540icelye%252Fxxxx/images/' could not be created
react => 16.0.0
sdkVersion => 23.0.0
import React, { Component } from 'react';
import { Button, Image, View, StyleSheet } from 'react-native';
import { FileSystem, Constants, takeSnapshotAsync } from 'expo';
const webUrl = 'https://stancarey.files.wordpress.com/2013/03/futurama-fry-should-i-lol-or-roflmao.jpg';
const VIEWSNAPS_DIR = FileSystem.documentDirectory + 'images/'
export const timestamp = (presision=1) => Math.round((new Date()).getTime() / presision);
const ensureDirAsync = async (dir, intermediates=true) => {
const props = await FileSystem.getInfoAsync(dir)
if( props.exist && props.isDirectory){
return props;
}
await FileSystem.makeDirectoryAsync(dir, {intermediates})
return await ensureDirAsync(dir, intermediates)
}
const snapViewAsync = async (view, format='png') => {
const dir = await ensureDirAsync(VIEWSNAPS_DIR);
const snapshot = `${dir.uri}${timestamp()}.${format}`;
const temp = await takeSnapshotAsync(view, {format, quality:1, result:'file'})
await FileSystem.moveAsync({from:temp, to:snapshot});
const info = await FileSystem.getInfoAsync(snapshot, {md5:true})
const type = `image/${format}`;
return { ...info, type};
}
export default class App extends Component {
view = null;
_capture = async () => {
console.log('Taking view snapshot')
const snapshot = await snapViewAsync(this.view)
console.log(snapshot)
}
render() {
return (
<View collapsable={false} style={styles.container} ref={view => this.view = view} >
<Image source={{ uri: webUrl }} style={{ width: 400, height: 400 }} />
<View>
<Button onPress={this._capture} title="Snap" />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
im facing the same issue @mfoncho ru able to solve it
props.exist => props.exists
Following @mfoncho solution, change the above line; otherwise it will be infinite loop
Most helpful comment
BUGGY APP SAMPLE
Is there something i'm missing to get this to work?
emulated on Genymotion
when snapViewAsync is called i get this error.
errror => promise rejection: Error: Directory 'file:///data/user/0/host.exp.exponent/files/ExperienceData/%2540icelye%252Fxxxx/images/' could not be created
react => 16.0.0
sdkVersion => 23.0.0