Overlapping texts in RN webview

[RondipB]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

The pdf is not rendering properly in React Native Webview. The text seems to be overlapping. It renders properly in web.

Steps to reproduce

1. Get a pdf file link and render in React

2. Code snippet
   `<Document
   file={file}
   onLoadSuccess={onDocumentLoadSuccess}
   options={options}
   loading={}
   error={}

    {Array.from(new Array(numPages), (_el, index) => (
      <Page
        key={`page_${index + 1}`}
        pageNumber={index + 1}
        width={window.innerWidth}
        scale={1}
      />
    ))}
   

   `

3. Render the component into a route.

4. Run in localhost, and render the same in RN Webview using your ip
   <WebView source={{ uri: ${your_ip}/${path_to_pdf} }} />

Expected behavior

To render properly without text overlapping

Actual behavior

Text are overalpping

Additional information

No response

Environment

• Browser (if applicable):
• React-PDF version: 9.1.0
• React version: 18.1.0
• Bundler name and version (if applicable): webpack 5.75.0

[kimjoongwon]

same issue!

[MGPOCKY]

Hi there, is it possible to handle this issue? @wojtekmaj

[MGPOCKY]

@RondipB @wojtekmaj
Hello, I tried to reproduce this issue. But the text is not overlapping.
Could you please check that it still has an issue?

Code Snippet

Browser (Web)

      <Document file="sample.pdf" onLoadSuccess={onDocumentLoadSuccess}>
        {Array.from(new Array(numPages), (_el, index) => (
          <Page
            key={`page_${index + 1}`}
            pageNumber={index + 1}
            width={window.innerWidth}
            scale={1}
            renderTextLayer={false}
          />
        ))}
      </Document>

Env

"react": "18.1.0",
"react-dom": "18.1.0",
"react-pdf": "9.1.0",

Application (App)

    <WebView
      key={webkey}
      source={{ uri: "http://34.22.66.247:3000/" }}
      javaScriptEnabled
      onLoadEnd={() => {
        if (!ready) {
          setWebkey(Date.now());
          setReady(true);
        }
      }}
      scalesPageToFit={true}
    />

Env

"react-native-webview": "^13.12.2"

---

Here's sample URI: http://34.22.66.247:3000/

[RondipB]

Sure, will check and update here. Thanks

[RondipB]

Nope this is still not resolved. Tried with scalesPageToFit={true} in Webview and renderTextLayer={false} in Page, but still the same issue, Can you share the sample pdf?
Env: "react-native-webview": "13.6.4"
CC: @MGPOCKY