Samples

Complete reveal screen

import * as React from "react";
import { Button, SafeAreaView, Text, View } from "react-native";
import {
  VGSShow,
  VGSShowError,
  VGSShowImage,
  VGSShowLabel,
  VGSShowPdf,
  type VGSShowImageRef,
  type VGSShowLabelRef,
  type VGSShowPdfRef
} from "@vgs/show-react-native";

type RevealScreenProps = {
  readonly vaultId: string;
  readonly recordAlias: string;
};

export function RevealScreen(props: RevealScreenProps): React.ReactElement {
  const showRef = React.useRef<VGSShow | null>(null);
  const cardNumberRef = React.useRef<VGSShowLabelRef | null>(null);
  const imageRef = React.useRef<VGSShowImageRef | null>(null);
  const pdfRef = React.useRef<VGSShowPdfRef | null>(null);
  const [status, setStatus] = React.useState("Ready.");

  if (showRef.current === null) {
    showRef.current = new VGSShow({
      id: props.vaultId,
      environment: "sandbox"
    });
  }

  const vgsShow = showRef.current;

  React.useEffect(() => {
    const label = cardNumberRef.current;
    if (label === null) {
      return;
    }

    label.resetAllFormatters();
    label.addTransformationRegex({
      pattern: /^(.{4})(.{4})(.{4})(.{4})$/u,
      template: "$1 $2 $3 $4"
    });
    label.setSecureText({
      ranges: [
        { start: 5, end: 8 },
        { start: 10, end: 13 }
      ]
    });
  }, []);

  async function reveal(): Promise<void> {
    setStatus("Revealing...");

    try {
      const result = await vgsShow.request({
        path: "/post",
        method: "POST",
        payload: {
          recordAlias: props.recordAlias
        }
      });

      setStatus(`Reveal completed with HTTP ${result.code}.`);
    } catch (error) {
      if (error instanceof VGSShowError) {
        setStatus(`Reveal failed (${error.code}).`);
        return;
      }

      setStatus("Reveal failed.");
    }
  }

  function clear(): void {
    cardNumberRef.current?.clearText();
    imageRef.current?.clear();
    pdfRef.current?.clear();
    setStatus("Cleared.");
  }

  return (
    <SafeAreaView>
      <View>
        <VGSShowLabel
          ref={cardNumberRef}
          vgsShow={vgsShow}
          contentPath="json.card.number"
          placeholder="**** **** **** ****"
          onRevealError={(error) => {
            setStatus(`Card number unavailable (${error.code}).`);
          }}
        />

        <VGSShowImage
          ref={imageRef}
          vgsShow={vgsShow}
          contentPath="json.card.image"
          contentMode="scaleAspectFit"
          style={{ width: "100%", height: 220 }}
          onImageError={(error) => {
            setStatus(`Image unavailable (${error.code}).`);
          }}
        />

        <VGSShowPdf
          ref={pdfRef}
          vgsShow={vgsShow}
          contentPath="json.card.statement"
          style={{ width: "100%", height: 360 }}
          pdfDisplayMode="singlePageContinuous"
          pdfDisplayDirection="vertical"
          onDocumentError={(error) => {
            setStatus(`PDF unavailable (${error.code}).`);
          }}
        />

        <Button title="Reveal" onPress={() => void reveal()} />
        <Button title="Clear" onPress={clear} />
        <Text>{status}</Text>
      </View>
    </SafeAreaView>
  );
}

Text formatting and masking

const labelRef = React.useRef<VGSShowLabelRef | null>(null);

React.useEffect(() => {
  const label = labelRef.current;
  if (label === null) {
    return;
  }

  label.resetAllFormatters();
  label.addTransformationRegex({
    pattern: /^(.{3})(.{2})(.{4})$/u,
    template: "$1-$2-$3"
  });
  label.setSecureText({
    ranges: [
      { start: 4, end: 5 }
    ]
  });
}, []);

Copy transformed text

function copyDisplayedValue(): void {
  labelRef.current?.copyToClipboard({ format: "transformed" });
}

Use raw copy only when explicitly required:

function copyRawValueAfterApproval(): void {
  labelRef.current?.copyToClipboard({ format: "raw" });
}

Custom timeout for PDF reveal

await vgsShow.request({
  path: "/post",
  method: "POST",
  payload: {
    documentAlias
  },
  requestOptions: {
    requestTimeoutInterval: 120
  }
});

Safe component error mapping

function messageForFieldError(error: VGSShowError): string {
  switch (error.type) {
    case "fieldNotFound":
      return "Requested field is unavailable.";
    case "invalidBase64Data":
    case "invalidImageData":
    case "invalidPDFData":
      return "Content cannot be displayed.";
    default:
      return "Reveal failed.";
  }
}