React Native UI Component for iOS

At PSPDFKit, we support all major hybrid technologies — all of which allow for faster application development — including Xamarin, Appcelerator, Cordova, and of course, React Native. In particular, interest in support for React Native is steadily increasing, so we’ve dedicated more time to making our support wrapper even better. Today we are excited to announce that our PSPDFKit React Native wrapper now comes with a native UI component in addition to the already existing native module. (We also offer the same for Android.)

PSPDFKit has supported integration via React Native for quite some time, in that our wrapper can be used as a native module to modally present a PDF in fullscreen.

With the new React UI component, you can now integrate PSPDFKit directly into your custom components and modify and adjust the layout of the PDF view to your liking (with flexbox), all while still being able to enjoy the features and customization options you are used to from the native module.

This approach is similar to what was explained in an earlier guest blog post by Ben Kraus about native view controllers with React Native.

ℹ️ Note: We recommend using the native UI component on iOS with PSPDFKit 7.4 for iOS or later.

Usage

You can embed a PDF view in your app by using PSPDFKitView in your component’s render() function:

Copy
1
2
3
4
5
6
7
8
9
10
<PSPDFKitView
  document={'document.pdf'}
  configuration={{
    pageTransition: 'scrollContinuous',
    scrollDirection: 'vertical',
    pageMode: 'single',
  }}
  style={{ flex: 1 }}
/>

The component enables not only displaying a single PDF in fullscreen mode, but also building any custom UI around it, or even displaying multiple documents at once in a split screen. A split screen UI that shows two different documents with varying configuration options at once, side by side on the screen, can be created with the following code:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
class SplitPDF extends Component {
  render() {
    return (
      <View style={{ flex: 1, flexDirection: layoutDirection }}>
        <PSPDFKitView
          document={'PDFs/Annual Report.pdf'}
          configuration={{
            backgroundColor: processColor('lightgrey'),
            thumbnailBarMode: 'scrollable',
          }}
          showCloseButton={true}
          style={{ flex: 1 }}
        />
        <PSPDFKitView
          document={'PDFs/Business Report.pdf'}
          configuration={{
            pageTransition: 'scrollContinuous',
            scrollDirection: 'vertical',
            pageMode: 'single',
          }}
          style={{ flex: 1, color: '#9932CC' }}
        />
      </View>
    )
  }
}

You can find this along with more example usages in the Catalog.

Customization

To configure and set up the PSPDFKitView UI component, you can pass props to it. These props include things like configuration options and the document that should be displayed. For a complete list of supported props, check out the documentation for PSPDFKitView.

Navigation

On iOS, every PSPDFKitView automatically creates a navigation controller and shows a navigation bar on the top of the view, the latter of which is used to display text and buttons to trigger common PSPDFKit actions and tools.

If you were to use an existing navigation solution that already has a native UINavigationController with PSPDFKitView presented in it, PSPDFKitView could take over the navigation bar of the currently presented screen if configured to do so. In such a case, PSPDFKitView won’t create its own navigation bar. The only thing needed for this to work is to pass useParentNavigationBar: true as an option in the configuration prop. Navigation libraries that have been tested and work with the PSPDFKit component include NavigatorIOS and react-native-navigation.

Heads up: Allowing PSPDFKit to use the navigation bar doesn’t work with react-navigation, as it fakes a navigation bar via custom views. Therefore, it is not possible to hook into its navigation bar. Setting useParentNavigationBar has no effect (apart from hiding the PSPDFKit navigation bar), and the PSPDFKit navigation bar will be shown below the faked navigation bar by default.

Conclusion

If you come across anything missing from the UI component that you think would be useful to have, feel free to contact us or open an issue on the PSPDFKit React Native repository. You are also very welcome to submit pull requests to help improve our wrapper, as all of it is open source.

PSPDFKit for iOS

Download the free 60-day trial and add it to your app today.