React Native UI Component for iOS

At PSPDFKit, we support all major hybrid technologies — all of which allow for faster application development — including Xamarin, Cordova, and of course, React Native. In particular, interest in support for React Native is steadily increasing, so we dedicated more time to making our support for this hybrid technology even better. Today, we’re excited to announce that our PSPDFKit React Native library 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 library 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’re 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:

<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:

class SplitPDF extends Component {
	render() {
		return (
			<View style={{ flex: 1, flexDirection: layoutDirection }}>
				<PSPDFKitView
					document={'PDFs/Annual Report.pdf'}
					configuration={{
						iOSBackgroundColor: processColor('lightgrey'),
						showThumbnailBar: '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 examples, 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. react-native-navigation is included in the navigation libraries that have been tested and work with the PSPDFKit component.

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 isn’t 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 have any questions about PSPDFKit for React Native, please don’t hesitate to reach out to us. We’re happy to help!