Open PDF files in React Native

Nutrient React Native SDK allows you to open documents in two ways: using a native UI component(opens in a new tab), and using a native module(opens in a new tab). This is a step-by-step guide to get you started quickly.

Opening a PDF

Here’s how you can open a PDF document using the native module API:

import React, { Component } from 'react';
import { AppRegistry, NativeModules, Platform } from 'react-native';


const Nutrient = NativeModules.Nutrient;
Nutrient.setLicenseKey(null);


const DOCUMENT =
  Platform.OS === 'ios'
    ? 'Document.pdf'
    : 'file:///android_asset/Document.pdf';
export default class App extends Component<Props> {
  componentDidMount() {
    Nutrient.present(DOCUMENT, {});
  }
  render() {
    return null;
  }
}


AppRegistry.registerComponent('App', () => App);

And here’s how you can open a PDF document using the NutrientView component:

import React, { Component } from 'react';
import { AppRegistry, Platform, NativeModules } from 'react-native';
import NutrientView from '@nutrient-sdk/react-native';
import { NativeModules } from 'react-native';


const Nutrient = NativeModules.Nutrient;
Nutrient.setLicenseKey(null);


const DOCUMENT =
  Platform.OS === 'ios'
    ? 'Document.pdf'
    : 'file:///android_asset/Document.pdf';
export default class App extends Component<{}> {
  var pdfRef: React.RefObject<NutrientView | null> = React.createRef();
  render() {
    return (
      <NutrientView
        document={DOCUMENT}
        ref={pdfRef}
        fragmentTag="PDF1"
        style={{ flex: 1 }}
      />
    );
  }
}


AppRegistry.registerComponent('App', () => App);

For more details about how to open a document using Nutrient React Native SDK, take a look at our NutrientViewComponent example(opens in a new tab) from the Catalog example project.

Opening an image

In addition to the ability to open PDF documents, Nutrient React Native SDK also allows you to open and annotate images (PNG, JPEG, and TIFF). The following example shows how to open a PNG image using our native module API:

const IMAGE =
  Platform.OS === 'ios'
    ? 'image.png'
    : 'file:///android_asset/image.png';


Nutrient.present(IMAGE, {});

For more details and sample code showing how to open an image using Nutrient React Native SDK, take a look at our OpenImageDocument.tsx example(opens in a new tab) from the Catalog example project.