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:

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:

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 options to the Nutrient.presentInstant() method to customize the behavior of the Instant document viewer.