React Native Project to Download Files & Images From URL to Local Storage in Android & IOS Full Project For Beginners

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

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

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  actualDownload = () => {
    this.setState({
      loading: 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) => {
        this.setState({
          loading: false,
        });
        ToastAndroid.showWithGravity(
          'Your file has been downloaded to downloads folder!',
          ToastAndroid.SHORT,
          ToastAndroid.BOTTOM,
        );
      });
  };

  async downloadFile() {
    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) {
        this.actualDownload();
      } else {
        Alert.alert(
          'Permission Denied!',
          'You need to give storage permission to download the file',
        );
      }
    } catch (err) {
      console.log(err);
    }
  }
  render() {
    return (
      <View>
        <Text> Download Files in Android </Text>
        <Button onPress={() => this.downloadFile()} title="Download" />
        {this.state.loading ? (
          <ActivityIndicator size="small" color="#0000ff" />
        ) : null}
      </View>
    );
  }
}

import React, {Component} from 'react';

import {

View,

Text,

Button,

Alert,

ToastAndroid,

PermissionsAndroid,

ActivityIndicator,

} from 'react-native';

import RNFetchBlob from 'rn-fetch-blob';

export default class App extends Component {

constructor(props) {

super(props);

this.state = {

loading: false,

};

}

actualDownload = () => {

this.setState({

loading: 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) => {

this.setState({

loading: false,

});

ToastAndroid.showWithGravity(

'Your file has been downloaded to downloads folder!',

ToastAndroid.SHORT,

ToastAndroid.BOTTOM,

);

});

};

async downloadFile() {

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) {

this.actualDownload();

} else {

Alert.alert(

'Permission Denied!',

'You need to give storage permission to download the file',

);

}

} catch (err) {

console.log(err);

}

render() {

return (

<View>

<Text> Download Files in Android </Text>

<Button onPress={() => this.downloadFile()} title="Download" />

{this.state.loading ? (

) : null}

</View>

);

}

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;

import React, {useState} from 'react';