Android Crash at PDF viewing

[santiagogarzon]

What react-native version are you using? 0.73.6 What react-native-pdf version are you using? 6.7.5 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
2. Interesting logs

just using PDF component on Android crash the app.

LOGS:

Instabug Caught an Unhandled Exception: java.lang.NoClassDefFoundError
                                                                                                   java.lang.NoClassDefFoundError: Failed resolution of: Lkotlin/enums/EnumEntriesKt;
                                                                                                   	at io.legere.pdfiumandroid.util.AlreadyClosedBehavior.<clinit>(Config.kt:9)
                                                                                                   	at io.legere.pdfiumandroid.util.Config.<init>(Config.kt:14)
                                                                                                   	at io.legere.pdfiumandroid.util.Config.<init>(Unknown Source:2)
                                                                                                   	at com.github.barteksc.pdfviewer.PDFView.<init>(PDFView.java:314)
                                                                                                   	at org.wonday.pdf.PdfView.<init>(PdfView.java:85)
                                                                                                   	at org.wonday.pdf.PdfManager.createViewInstance(PdfManager.java:57)
                                                                                                   	at org.wonday.pdf.PdfManager.createViewInstance(PdfManager.java:28)
                                                                                                   	at com.facebook.react.uimanager.ViewManager.createViewInstance(ViewManager.java:176)
                                                                                                   	at com.facebook.react.uimanager.ViewManager.createView(ViewManager.java:108)
                                                                                                   	at com.facebook.react.uimanager.NativeViewHierarchyManager.createView(NativeViewHierarchyManager.java:281)
                                                                                                   	at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute(UIViewOperationQueue.java:194)
                                                                                                   	at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:920)
                                                                                                   	at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1037)
                                                                                                   	at com.facebook.react.uimanager.UIViewOperationQueue.-$$Nest$mflushPendingBatches(Unknown Source:0)
                                                                                                   	at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1097)
                                                                                                   	at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
                                                                                                   	at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
                                                                                                   	at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
                                                                                                   	at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1035)
                                                                                                   	at android.view.Choreographer.doCallbacks(Choreographer.java:845)
                                                                                                   	at android.view.Choreographer.doFrame(Choreographer.java:775)
                                                                                                   	at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1022)
                                                                                                   	at android.os.Handler.handleCallback(Handler.java:938)
                                                                                                   	at android.os.Handler.dispatchMessage(Handler.java:99)
                                                                                                   	at android.os.Looper.loopOnce(Looper.java:201)
                                                                                                   	at android.os.Looper.loop(Looper.java:288)
                                                                                                   	at android.app.ActivityThread.main(ActivityThread.java:7839)
                                                                                                   	at java.lang.reflect.Method.invoke(Native Method)
                                                                                                   	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
                                                                                                   	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)

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

Show us the code you are using?

<Pdf
						style={flex}
						renderActivityIndicator={(): ReactElement => <Spinner image={SpinnerImage.BLUE_SPINNER} isVisible={true} />}
						source={source}
						onError={(): void => setError(true)}
						trustAllCerts={false}
					/>

[ishaqashraf]

same +1

[tranhoang1010vn]

same +1

[JoaSebas]

+1

[HamidAbdullah]

same issue ? {pdfUrl ? ( <Pdf ref={pdfRef} source={{ uri: pdfUrl, cache: true, cacheFileName: QuranCompletePdf, }} onLoadComplete={handleLoadComplete} onPageChanged={handlePageChanged} onError={handleError} style={styles.pdf} /> ) : ( <LoadingIndicator loading={true} size={40} color={'#000'} /> )}

[JoaSebas]

The error was caused by the key. I created a dynamic key, but the library does not support this and re-rendered, which caused the app to crash and close. The solution was to create a unique key.

[HamidAbdullah]

Can you share the code?

[JoaSebas]

{pdfPath && ( <View> <Pdf ref={pdfRef} key={pdfPath} // Path file is key source={{ uri: file://${pdfPath} }}

when I load new document y clear the path and set the new pdfPath. The pdf component is visible only if have a path

[Karanxidhu]

@JoaSebas

<Pdf trustAllCerts={false} // key={pdfPath} source={source} style={{flex: 1, width: Dimensions.get('window').width*0.87 }} page={1} scale={1.0} minScale={0.5} maxScale={3.0} renderActivityIndicator={() => ( <ActivityIndicator color="black" size="large" /> )} enablePaging={true} onLoadProgress={(percentage) => console.log(Loading :${percentage})} onLoadComplete={() => console.log('Loading Complete')} onPageChanged={(page, totalPages) => console.log(${page}/${totalPages})} onError={(error) => console.log(error)} onPageSingleTap={(page) => alert(page)} onPressLink={(link) => Linking.openURL(link)} onScaleChanged={(scale) => console.log(scale)} // singlePage={true} spacing={10} />

can you help me as i might be doing something wrong idk, btw file source is a link

[HamidAbdullah]

Yes , Tell me what is the issue ?

On Fri, 9 Aug 2024 at 05:24, Karanjot Singh @.***> wrote:

@JoaSebas https://github.com/JoaSebas

<Pdf trustAllCerts={false} // key={pdfPath} source={source} style={{flex: 1, width: Dimensions.get('window').width*0.87 }} page={1} scale={1.0} minScale={0.5} maxScale={3.0} renderActivityIndicator={() => (

)} enablePaging={true} onLoadProgress={(percentage) => console.log(Loading :${percentage})} onLoadComplete={() => console.log('Loading Complete')} onPageChanged={(page, totalPages) => console.log(${page}/${totalPages})} onError={(error) => console.log(error)} onPageSingleTap={(page) => alert(page)} onPressLink={(link) => Linking.openURL(link)} onScaleChanged={(scale) => console.log(scale)} // singlePage={true} spacing={10} />

