I want to download an image with React Native Expo from a url

Viewed 16

I want to download an image from a URL.

 const downloadImage = async () => {
        const permissions = await StorageAccessFramework.requestDirectoryPermissionsAsync();

        if (permissions.granted) {
            
            const uri = permissions.directoryUri;

            const files = await StorageAccessFramework.readDirectoryAsync(uri);
            try {
                await StorageAccessFramework.createFileAsync(permissions.directoryUri, 
                "myImage", "image/png")
                    .then((r) => {
                        console.log(r);
                        FileSystem.downloadAsync(
                            "my/image/url",
                            FileSystem.documentDirectory + "myImage.png"
                        )
                            .then(({ uri }) => {
                                console.log("Finished downloading to ", uri);
                            })
                            .catch((error) => {
                                console.error(error);
                            });
                    })
                    .catch((e) => {
                        console.log(e);
                    });
            } catch {
                console.log(e);
            }
            alert(`Files inside ${uri}:\n\n${JSON.stringify(files)}`);
        }
    };

Once the function runs everything goes well. A file with the name myImage.png is created. However, it's size is 0 Bytes and there is no image.

What am I missing?

Any help would be appreciated Thanks!

0 Answers
Related