---
title: "Nutrient Instant usage on React Native | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/react-native/instant-synchronization/usage/"
md_url: "https://www.nutrient.io/guides/react-native/instant-synchronization/usage.md"
last_updated: "2026-06-09T10:32:42.848Z"
description: "To use Instant for React Native, render the NutrientInstantView component with the Instant document info and configuration."
---

# Nutrient Instant usage on React Native

To use Instant for React Native, render the `NutrientInstantView` component and pass it the Instant document information (downloaded from your server), along with any Instant configuration options. This is the recommended approach when you want Instant to be part of your normal React Native view hierarchy (for example, inside a tab or a navigation stack).

The JSON Web Token (JWT) should contain the following information:

- Document ID — A unique document identifier that you want to view and collaborate on.

- User information — The user name, email address, and other relevant details.

- Permissions — What actions the user is allowed to perform on the document (viewing, annotating, or commenting).

- Instant layers — Collaborative layers that will be used for the Instant document viewer.

Here’s an example of how to use `NutrientInstantView` in a React Native app:

```jsx

import { NutrientInstantView } from '@nutrient-sdk/react-native';

const serverResponse = await loadInfoFromServer(url);
      const documentInfo = {
        serverUrl: serverResponse.serverUrl,
        jwt: serverResponse.jwt,
      };

<NutrientInstantView
  style={{ flex: 1 }}
  documentInfo={documentInfo}
  configuration={{
    // Standard Nutrient configuration options
  }}
/>

```

If you prefer presenting Instant as a modal popup instead of embedding it in your layout, you can use `Nutrient.presentInstant()` with the server URL and JWT:

```javascript

import { NativeModules } from 'react-native';
const Nutrient = NativeModules.Nutrient;

const serverResponse = await loadInfoFromServer(url);
      const documentInfo = {
        serverUrl: serverResponse.serverUrl,
        jwt: serverResponse.jwt,
      };

// Present the Instant document viewer by providing the `documentInfo` object.
Nutrient.presentInstant(documentInfo);

```

You can also pass additional [`configuration`](https://www.nutrient.io/guides/react-native/user-interface/configuration/) options to the `Nutrient.presentInstant()` method to customize the behavior of the Instant document viewer.
---

## Related pages

- [Client authentication in PSPDFKit Instant](/guides/react-native/instant-synchronization/authentication.md)
- [Adding Instant comments to PDFs in React Native](/guides/react-native/instant-synchronization/comments.md)
- [Syncing PDF annotations in React Native](/guides/react-native/instant-synchronization/annotation-sync.md)
- [Instant sync and document state in React Native](/guides/react-native/instant-synchronization/document-state.md)
- [Create and manage PDF annotation layers in React Native](/guides/react-native/instant-synchronization/instant-layers.md)
- [Integrating real-time collaboration into your React Native application](/guides/react-native/instant-synchronization/get-started.md)
- [Offline PDF annotations with sync on React Native](/guides/react-native/instant-synchronization/offline-support.md)
- [PDF collaboration library for React Native](/guides/react-native/instant-synchronization.md)