PDF preview not working on Android (but working on iOS)

[OnizukaJS]

Hello everyone!

• Using Expo SDK 51

• react-native version: "0.74.5"

• react-native-pdf version: "6.7.5"

Code:

    <View className="flex-1 items-center justify-center">
      <Pdf
        source={{
          uri: file.uri,
          cache: true,
        }}
        trustAllCerts={false}
        onLoadComplete={(numberOfPages) => {
          setPdfPages(numberOfPages)
        }}
        onPageChanged={(page) => {
          setCurrentIndex(page - 1)
        }}
        style={{
          width: PAGE_WIDTH,
          height: PAGE_HEIGHT,
        }}
        horizontal
        enablePaging
      />
    </View>

On iOS, the onLoadComplete fires so I can set the number of pages 11 and swipe from page to another (swiped to page 2 below):

On android, the onLoadComplete doesn't fire and I can't swipe to other pages:

Thanks for the help!

[ElSeniorMikael]

I'm also facing this problem where my onLoadComplete doesnt fire. and for some reason i receive a white background from the PDF, it was all fine before i start updating from 6.7.5 to 6.7.7

My app is published and i'm currently updating version, i updated the app but now the pdf doesnt trigger onLoadComplete anymore and show me some weird white background.

VERSION BEFORE UPDATE ::: "react-native": "0.74.5", "react-native-blob-util": "^0.19.11", "react-native-pdf": "^6.7.5",

CURRENT VERSION ::: "react-native-pdf": "^6.7.7", "react-native-blob-util": "^0.22.2", "react-native": "0.79.3",

[PrimulaX]

Same

[cxong]

I've found a workaround by downloading the PDF locally using react-native-blob-util, then having react-native-pdf render a file:// url. This suggests there may be a bug with how this library is using react-native-blob-util, or that the same workaround can be made. HTH

Code:

import ReactNativeBlobUtil from "react-native-blob-util";

let url;  // original PDF url
if (Platform.OS === 'android') {
   const response = await ReactNativeBlobUtil.config({
      fileCache: true,
      appendExt: 'pdf'
  }).fetch('GET', url);
  
  const localFilePath = response.path();
  return <Pdf source={{uri: `file://${localFilePath}`, cache: false}} />
}
return <Pdf source={{uri: url, cache: true}} />

[enchorb]

+1

[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 }}
                  />
                )}

[anhnguyen123]

+1