{"id":11789,"library":"react-native-pdf","title":"React Native PDF View Component","description":"react-native-pdf is an actively maintained React Native component designed for displaying PDF documents across iOS, Android, and Windows platforms. The current stable version is 7.0.4, with releases occurring frequently to address bugs and add features. It enables developers to render PDFs from various sources, including URLs, blobs, local files, and app assets, with built-in caching capabilities. Key features include horizontal or vertical display, drag and zoom gestures, double-tap zoom, support for password-protected PDFs, and the ability to jump to specific pages. It differentiates itself by offering comprehensive cross-platform support and robust viewing functionalities, leveraging `react-native-blob-util` for efficient file system interactions. For Expo users, it requires a Custom Dev Client and an Expo Config Plugin rather than Expo Go. This library is a strong choice for applications requiring native PDF rendering capabilities.","status":"active","version":"7.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/wonday/react-native-pdf","tags":["javascript","react-component","react-native","android","ios","pdf","view","viewer","typescript"],"install":[{"cmd":"npm install react-native-pdf","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-pdf","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-pdf","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by React Native.","package":"react","optional":false},{"reason":"Peer dependency required for any React Native component.","package":"react-native","optional":false},{"reason":"Required runtime dependency for file system access, blob support, and caching functionalities. Must be installed alongside react-native-pdf.","package":"react-native-blob-util","optional":false}],"imports":[{"note":"The primary component is a default export. While CommonJS `require` might work in some setups, ESM `import` is the standard and recommended approach.","wrong":"const PDF = require('react-native-pdf');","symbol":"PDF","correct":"import PDF from 'react-native-pdf';"},{"note":"The `source` prop accepts an object with `uri`, `uri` as base64 string, `fileName`, or `require` (for local assets). Cache option is common.","symbol":"PDF source object","correct":"const source = { uri: 'http://example.com/test.pdf', cache: true };"},{"note":"Standard React Native StyleSheet for component styling, often used to define dimensions for the PDF viewer.","symbol":"StyleSheet","correct":"import { StyleSheet } from 'react-native';"}],"quickstart":{"code":"import React from 'react';\nimport { StyleSheet, View, Text, Dimensions } from 'react-native';\nimport PDF from 'react-native-pdf';\n\nconst MyPdfViewer = () => {\n  // Example source: a public PDF URL\n  const source = {\n    uri: 'https://www.africau.edu/images/default/sample.pdf',\n    cache: true,\n  };\n\n  // For a local file, you might use:\n  // const localSource = { uri: 'file:///data/user/0/com.yourpackage/files/my_document.pdf' };\n  // For an asset:\n  // const assetSource = require('./assets/document.pdf');\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.title}>Viewing a PDF Document</Text>\n      <PDF\n        source={source}\n        onLoadComplete={(numberOfPages, filePath) => {\n          console.log(`Number of pages: ${numberOfPages}`);\n        }}\n        onPageChanged={(page, numberOfPages) => {\n          console.log(`Current page: ${page} / ${numberOfPages}`);\n        }}\n        onError={(error) => {\n          console.log(error);\n        }}\n        onPressLink={(uri) => {\n          console.log(`Link pressed: ${uri}`);\n        }}\n        style={styles.pdf}\n        enablePaging={true} // Enable horizontal paging for multi-page PDFs\n        page={1}\n        scale={1.0}\n        minScale={0.5}\n        maxScale={3.0}\n        fitPolicy={0} // 0: width, 1: height, 2: both\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'flex-start',\n    alignItems: 'center',\n    marginTop: 25,\n  },\n  title: {\n    fontSize: 20,\n    fontWeight: 'bold',\n    marginBottom: 10,\n  },\n  pdf: {\n    flex: 1,\n    width: Dimensions.get('window').width,\n    height: Dimensions.get('window').height - 100, // Adjust height to leave space for title\n  },\n});\n\nexport default MyPdfViewer;\n","lang":"typescript","description":"This quickstart demonstrates how to import and render a PDF from a URL using the `PDF` component. It includes basic error handling, page change logging, and styling to make the viewer occupy most of the screen, showing common props like `enablePaging`, `page`, `scale`, and `fitPolicy`."},"warnings":[{"fix":"Ensure your `android/build.gradle` and `android/app/build.gradle` files are updated to use `mavenCentral()` or `maven { url '...' }` for dependencies. Specifically, remove `jcenter()` from your `repositories` blocks.","message":"Android builds for older projects might break due to the removal of `jcenter()` repository in favor of `mavenCentral()` (or `maven {}`).","severity":"breaking","affected_versions":">=6.5.0"},{"fix":"Always install both packages: `npm install react-native-pdf react-native-blob-util` or `yarn add react-native-pdf react-native-blob-util`.","message":"The package `react-native-blob-util` is a required peer and runtime dependency that must be explicitly installed alongside `react-native-pdf`. Failing to install it will lead to runtime errors or crashes related to file system operations.","severity":"gotcha","affected_versions":">=6.4.0"},{"fix":"Refer to the official Expo documentation on 'Custom Dev Clients' and the `react-native-pdf` GitHub repository's 'Expo Config Plugin' example (e.g., `with-pdf`) for proper setup.","message":"Expo Go does not support `react-native-pdf`. To use this package within an Expo project, you must use a Custom Dev Client with the provided Expo Config Plugin.","severity":"gotcha","affected_versions":"*"},{"fix":"Add the recommended `packagingOptions` block to your `android { ... }` configuration in `android/app/build.gradle` as specified in the installation instructions.","message":"For React Native 0.59.0 and above on Android, specific `packagingOptions` must be added to your `android/app/build.gradle` to prevent issues with native libraries (`libc++_shared.so`, `libjsc.so`).","severity":"gotcha","affected_versions":">=0.59.0 (React Native)"},{"fix":"Review your Fabric setup and React Native version compatibility. Ensure your project aligns with `react-native@0.81.0` or newer if utilizing Fabric with `react-native-pdf@7.x`.","message":"Version 7.0.0 and 7.0.1 included updates for Android 16 KB Page Size support and upgrading Fabric Example to Latest React Native 0.81.0, which may imply breaking changes or require updates for projects using Fabric architecture with older React Native versions.","severity":"breaking","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `react-native-pdf` and `react-native-blob-util` are correctly linked (automatic for RN 0.60+ with `pod install`, manual for older RN versions). Rebuild your native project after installation. This particular issue was fixed in `v6.7.6`, so upgrading might resolve it.","cause":"This error typically indicates that native modules are being accessed too early in the React Native lifecycle or that there's an issue with the native module linking/initialization.","error":"java.lang.IllegalStateException: Tried to access a JS module before the React instance was fully set up"},{"fix":"For React Native 0.60 and above, navigate to your `ios/` directory and run `pod install`. For older RN versions, ensure `react-native link react-native-pdf` was executed. Clean your Xcode build folder and try rebuilding.","cause":"This usually means the iOS native module for `react-native-pdf` is not correctly linked or compiled.","error":"Undefined symbol: _OBJC_CLASS_$_RCTPdfViewManager"},{"fix":"Double-check the `uri` or `filePath` in your `source` prop for typos or incorrect paths. Ensure network connectivity for remote PDFs. For local files, verify permissions and that the file actually exists on the device storage.","cause":"The `source` prop is invalid, the URI is incorrect, the file doesn't exist at the specified path, or there are network issues preventing download.","error":"Error: unable to find or load PDF document"},{"fix":"Upgrade `react-native-pdf` to `v6.6.0` or higher, which includes a fix to migrate to `deprecated-react-native-prop-types`.","cause":"This error occurs in older versions of `react-native-pdf` or React Native when `ViewPropTypes` was directly imported from `react-native` instead of `deprecated-react-native-prop-types`.","error":"Error: Invariant Violation: ViewPropTypes is deprecated and will be removed from React Native in a future release. Use Image.propTypes instead."},{"fix":"Add the `packagingOptions` block exactly as specified in the `react-native-pdf` Android installation instructions to your `android { ... }` block in `android/app/build.gradle`.","cause":"Missing or incorrect `packagingOptions` in your `android/app/build.gradle` file, leading to conflicts when bundling native libraries.","error":"Android build error related to `pickFirst 'lib/x86/libc++_shared.so'` or similar shared library conflicts."}],"ecosystem":"npm"}