UI Components

UI Components

The SDK provides React Native components that subscribe to a VGSShow instance and display revealed content selected by contentPath.

VGSShowLabel

VGSShowLabel reveals and displays text inside a React Native Text.

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

<VGSShowLabel
  ref={labelRef}
  vgsShow={vgsShow}
  contentPath="json.card.number"
  placeholder="**** **** **** ****"
  placeholderStyle={styles.placeholder}
  isSecureText={true}
  onTextChange={() => {
    setHasText(true);
  }}
  onRevealError={(error) => {
    setStatus(`Text reveal failed (${error.code}).`);
  }}
/>

Props:

Prop	Description
vgsShow	Shared VGSShow instance.
contentPath	Dot-separated path to a string field in the reveal response.
placeholder	Text displayed before reveal, after clear, or when no text is available.
placeholderStyle	React Native style applied only to placeholder text.
isSecureText	Masks displayed text.
secureTextSymbol	Mask symbol. A single character is recommended.
onTextChange	Notification callback. The revealed text is not passed out.
onCopyTextFinish	Called after copy with only the selected copy format.
onRevealError	Called with VGSShowError when this label cannot reveal its field.

Ref actions:

Ref member	Description
clearText()	Clears displayed text and shows the placeholder when configured.
copyToClipboard({ format })	Copies "raw" or "transformed" text to the runtime clipboard.
setSecureText(rangeOrRanges)	Masks one range or a set of ranges.
addTransformationRegex(formatter)	Adds a regex display/copy transformation.
resetAllFormatters()	Removes all text transformations.

Text formatting

Formatting runs before secure masking.

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

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

Use transformations only for display or clipboard formatting. Do not move revealed text into app state.

Secure text

<VGSShowLabel
  vgsShow={vgsShow}
  contentPath="json.card.number"
  isSecureText={true}
  secureTextSymbol="*"
/>

For partial masking, use the label ref:

labelRef.current?.setSecureText({
  ranges: [
    { start: 5, end: 8 },
    { start: 10, end: 13 }
  ]
});

Ranges apply to the displayed text after transformations. Invalid ranges are ignored. An empty explicit ranges array masks nothing.

Copy text

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

Use "transformed" when possible. "raw" intentionally copies raw revealed text and should be allowed only when the product requirement and compliance review permit it.

VGSShowImage

VGSShowImage reveals base64 JPEG or PNG image content and renders it through React Native's Image.

const imageRef = React.useRef<VGSShowImageRef | null>(null);

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

Props:

Prop	Description
vgsShow	Shared VGSShow instance.
contentPath	Dot-separated path to a base64 image field.
contentMode	"scaleToFill", "scaleAspectFit", "scaleAspectFill", or "center". Defaults to "scaleAspectFit".
style	React Native image style. Provide dimensions or flex layout.
onImageChange	Notification callback. Image base64 is not passed out.
onImageError	Called with VGSShowError when image content is missing or invalid.

Ref members:

Ref member	Description
hasImage	true when renderable image content is held by the component.
clear()	Clears the current image.

Do not expose, log, hash, cache, or forward image base64 from application code.

VGSShowPdf

VGSShowPdf reveals base64 PDF content and renders it through the SDK's native PDF renderer dependency.

const pdfRef = React.useRef<VGSShowPdfRef | null>(null);

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

Props:

Prop	Description
vgsShow	Shared VGSShow instance.
contentPath	Dot-separated path to a base64 PDF field.
style	React Native view style. Provide dimensions or flex layout.
pdfDisplayMode	"singlePage" renders only the first page. "singlePage" and "twoUp" enable paging. "singlePageContinuous" and "twoUpContinuous" use continuous scrolling. Defaults to "singlePageContinuous". The React Native renderer does not display two pages side by side.
pdfDisplayDirection	"vertical" or "horizontal". Defaults to "vertical".
pdfAutoScales	Maps to the renderer fit policy. Defaults to true.
displayAsBook	Accepted for API compatibility with other VGS Show SDKs. It has no visual effect in the current React Native renderer.
pageShadowsEnabled	Accepted for API compatibility with other VGS Show SDKs. It has no visual effect in the current React Native renderer.
pdfBackgroundColor	Optional renderer background color.
onDocumentChange	Notification callback. PDF base64 is not passed out.
onDocumentError	Called with VGSShowError when PDF content is missing or invalid.

Ref members:

Ref member	Description
hasDocument	true when renderable PDF content is held by the component.
clear()	Clears the current PDF.

Provide a stable size for the PDF renderer with style; otherwise the native view may render with no visible area. Increase requestTimeoutInterval for large documents when your route contract allows larger reveal responses.

Do not expose, log, hash, cache, or forward PDF base64 from application code.