0

I want to print a pdf file on react native mobile app, I receive a base64 code from api and by using it I want to show customer his/her invoice pdf. I tried using Expo Print but I couldnt handle it, I keep getting

Error: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.]

I would appreciate any help!

import React, { Component } from 'react';
import { View, Text, Button, StyleSheet,TouchableHighlight } from 'react-native';
import RNHTMLtoPDF from 'react-native-html-to-pdf';
import * as Print from 'expo-print';

const InvoiceScreen = async({ route, navigation }) => {
  const { invoice} = route.params;
  const my_uri = "data:application/pdf;base64"+invoice
  console.log("DID INVIOCE COMEEE",invoice)
  await   Print.printAsync(
    {uri:my_uri,
      width: 595, height: 842 })
    return (
      <View></View>
      );
};

export default InvoiceScreen;
Beg
  • 21
  • 6
  • I solved the problem, it was due to async method of the function, after I deleted async it worked. if anyone is looking for an answer :) – Beg Jun 06 '21 at 18:42

2 Answers2

0

replace your code with this:

const InvoiceScreen = async({ route, navigation }) => {
  const { invoice } = route.params;
  const my_uri = `data:application/pdf;base64,${invoice}`;
  await Print.printAsync({uri:my_uri});
};

export default InvoiceScreen;
Fabian
  • 1
  • Hi thanks for the answer but its not working :( I still get the same Error: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.] @Fabian – Beg Jun 05 '21 at 10:36
0

Maybe the problem is the data type of the "invoice" parameter, this must be a string which must be the base64 of the pdf file. Reference

If you are using Expo - Managed workflow (Expo CLI / Tool), to view pdf I recommend that you use https://www.npmjs.com/package/rn-pdf-reader-js I also leave a simple implementation in view:

import React from "react";
import { View, StyleSheet, Dimensions } from "react-native";
import { globalStyles } from "../../constants/globalStyles";
import PDFReader from "rn-pdf-reader-js";

export default function XScreen({ navigation, route }) {

  return (
    <View style={globalStyles.backGround}>
      <PDFReader
        source={{
          base64: route.params.source,
        }}
        style={styles.pdf}
      />
    </View>
  );
}
const styles = StyleSheet.create({
  pdf: {
    flex: 1,
    width: Dimensions.get("window").width,
    height: Dimensions.get("window").height,
  },
});

Note:

route.params.source = data:application/pdf;base64,${response.data.data};
response.data.data = string base64 pdf

Fabian
  • 1