I have an app with expoGo and use expo-file-system to download files to the user's device.
When I pass the path to the files to rn-pdf-reader-js in online mode, everything works as it should, but in offline the library simply simply does not render pdf.
<PDFReader
style={styles.reader}
customStyle={{
readerContainerZoomContainerButton: {
display: 'none',
},
}}
withPinchZoom={true}
withScroll={true}
noLoader={false}
source={{uri: magazine.pdf ? magazine.pdf : URL.MAGAZINE_PDF(magazine)}}
/>
where magazine.pdf look like "file:///Users/user/Library/Developer/CoreSimulator/Devices//data/Containers/Data/Application//Documents/ExponentExperienceData/%2540anonymous%252**/pdf2021-1.pdf"
I need a PDF to be displayed offline
I tried many solutions: load base64, load component into webView;
but it's all useless
Related
I'm working on this app that does not always hold the video content on the device.
The Video will be downloaded, and then a path to the video will be on json objects that need to be inputed into a require. (or thats how I do it right now)
This is the code for the video:
import jsonFileExercise from '../../../assets/controller/data/getNextExerciseBySectionId.json'
var videoPath = jsonFileExercise.content.path
return (
<Video
source={require(videoPath)}
rate={1.0}
volume={1.0}
isMuted={false}
resizeMode="cover"
//shouldPlay
useNativeControls
isLooping
style={styles.backgroundVideo}
/>
)
This is the JSON file
{
"exerciseId": 1,
"content": {
"type": "video",
"path": "../video/content/testvideo2.mp4"
}
}
I want to be able to change the path in the JSON file and then load a different video.
Does anyone know a better way of having Dynamic Video that is loaded from storage?
Another problem is going to be using images from asyncStorage, but the ideal solution would be something that uses both images from AsyncStorage and updating images dynamically.
Similar posts: React Native: require() with Dynamic String?
But it did not show a solution for the issue.
Do you know a lib / a way to display a thumbnail of a local video ?
I select a video from my device with react-native-image-picker and i would like to display a thumbnail of this video in a View or flatlist in case of several selections
You can use below plugin for get thubmnail form local path
https://github.com/phuochau/react-native-thumbnail#readme
import RNThumbnail from 'react-native-thumbnail';
let getFilePath = ''
RNThumbnail.get(filepath).then((result) => {
console.log(result.path); // thumbnail path
getFilePath = result.path;
})
After getting path for display purpose you can use react-native-video for play and display
react-native-video and use below code
<Video source={{ uri: getFilePath }} pause={true} />
Hope this will work for you.
If you are using Expo and you are not deploying to web, this package will do the job for you: https://docs.expo.dev/versions/latest/sdk/video-thumbnails/
I'm using the below code to open an URL. Downloading a PDF from React native webview after opening on Android gives:
"invaild pdf format or corrupted"
but it works fine on iOS.
<WebView
renderToHardwareTextureAndroid={true}
startInLoadingState={isLoading}
renderLoading={() => {
return <BarIndicator color="blue" />;
}}
mediaPlaybackRequiresUserAction={false}
javaScriptEnabled={true}
source={{
uri: webviewUrl,
headers: webviewHeaders,
}}
style={drawerWebviewStyles.container}
/>
pdf doesn't work on android webview check this issue here you may look for other solution like download it and open it with pdf viewer
Seems to be a very well known 5 year old problem
https://react-native.canny.io/feature-requests/p/android---webview-cannot-display-pdf
that needs saveas file.pdf then either call the native pdf handler
or
embed/customise a simple maintained js viewer such as
https://github.com/xcarpentier/rn-pdf-reader-js
Using react native I am trying to download a PDF file (Sample PDF File). After download completes, it should open with 3rd party pdf viewer
Please guide me how to do this in react native.
1) Download base64 encoded pdf file.
2) Decode base64 encoded file ( I suggest you use react-native filehandler)
3)In order to view pdf you can use webview on IOS
<WebView style={{
flex: 1
}} scalesPageToFit={true} source={{
uri: --base64EncodedContent--
}}
>
</WebView>
for android you can use react-native pdf view https://github.com/cnjon/react-native-pdf-view
<PDFView
path={this.props.src} //path of pdf file you saved
pageNumber={1}
onLoadComplete = {(pageCount) => {
}}
style={styles.pdf}>
</PDFView>
In one of my views I would like to display a PDF, which is accesible via URL. This should be done without opening an extra tab in the browser, and without downloading the PDF (to view it outside the browser). It should be visible embedded within the Ember application.
What I have in mind is:
Use the URL to get the PDF and make it accessible to the ember application.
Use a special "PDF view" to display the PDF.
Is this possible? What options do I have to display an embedded PDF in an Ember application?
Displaying a PDF is not really related to ember, because to view a PDF you need a PDF plugin installed in your browser (which is mostly installed by default depending by the browser).
That said, a possible solution I could imagine could be to create a custom ember view with the tagName iframe on which you set the src attribute to the link referring to the PDF.
Example:
App.PDFView = Ember.View.extend({
tagName: 'iframe',
attributeBindings: ['src', 'width', 'height', 'frameborder'],
src: 'pdffile.pdf',
width: 800,
height: 600,
frameborder: 0
});
I've also used width, height and frameborder only for convenience so you can control some of the iframe's attributes easily from within ember. Here a working demo.
You can also go with something more elaborated and use a js lib like http://pdfobject.com/ which you then initialize in your view's didInsertElement hook:
App.PDFView = Ember.View.extend({
src: 'pdffile.pdf',
width: 800,
height: 600,
didInsertElement: function() {
new PDFObject({
url: this.get('src'),
width: this.get('width'),
height: this.get('height')}
).embed(this.get('elementId'));
}
});
(haven't tested the latter, but you get the point)
And then use this App.PDFView like a normal ember view in your templates.
{{view App.PDFView}}
Or your can set the src, width & height directly from within your template like
{{view App.PDFView src="pdffile.pdf" width="600" height="800"}}
Hope it helps.
You can certainly leverage the Ember PDFJS Addon by doing:
ember install ember-pdfjs
The README on GitHub describes the installation and use cases.
In short, the addon provides your Ember project with a component, pdf-document, which you can use in your HTMLBars template like so:
{{pdf-document src=[model.src]}}
... there are other permutations of what src can be (including a string file path, resource URI, or Uint8Array buffer).
If you don't see a feature that you need, please suggest in the Issues.