douglasjunior/react-native-pdf-renderer

⚛ A zoomable, blazing fast, zero dependencies, pure native, typed PDF Renderer for Android and iOS.

Hi 👋!

I'm Douglas Nassif, a software engineer passionate about technology and the art of software development. I graduated in Internet Systems Technology at UTFPR, and I've been on this software development journey since 2010.

Throughout my career, I've explored a wide variety of technologies across different domains, including backend, frontend, mobile, and embedded systems. In recent years, I've particularly focused on JavaScript/TypeScript, React, React Native, and NodeJS.

During this time, I've also been involved in creating and maintaining some open-source packages on GitHub, where I dedicate a good portion of my free time.

Currently, I hold the position of Lead Software Development Engineer at DB1, where I lead teams on projects ranging from fintechs to specialized systems for precision agriculture.

React Native

React JS

Node JS

Android

Electron

---

react-native-pdf-renderer's Issues

Crash with `width: '100%', height: '100%'`

• How did you link to the library (autolinking, manual, rn link, cocoapods)?
  • autolinking
• What version of React Native?
  • 0.71.4
• What version of the library?
  • 1.0.2
• iOS/Android version?
  • IOS 16.2
• Did the problem happen after updating React Native?
  • no
• Are you using the library for the first time?
  • yes
• It's a bug? Provide a link to a minimal reproduction case.

<PdfRendererView
      source={value}
      style={{borderRadius: 30, width: '100%', height: '100%'}}
    />

crashes with style width: '100%', height: '100%'
borderRadius,backgroundColor are ignored as well if singlePage={false}

0   yliyo                      	       0x102fcc7a8 -[RNPdfRendererModule handlePageChange:] + 512 (RNPdfRendererModule.m:55)
1   yliyo                      	       0x102fcc79c -[RNPdfRendererModule handlePageChange:] + 500 (RNPdfRendererModule.m:55)

Support Fabric and RCT_NEW_ARCH_ENABLED=1

Currently, the PDF loader component breaks if the new architecture/fabric is enabled in the project. Following error is displayed.

• How did you link to the library (autolinking, manual, rn link, cocoapods)?
  pod install autolinks.
• What version of React Native?
  Using RN 0.71.7
• What version of the library?
  "react-native-pdf-renderer": "^1.0.5",
• iOS/Android version?
  Both Versions
• Did the problem happen after updating React Native?
  Yes, Fabric and new Architecture support are related. Same issue observed in similar libs like "react-native-pdf": "^6.6.2".
• Are you using the library for the first time?
  YES
• It's a bug? Provide a link to a minimal reproduction case.
  Not a bug per say, but a feature support request. To reproduce, bootstrap a fresh RN project with above version, and enable Fabric and new Architecture with RCT_NEW_ARCH_ENABLED=1 pod install

---

#PS, thank you for the lib.

IllegalStateException - cannot load page

Facing issues with certain Users -
android.graphics.pdf.PdfRenderer in nativeOpenPageAndGetSize

react-native-pdf-renderer - 1.1.1
react - 18.2.0
react-native - 0.71.5

Requirement :
Please provide a callback such as onError to handle such a case.

android COARSE_LOCATION permission is there in manifest

In the manifest, you are using the coarse location permission for Android: I don't believe it is necessary.

Scrolling is too fast when zoomed in

Whenever I zoom in the pdf and try scrolling, the pdf scrolls too fastly

Demo :

Record_2023-05-30-22-52-35.mp4

Kindly try to make the scrolling speed normal when the pdf is zoomed it

"RNPdfRendererView" was not found in the UIManager.

• How did you link to the library (autolinking, manual, rn link, cocoapods)?

Autolinking

• What version of React Native?

"react-native": "0.72.6"

• What version of the library?

"react-native-pdf-renderer": "^1.2.0",

• iOS/Android version?

Both

• Did the problem happen after updating React Native?

No

• Are you using the library for the first time?

Yes

• It's a bug? Provide a link to a minimal reproduction case.

Not sure. Followed the code sample

export function FileView() {
  const { fileUri, isFetching, actionLoading, footerProps, handleOnLayout } = useFileViewer();

  return (
    <AnimatedScrollLayout
      header={{ title: 'Test', showTitle: true, icon: DawnFiles }}
      footer={footerProps}
      onLayout={handleOnLayout}
      loadingProps={{
        isFetching: isFetching || actionLoading,
        bgColor: Colour.White[100],
        dotColor: 'dark',
      }}
      containerStyle={{ backgroundColor: Colour.White[100] }}
    >
      <PdfRendererView
        style={FileViewStyles.webView}
        source={fileUri}
        distanceBetweenPages={16}
        maxZoom={5}
      />
    </AnimatedScrollLayout>
  );
}

File download with expo-file-system

    try {
      setIsFetching(true);
      const fileLocation = getFilePath(fileName);
      const response = await FileSystem.downloadAsync(apiUrl, fileLocation, {
        headers: {
          Authorization: `Bearer ${token}`,
          Prefer: 'return=representation',
        },
      });

      setFileUri(response.uri);
    } catch (error) {
      captureException(error);
      Alert.alert('Error', 'There was an error downloading the file.');
    } finally {
      setIsFetching(false);
    }

Also, I'm running the app locally using Expo GO. Am I missing something on the setup? Any help would be appreciated!

ArithmeticException - divide by zero

On Certain devices getting Issue
com.github.douglasjunior.reactNativePdfRenderer.modules.b in onSizeChanged at line 6

Mostly reported on Android 11 devices.

react-native-pdf-renderer - 1.1.1
react - 18.2.0
react-native - 0.71.5

Add top and bottom components

It would be nice if we could add components to be rendered before and after pdf content and this content will be scrolled with pdf.
E.g: If I render a button at bottom this button will only be visible when I reach the end of PDF content.

It will be something like this:

<Pdf 
  source='...' 
  header={<>This will be rendered before pdf</>}
  footer={<>This will only be visible when reach end of pdf content</>}
  ... other props
/>

I don't know if this is possible to be done but it's a nice feature

Horizontal Scrolling

Hey,

I was wondering if you are open to adding horizontal scrolling to this module or if you want to keep it simple?

I'm asking because with PdfKit these things are quite trivial, but on Android it would require a few more adjustments.

Best,
Finn

PDF resolution very low under Android

When viewing a PDF inside Android (Android 14 was tested), the PDF resolution is very low. It's barely noticeable when the whole PDF page is displayed at once, but once you zoom in to actually read text, the text becomes very hard to read due to the text consisting mostly of pixels.

• How did you link to the library (autolinking, manual, rn link, cocoapods)?
  autolinking

• What version of React Native?
  0.73.5

• What version of the library?
  1.2.0

• iOS/Android version?
  Tested and found the issue under Android 14.
  iOS Seems to be fine

• Did the problem happen after updating React Native?
  No

• Are you using the library for the first time?
  Yes