Use react-native-view-pdf shows blank view - react-native

Question

I use react-native-view-pdf, React Native version is 0.59.5
https://github.com/rumax/react-native-PDFView
I just follow the tutorial but show blank screen.
I can't figure it out. I don't know why they are showing empty screens.
Step1:
npm install react-native-view-pdf --save
Step2:
react-native link react-native-view-pdf
Use the code and type react-native run-ios
App.js:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PDFView from 'react-native-view-pdf/lib/index';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
const resources = {
file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',
url: 'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf',
base64: 'JVBERi0xLjMKJcfs...',
};
type Props = {};
export default class App extends Component<Props> {
render() {
const resourceType = 'url';
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<PDFView
fadeInDuration={250.0}
style={{ flex: 1 }}
resource={'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf'}
resourceType={resourceType}
onLoad={(event) => console.log(`PDF rendered from ${event}`)}
onError={(error) => console.log('Cannot render PDF', error)}
/>
<Text>Bottom text</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Show black screen:

Answer 1

You can try below library it will help you to achieve and this is high ranked library
see here
Installation
npm library
npm install rn-fetch-blob --save
npm install react-native-pdf --save
react-native link rn-fetch-blob
react-native link react-native-pdf
Example
import React from 'react';
import { StyleSheet, Dimensions, View } from 'react-native';
import Pdf from 'react-native-pdf';
export default class PDFExample extends React.Component {
render() {
const source = {uri:'http://samples.leanpub.com/thereactnativebook-sample.pdf',cache:true};
//const source = require('./test.pdf'); // ios only
//const source = {uri:'bundle-assets://test.pdf'};
//const source = {uri:'file:///sdcard/test.pdf'};
//const source = {uri:"data:application/pdf;base64,..."};
return (
<View style={styles.container}>
<Pdf
source={source}
onLoadComplete={(numberOfPages,filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
style={styles.pdf}/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
marginTop: 25,
},
pdf: {
flex:1,
width:Dimensions.get('window').width,
}
});
I've recently used this library and it is very good as expected.

Answer 2

Try this:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import PDFView from 'react-native-view-pdf/lib/index';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
const resources = {
file: Platform.OS === 'ios' ? 'downloadedDocument.pdf' : '/sdcard/Download/downloadedDocument.pdf',
url: 'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf',
base64: 'JVBERi0xLjMKJcfs...',
};
type Props = {};
export default class App extends Component<Props> {
render() {
const resourceType = 'url';
return (
<View style={{flex: 1, witdth: '100%'}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<PDFView
fadeInDuration={250.0}
style={{ flex: 1 }}
resource={'https://www.ets.org/Media/Tests/TOEFL/pdf/SampleQuestions.pdf'}
resourceType={resourceType}
onLoad={(event) => console.log(`PDF rendered from ${event}`)}
onError={(error) => console.log('Cannot render PDF', error)}
/>
<Text>Bottom text</Text>
</View>
);