@angelcat/rn-pdf-thumbnail

This library is forked from react-native-pdf-thumbnail.

A react native module for generating thumbnail for PDF files.

Important Note: This library does not work directly with Expo or Mini Apps due to its native dependencies. A special setup is required for Mini Apps, and the library must be installed in the Host App for native functionality.

A wrapper for:

• PDFKit on iOS (requires iOS 11+)
• PdfRenderer on Android (requires API level 21 - LOLLIPOP)

No other JavaScript or native dependencies.

Installation

Host App Installation

npm install @angelcat/rn-pdf-thumbnail
# or
yarn add @angelcat/rn-pdf-thumbnail

After installing the package, you need to link the native modules. If you're using React Native 0.60+, linking is automatic. For iOS, you'll need to install pods:

cd ios && pod install

Additional Setup for Mini App React Native

Since this library contains native code that can't be bundled directly in a Mini App, you'll need to:

1. Install the library in your Host App first (see Host App Installation above)
2. Configure your Mini App's webpack to properly handle the library:

rules: [
  {
    test: /\.[cm]?[jt]sx?$/,
    include: [
      // ... other includes ...
      /node_modules(.*[/\\])+@angelcat[/\\]rn-pdf-thumbnail/
    ],
    use: 'babel-loader',
  }
]

Also, add the following to your ModuleFederationPlugin configuration:

new ModuleFederationPlugin({
  // ... other configurations ...
  shared: {
    ...getSharedDependencies({
      eager: STANDALONE,
      isImport: STANDALONE ? undefined : false,
    }),
    '@angelcat/rn-pdf-thumbnail': {
      eager: STANDALONE,
      singleton: true,
      requiredVersion: '*',
      import: undefined,
    },
  }
})

This setup ensures that:

1. The Mini App can use the library's JavaScript interface
2. The actual native functionality is provided by the Host App's installation
3. There won't be any conflicts between different versions of the library

Usage

import PdfThumbnail from "@angelcat/rn-pdf-thumbnail";

// For iOS, the filePath can be a file URL.
// For Android, the filePath can be either a content URI, a file URI or an absolute path.
const filePath = 'file:///mnt/sdcard/myDocument.pdf';
const page = 0;

// The thumbnail image is stored in caches directory, file uri is returned.
// Image dimensions are also available to help you display it correctly.
const { uri, width, height } = await PdfThumbnail.generate(filePath, page);

// Generate thumbnails for all pages, returning an array of the object above.
const results = await PdfThumbnail.generateAllPages(filePath);

// Default compression quality is 80, you can optionally specify a quality between 0 and 100.
const { uri, width, height } = await PdfThumbnail.generate(filePath, page, 95);
const results = await PdfThumbnail.generateAllPages(filePath, 90);

Demo

The example app contains a document picker, it generates and displays a thumbnail for the selected PDF file.

To run it:

yarn
yarn example ios
yarn example android

iOS | Android ------- | --- |

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT