How to Display PDF from Base64 in React Native

It’s common for applications to need to display PDF files to their users. This can be especially important for applications that rely on displaying invoices, contracts, or other important documents.

In this tutorial, let’s learn how to display PDF from base64 in react native using react native pdf library.

React Native Pdf also need another library react native blob util. Install both libraries using the command given below.

npm install react-native-pdf react-native-blob-util --save

Also, don’t forget to run the pod install command inside the ios folder.

On Android, open android/app/build.gradle and add the following inside the android {} tag.

packagingOptions {
       pickFirst 'lib/x86/'
       pickFirst 'lib/x86_64/'
       pickFirst 'lib/arm64-v8a/'
       pickFirst 'lib/arm64-v8a/'
       pickFirst 'lib/x86_64/'
       pickFirst 'lib/armeabi-v7a/'

That’s the installation part.

You can pass the base64 as the source URI and the pdf will be shown. See the following code.

import React from 'react';
import {StyleSheet, Dimensions, View, Platform} from 'react-native';
import Pdf from 'react-native-pdf';

const source = {
  uri: 'data:application/pdf;base64,JVBERi0xLjQ........Cg==',
const App = () => {
  return (
    <View style={styles.container}>
        trustAllCerts={Platform.OS === 'ios'}
        onLoadComplete={(numberOfPages, filePath) => {
          console.log(`number of pages: ${numberOfPages}`);
        onPageChanged={(page, numberOfPages) => {
          console.log(`current page: ${page}`);
        onError={error => {
        onPressLink={uri => {
          console.log(`Link presse: ${uri}`);

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    marginTop: 25,
  pdf: {
    flex: 1,
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,

For testing, you can use the base64 data given here.

Following is the output in Android.

react native pdf base64

And following is the output in iOS.

react native base64 to pdf

That’s how you show PDF files from base64 in react native.

Similar Posts

Leave a Reply