7

I am trying to display pdf file in react-native app.

Here is my code: getting blob from api :

Blob {
  "_data": Object {
    "blobId": "85225e45-7f45-463b-bd62-a9170551a3b7",
    "lastModified": undefined,
    "offset": 0,
    "size": 3028,
    "type": "application/pdf",
  },
}

Note: After converting to base64Data i am able to render images but not pdf files.

const fileReaderInstance = new FileReader();
fileReaderInstance.readAsDataURL(response.data);
fileReaderInstance.onload = () => {
    base64data = fileReaderInstance.result;
     dispatch({
            type: OPEN_DOCUMENT, url: base64data 
        });
}

And in render

<WebView 
   source={{ uri: url }} 
   originWhitelist={['*']}
 />

(working fine for images)

<Image source={{uri: url}} style={{ height: 400, width: 300, }} />
Andronicus
  • 25,419
  • 17
  • 47
  • 88
lkum11
  • 71
  • 1

1 Answers1

0

The URL.createObjectURL function is not available in React Native because React Native does not use a browser environment like traditional web applications. Instead, it uses a combination of JavaScript and native components to render the user interface.

In React Native, you typically work with local image files or remote URLs directly, rather than creating object URLs.

Other way is to directly convert them to base64 as you have already tried successfully. Additionally, while base64 encoding can be used for both images and PDFs, the methods of displaying and rendering them may differ. Base64-encoded images can be directly rendered using an Image component, while rendering PDFs usually requires additional libraries specifically designed for handling PDF rendering in React Native.

Dipansh Khandelwal
  • 601
  • 4
  • 8