trying to generate a PDF and view or email it with React Native

Question

I spent the last few days playing with react-native-html-to-pdf (https://github.com/christopherdro/react-native-html-to-pdf ), react-native-mail (by chirag04) and react-native-view-pdf (by cnjon)

There is another version of react-native-mail by parkerdan that I have yet to try, but the chrirag04's version basically corrupted all my projects and was a pain to uninstall.

react-native-html-to-pdf doesn't seem to generate any error, and I can't seem have access to the pdf generated. here a snippet of the code I am running:

import RNHTMLtoPDF from 'react-native-html-to-pdf';
import PDFView from 'react-native-pdf-view';

...

createPDF() {

     var options = {

        html: '<h1>PDF TEST</h1>', // HTML String

        // ****************** OPTIONS BELOW WILL NOT WORK ON ANDROID **************                              
        fileName: 'test',          /* Optional: Custom Filename excluded extention
                                Default: Randomly generated
                              */


        directory: 'docs',         /* Optional: 'docs' will save the file in the `Documents`
                                Default: Temp directory
                              */

        height: 800,               /* Optional: 800 sets the height of the DOCUMENT that will be produced
                                Default: 612
                              */
        width: 1056,               /* Optional: 1056 sets the width of the DOCUMENT that will produced
                                Default: 792
                              */
        padding: 24,                /* Optional: 24 is the # of pixels between the outer paper edge and
                                        corresponding content edge.  Example: width of 1056 - 2*padding
                                        => content width of 1008
                                Default: 10
                              */
    };
    RNHTMLtoPDF.convert(options).then((filePath) => {
        AlertIOS.alert(
            'creat pdf',
            'filePath=' + filePath
        );


        return (
                <PDFView ref={(pdf)=>{this.pdfView = pdf;}}
                     src={filePath}
                     onLoadComplete = {(pageCount)=>{
                        this.pdfView.setNativeProps({
                            zoom: 1.5
                        });
                     }}
                /> 
        )
    });
};

and later in the code I call it with:

<TouchableHighlight onPress={this.createPDF} style={styles.button}>
               <Text>create pdf </Text>
</TouchableHighlight>

I get the AlertIOS, with something that looks like a valid filepath (any hint to check the path is correct, let me know) But that's it, I don't seem to find the test.pdf document anywhere. Can anyone tell what I am doing wrong?

Many Thanks, Cheufte

Answer 1

I think the file path is document directory you can go through the file path by first clicking the windows option in xcode after that find devices option upon clicking device option all the information of your device will appear then select the application and see it's container and you will find your pdf file.

var localpath= RNFS.DocumentDirectoryPath + filePath
    <PDFView ref={(pdf)=>{this.pdfView = pdf;}}
                         path={localpath}
                         onLoadComplete = {(pageCount)=>{
                            this.pdfView.setNativeProps({
                                zoom: 1.5
                            });
                         }}
                    /> 

write path in place of src because it is deprecated.

Answer 2

import React, { Component } from 'react';
import {
  AlertIOS,
  AppRegistry,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from 'react-native';

import RNHTMLtoPDF from 'react-native-html-to-pdf';

export default class testApp extends Component {

 createPDF() {
    var options2 = {
    html: '<h1>PDF TEST</h1>', // HTML String

  // ****************** OPTIONS BELOW WILL NOT WORK ON ANDROID **************                              
    fileName: 'test2',          /* Optional: Custom Filename excluded extension
                                Default: Randomly generated
                              */

    directory: 'docs',         /* Optional: 'docs' will save the file in the `Documents`
                                Default: Temp directory */

    base64: true ,               


    height: 800,                
    width: 1056,               /* Optional: 1056 sets the width of the DOCUMENT that will produced
                                Default: 792
                              */
    padding: 24,                /* Optional: 24 is the # of pixels between the outer paper edge and
                                        corresponding content edge.  Example: width of 1056 - 2*padding
                                        => content width of 1008
                                Default: 10
                              */
       };

        RNHTMLtoPDF.convert(options2).then((data2) => {
        console.log(data2.filePath);
         console.log(data2.base64);
        AlertIOS.alert(
            'options2 filename' + options2.fileName,
            'data2 filePath=' + data2.filePath
        );
    });
 }


 render() {
    return (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Welcome to testApp
    </Text>

    <TouchableHighlight onPress={this.createPDF}>
    <Text>Create PDF</Text>
  </TouchableHighlight>

    <Text style={styles.instructions}>
      Press Cmd+R to reload,{'\n'}
      Cmd+D or shake for dev menu
    </Text>
    </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
   justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});


AppRegistry.registerComponent('testApp', () => testApp);