Understand the components behind your React Native UI

Inspect live React component structure, optional props and state, and navigation to investigate unexpected UI behavior.

React Inspection tools help trace a rendered screen back to its components and, when enabled, their props and state. Use component search and navigation state to focus an investigation on the part of the app that behaves unexpectedly.

React Inspection tools are JavaScript-backed. They inspect React Fiber and React Native host-tree data rather than the platform-native view hierarchy.

Component and shadow-tree responses use the shared compact visual-tree v2 contract. Resolve component names through the top-level types registry and each node’s typeId; node-local legacy type, kind, and styleId fields are not part of v2.

Register the Suite

const reactTools = Ansight.installReactTools({
  includeBounds: true,
  includeProps: false,
  includeState: false,
  maxDepth: 30,
  maxNodes: 1500,
  navigationRef,
});

await reactTools.ready;

Use Ansight.uninstallReactTools() or reactTools.unregister() to remove the registrations.

Registration API

installReactTools(options): registers React inspection tools.
uninstallReactTools(): unregisters React inspection tools.
includeBounds: includes bounds when available.
includeProps: includes sanitized props when requested.
includeState: includes sanitized state when requested.
maxDepth / maxNodes: cap traversal.
navigationRef: enables react.get_navigation_state.
enableActions: enables react.invoke_component_action.
allowedActionProps: restricts invokable prop names.

Specific Concerns

Props and state can expose app/user data. Keep them off unless needed.
The component tree includes composite React components.
The shadow tree is the committed React Native host tree with composites flattened out.
React actions invoke app code and use the write policy.
Do not enable actions unless the app has an explicit local testing workflow for them.

Tool Matrix

Tool id	Policy	Purpose
`react.get_component_tree`	`Read`	Captures the live React Fiber component tree, including composite components.
`react.get_shadow_tree`	`Read`	Captures the committed React Native host tree with composites flattened out.
`react.find_components`	`Read`	Searches the component tree by query, type, text, or testID.
`react.get_component`	`Read`	Returns one component node by id.
`react.get_navigation_state`	`Read`	Returns React Navigation state when `navigationRef` is supplied.
`react.invoke_component_action`	`Write`	Invokes an allow-listed function prop when actions are enabled.

Component Tree

react.get_component_tree returns React Fiber component data. Use this when the workflow needs component names, parent/child structure, and optional props or state.

Shadow Tree

react.get_shadow_tree returns the committed React Native host tree. Use this when the workflow needs the rendered host layout with composite components flattened out.

Actions

Actions are opt-in:

Ansight.installReactTools({
  enableActions: true,
  allowedActionProps: ["onPress"],
});

Only allow the action props that are needed for the local workflow.