react-native-pdf icon indicating copy to clipboard operation
react-native-pdf copied to clipboard

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

Open 18482048531 opened this issue 1 year ago • 9 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 ( <Container> <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')} /> </TouchableOpacity> } /> <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 }} /> </ScrollView> </Container> ) } const getCustomStyle = (theme: Theme) => { return StyleSheet.create({ lines: { width: '92%', backgroundColor: 'rgba(249, 249, 249, 0.05)', height: 1, marginTop: pTd(12), }, }) }

18482048531 avatar Jan 19 '24 03:01 18482048531

Same issue here! I am using RN 0.72.6.

denisbevilacqua avatar Jan 19 '24 14:01 denisbevilacqua

same! expo sdk 50.0.2

igorpimentel23 avatar Jan 20 '24 01:01 igorpimentel23

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.

Matzielab avatar Jan 23 '24 18:01 Matzielab

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

denisbevilacqua avatar Jan 23 '24 19:01 denisbevilacqua

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)); }} />

xks19943 avatar Jan 25 '24 13:01 xks19943

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

esinanturan avatar Jan 26 '24 09:01 esinanturan

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

18482048531 avatar Jan 30 '24 01:01 18482048531

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.

CruzNadin avatar Mar 14 '24 07:03 CruzNadin

Probably use HTTPS

SukumarRN7 avatar Apr 11 '24 18:04 SukumarRN7