{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-native-pdf"],"cli":null},"imports":["import PDF from 'react-native-pdf';","const source = { uri: 'http://example.com/test.pdf', cache: true };","import { StyleSheet } from 'react-native';"],"auth":{"required":false,"env_vars":[]},"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`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}