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

[lukasa1993]

• 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)

[douglasjunior]

React Native uses flex box, so you dont need to use width: '100%', height: '100%', you just need flex: 1. The PdfRenderer is flex: 1 by default.

The crash can occur if the PdfRenderer cant calculate the size of the page, so you need to make sure that your parent view is flex: 1 or have fixed width/height.

Please, take a look at the Sample project: https://github.com/douglasjunior/react-native-pdf-renderer/blob/main/Sample/App.tsx

About backgroundColor, it's applied to PdfRenderer behind the page, so you always will see the page background in the front.

I have never tried borderRadius before, but I think that should work, I can do some tests here.

Have you tried to use overflow: 'hidden' with borderRadius?

[lukasa1993]

React Native uses flex box, so you dont need to use width: '100%', height: '100%', you jjst need flex: 1.

The PdfRenderer is flex: 1 by default.

About backgroundColor, it's applied to PdfRenderer behind the page, so you always will see the page background in the front.

borderRadius have never tried before, but I think that should work, I can do some testes here.

Have you used overflow: 'hidden' with borderRadius?

i added later that it works with singlePage true but with single page false none of styles i tried apply

[lukasa1993]

just checked on android as well with https://www.hq.nasa.gov/alsj/a17/A17_FlightPlan.pdf this pdf from sample and this is error i get, couldn't build sample in m2 mac so i can try on there. my own pdf on android works tho so weird, on ios this pdf has no issue

[douglasjunior]

It's hard to say without seeing the code, in the Sample project and our internal projects it's working fine.

If you like, create a sample project and upload it to Github, so we can take a look.

[douglasjunior]

I just tested it here, and found that for some reason the borderRadius is ignored on Android and on iOS it causes the crash you reported. (maybe some bug or limitation with React Native because the lib doesn't do anything special with the styles)

So, I released a new version that removes borderRadius from the style and add “Limitations” section in the README.

https://github.com/douglasjunior/react-native-pdf-renderer#limitations

[ayanWappnet]

Hello @douglasjunior
Here is my code for load pdf and i have crash issue when i double tap on pdf.can you please give me a suggestion for what should i do for that.

<View style={{ flex: 1, borderRadius: 24, overflow: 'hidden' }}>
          <PdfRendererView
            style={styles.pdf}
            source={source?.uri}
            maxZoom={6}
            singlePage={singlePage}
            distanceBetweenPages={16}
            onPageChange={(current, total) => {
              console.log('onPageChange', { current, total });
            }}
          />
        </View>
        
Style.tsx        
pdf: {
    backgroundColor: COLORS.primaryCheckThird,
  },