Blog Post

How to Build a React Native Image Viewer

Illustration: How to Build a React Native Image Viewer

In this post, you’ll learn how to build a React Native image viewer using PSPDFKit’s React Native PDF library.

React Native is a mobile framework that can be used in both iOS and Android projects, and it’s based on the popular JavaScript library React.js.

The main advantage of React Native is that it lets you create apps that are native to a platform without a compromise on performance.

PSPDFKit React Native PDF Library

PSPDFKit offers a commercial React Native library for viewing, generating, annotating, and editing PDFs and images. You can use it to quickly add PDF functionality to your React Native applications.

It offers a variety of additional features and capabilities, including:

  • 15+ out-of-the-box annotations to mark up, draw on, and add comments to documents.

  • PDF editing to merge, split, rotate, and crop documents.

  • PDF forms to create, fill, and capture PDF form data.

  • Digital signatures to validate the authenticity and integrity of a PDF.

  • Multiple file type support — from image files (JPG, PNG, TIFF) to PDF documents.


  • A React Native development environment for running React Native projects using the React Native command-line interface (CLI) — not the Expo CLI — and configured for the platforms you want to build (Android, iOS, or both).

Installing the PSPDFKit React Native Dependency

  1. Create a fresh React Native project:

    npx react-native init PSPDFKitImageViewer
  2. Change to the project directory:

    cd PSPDFKitImageViewer
  3. Add the PSPDFKit plugin:

    yarn add github:PSPDFKit/react-native

The PSPDFKit React Native dependency is installed from the GitHub repository and not the npm registry. To install the PSPDFKit React Native dependency, run yarn add github:PSPDFKit/react-native in your project directory, or npm install github:PSPDFKit/react-native if you’re using npm.

  1. Install the dependency:

    yarn install
  2. In your android/build.gradle file, add the PSPDFKit Maven repository to download the PSPDFKit library:

        allprojects {
        repositories {
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm.
            maven {
                // Android JSC is installed from npm.
            mavenCentral {
                // We don't want to fetch react-native from Maven Central, as there are
                // older versions over there.
                content {
                    excludeGroup "com.facebook.react"
            maven { url '' }
    +       maven {
    +          url ''
    +      }
  3. Change the compile SDK version and the minimum SDK version in your android/app/build.gradle file:

    android {
        ndkVersion rootProject.ext.ndkVersion
    -    compileSdkVersion rootProject.ext.compileSdkVersion
    +    compileSdkVersion 31
        namespace "com.imageviewer"
        defaultConfig {
            applicationId "com.sample"
    -       minSdkVersion rootProject.ext.minSdkVersion
    +       minSdkVersion 21
            targetSdkVersion rootProject.ext.targetSdkVersion
            versionCode 1
            versionName "1.0"
  4. Change the platform to iOS 14, and add the PSPDFKit Podspec in your ios/Podfile file:

    require_relative '../node_modules/react-native/scripts/react_native_pods'
        require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
    -   platform :ios, min_ios_version_supported
    +   platform :ios, '14.0'
        target 'sampleTests' do
            inherit! :complete
            # Pods for testing
    +   pod 'PSPDFKit', podspec: ''
        post_install do |installer|
                # Set `mac_catalyst_enabled` to `true` to apply patches
                # necessary for Mac Catalyst builds.
                :mac_catalyst_enabled => false
  5. While in the ios directory of your project, install the CocoaPods dependencies:

    pod install
  6. Open your project’s workspace in Xcode, and set the deployment target to 14.0 or higher.

Image showing Xcode interface for setting the deployment target

  1. In the project’s Info.plist, change View controller-based status bar appearance to YES.

Image showing Xcode interface for setting the info.plist

Displaying an Image in React Native

  1. Add the image file you want to display to the Xcode project.

Adding image file to the Xcode project

  1. Copy the image file you want to display to the android/app/src/main/assets folder.

  2. The following example shows how to open an image using PSPDFKit’s React Native PDF library. For a working example, replace the contents of your App.js file with the following:

import React, { Component } from 'react';
import { Platform } from 'react-native';
import PSPDFKitView from 'react-native-pspdfkit';

const DOCUMENT =
	Platform.OS === 'ios'
		? '[YOUR-IMAGE].jpg'
		: 'file:///android_asset/[YOUR-IMAGE].jpg';
export default class PSPDFKitImageViewer extends Component {
	render() {
		return (
					showThumbnailBar: 'scrollable',
					pageTransition: 'scrollContinuous',
					scrollDirection: 'vertical',
				style={{ flex: 1 }}

Replace [YOUR-IMAGE] with the actual name of your image file.

  1. You can now launch the application by running the following.


    npx react-native run-android

    gif showing the react native image viewer android app


    npx react-native run-ios

    gif showing the react native image viewer ios app


In this post, you learned how to build an image viewer in React Native using PSPDFKit. In case of any issues, don’t hesitate to reach out to our Support team for help.

PSPDFKit for React Native is an SDK for viewing, annotating, and editing PDFs. It offers developers the ability to quickly add PDF functionality to any React Native application. Try it for free, or visit our demo to see it in action.

Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
PRODUCTS  |  React Native • Releases

PSPDFKit 2.9 for React Native Adds Main Toolbar Customization

PRODUCTS  |  React Native • Releases

PSPDFKit 2.8 for React Native Adds TypeScript Support

CUSTOMER STORIES  |  Case Study • React Native • iOS • Android

Case Study: How Trinoor Uses PSPDFKit to Drive Operational Excellence with Flexible, Mobile Applications for the Energy and Utilities Market