wonday / react-native-pdf

A <Pdf /> component for react-native

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Source file at path`xxxxxxxxxxxxxxxxxxxx.pdf.tmp` does not exist

18482048531 opened this issue · comments

What react-native version are you using?
0.72

What react-native-pdf version are you using?
6.7

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

rror: Source file at path/xxxxxxxxxxxx.pdf.tmp does not exist
Error: Source file at pathxxxxxxxxxxx.pdf.tmp does not exist
at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.stein.pvms&modulesOnly=false&runModule=true:439053:58)
at apply (native)
at __invokeCallback (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.stein.pvms&modulesOnly=false&runModule=true:3354:23)
at anonymous (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.stein.pvms&modulesOnly=false&runModule=true:3047:34)
at __guard (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.stein.pvms&modulesOnly=false&runModule=true:3255:15)
at invokeCallbackAndReturnFlushedQueue (http://localhost:8081/index.bundle//&platform=android&dev=true&minify=false&app=com.stein.pvms&modulesOnly=false&runModule=true:3046:21)
Join a screenshot or video of the problem on the simulator or device?

Show us the code you are using?
import React, { useState, useEffect } from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import { Container } from '../../components/Container'
import { useTheme } from '@rneui/themed'
import { Theme } from '@rneui/base'
import { StyleSheet } from 'react-native'
import { useTranslation } from 'react-i18next'
import FastImage from 'react-native-fast-image'
import { height, pTd, width } from '../../base-support/utils/ui-util'
import { ScrollView } from 'react-native-gesture-handler'
import { NavigationBar } from '../../components/NavigationBar'
import Pdf from 'react-native-pdf'

export const PreviewPDFDownload = () => {
const { t } = useTranslation()
const { theme } = useTheme()
const styles = getCustomStyle(theme)

return (

<NavigationBar
title={t('App')}
right={
<TouchableOpacity
style={{ paddingRight: pTd(10), paddingLeft: pTd(10) }}>
<FastImage
style={{ height: pTd(20), width: pTd(20) }}
source={require('../../assets/image/dark/helpCenter/download.png')}
/>

}
/>
<ScrollView contentContainerStyle={{ paddingHorizontal: pTd(12) }}>
<Pdf
source={{
uri: 'http://172.18.120.92:9210/permission/2024-01/19/b323ad55-ef7d-4bff-94ae-720dde1c5582.pdf',
}}
style={{ flex: 1 }}
/>


)
}
const getCustomStyle = (theme: Theme) => {
return StyleSheet.create({
lines: {
width: '92%',
backgroundColor: 'rgba(249, 249, 249, 0.05)',
height: 1,
marginTop: pTd(12),
},
})
}

Same issue here! I am using RN 0.72.6.

same! expo sdk 50.0.2

I also have this issue in Expo and needed the app out asap so i did a workaround.

In my case i could download the pdf and store it in the bundled assets on android and only load from url on ios. But since it's expo and it builds the android folder itself, i wrote a plugin for it.

The plugin js file i placed in the root of my project

// withCopyPdf.js
const { withDangerousMod } = require("@expo/config-plugins");
const fs = require("fs");
const path = require("path");

module.exports = function withCopyPdf(config, { pdfFilename }) {
  return withDangerousMod(config, [
    "android",
    async config => {

      // Replace the path with the path to where you keep your pdf
      const filePath = path.join(
        config.modRequest.projectRoot,
        "assets",
        "documents",
        pdfFilename
      );

      const destPath = path.join(
        config.modRequest.platformProjectRoot,
        "app",
        "src",
        "main",
        "assets",
        pdfFilename
      );

      if (!fs.existsSync(filePath)) {
        throw new Error(`File ${filePath} does not exist`);
      }

      if (!fs.existsSync(path.dirname(destPath))) {
        fs.mkdirSync(path.dirname(destPath), { recursive: true });
      }

      fs.copyFileSync(filePath, destPath);

      return config;
    },
  ]);
};

In my case i had the pdf in my js source at assets/documents/pdfFilename.pdf

then i updated my app.config.json plugin array like this

"plugins": [
      ["./withCopyPdf", { "pdfFilename": "pdfFilename.pdf" }],
]

Then i can use it in my app like this:

const source = Platform.OS === "ios"
    ? {
        uri: "https://remote-pdf.com/pdfFilename.pdf",
        cache: true,
      }
    : { uri: "bundle-assets://pdfFilename.pdf" };

Hope it can help anyone needing a quick workaround until this issue is solved.

In my case, I was able to show a PDF in React Native 0.72 using another library called react-native-view-pdf.

add trustAllCerts={false} i fixed my problem 。 you can try <Pdf
style={{
width: pxToDp(355),
height: pxToDp(245),
}}
trustAllCerts={false}
source={source}
onError={(e)=>{
console.log('Pdf onError ' + JSON.stringify(e));
}}
/>

For me the issue was with SSL certificate when I load the file from https it worked i hope it helps

add trustAllCerts={false} i fixed my problem 。 you can try <Pdf style={{ width: pxToDp(355), height: pxToDp(245), }} trustAllCerts={false} source={source} onError={(e)=>{ console.log('Pdf onError ' + JSON.stringify(e)); }} />

you are right!think you

add trustAllCerts={false} i fixed my problem 。 you can try <Pdf style={{ width: pxToDp(355), height: pxToDp(245), }} trustAllCerts={false} source={source} onError={(e)=>{ console.log('Pdf onError ' + JSON.stringify(e)); }} />

worked for me, thank you.

Probably use HTTPS