VisualTree

Use the React Native native bridge VisualTree tools to inspect native hierarchy, capture screenshots, and manage diagnostic overlays.

Install

npm install @ansight/react-native
npx pod-install

Register the Suite

React Native VisualTree tools are opt-in. Register them from app code when the local host workflow needs native hierarchy, native screenshots, or diagnostic overlays.

await Ansight.initializeAndActivate(
  Ansight.createOptionsBuilder()
    .withReadOnlyToolAccess()
    .withVisualTreeTools()
    .build(),
);

Registration API

withVisualTreeTools(): registers the native VisualTree suite on iOS and Android.
withoutVisualTreeTools(): explicitly disables native VisualTree registration when options are composed.
remoteTools.visualTree: accepts true, false, or { enabled: boolean }.
withReadOnlyToolAccess(): exposes visual tree, screenshot, node inspection, and read-only overlay tools.
withReadWriteToolAccess(): also exposes overlay creation and update.
withAllToolAccess(): also exposes native tools classified as critical.

Specific Concerns

This is the native hierarchy, not the React component tree. Use React Inspection for Fiber component and React Native host trees.
Native and React sources use the shared compact visual-tree v2 contract, including a top-level types registry and node typeId references.
On Android, the native source includes all foreground activity window roots, including dialogs and popup windows when present.
Screenshot capture exports rendered UI content.
Overlay removal uses write consistently across native platforms.

Important: Calling screenshot tools will result in an FPS drop while native frames are captured, encoded, and transferred. Avoid screenshot-heavy investigations during trend measurements unless visual evidence is required.

Tool Matrix

Name	Id	Policy	Description
`Get Visual Tree`	`ui.get_visual_tree`	`Read`	Returns the current native UI hierarchy.
`Get Screenshot`	`ui.get_screenshot`	`Read`	Captures a native screenshot and streams bytes over binary transfer.
`Inspect Node`	`ui.inspect_node`	`Read`	Returns one native visual-tree node.
`Show Overlay`	`ui.show_overlay`	`Write`	Shows a diagnostic overlay.
`Get Overlay`	`ui.get_overlay`	`Read`	Returns one overlay.
`Query Overlays`	`ui.query_overlays`	`Read`	Lists active overlays.
`Update Overlay`	`ui.update_overlay`	`Write`	Updates an overlay.
`Remove Overlay`	`ui.remove_overlay`	`Write`	Removes an overlay.
`Clear Overlays`	`ui.clear_overlays`	`Write`	Clears overlays.

Tool Details

Use native VisualTree tools when the local host workflow needs the platform view hierarchy or native screenshot evidence. Use React Inspection when the workflow needs component names, props, state, or React Navigation state. Consumers of either tree should follow the Visual-Tree Payload Contract for type lookup, semantic fields, presentation data, and ordering.