React Native Download Pdf

-

 Run the following command with your project directory

    npm i rn-fetch-blob   

AndroidManifest.xml

Add below permissions in AndroidManifest.xml

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

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

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

Code for download pdf

    open index.js and replace the code with the following code

Index.js

    import React,{Component} from 'react';                  
    import { View, Button, Alert,  PermissionsAndroid} from "react-native";
    import styles from './styles';                                      
    import RNFetchBlob from 'rn-fetch-blob';               

    class PdfDownload extends Component {               

        actualDownload = (pdf_url,ID) => {
            const { config, fs } = RNFetchBlob;
            const downloads = fs.dirs.DownloadDir;
            return config({
                fileCache : true,
                addAndroidDownloads : {
                  useDownloadManager : true,
                  notification : true,
                  mediaScannable: true,
                  mime : 'application/pdf',
                  path:  downloads + '/' + 'id' + '.pdf',
                  description : 'Downloading pdf file.'
            }
        })
        .fetch('GET', pdf_url)
        .then((res) => {
              Alert.alert('The file saved to ', res.path());
         })
         .catch((e) => {
              console.log(e)
        });
      }

        async downloadFile(pdf_url) {
            try {
                const granted = await       PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE);
            if (granted === PermissionsAndroid.RESULTS.GRANTED) {
                  this.actualDownload(pdf_url);
            } else {
                  Alert.alert('Permission Denied!', 'You need to give storage permission to download the file');
            }
         } catch (err) {
            console.warn(err);
          } 
      }

        render() {
            return (
                <View style={styles.container}>
                    <Button title="open" onPress={this.downloadFile}></Button>
                </View>
            );
        }
    }

    export default PdfDownload;

    To Run the App

        react-native run-android   

Comments

Post a Comment

Popular posts from this blog

React Native Floating Label Textinput

-
Image
Run the following command with your project directory           npm i react-native-floating-label-input Code for  Floating   Label Text input in React Native Open App.js in any code editor and replace the code with the following code App.js import React,{Component} from 'react'; import {   StyleSheet,   View,   Button,   Image,   Text } from 'react-native'; import { FloatingLabelInput } from 'react-native-floating-label-input'; export default class App extends Component {   constructor(props) {     super(props);     this.state = {       email: ' ',        password: ' '      };   }   render() {     const {          email,          password      } = this.state;     return (       <View style={styles.container}>            <FloatingLabelInput              label="Email"               containerStyle={{margin: 5}}              value={email}             onChangeText={text => this.setState({email: text})}            />          
Read more

React Native Tab View

-
Image
 Run the following command with your project directory     npm i react-native-tab-view      npm i react-native-gesture-handler react-native-reanimated code for tab view in react native      open App.js in any code editor and replace the code with the following code App.js import React,{ Component } from 'react'; import {     StyleSheet,     View,      Dimensions } from 'react-native'; import { TabView, SceneMap } from 'react-native-tab-view'; export default class App extends Component {     constructor(props) {          super(props);          this.state = {               index: 0,               routes: [                    { key: 'first' , title: 'First' },                    { key: 'second' , title: 'Second'}               ]          }     }      renderScene = ({ route }) => {           switch (route.key) {                case 'first':                     return <View style={[styles.scene, { backgroundColor: '#f
Read more

React Native Modal box

-
Run the following command with your project directory     npm i react-native-modalbox Code for modal box      Open index.js and replace the code with the following code index.js  import React,{Component} from 'react'; import { View, Button } from "react-native"; import styles from './styles'; import ModalBox from "./ModalBox"; class Account extends Component {     closePhoto = () => {         this._modalPhoto.close();     };     openPhoto = () => {         this._modalPhoto.open();     };     render() {         return (             <View style={styles.container}>                 <Button title="open" onPress={this.openPhoto}></Button>                 <Login ref={(com) => (this._modalPhoto = com)} />             </View>         );     } } export default Account; ModalBox.js import React, { Component, useState } from "react"; import { Text, TouchableOpacity } from "react-native"; import
Read more