I can't center the pages of my pdf

[juan-andres-valverde-endava]

What react-native version are you using? 0.75.0 What react-native-pdf version are you using? I have tried with the same behaviour in 6.7.5, 6.7.4, 6.6.2

What platform does your issue occur on? Android

Describe your issue as precisely as possible : I am having a problem when displaying a pdf within my application, when the pdf has more than 2 pages the intermediate pages, which are neither the first nor the last, are always displayed on the left edge of the container. JustifyContent center does not solve the problem. I think that it is simply the behavior of the library, when activating the horizontal together with the enablePaging.

It works perfectly on IOS this error only occurs on Android.

Any thoughts, solutions, different approach?

Join a screenshot or video of the problem on the simulator or device?

This is how its supposed to should work, and how it does work in the first and last page

And this is the error and how it does works in the intermediate pages

Show us the code you are using?

<View
        style={styles.pdfContainer}
        testID={LoanProposalDisclosureIds.pdfContainer}>
        {!!pdfFile && (
          <Pdf
            source={{ uri: `data:application/pdf;base64,${pdfFile}` }}
            style={{ flex: 1, paddingVertical: 8 }}
            horizontal={true}
            enablePaging={true}
            page={currentPage}
            onPageChanged={page => {
              setCurrentPage(page);
              page === totalPages && setFullyRead(true);
            }}
            onLoadProgress={() => {
              setIsPdfLoading(true);
            }}
            onLoadComplete={numberofPages => {
              setTotalPages(numberofPages);
              setIsPdfLoading(false);
              numberofPages === 1 && setFullyRead(true);
            }}
            onError={error => {
              showDialog(toDialogError(error, appLanguage));
              setIsPdfLoading(false);
            }}
          />
        )}
      </View>

[rajivchaulagain]

  <Pdf
          ref={pdfRef}
          trustAllCerts={false}
          source={{
            uri,
          }}
          onLoadProgress={(percent) => calculateLoadingProgress(percent)}
          style={{
            width,
            height,
          }}
          onPageSingleTap={(e, x, y) => handlePosition(e, x, y)}
          onLoadComplete={(numberOfPages, path, { height, width }) =>
            console.log(`height & width : ${height} ${width}`)
          }
        />

    provide width and height as below its all about custom styling of pdf
      const { width, height } = Dimensions.get("window");

[joffblack]

I have a very similar issue to @juan-andres-valverde-endava. My first and last pages work well. But my middle pages are aligned to the top of the screen, rather than in the centre.

This is only on Android, iOS is working perfectly.

When i console.log the width and height after onLoadComplete, i am getting the same width and height regardless of what page i am on.

Thanks @rajivchaulagain - any other ideas?

[rajivchaulagain]

@joffblack I think this package only sees all the pages of pdf as a single height and width so managing the height and width of individual is hard so, could you try using this code

const pageStyles = (page, numberOfPages) => ({
  flex: 1,
  justifyContent: 'center',
  alignItems: page === 1 || page === numberOfPages ? 'flex-start' : 'center',
});

 onPageChanged={(page, numberOfPages) => {
    setPageStyle(pageStyles(page, numberOfPages)); 
  }}

[joffblack]

Thanks again @rajivchaulagain but this didn't work.