Nodes from refs
React Native apps render a native view tree that represents the UI, similar to how React DOM does on Web (the DOM tree). React Native provides imperative access to this tree via refs, which are returned by all native components (including those rendered by built-in components like View
).
React Native provides 3 types of nodes:
- Elements: element nodes represent native components in the native view tree (similar to Element nodes on Web). They are provided by all native components via refs.
- Text: text nodes represent raw text content on the tree (similar to
Text
nodes on Web). They are not directly accessible viarefs
, but can be accessed using methods likechildNodes
on element refs. - Documents: document nodes represent a complete native view tree (similar to
Document
nodes on Web). Like text nodes, they can only be accessed through other nodes, using properties likeownerDocument
.
As on Web, these nodes can be used to traverse the rendered UI tree, access layout information or execute imperative operations like focus
.
info
Unlike on Web, these nodes do not allow mutation (e.g.: node.appendChild
), as the tree contents are fully managed by the React renderer.