onLoadComplete prop is not getting fired[Android]

[SimantaRajSarma]

What react-native version are you using? v0.76.5

What react-native-pdf version are you using? v6.7.6 What platform does your issue occur on? (android/ios/both) android Describe your issue as precisely as possible :

1. Steps to reproduce the issue or to explain in which case you get the issue https://github.com/SimantaRajSarma/Openpaper
2. Interesting logs nothing Join a screenshot or video of the problem on the simulator or device?

Show us the code you are using? https://github.com/SimantaRajSarma/Openpaper

[wijskinner]

Also seeing this with latest version

[SimantaRajSarma]

Also seeing this with latest version

are you saying it was working in previous versions?

[sora-guilllermom]

Hi, I also ran into this problem. It was working in RN version 75.2, not working on 76.5

[nobelharvards]

For our apps, reverting to 6.7.5 solves the issue.

We had ~6.7.5 in package.json and a recent PR ended up upgrading it to 6.7.6.

Removing the ~ fixed it.

[SimantaRajSarma]

For our apps, reverting to 6.7.5 solves the issue.

We had ~6.7.5 in package.json and a recent PR ended up upgrading it to 6.7.6.

Removing the ~ fixed it.

didn't work though! can you share the code?

[kumarPraveen08]

onLoadComplete prop is not working in my case as well. I am also using react native v0.76.5 and react native pdf v6.7.6. it was working with react native v0.75.2 but with latest version it is not working.

[kumarPraveen08]

onLoadComplete prop is not working in my case as well. I am also using react native v0.76.5 and react native pdf v6.7.6. it was working with react native v0.75.2 but with latest version it is not working.

it is working with react native v0.76.5 and react native pdf v6.7.5

[mdaldoukhi]

Is there any solution?

[flavioftkode]

I believe I found a temporary solution: loadComplete and onPageChanged seem to dispatch at the same time, and loadComplete ends up being ignored. A simple delay on loadComplete seems to work.

react-native-pdf+6.7.6.patch

[palmtown]

Hello,

Just confirming what everyone here already knows, onLoadComplete does not fire when using react-native 0.76.5. However, downgrading react-native-pdf to 6.7.5 resolves the issue.

[violuke]

We're also experiencing this issue and have had to downgrade to fix. A solution would be much appreciated :pray: Thank you

[My internal ref BDEV-1998]

[leahaeussermann]

Just confirming, that i am also having this issue. A fix would be amazing, thank you

[lucianv]

Also happening here in the latest react-native-pdf 6.7.6 version with RN 0.76.5

[x9bbb]

I used onLoadComplete to get number of pages. The issue also happened for React Native v0.76.6 and React Native PDF v6.7.6. I modified the code to use onPageChanged temporarily to get number of pages.

[antoniogoulao]

Still happening in react-native-pdf 6.7.7 version with RN 0.76.7.

[Bonitoflakes]

Still happening in react-native-pdf 6.7.7 version with RN 0.76.7.

[palmtown]

+1 It is still occurring in react-native-pdf version 6.7.7 and react-native version 0.78.1.

[Gautham495]

I believe I found a temporary solution: loadComplete and onPageChanged seem to dispatch at the same time, and loadComplete ends up being ignored. A simple delay on loadComplete seems to work.

react-native-pdf+6.7.6.patch

This worked for me.

[roniemartinez]

I've tested the patch. It works on expo SDK 52 (react-native=0.76.9) but NOT on SDK 53 (react-native=0.79.2)

[OnizukaJS]

Hello, currently having the same issue. Not only the onLoadComplete doesn't trigger but the pdf is only showing one page out of 11

Currently with react-native: 0.74.5 and react-native-pdf: 6.7.7. I tried react-native-pdf: 6.7.5 and it's not working either though.

[harveyappleton]

Won't work for everyone but my horrible workaround in case it helps someone: (basically using onPageChanged to grab the total number of pages instead of onLoadComplete)

