React Native PDF stuck the progress at 0.00%.

[Henggg22]

What react-native version are you using?
"react-native": "0.70.6",

What react-native-pdf version are you using?
"react-native-pdf": "^6.7.6",

What platform does your issue occur on? (android/ios/both)
only iOS

Describe your issue as precisely as possible :

1. PDF Progress Stuck at 0.0%:
   The progress bar remains stuck at 0.00% regardless of loading time.
2. PDF Loads After a Long Wait, but Progress Never Updates:
   Even if the PDF eventually displays, the progress remains at 0.00%.

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

Show us the code you are using?
const pdfSource = {
uri: 'https://www.ucd.ie/t4cms/Test%20PDF-8mb.pdf',
cache: false,
};
<Pdf
source={pdfSource}
trustAllCerts={false}
onError={(error) => console.log("Error loading PDF:", error)}
horizontal={distribute}
enablePaging={true}
enableAntialiasing={true}
enableAnnotationRendering={true}
page={current}
onLoadComplete={(numberOfPages) => { setTotalPages(numberOfPages); }}
onPageChanged={(page) => { setCurrent(page); }}
renderActivityIndicator={(progress) => {
return (
<View style={{ flex: 1, justifyContent: 'center' }}>
<Progress.Bar
progress={progress}
width={250}
height={10}
color={BACKGROUND.SECONDARY_BACKGROUD}
borderWidth={0}
unfilledColor="#e0e0e0"
animated={true}
style={{ marginBottom: 10, borderRadius: 100 }}
/>
<Text style={styles.text_description(theme, acceptLanguage)}>{t('menus:downloading')}...
<Text style={styles.text_number(theme, acceptLanguage,)}> {(Math.round(progress * 100))}%


)
}}
style={{
flex: 1,
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
alignSelf: 'center',
backgroundColor: theme.dark ? THEME.THEME_DARK_BACKGROUD : THEME.THEME_LIGHT_BACKGROUD
}}
/>

[zkteco-home]

same issue

[DeanRorris]

I was experiencing this issue on Android. I was able to fix it by setting trustAllCerts to false.

            <View style={styles.container}>
                <Pdf
                    trustAllCerts={false}
                    source={source}
                    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={styles.pdf}/>
            </View>

[zkteco-home]

Actually trustAllCerts ={false} in my side,but onLoadComplete didnt trigger

[Henggg22]

I was experiencing this issue on Android. I was able to fix it by setting trustAllCerts to false.

            <View style={styles.container}>
                <Pdf
                    trustAllCerts={false}
                    source={source}
                    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={styles.pdf}/>
            </View>

Thanks for your comment. For me, the progress on Android works normally, but for iOS, it's still stuck like that. I don't know how to solve it.

[SimantaRajSarma]

Actually trustAllCerts ={false} in my side,but onLoadComplete didnt trigger

same here... everythings working except the onLoadComplete prop. it just don't get triggered[android]
did you find any solution?

[sokunsamnang]

This solution work for me on iOS, if you are using expo you have to config on app.json

"ios": {
    "infoPlist": {
      "NSAppTransportSecurity": { 
        "NSAllowsArbitraryLoads": true 
      }
    }
}

or on React Native CLI you have to modify Info.plist in the ios directory so that the key NSAppTransportSecurity

[SimantaRajSarma]

This solution work for me on iOS, if you are using expo you have to config on app.json

"ios": {
    "infoPlist": {
      "NSAppTransportSecurity": { 
        "NSAllowsArbitraryLoads": true 
      }
    }
}

or on React Native CLI you have to modify Info.plist in the ios directory so that the key NSAppTransportSecurity

any solution for android?

[sokunsamnang]

This solution work for me on iOS, if you are using expo you have to config on app.json

"ios": {
    "infoPlist": {
      "NSAppTransportSecurity": { 
        "NSAllowsArbitraryLoads": true 
      }
    }
}

or on React Native CLI you have to modify Info.plist in the ios directory so that the key NSAppTransportSecurity

any solution for android?

for android you have config set usesCleartextTraffic: true

[Henggg22]

Thanks you all guy, For this issue already solved after I upgrade version react native to latest .