Search code examples
react-nativereact-native-iosreact-native-fs

Can't display downloaded image from RNFS.DocumentDirectoryPath

I've successfully saved the image from url with the response {"jobId" : 1, "statucCode" : 200, "byteWritten" : 127744 }

but I can't display the image.

downloadFile(){

var RNFS = require('react-native-fs');

const uri = 'https://images.unsplash.com/photo-1525184275980-9028ceb8e09f?auto=format&fit=crop&w=1050&q=80' ; 
const name = shorthash.unique(uri);
const path = `${RNFS.DocumentDirectoryPath}/${name}.png`;

RNFS.downloadFile({fromUrl:uri, toFile: path}).promise
    .then((res) => { 
        this.setState({ source:{uri:path}}) ;
    }).catch((err) => { 
        alert(err)
     });
}

the state will be like source : { "uri" : "path" }

Solution

  • Your code seems right, but you are probably missing to sepcify a width and a height for your image.

    For example: 

    <Image source={this.state.source} style={{width: 100, height: 100}} />