Open 18482048531 opened 10 months ago
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
What
react-native
version are you using? 0.72What
react-native-pdf
version are you using? 6.7What 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 (
) } const getCustomStyle = (theme: Theme) => { return StyleSheet.create({ lines: { width: '92%', backgroundColor: 'rgba(249, 249, 249, 0.05)', height: 1, marginTop: pTd(12), }, }) }