How to Download an Image from url in React Native (Android)

Downloading an image to your Android device can be achieved using the React Native Fetch blob library. Before downloading an image in Android, your app must require permission to write external memory.

Hence, first, you should add permission in the Android manifest file.

Go to yourProject/android/app/src/main/AndroidManifest.xml and add the following line.

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

Now, the following code shows you how to download an image when a button is pressed. It uses PermissionsAndroid API to ask permission through your app. Make sure to configure the rn-fetch-blob library by using the instructions given here.

import React, {useState} from 'react';
import {
  View,
  Text,
  PermissionsAndroid,
  Button,
  ActivityIndicator,
  ToastAndroid,
  Alert,
} from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';

const App = () => {
  const [loading, setLoading] = useState(false);

  const actualDownload = () => {
    setLoading(true);
    let dirs = RNFetchBlob.fs.dirs;
    RNFetchBlob.config({
      // add this option that makes response data to be stored as a file,
      // this is much more performant.
      path: dirs.DownloadDir + '/path-to-file.png',
      fileCache: true,
    })
      .fetch(
        'GET',
        'https://cdn.pixabay.com/photo/2014/12/21/23/34/cherry-575547_960_720.png',
        {},
      )
      .then(res => {
        setLoading(false);
        ToastAndroid.showWithGravity(
          'Your file has been downloaded to downloads folder!',
          ToastAndroid.SHORT,
          ToastAndroid.BOTTOM,
        );
      });
  };
  const downloadFile = async () => {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
        {
          title: 'Storage Permission',
          message: 'App needs access to memory to download the file ',
        },
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        actualDownload();
      } else {
        Alert.alert(
          'Permission Denied!',
          'You need to give storage permission to download the file',
        );
      }
    } catch (err) {
      console.log(err);
    }
  };
  return (
    <View>
      <Text> Download Files in Android </Text>
      <Button onPress={() => downloadFile()} title="Download" />
      {loading ? <ActivityIndicator size="small" color="#0000ff" /> : null}
    </View>
  );
};

export default App;

Here, when the button is pressed the image is downloaded to the downloads folder.

I hope this react native tutorial to download image is helpful for you.