can you help me as i might be doing something wrong idk, btw file source is a link

— Reply to this email directly, view it on GitHub https://github.com/wonday/react-native-pdf/issues/833#issuecomment-2277827981, or unsubscribe https://github.com/notifications/unsubscribe-auth/A3DFAZPYNTSPCOVQ3OT63WTZQSYH7AVCNFSM6AAAAABHNKAHAOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENZXHAZDOOJYGE . You are receiving this because you commented.Message ID: @.***>

[Karanxidhu]

So i am trying to load a pdf, it starts crashes the app as soon as loading completes

[JoaSebas]

Don't comment the key, and agree validation that component is visible only if have a path, see my example. You can try setting the path is same key for the component.

[Karanxidhu]

@JoaSebas {pdf&&<Pdf source={source} key={pdf} trustAllCerts={false} onLoadComplete={(numberOfPages,filePath) => { console.log(Number of pages: ${numberOfPages}); }} onPageChanged={(page,numberOfPages) => { console.log(Current page: ${page}); }} onError={(error) => { console.log(error); }} onPressLink={(uri) => { console.log(Link pressed: ${uri}); }} style={{ flex:1, width:Dimensions.get('window').width, height:Dimensions.get('window').height, }}/>}

                                this is current component but still crashes on load + i lowered the version to 6.7.1 
                                Tell me if i am still doing something wrong

[wency-yang]

@HamidAbdullah How is the crash going? Has it been resolved?

[andrewhamili]

Experiencing the same issue.

[dlato97]

any update?

[ReettaValimaki]

I had there an error that the pdf was in a nested component and one of the states was outside of the pdf component, which reloaded the child component with pdf after the pdf had been already loaded. This crashed the application sometimes

[skbaji6]

any update?

[JoaSebas]

👋 Hi everyone,

I created a PDFViewer component that works well inside a modal to render PDFs without crashes.

✅ My environment:

• react-native: 0.74.3
• react-native-pdf: ^6.7.5

---

Here’s the component:

import React, { useState } from 'react';
import { Modal, View, Text, TouchableOpacity, Dimensions } from 'react-native';
import Pdf from 'react-native-pdf';
import Share from 'react-native-share';

const PDFViewer = ({ isOpen, onClose, pdfUrl }) => {
    const [currentPage, setCurrentPage] = useState(1);
    const [totalPages, setTotalPages] = useState(0);

    const { width } = Dimensions.get('window');
    const A4_DIMENSIONS = { width: 595, height: 842 };
    const calculatedHeight = (width * A4_DIMENSIONS.height) / A4_DIMENSIONS.width;

    const handleShare = async () => {
        try {
            await Share.open({
                title: 'Share PDF',
                url: `file://${pdfUrl}`,
                failOnCancel: false,
            });
        } catch (error) {
            console.error('Error sharing PDF:', error);
        }
    };

    return (
        <Modal visible={isOpen} transparent onRequestClose={onClose}>
            <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.7)', justifyContent: 'center' }}>
                <View style={{ flex: 1, margin: 10 }}>
                    <TouchableOpacity onPress={onClose} style={{ padding: 10, backgroundColor: '#fff' }}>
                        <Text>Close</Text>
                    </TouchableOpacity>

                    <View style={{ height: calculatedHeight }}>
                        <Pdf
                            source={{ uri: pdfUrl, cache: true }}
                            onLoadComplete={(pages) => setTotalPages(pages)}
                            onPageChanged={(page) => setCurrentPage(page)}
                            onError={(error) => console.log(error)}
                            style={{ flex: 1 }}
                            enablePaging
                        />
                    </View>

                    <Text style={{ color: '#fff', textAlign: 'center', margin: 10 }}>
                        {currentPage} / {totalPages}
                    </Text>

                    <TouchableOpacity onPress={handleShare} style={{ padding: 10, backgroundColor: '#007AFF' }}>
                        <Text style={{ color: '#fff' }}>Share PDF</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </Modal>
    );
};

export default PDFViewer;