Configuring Scroll Direction and Page Transitions in Our React Native Viewer

You can configure the page transition, scroll direction, and scroll mode of a PSPDFKitView in its PDFConfiguration object.

Android
iOS

You need to be aware of the following constraints when using these configuration options (pageTransition, pageScrollDirection, and pageMode) simultaneously.

Scroll Per Spread Page Transition

If you’re using a scroll per spread page transition, there are no constraints:

  • The page scroll direction can be either horizontal or vertical.

  • If the vertical scroll direction is used, the pageMode property can be single, double, or automatic.

<PSPDFKitView
	document={DOCUMENT}
	configuration={{
		pageTransition: 'scrollPerSpread', // Set the `scrollPerSpread` page transition.
		scrollDirection: 'vertical', // Can also be `horizontal`.
		pageMode: 'single', // Can also be `double` or `automatic`.
	}}
	ref="pdfView"
	fragmentTag="PDF1"
/>

Scroll Continuous Page Transition

If you’re using a scroll continuous page transition:

  • The page scroll direction can be either horizontal or vertical.

  • The pageMode property can be single, double, or automatic on iOS. It’ll be forced to automatic on Android.

<PSPDFKitView
	document={DOCUMENT}
	configuration={{
		pageTransition: 'scrollContinuous', // Set the `scrollContinuous` page transition.
		scrollDirection: 'vertical', // Can also be `horizontal`.
		pageMode: 'automatic', // Can also be `single` or `double`.
	}}
	ref="pdfView"
	fragmentTag="PDF1"
/>

Curl Page Transition (iOS Only)

If you’re using a curl page transition:

  • The page scroll direction will be horizontal.

  • The pageMode property can be single, double, or automatic.

<PSPDFKitView
	document={DOCUMENT}
	configuration={{
		pageTransition: 'curl', // Set the `curl` page transition on iOS. This has no effect on Android.
		scrollDirection: 'horizontal', // Setting a value to the `scrollDirection` property will be ignored. It'll be forced to `horizontal`.
		pageMode: 'single', // Can also be `double` or `automatic`.
	}}
	ref="pdfView"
	fragmentTag="PDF1"
/>