React native Download Image from URL into Gallery folder Android iOS Example

Hello guys, we all have heard about a famous react native NPM library rn-fetch-blob. This library comes with amazing possibilities and features which make easy to use it for beginners. In this tutorial we would Download Image from URL into Gallery folder and save the image in downloads folder. First we would send the request to sever and fetch the file, after fetching the file we would rename the file using individual functions so each time if the file has same name on server we would rename the file in random order and save in our mobile phone’s downloads folder. So let’s get started :).

Note: Guys there is a problem with rn-fetch-blob library because it is not working properly in iOS devices. So for now the code is only working in Android devices.

Content in this project React native Download Image from URL into Gallery folder Android iOS Example Tutorial:

1. Open your react native project folder in command prompt like i did in below screenshot and execute below command to install the rn-fetch-blob library.

Screenshot of CMD:

2. After successfully done installation you need to execute the link command to link the newly installed rn-fetch-blob library to your current project root structure. Execute the below command to link library.

Screenshot of CMD:

3. Now your library is successfully linked to your current react native project. Next step is to open the AndroidManifest.xml file located in Your_React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml .

4. Put the below WRITE_EXTERNAL_STORAGE permission in it. This permission is required for accessing device storage.

5. We need to also add a intent filter named as DOWNLOAD_COMPLETE in intent section.

Source code of my AndroidManifest.xml file after making changes:

6. Now its time to start coding. Open your project’s App.js file, Delete all the previous code to start with clean slate. Import StyleSheet, Text, View, TouchableOpacity, Alert, PermissionsAndroid and Image component in your project.

7. Import RNFetchBlob component from rn-fetch-blob library.

8. Create a ASYNC stand alone function named as request_storage_runtime_permission(). In this function we would request for android’s runtime permission for accessing device storage. If you wish to learn more about how to request runtime permission in react native for android read my this tutorial.

9. Create your main export default class named as MainActivity. This would be our main class.

10. In MainActivity class create ASYNC componentDidMount() method and call the request_storage_runtime_permission() function using await method. This method will allow us to ask for runtime permission.

11. Create a function named as downloadImage() in your Main class. In this function we would pass the Image HTTP URL which we want to download and simply shows a alert after download complete.

12. Create another function named as getExtention() in your main class. Using this function we would get the file extension.

13. Creating a Image component & Touchable opacity button in render’s return block.

14. Creating Style.

15. Complete source code for App.js File :

Screenshots:

React native Download Image from URL into Gallery folder

6 Comments

  1. Thank You sir

  2. How about ios? I try it but image not downloaded

  3. How about using CameraRoll api from RN itself? It can save the image to iPhone gallery

Leave a Reply

Your email address will not be published. Required fields are marked *