DownloadResumable.pauseAsync() will not pause

[sadikyalcin]

1. SDK Version: 35.0.0
2. 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