Path to a file React Native-CodePudding

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

CodePudding user response：

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"};