I have a pdf file in /assets/pdfs folder. I'm trying to display it but getting an empy page:
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import Pdf from 'react-native-pdf';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Feather from 'react-native-vector-icons/Feather';
import Main from '../Main'
var RNFS = require('react-native-fs');
export default function ItalyUserAgreement({ navigation }) {
const source = {uri: 'file://' + RNFS.DocumentDirectoryPath + '/assets/pdfs/thereactnativebook-sample.pdf'}
console.log(source)
return (
<View style={styles.container}>
<View style={styles.appBar}>
<MaterialIcon name="arrow-back" size={32} color="#ffffff" backgroundColor={'none'} onPress={() => navigation.goBack()} />
<Text style={styles.appBarText}>Italy</Text>
<Feather name="x" size={32} color="#ffffff" backgroundColor={'none'} onPress={() => navigation.navigate(Main)} />
</View>
<Pdf
source={source}
style={styles.pdf}
/>
</View>
)
}
I've also tried:
const source = {uri: 'file://assets/pdfs/thereactnativebook-sample.pdf'}
and
const source = require('/assets/pdfs/thereactnativebook-sample.pdf')
But none of those worked for me
These are all the possible ways as stated in the docs:
// 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,JVBERi0xLjcKJc..."};
// const source = {uri:"content://com.example.blobs/xxxxxxxx-...?offset=0&size=xxx"};
// const source = {uri:"blob:xxxxxxxx-...?offset=0&size=xxx"};