DEV Community

Cover image for React Native Series: How to save an image from a remote url in React Native

React Native Series: How to save an image from a remote url in React Native

majiyd on June 14, 2020

In this article, I will show you how to save an image from a remote url to your device using react-native. TL/DR Find the full code in this github...
Collapse
 
kris profile image
0xAirdropfarmer

Wow, this is exactly what I had been looking for. Nonetheless, this tutorial series is awesome. Great use of Camera Roll from React Community package along with React Native fetch blob in order to save the image from a URL to the app. The stepwise guidance on setting up and integration along with coding implementations is easy to grasp from a beginner's point of view.

Collapse
 
majiyd profile image
majiyd

Thank you Chris

Collapse
 
wiredmatrix profile image
Benjamin Ikwuagwu

Nice tut, straight to point...I have been trying to create a video gallery using RNFetchBlob to fetch videos from my device video folder to my react native app, but have not been able to achieve that...I am new to react native, please can you do tutorial on that. Thanks a lot.

Collapse
 
majiyd profile image
majiyd

Hey Benjamin, try this and see if you can modify it to your need youtube.com/watch?v=QwhrAjp4X_Y

Collapse
 
mzxryuzaki profile image
Alexandro Arauco

Hi majiyd.

I have an error, when I try save image using CameraRoll.save(...) in my xiaomi device this work, but when try save in another device save the image but with error, I can't open the image and other thing, when try in a different route dont work the process to save using the library... please do you can help me to resolve this issue!

Thanks.!

Collapse
 
majiyd profile image
majiyd

I'd love to help you but i need more details

Collapse
 
yujiansirius profile image
YuJianSirius

thanks a lot

Collapse
 
iamwebwiz profile image
Ezekiel Oladejo

Real simple and concise. Nice one, majiyd.

Collapse
 
majiyd profile image
majiyd

Thanks Chief!

Collapse
 
emilkeyvalue profile image
emil-keyvalue

What do you do if you don't know the extension of the file you're downloading?

Collapse
 
majiyd profile image
majiyd

I'm not exactly sure but I think png would work just fine regardless. Or whichever extension you choose to use.

Collapse
 
doutir profile image
Nathan Guedes

this helped me a lot thanks

Collapse
 
majiyd profile image
majiyd

I'm glad it did

Collapse
 
watersdr profile image
Donnie Waters

Went through several articles and SO posts until I finally found this one that got it working instantly on iOS and Android. Thanks for the write-up!

Collapse
 
mzxryuzaki profile image
Alexandro Arauco

Hi, great Article... I have the next problem. I call to my API and I return inside the response return base64 encode of image.

Do you have some example for this problem?

Collapse
 
majiyd profile image
majiyd

Thanks, Alexandro. I'm sorry for the late response I did not get notified earlier.

Are you still having this problem?

You can use something like

RNFetchBlob.fetch('GET', 'example.com/images/img1.png',)
.then((res) => {
let base64Str = res.base64()
})