Expo WebView failing to render PDF

Expo SDK
1

Please provide the following:

  1. SDK Version: 45.0.6
  2. Platforms(Android/iOS/web/all): iOS
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

I have a PDF in my /assets folder.
I import that pdf with

const PDF = require("/path/to/pdf")

I then try to render it in a WebView like so:

<WebView source={PDF}/>

The app displays the following content:

image
image761×1447 249 KB

2

Hi @azolyomi

I suspect you’re running into the issues mentioned here:

I think the problem is that there’s no way to specify the Content-Type for the content.

3

Hi Wodin,

Thank you – perhaps this is indeed the issue. However, for some reason, when I load an external PDF file (one hosted on a remote server) it works. It’s just the local files that don’t work.

Do you have a solution that I could use, or any suggestions for things to try?

4

Yes, the problem is specifically with loading local files.

If you are hosting the PDF on a remote server, the server will return the Content-Type in the HTTP headers.

One thing you could try is include a simple web server within your app. I have not tried this myself:

Install it with npm or yarn. Skip the react-native link step. Make sure you build with EAS Build and run a custom dev client instead of Expo Go.
I think you could use expo-file-system instead of react-native-fs.

5

Hello! Just use ‘originWhitelist’ with value ‘{[’*‘]}’, and uri string must start with ‘file://’:

<WebView
// onScroll={event => console.log(event.nativeEvent)}
originWhitelist={[‘*’]}
source={{uri: ‘file://’ + pdfFile}} // path to ‘pdfFile’ seems like ‘/User/[username]/project/assets/file.pdf’
/>

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.