Sorted!!!

The png is indeed rendered twice when importing the images like this

const MyDoc = () => (
  <Document>
    <Page wrap>
      <Image src={phoneLogo} />
    </Page>
  </Document>
);

But it works with an image address, where it renders only once.

const MyDoc = () => (
  <Document>
    <Page wrap>
      <Image src="https://img.icons8.com/android/96/000000/phone.png" />
    </Page>
  </Document>
);

A bit late i guess, but maybe someone else can be helped by this.

I think the code below will do the trick. I've altered a few things:

1. The view element had padding, i removed it.
2. applied objectFit to the image element, I would suggest to use "cover" instead of "fill".

Let me know if this helped.

import React, { Component } from 'react'
import ReactPDF, { Page, Text, View, Document, StyleSheet, Font, Image } from '@react-pdf/renderer';
import pic from "../pics/pic.jpeg"

// Create styles
const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        backgroundColor: '#fff',
        width: '100%',
        orientation: 'portrait',
    },
    view: {
        width: '100%',
        height: '100%',
        padding: 0,
        backgroundColor: 'white',
    },
    image: {
        objectFit: 'cover',
    },
});


// Create Document Component
export default class ImageToPDF extends Component {

    render() {
        return (
            <Document >
                <Page object-fit="fill" style={styles.page} size="A4">
                    <View style={styles.view}>
                        <Image style={styles.image}  src={pic} alt="images" />
                    </View>
            </Page>
        </Document>
        );
  };
};

I created a helper function: convertPdfToImages which takes in the pdf file and returns an array of images encoded in base64, using the pdfjs package.

npm install pdfjs-dist -S

const PDFJS = require("pdfjs-dist/webpack");

const readFileData = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      resolve(e.target.result);
    };
    reader.onerror = (err) => {
      reject(err);
    };
    reader.readAsDataURL(file);
  });
};

//param: file -> the input file (e.g. event.target.files[0])
//return: images -> an array of images encoded in base64 
const convertPdfToImages = async (file) => {
  const images = [];
  const data = await readFileData(file);
  const pdf = await PDFJS.getDocument(data).promise;
  const canvas = document.createElement("canvas");
  for (let i = 0; i < pdf.numPages; i++) {
    const page = await pdf.getPage(i + 1);
    const viewport = page.getViewport({ scale: 1 });
    const context = canvas.getContext("2d");
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    await page.render({ canvasContext: context, viewport: viewport }).promise;
    images.append(canvas.toDataURL());
  }
  canvas.remove();
  return images;
}