> For the complete documentation index, see [llms.txt](https://docs.verygoodsecurity.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.verygoodsecurity.com/vault/developer-tools/vgs-show/react-native-sdk/reveal-data.md).

# 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`.

```ts
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.

```tsx
<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
{
  "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

```ts
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()`.

```ts
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:

```ts
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:

```tsx
<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.

```tsx
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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.verygoodsecurity.com/vault/developer-tools/vgs-show/react-native-sdk/reveal-data.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.