{PLATFORM === 'android' ? (
                  // this is a bodge for now because android doesn't call `onLoadComplete` when the PDF is loaded
                  // so we don't know how many pages there are. Doing this works until react-native-pdf fixes upstream
                  // https://github.com/wonday/react-native-pdf/issues/940
                  // https://github.com/wonday/react-native-pdf/issues/899
                  <Pdf
                    // onLoadComplete={(pages) => setTotalPages(pages)}
                    onPageChanged={(_page, totalPages) => {
                      setTotalPages(totalPages);
                    }}
                    source={{ uri: pdfUrl, cache: false }}
                    page={previewPageIndex + 1}
                    // singlePage
                    enablePaging={false}
                    scrollEnabled={false}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                    enableAnnotationRendering={false}
                    enableDoubleTapZoom={false}
                    style={{ flex: 1 }}
                  />
                ) : (
                  <Pdf
                    onLoadComplete={(pages) => setTotalPages(pages)}
                    source={{ uri: pdfUrl, cache: false }}
                    page={previewPageIndex + 1}
                    singlePage
                    enablePaging={false}
                    scrollEnabled={false}
                    showsHorizontalScrollIndicator={false}
                    showsVerticalScrollIndicator={false}
                    enableAnnotationRendering={false}
                    enableDoubleTapZoom={false}
                    style={{ flex: 1 }}
                  />
                )}

[babucarr32]

Make sure to add trustAllCerts={false}

const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true };

<Pdf
   trustAllCerts={false}
   source={source}
/>

[femibadmus-tolaram]

Dang..................I got here

[YOEL311]

patch for 6.7.7 version

react-native-pdf+6.7.7.patch

[pf-abdullah]

I believe I found a temporary solution: loadComplete and onPageChanged seem to dispatch at the same time, and loadComplete ends up being ignored. A simple delay on loadComplete seems to work.

react-native-pdf+6.7.6.patch

This works for me thanks

[withSang]

FYI: On the latest version (7.0.3 for now), the patch is already applied :-)

https://github.com/wonday/react-native-pdf/blob/a7efe94414bc9cff392340ae11713769bf096b7e/android/src/main/java/org/wonday/pdf/PdfView.java#L112-L114

However, onLoadComplete can still be ignored on low-end devices, as a 10ms delay is not enough for them. One solution is to listen to both onLoadComplete and onPageChanged events.

import { useCallback, useState } from 'react'
import Pdf from 'react-native-pdf'

const Test = () => {
	const [numberOfPages, setNumberOfPages] = useState(1)

	const onLoadComplete = useCallback((newNumberOfPages: number) => {
		setNumberOfPages(newNumberOfPages)
	}, [])

	const onPageChanged = useCallback(
		(_: number, newNumberOfPages: number) => {
			// Prevents to set the same value
			if (numberOfPages !== newNumberOfPages) {
				setNumberOfPages(newNumberOfPages)
			}
		},
		[numberOfPages],
	)

	const onError = useCallback((error: object) => {
		console.error('Opening PDF error: ', error)
	}, [])

	return (
		<Pdf
			key="pdf-renderer"
			source={...}
			onLoadComplete={onLoadComplete}
			onPageChanged={onPageChanged}
			onError={onError}
		/>
	)
}

[yigitkaya2001]

FYI: On the latest version (7.0.3 for now), the patch is already applied :-)

react-native-pdf/android/src/main/java/org/wonday/pdf/PdfView.java

Lines 112 to 114 in a7efe94

if (dispatcher != null) { new Handler(Looper.getMainLooper()).postDelayed(() -> dispatcher.dispatchEvent(tce), 10); } However, onLoadComplete can still be ignored on low-end devices, as a 10ms delay is not enough for them. One solution is to listen to both onLoadComplete and onPageChanged events.

import { useCallback, useState } from 'react' import Pdf from 'react-native-pdf'

const Test = () => { const [numberOfPages, setNumberOfPages] = useState(1)

const onLoadComplete = useCallback((newNumberOfPages: number) => { setNumberOfPages(newNumberOfPages) }, [])

const onPageChanged = useCallback( (_: number, newNumberOfPages: number) => { // Prevents to set the same value if (numberOfPages !== newNumberOfPages) { setNumberOfPages(newNumberOfPages) } }, [numberOfPages], )

const onError = useCallback((error: object) => { console.error('Opening PDF error: ', error) }, [])

return ( <Pdf key="pdf-renderer" source={...} onLoadComplete={onLoadComplete} onPageChanged={onPageChanged} onError={onError} /> ) }

Updating to the latest version worked for me.