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.

npm install --save rn-fetch-blob

1	npm install --save rn-fetch-blob

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.

react-native link rn-fetch-blob

1	react-native link rn-fetch-blob

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.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

1	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

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

<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>

1	<action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.project60">

    <uses-permission android:name="android.permission.INTERNET" />
	
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
	    <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/> 
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.project60">

<uses-permission android:name="android.permission.INTERNET" />

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<application

android:name=".MainApplication"

android:label="@string/app_name"

android:icon="@mipmap/ic_launcher"

android:roundIcon="@mipmap/ic_launcher_round"

android:allowBackup="false"

android:theme="@style/AppTheme">

<activity

android:name=".MainActivity"

android:label="@string/app_name"

android:configChanges="keyboard|keyboardHidden|orientation|screenSize"

android:windowSoftInputMode="adjustResize">

<intent-filter>

</intent-filter>

</activity>

</application>

</manifest>

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.

import React, { Component } from 'react';

import { StyleSheet, Text, View, TouchableOpacity, Alert, PermissionsAndroid, Image } from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, Text, View, TouchableOpacity, Alert, PermissionsAndroid, Image } from 'react-native';

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

import RNFetchBlob from 'rn-fetch-blob';

1	import RNFetchBlob from 'rn-fetch-blob';

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.

export async function request_storage_runtime_permission() {

  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      {
        'title': 'ReactNativeCode Storage Permission',
        'message': 'ReactNativeCode App needs access to your storage to download Photos.'
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {

      Alert.alert("Storage Permission Granted.");
    }
    else {

      Alert.alert("Storage Permission Not Granted");

    }
  } catch (err) {
    console.warn(err)
  }
}

export async function request_storage_runtime_permission() {

try {

const granted = await PermissionsAndroid.request(

PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,

{

'title': 'ReactNativeCode Storage Permission',

'message': 'ReactNativeCode App needs access to your storage to download Photos.'

}

)

if (granted === PermissionsAndroid.RESULTS.GRANTED) {

Alert.alert("Storage Permission Granted.");

}

else {

Alert.alert("Storage Permission Not Granted");

}

} catch (err) {

console.warn(err)

}

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

export default class MainActivity extends Component {



}

export default class MainActivity extends Component {

}

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.

async componentDidMount() {

    await request_storage_runtime_permission()

  }

async componentDidMount() {

await request_storage_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.

downloadImage = () => {
    var date = new Date();
    var image_URL = 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg';
    var ext = this.getExtention(image_URL);
    ext = "." + ext[0];
    const { config, fs } = RNFetchBlob;
    let PictureDir = fs.dirs.PictureDir
    let options = {
      fileCache: true,
      addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        path: PictureDir + "/image_" + Math.floor(date.getTime()
          + date.getSeconds() / 2) + ext,
        description: 'Image'
      }
    }
    config(options).fetch('GET', image_URL).then((res) => {
      Alert.alert("Image Downloaded Successfully.");
    });
  }

downloadImage = () => {

var date = new Date();

var image_URL = 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg';

var ext = this.getExtention(image_URL);

ext = "." + ext[0];

const { config, fs } = RNFetchBlob;

let PictureDir = fs.dirs.PictureDir

let options = {

fileCache: true,

addAndroidDownloads: {

useDownloadManager: true,

notification: true,

path: PictureDir + "/image_" + Math.floor(date.getTime()

+ date.getSeconds() / 2) + ext,

description: 'Image'

}

config(options).fetch('GET', image_URL).then((res) => {

Alert.alert("Image Downloaded Successfully.");

});

}

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

getExtention = (filename) => {
    return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) :
      undefined;
  }

getExtention = (filename) => {

return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) :

undefined;

}

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

render() {
    return (
      <View style={styles.MainContainer}>

        <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg' }}
          style={{ width: 300, height: 300, resizeMode: 'contain', margin: 5 }} />

        <TouchableOpacity style={styles.button} onPress={this.downloadImage} >

          <Text style={styles.text}>Click Here To Download Above Image</Text>

        </TouchableOpacity>

      </View>
    );
  }

render() {

return (

<Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg' }}

style={{ width: 300, height: 300, resizeMode: 'contain', margin: 5 }} />

<Text style={styles.text}>Click Here To Download Above Image</Text>

</TouchableOpacity>

</View>

);

}

14. Creating Style.

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  button: {

    width: '80%',
    paddingTop: 3,
    paddingBottom: 3,
    backgroundColor: '#2E7D32',
    borderRadius: 7,
    margin: 10
  },
  text: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center',
    padding: 5
  }
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

button: {

width: '80%',

paddingTop: 3,

paddingBottom: 3,

backgroundColor: '#2E7D32',

borderRadius: 7,

margin: 10

text: {

color: '#fff',

fontSize: 20,

textAlign: 'center',

padding: 5

}

});

15. Complete source code for App.js File :

import React, { Component } from 'react';

import { StyleSheet, Text, View, TouchableOpacity, Alert, PermissionsAndroid, Image } from 'react-native';

import RNFetchBlob from 'rn-fetch-blob';

export async function request_storage_runtime_permission() {

  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      {
        'title': 'ReactNativeCode Storage Permission',
        'message': 'ReactNativeCode App needs access to your storage to download Photos.'
      }
    )
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {

      Alert.alert("Storage Permission Granted.");
    }
    else {

      Alert.alert("Storage Permission Not Granted");

    }
  } catch (err) {
    console.warn(err)
  }
}

export default class MainActivity extends Component {

  async componentDidMount() {

    await request_storage_runtime_permission()

  }

  downloadImage = () => {
    var date = new Date();
    var image_URL = 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg';
    var ext = this.getExtention(image_URL);
    ext = "." + ext[0];
    const { config, fs } = RNFetchBlob;
    let PictureDir = fs.dirs.PictureDir
    let options = {
      fileCache: true,
      addAndroidDownloads: {
        useDownloadManager: true,
        notification: true,
        path: PictureDir + "/image_" + Math.floor(date.getTime()
          + date.getSeconds() / 2) + ext,
        description: 'Image'
      }
    }
    config(options).fetch('GET', image_URL).then((res) => {
      Alert.alert("Image Downloaded Successfully.");
    });
  }

  getExtention = (filename) => {
    return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) :
      undefined;
  }


  render() {
    return (
      <View style={styles.MainContainer}>

        <Image source={{ uri: 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg' }}
          style={{ width: 300, height: 300, resizeMode: 'contain', margin: 5 }} />

        <TouchableOpacity style={styles.button} onPress={this.downloadImage} >

          <Text style={styles.text}>Click Here To Download Above Image</Text>

        </TouchableOpacity>

      </View>
    );
  }
}


const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  button: {

    width: '80%',
    paddingTop: 3,
    paddingBottom: 3,
    backgroundColor: '#2E7D32',
    borderRadius: 7,
    margin: 10
  },
  text: {
    color: '#fff',
    fontSize: 20,
    textAlign: 'center',
    padding: 5
  }
});

100

101

102

103

104

105

106

107

108

109