---
title: "React Native viewer scroll direction & page transition | Nutrient"
canonical_url: "https://www.nutrient.io/guides/react-native/viewer/page-transition/"
md_url: "https://www.nutrient.io/guides/react-native/viewer/page-transition.md"
last_updated: "2026-05-23T00:08:18.147Z"
description: "You can configure the page transition, scroll direction, and scroll mode of a NutrientView in its PDFConfiguration object."
---

# Configuring scroll direction and page transitions in our React Native viewer

You can configure the page transition, scroll direction, and scroll mode of a [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) in its [`PDFConfiguration`](https://www.nutrient.io/api/react-native/PDFConfiguration.html) 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`.

```js

<NutrientView
	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={this.pdfRef}
	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.

```js

<NutrientView
	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={this.pdfRef}
	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`.

```js

<NutrientView
	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={this.pdfRef}
	fragmentTag="PDF1"
/>

```
---

## Related pages

- [Customizing page navigation in our React Native PDF viewer](/guides/react-native/viewer/page-navigation.md)
- [React Native image viewer library](/guides/react-native/viewer/images.md)
- [Rotating pages in our React Native PDF viewer](/guides/react-native/viewer/page-rotation.md)
- [React Native PDF viewer library](/guides/react-native/viewer.md)
- [React Native PDF reader library](/guides/react-native/viewer/reader-view.md)