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 Studio 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 delete-scoped Android overlay removal tools and native delete tools.

Specific Concerns

This is the native hierarchy, not the React component tree. Use React Inspection for Fiber component and React Native host trees.
Screenshot capture exports rendered UI content.
Overlay removal scope differs by native platform: iOS exposes ui.remove_overlay and ui.clear_overlays as Write; Android exposes them as Delete.

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

Tool Matrix

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

Tool Details

Use native VisualTree tools when Studio needs the platform view hierarchy or native screenshot evidence. Use React Inspection when the workflow needs component names, props, state, or React Navigation state.