- SDK Version: 35.0.0
- Platforms(Android/iOS/web/all): iOS (Simulator) - macos 10.15.1 (19B88)
I cannot get a download to pause. The event triggers but I don’t think it’s pausing because the state does update to downloaded: true
after pause is called (see image) and I’m only updating the state to downloaded after downloadAsync()
promise.
I’ve only been working on react-native and es6 for a week so forgive me for silly mistakes.
import React from 'react';
import {
StyleSheet,
View,
Text,
Button,
Platform,
ProgressBarAndroid,
ProgressViewIOS
} from 'react-native';
import * as FileSystem from 'expo-file-system';
import { downloadFile } from '../../core/filesystem';
let downloadInstance = null;
class DocumentItem extends React.Component {
constructor(props) {
super(props);
this.state = {
id: this.props.id,
title: this.props.title,
url: this.props.url,
downloaded: false,
downloading: false,
progress: 0,
};
}
_onDownload(url, id) {
const name = url.split('.');
const path = FileSystem.documentDirectory + 'documents/' + id + '.' + name[name.length-1];
const self = this;
downloadInstance = FileSystem.createDownloadResumable(url, path, {}, function onProgress(progress){
self.setState({
downloading: true,
progress: parseInt(progress.totalBytesWritten / progress.totalBytesExpectedToWrite * 100),
})
});
downloadInstance.downloadAsync().then((data) => {
this.setState({
downloaded: true,
downloading: false,
})
})
.catch((error) => {
console.log('Error: ', error);
})
}
_cancelDownload(id) {
const self = this;
downloadInstance.pauseAsync().then((data) => {
console.log('paused at: ', this.state.progress);
self.setState({
downloaded: false,
downloading: false,
progress: 0,
})
downloadInstace = null;
})
.catch((error) => {
console.log('error on pause: ', error);
})
}
render() {
console.log('Is downloaded: ', this.state.downloaded);
if( this.state.downloaded ) {
return (
<View>
<Text>{this.state.title}</Text>
<Text>{this.state.url}</Text>
<Button onPress={() => this._onView(this.state.url)} title="View"></Button>
</View>
);
} else {
if( this.state.downloading ) {
return (
<View>
<Text>{this.state.title}</Text>
<Text>{this.state.url}</Text>
{
( Platform.OS === 'android' )
?
( <ProgressBarAndroid styleAttr = "Horizontal" progress = { (this.state.progress / 100) } indeterminate = { false } /> )
:
( <ProgressViewIOS progress = { (this.state.progress / 100) } /> )
}
<Text>{this.state.progress}%</Text>
<Button onPress={() => this._cancelDownload(this.state.id)} title="Cancel"></Button>
</View>
);
} else {
return (
<View>
<Text>{this.state.title}</Text>
<Text>{this.state.url}</Text>
<Button onPress={() => this._onDownload(this.state.url, this.state.id)} title="Download"></Button>
</View>
);
}
}
}
}
export default DocumentItem