Reveal Data

VGSShow

VGSShow is the reveal orchestrator for the React Native SDK. It owns vault routing, request construction, custom headers, and the subscription lifecycle for VGSShowLabel, VGSShowImage, and VGSShowPdf.

const vgsShow = new VGSShow({
  id: config.vaultId,
  environment: "sandbox"
});

Create one instance for each screen or logical reveal flow. Instances work independently and update only the components subscribed through their vgsShow prop.

Reveal flow

1. Create a VGSShow instance with vault configuration.

2. Render one or more SDK components with the same vgsShow instance.

3. Set a non-empty contentPath on every component.

4. Call vgsShow.request(...).

5. The SDK fetches JSON, resolves each contentPath, and updates the subscribed components.

6. Clear the component state when the screen no longer needs displayed content.

Content paths

contentPath is a dot-separated path into the JSON response from your reveal route.

<VGSShowLabel vgsShow={vgsShow} contentPath="json.card.number" />
<VGSShowImage vgsShow={vgsShow} contentPath="json.card.image" />
<VGSShowPdf vgsShow={vgsShow} contentPath="json.card.statement" />

Example response shape:

{
  "json": {
    "card": {
      "number": "revealed text",
      "image": "base64-image-data",
      "statement": "base64-pdf-data"
    }
  }
}

If a path is missing or has an unexpected type, that component receives fieldNotFound. The request can still be resolved when the HTTP response and JSON decode succeed.

Send a reveal request

const result = await vgsShow.request({
  path: "/post",
  method: "POST",
  payload: {
    recordAlias: selectedRecordAlias
  },
  requestOptions: {
    requestTimeoutInterval: 30
  }
});

setStatus(`Reveal completed with HTTP ${result.code}.`);

Request input:

Option	Description
path	Route path appended to the configured VGS host.
method	"GET", "POST", "PUT", "PATCH", or "DELETE". Defaults to "POST".
payload	Plain JSON object or null.
requestOptions.requestTimeoutInterval	Timeout in seconds. Defaults to 60.

Payloads must be JSON-serializable plain objects. Avoid passing class instances, circular objects, functions, or non-finite numbers.

Custom headers

Set custom headers on the VGSShow instance before calling request().

vgsShow.customHeaders = {
  "X-Correlation-ID": correlationId
};

Use custom headers only when the route contract requires them. Do not put bearer tokens, secrets, payment data, or personally identifiable information in custom headers unless your route, logs, and crash reporting have been reviewed for that use case. Never log header values.

Custom hostname

By default, requests are sent to a VGS host built from the vault ID and environment. You can provide a custom hostname:

const vgsShow = new VGSShow({
  id: config.vaultId,
  environment: "sandbox",
  hostname: "show.example.com"
});

The SDK validates custom hostname configuration before routing reveal requests. If validation fails, requests fall back to the standard VGS vault host.

Request success and component failures

request() success means:

• the network request completed with a successful HTTP status

• the response body decoded to a JSON object

• the SDK attempted to resolve every subscribed component path

Individual component failures are reported through component callbacks:

<VGSShowLabel
  vgsShow={vgsShow}
  contentPath="json.card.number"
  onRevealError={(error) => {
    setStatus(error.type === "fieldNotFound"
      ? "Card number unavailable."
      : "Card number reveal failed.");
  }}
/>

Clear revealed content

Use refs to clear SDK-managed component state.

labelRef.current?.clearText();
imageRef.current?.clear();
pdfRef.current?.clear();

Clear text, image, and PDF content when users leave the screen, switch entities, sign out, or otherwise no longer need the revealed data.