Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overlapping texts in RN webview #1864

Open
4 tasks done
RondipB opened this issue Aug 30, 2024 · 4 comments
Open
4 tasks done

Overlapping texts in RN webview #1864

RondipB opened this issue Aug 30, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@RondipB
Copy link

RondipB commented Aug 30, 2024

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.

Screenshot 2024-08-30 at 12 43 43 PM

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
@RondipB RondipB added the bug Something isn't working label Aug 30, 2024
@kimjoongwon
Copy link

same issue!

@MGPOCKY
Copy link

MGPOCKY commented Oct 11, 2024

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

@MGPOCKY
Copy link

MGPOCKY commented Nov 27, 2024

@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
Copy link
Author

RondipB commented Dec 6, 2024

Sure, will check and update here. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants