In the world of mobile application development, being able to display PDFs seamlessly is a crucial feature. With the react-native-pdf library, you can effortlessly integrate PDF viewing capabilities in your React Native applications. This guide will walk you through the installation process, usage, and troubleshooting steps.

Features of react-native-pdf

• Read PDFs from various sources: URL, blob, local file, or assets.
• View PDFs in vertical or horizontal orientations.
• Zoom in/out and navigate by dragging.
• Support for password-protected PDFs.
• Easily jump to a specific page in the document.

Installation

To install react-native-pdf along with react-native-blob-util, simply run the following commands:

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

yarn add react-native-pdf react-native-blob-util

Platform Specific Installation

iOS

If you are using React Native 0.60 or later, run pod install in the ios directory and you’re good to go!

If you are on version 0.59 or below, use:

react-native link react-native-blob-util

react-native link react-native-pdf

Android

For React Native 0.59 and above, make sure you add the following to your android/app/build.gradle:

packagingOptions {
    pickFirst 'lib/x86/libc++_shared.so'
    pickFirst 'lib/x86_64/libjsc.so'
    // Add other architectures as needed
}

Usage Example

Now that you have everything installed, here’s how you can display a PDF in your app:

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

export default class PDFExample extends React.Component {
    render() {
        const source = { uri: 'http://samples.leanpub.com/thereactnativebook-sample.pdf', cache: true };

        return (
            
                 {
                        console.log(`Number of pages: ${numberOfPages}`);
                    }}
                    onError={(error) => {
                        console.log(error);
                    }}
                    style={styles.pdf}
                />
            
        );
    }
}

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,
    }
});

Understanding the Code: An Analogy

Imagine you are setting up a new library in your home. First, you need bookshelves (installing react-native-pdf and react-native-blob-util) to hold your books (PDFs). You can access books from various sources: new ones from a bookstore (URL), ones you borrowed (local file), or gifted ones (asset files).

Once you have your shelves set up, you arrange your books. Some people might prefer to read while lying down (vertical), and some sitting (horizontal). Whatever the position, you’re able to enjoy your book with a comfortable zoom (drag and zoom features). The best part is, if a neighbor (user) asks for a specific book (page), you can direct them to it without a hassle!

Troubleshooting Common Issues

If you encounter issues after installation, here are some troubleshooting tips:

• PDF not displaying: Ensure you have executed react-native link. If issues persist, visit the related issue threads on GitHub.
• Old React Native version: Make sure your React Native version is 0.47 or above. Upgrade if necessary.
• White/Gray screen on loading: Verify your PDF URI is correct. For iOS, ensure you’ve added an exception for the server in info.plist.
• Expo compatibility: Be aware that Expo does not support react-native-pdf. Check out Expo’s caveats.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Conclusion

Implementing PDF views in your React Native app enhances functionality and improves user experience. Follow the steps outlined, and you’ll have a fully operational PDF viewer in no time!

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.